/**
 * TEAM: frontend_infra
 *
 * @flow
 */
// TODO: Fix this eslint issue on next edit. This is an autogenerated comment.
// eslint-disable-next-line flexport/no-legacy-dependencies
import {mount} from "enzyme";

import CountrySelector from "../CountrySelector";
import {countries} from "../constants/AddressOptionConstants.generated";

const COUNTRIES = Object.keys(countries);
const SELECT_COUNTRIES = ["US", "AD", "HK", "CH"];
type Country = $Keys<typeof countries>;

function mountCountrySelector(propOverrides: {
  value?: string,
  options?: $ReadOnlyArray<Country>,
  ...
}) {
  const mergedProps = {
    value: propOverrides.value || null,
    onChange: () => {},
    countryOptions: propOverrides.options || COUNTRIES,
  };
  return mount(<CountrySelector {...mergedProps} />);
}

describe("Country Selector", () => {
  it("Component mounts successfully", () => {
    const countrySelector = mountCountrySelector({options: SELECT_COUNTRIES});
    expect(countrySelector).toBeDefined();
  });
  describe("Country dropdown menu works", () => {
    it("Correct country's flag is rendered when selected", () => {
      COUNTRIES.forEach(country => {
        const countrySelector = mountCountrySelector({
          value: countries[country].name,
        });
        expect(countrySelector.find("img").prop("src")).toBe(
          `https://assets.flexport.com/flags/svg/1/${country}.svg`
        );
      });
    });
  });
});