import * as React from "react";
import {
  render,
  screen,
  fireEvent,
  cleanup,
  getByTestId,
} from "@testing-library/react";
import DropDownCollapse from "./DropDownCollapse";

describe("<DropDownCollapse /> Rendering >", () => {
  it(`The component should render in the dom`, () => {
    render(<DropDownCollapse />);
    expect(screen.queryByTestId("DropDownCollapse")).toBeTruthy();
  });

  it(`Should render a caption in the dom that matches the text prop`, () => {
    const text = "Drop down Collapse Test";
    const { debug } = render(<DropDownCollapse text={text} />);
    expect(screen.queryByText(text)).toBeTruthy();
  });

  it(`Should not show children if the isExpanded prop is false`, () => {
    const content = "Drop down children content";
    const { debug } = render(
      <DropDownCollapse isExpanded={false}>
        <p>{content}</p>
      </DropDownCollapse>
    );
    // console.log(screen.queryByText(content));
    expect(screen.queryByText(content)).toBe(null);
  });

  it(`Should toggle between collapsed and expanded when clicked`, () => {
    const content = "Drop down children content";
    const { debug } = render(
      <DropDownCollapse isExpanded={false}>
        <p>{content}</p>
      </DropDownCollapse>
    );
    expect(screen.queryByTestId("DropDownCollapse-Children")).toBe(null);

    fireEvent.click(screen.getByTestId("DropDownCollapse"));

    expect(screen.queryByTestId("DropDownCollapse-Children")).toBeTruthy();
  });
});

describe("<DropDownCollapse /> Events >", () => {
  it(`Should trigger the onChange() event when the dropdown is changed`, () => {
    const onChange = jest.fn();

    const { debug } = render(
      <DropDownCollapse isExpanded={false} onChange={onChange} />
    );

    fireEvent.click(screen.getByTestId("DropDownCollapse"));

    expect(onChange).toHaveBeenCalled();
  });
});

describe("<DropDownCollapse /> Hooks >", () => {
  test.skip(`Should trigger the _onDropDownCollapseRender_ plugin hook when the DropDownCollapse is being rendered`, () => {});

  test.skip(`Should trigger the _onDropDownCollapseChange_ plugin hook when the dropdown is changed`, () => {});
});