import * as React from "react";
import { render, cleanup, Simulate } from "react-testing-library";
import List from "../components/List";
import ListItem from "./utils/ListItem";

beforeEach(cleanup);

describe("List Component", () => {
    test("01 - component matches snapshot", () => {
        const list = [
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' },
            { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' },
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' },
            { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' }
        ];
        const { container } = render(
            <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick}>
                {
                    list.map((item, i) => {
                        return (
                            <ListItem
                                key={i}
                                index={i}
                                item={item}
                                onClick={this.handleItemClick}
                                onEditClick={this.handleEditItemClick}
                            />
                        );
                    })
                }
            </List>
        );
        expect(container).toMatchSnapshot();
    });

    test('02: List item clicked', () => {
        const onClick = jest.fn();
        const list = [
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' },
            { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' },
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }, { name: '5' }, { name: '6' },
            { name: '7' }, { name: '8' }, { name: '9' }, { name: '10' }
        ];
        const { getByTestId } = render(
            <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick}>
                {
                    list.map((item, i) => {
                        return (
                            <ListItem
                                key={i}
                                index={i}
                                item={item}
                                onClick={this.handleItemClick}
                                onEditClick={this.handleEditItemClick}
                            />
                        );
                    })
                }
            </List>
        );

        Simulate.click(getByTestId('1'));
        expect(onClick).toHaveBeenCalled();
    })
});