/**
 * 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 {isSupportedCountry} from "libphonenumber-js";
import PhoneNumberInput from "../PhoneNumberInput";
import {countries} from "../constants/AddressOptionConstants.generated";
import SearchableSelectInput from "../select/SearchableSelectInput";

function mountPhoneNumberInput() {
  const mergedProps = {
    onChange: () => {},
  };
  return mount(<PhoneNumberInput value="" {...mergedProps} />);
}
const PREFERRED_COUNTRIES = Object.keys(countries).filter(country =>
  isSupportedCountry(country)
);

describe("PhoneNumberInput", () => {
  it("PhoneNumberInput mounts successfully", () => {
    const phoneNumberInput = mountPhoneNumberInput();
    expect(phoneNumberInput).toBeDefined();
  });
  describe("Country dropdown menu works", () => {
    it("Every country has a supported format (no error)", () => {
      const phoneNumberInput = mountPhoneNumberInput();
      PREFERRED_COUNTRIES.forEach(country => {
        phoneNumberInput
          .find(SearchableSelectInput)
          .simulate("change", {target: {value: country}});
      });
    });

    it("should update the placeholder text when the value changes", () => {
      const phoneNumberInput = mountPhoneNumberInput();
      phoneNumberInput
        .find(SearchableSelectInput)
        .simulate("change", {target: {value: "US"}});
      expect(
        phoneNumberInput.find({placeholder: "+1 (000) 000-0000"})
      ).toBeDefined();
    });
  });
});