import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent, queryAllByTestId } from "@testing-library/react";
import Dropdown from "../dropdown";
import DropdownItem from "../dropdown-item";

test("should show dropdown items when dropdown open", () => {
  const { queryByTestId } = render(
    <Dropdown header="Dropdown">
      <DropdownItem data-testid="dropdown-item">Item 1</DropdownItem>
      <DropdownItem data-testid="dropdown-item">Item 2</DropdownItem>
      <DropdownItem data-testid="dropdown-item">Item 3</DropdownItem>
    </Dropdown>
  );

  fireEvent.click(queryByTestId("honeyui-dropdown"));

  expect(queryByTestId("honeyui-dropdown-dropdown-body")).toHaveClass("show");
  expect(
    queryAllByTestId(queryByTestId("honeyui-dropdown-dropdown-body"), "dropdown-item")
  ).toHaveLength(3);
  expect(
    queryAllByTestId(queryByTestId("honeyui-dropdown-dropdown-body"), "dropdown-item")[0].nodeName
  ).toBe("A");
});

test("should show active, disabled and regular items", () => {
  const { queryByTestId } = render(
    <Dropdown header="Dropdown">
      <DropdownItem data-testid="dropdown-item-1" isActive={true}>
        Item 1
      </DropdownItem>
      <DropdownItem data-testid="dropdown-item-2" isDisabled={true}>
        Item 2
      </DropdownItem>
      <DropdownItem data-testid="dropdown-item-3">Item 3</DropdownItem>
    </Dropdown>
  );

  fireEvent.click(queryByTestId("honeyui-dropdown"));

  expect(queryByTestId("honeyui-dropdown-dropdown-body")).toHaveClass("show");
  expect(queryByTestId("dropdown-item-1")).toHaveClass("active");
  expect(queryByTestId("dropdown-item-2")).toHaveClass("disabled");
  expect(queryByTestId("dropdown-item-3")).not.toHaveClass("active");
  expect(queryByTestId("dropdown-item-3")).not.toHaveClass("disabled");
});

test("should show dropdown item as button", () => {
  const { queryByTestId } = render(
    <Dropdown header="Dropdown">
      <DropdownItem as="button" data-testid="dropdown-item">
        Item 1
      </DropdownItem>
    </Dropdown>
  );

  fireEvent.click(queryByTestId("honeyui-dropdown"));

  expect(queryByTestId("honeyui-dropdown-dropdown-body")).toHaveClass("show");
  expect(queryByTestId("dropdown-item").nodeName).toBe("BUTTON");
});