import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ItemList from 'src/components/shared/swap-items/item-list';

describe('<ItemList>', () => {
    const render = (props: any) => renderInAppContext(<ItemList {...props} />);

    const props = {
        onMoveClearSelection: '',
        itemList: [
            { label: 'Afghanistan', value: 'AFG' },
            { label: 'Zambia', value: 'ZMB' },
        ],
        searchInputName: 'Country',
        listType: 'nonDelivering',
        itemMoveList: {},
        setItemMoveList: jest.fn(),
        checkedItemsArray: {},
        setCheckedItemsArray: jest.fn(),
        totalCount: 2,
    };

    it('renders <ItemList>', () => {
        render(props);
        expect(screen.getByText('Country (2 of 2)')).toBeDefined();
    });

    it('renders a list', () => {
        render(props);

        const checkboxes = screen.getAllByTestId(
            'ItemList-nonDelivering-Checkbox'
        );
        expect(screen.getByText('Afghanistan')).toBeDefined();
        expect(screen.getByText('Zambia')).toBeDefined();
        expect(checkboxes.length).toEqual(2);
    });

    it('renders a checked list', () => {
        const newProps = {
            ...props,
            checkedItemsArray: { nonDelivering: ['AFG'] },
        };
        render(newProps);
        expect(screen.getAllByRole('checkbox')[1]).toHaveAttribute('checked');
        expect(screen.getAllByRole('checkbox')[2]).not.toHaveAttribute(
            'checked'
        );
    });
});