/**
 * 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 {_test} from "../DropdownButton";
import {styles} from "../form/DeprecatedDropdownList";
import Button from "../button/Button";
import {getNameFromStyle} from "../tools/test";

process.on("unhandledRejection", reason => {
  // eslint-disable-next-line no-console
  console.error(
    "[UnhandledPromiseRejection] This test generates exceptions due to incorrect use of enzyme and side effects.",
    reason
  );
});

const {DropdownButton} = _test;

function mountDropdownButton(propOverrides: {...} = {}) {
  const defaultProps = {
    button: <Button />,
    options: [
      {
        label: "test1",
        iconName: "ship",
        handleClick: () => {},
      },
      {
        label: "test2",
        iconName: "ellipsis",
        handleClick: () => {},
      },
    ],
  };

  // $FlowFixMe[cannot-spread-inexact] upgrade 0.121.1 -> 0.122.0
  const mergedProps = {
    ...defaultProps,
    ...propOverrides,
  };
  return mount(<DropdownButton {...mergedProps} />);
}

describe("DropdownButton", () => {
  it("clicking on button opens toggle menu", () => {
    const dropdownButton = mountDropdownButton();
    // testing icon svg elements exist
    expect(dropdownButton.find("svg").length).toEqual(0);
    dropdownButton.find("button").simulate("click");
    expect(dropdownButton.find("svg").length).toEqual(2);
  });
  it("closes menu if disabled while open", () => {
    const dropdownButton = mountDropdownButton();

    expect(dropdownButton.find("svg").length).toEqual(0);
    dropdownButton.find("button").simulate("click");
    expect(dropdownButton.find("svg").length).toEqual(2);
    dropdownButton.setProps({disabled: true});
    expect(dropdownButton.find("svg").length).toEqual(0);
  });
  it("selecting an option closes toggle menu", () => {
    const dropdownButton = mountDropdownButton();

    expect(dropdownButton.find("svg").length).toEqual(0);
    dropdownButton.find("button").simulate("click");
    expect(dropdownButton.find("svg").length).toEqual(2);

    const listItemHoverClass = getNameFromStyle(styles.listItemHover);
    const linkItems = dropdownButton.find(`.${listItemHoverClass}`);
    linkItems.first().simulate("click");
    expect(dropdownButton.find("svg").length).toEqual(0);
  });
  it("calls handleClick on mouse down events", () => {
    const dropdownButton = mountDropdownButton({
      options: [
        {
          label: "test1",
          iconName: "ship",
          handleClick: () => {},
        },
      ],
    });
    dropdownButton.find("button").simulate("click");
    const listItemHoverClass = getNameFromStyle(styles.listItemHover);
    const linkItems = dropdownButton.find(`.${listItemHoverClass}`);
    expect(linkItems.length).toEqual(1);
    linkItems.first().simulate("click");
    expect(dropdownButton.find("svg").length).toEqual(0);
  });
});