import * as React from "react";
import {
    render,
    renderIntoDocument,
    fireEvent,
    cleanup,
    Simulate,
    wait,
} from "react-testing-library";
import ListPicker from "../components/ListPicker";
import { generateCheckItems } from "../__tests__/utils/hierarchyList";
import { elementsArray } from "./utils";

beforeEach(cleanup);

describe("List Picker component", () => {
    test("01 - it renders", () => {
        const ListItems = generateCheckItems();
        const { container } = render(
            <div style={{ width: "100vw", height: "300px" }}>
                <ListPicker
                    items={ListItems}
                    listChange={list => console.log("list", list)}
                />
            </div>
        );
        expect(container).not.toBeNull();
    });

    test("02 - List Picker snapshot", () => {
        const ListItems = generateCheckItems();
        const { container } = render(
            <div style={{ width: "100vw", height: "300px" }}>
                <ListPicker
                    items={ListItems}
                    listChange={list => console.log("list", list)}
                />
            </div>
        );
        expect(container).toMatchSnapshot();
    });

    test("03 - check click call back called", () => {
        const ListItems = generateCheckItems();
        const listChange = jest.fn();
        const { rerender, container } = render(
            <ListPicker
                items={ListItems}
                checkedItems={[]}
                listChange={listChange}
            />
        );
        const initialInputs = elementsArray(container, "input");
        expect(initialInputs.every(input => !input.checked)).toBe(true);
        rerender(
            <ListPicker
                items={ListItems}
                checkedItems={ListItems}
                listChange={listChange}
            />
        );
        const inputs = elementsArray(container, "input");
        expect(inputs.every(input => input.checked)).toBe(true);
    });





})