import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import IncludedExcludedSelect, {
    IncludedExcludedSelectPropTypes,
} from 'src/components/shared/included-excluded-select';

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

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

    afterEach(jest.restoreAllMocks);

    it('renders "Included/Excluded" filter', () => {
        render(props);

        expect(screen.getByText('Included/Excluded')).toBeDefined();
        expect(screen.getByRole('combobox', { hidden: true })).toBeDefined();
    });

    it('renders options in dropdown', () => {
        render(props);

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

        expect(screen.getByText('Included')).toBeDefined();
        expect(screen.getByText('Excluded')).toBeDefined();
    });

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

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

    it('disables included/exlcuded dropdown', () => {
        render({ ...props, isDisabled: true });
        const includedOrExcludedSelect = screen.getByTestId('SuiteSelectInput');
        expect(includedOrExcludedSelect).toHaveClass('disabled');
    });
});