import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { AbacusContractType } from 'src/apollo/definitions/globalTypes';
import ContractTypeDropdown, {
    ContractTypeDropdownPropTypes,
} from 'src/components/shared/contract-type-dropdown';

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

    const props: ContractTypeDropdownPropTypes = {
        isDisabled: false,
        onChange: jest.fn(),
        value: '',
    };

    afterEach(jest.restoreAllMocks);

    it('renders "Contract Type" filter', () => {
        render(props);

        expect(screen.getByText('Contract Type')).toBeDefined();
        expect(screen.getByRole('combobox', { hidden: true })).toBeDefined();
    });

    it('renders contract types in dropdown', async () => {
        render(props);

        const contractTypesSelect = screen.getByRole('combobox', {
            hidden: true,
        });
        fireEvent.click(contractTypesSelect);

        await waitFor(() => {
            expect(screen.getByText('Distribution')).toBeDefined();
            expect(
                screen.getByText('Performer Neighbouring Rights')
            ).toBeDefined();
        });
    });

    it('renders selected value', () => {
        render({ ...props, value: AbacusContractType.DISTRIBUTION });

        expect(screen.getByText('Distribution')).toBeDefined();
    });
});