/**
 * TEAM: frontend_infra
 * @flow strict
 */

import * as React from "react";
import {render, screen} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import DropdownListExperimental from "../DropdownList_experimental";
import Button from "../../button/Button";

function mountDropdownList(
  props: ?$Shape<React.ElementConfig<typeof DropdownListExperimental>>
) {
  return render(
    <DropdownListExperimental parent="" onSelection={() => {}} {...props}>
      {props?.children ?? ""}
    </DropdownListExperimental>
  );
}

/** Tests behavior specifically tied to DropdownList's connecting behavior
 * between Dropdown and SelectionList, those components' tests will cover
 * nested behavior */
describe("DropdownList", () => {
  it("selecting the button opens a list with a given option", () => {
    const buttonText = "Click me for dropdown";
    const dropdownOptionText = "some option";
    const result = mountDropdownList({
      parent: <Button>{buttonText}</Button>,
      children: <DropdownListExperimental.Option value={dropdownOptionText} />,
    });
    const button = result.getByText(buttonText);

    userEvent.click(button);

    expect(screen.getByText(dropdownOptionText) != null).toBe(true);
  });
  it("'hideOnSelection: true' works correctly", async () => {
    const buttonText = "Click me for dropdown";
    const dropdownOptionText = "some option";
    const result = mountDropdownList({
      parent: <Button>{buttonText}</Button>,
      hideOnSelection: true,
      children: <DropdownListExperimental.Option value={dropdownOptionText} />,
    });
    const button = result.getByText(buttonText);

    userEvent.click(button);

    userEvent.click(screen.getByText(dropdownOptionText), undefined, {
      skipPointerEventsCheck: true,
    });

    expect(screen.queryByText(dropdownOptionText) == null).toBe(true);
  });
  it("'hideOnSelection: false' works correctly", async () => {
    const buttonText = "Click me for dropdown";
    const dropdownOptionText = "some option";
    const result = mountDropdownList({
      parent: <Button>{buttonText}</Button>,
      hideOnSelection: false,
      children: <DropdownListExperimental.Option value={dropdownOptionText} />,
    });
    const button = result.getByText(buttonText);

    userEvent.click(button);

    userEvent.click(screen.getByText(dropdownOptionText), undefined, {
      skipPointerEventsCheck: true,
    });

    expect(screen.getByText(dropdownOptionText) != null).toBe(true);
  });
});