import * as React from "react";
import * as ReactDOM from "react-dom";
import SideMenuComponent from "../components/SideMenu";
import MenuItem from "../components/SideMenu/MenuItem";
import { render, cleanup, Simulate } from "react-testing-library";
import { createMenuItems } from "./utils/sidemenu";

beforeEach(cleanup);

describe("SideMenu and MenuItems tests", () => {
    test("01- MenuItems renders correctly", () => {
        const item = "1";
        const displayValue = "test:1";
        const { getByTestId, container } = render(
            <MenuItem item={item} displayValue={displayValue} />
        );
        expect(getByTestId("menuItem").id).toEqual(displayValue);
    });

    test("02- SideMenu renders correctly", () => {
        const clicked: () => void = jest.fn();
        const item = createMenuItems();
        const { getByTestId, container } = render(
            <SideMenuComponent onClick={clicked}>{item}</SideMenuComponent>
        );
        expect(getByTestId("sideMenu").children.length).toBe(4);
    });

    test("03- Menu item is clicked", () => {
        const clicked: () => void = jest.fn();
        const { getByTestId, container } = render(
            <MenuItem
                item={"item1"}
                displayValue={"item:1"}
                onClick={clicked}
            />
        );
        Simulate.click(getByTestId("menuItem"));
        expect(clicked).toHaveBeenCalledWith("item1");
    });

    test("04- Sidemenu onclick works", () => {
        const clicked: () => void = jest.fn();
        const items = createMenuItems();
        const { getByTestId, container } = render(
            <SideMenuComponent onClick={clicked}>{items}</SideMenuComponent>
        );
        Simulate.click(getByTestId("menuItem"));
        expect(clicked).toHaveBeenCalled();
    });

    test("05- selected prop works", () => {
        const { getByTestId, container, rerender } = render(
            <MenuItem
                item={"selectTest"}
                displayValue={"Selected Test"}
                selectedValue={false}
            />
        );
        expect(getByTestId("menuItem").selected).toBeFalsy();
        rerender(
            <MenuItem
                item={"selectTest"}
                displayValue={"Selected Test"}
                selectedValue={true}
            />
        );
        expect(getByTestId("menuItem").selected).toBeTruthy();
    });

    test("06- disabled prop works", () => {
        const { getByTestId, rerender, container } = render(
            <MenuItem
                item={"disabledTest"}
                displayValue={"Disabled Test"}
                disabled={false}
            />
        );
        expect(getByTestId("menuItem").disabled).toBeFalsy();
    });

    test("07- Sidemenu and MenuItem snapshot", () => {
        const clicked: () => void = jest.fn();
        const item = [
            <MenuItem item={"item1"} displayValue={"item:1"} key={1} />,
            <MenuItem item={"item2"} displayValue={"item:2"} key={2} />,
            <MenuItem item={"item3"} displayValue={"item:3"} key={3} />,
            <MenuItem item={"item4"} displayValue={"item:4"} key={4} />,
        ];
        const { container } = render(
            <SideMenuComponent onClick={clicked}>{item}</SideMenuComponent>);
        expect(container).toMatchSnapshot();
    });
});