import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    ContractTypeSelect,
    ContractTypeSelectTypes,
} from '../contract-type-select';

const renderComponent = (props: ContractTypeSelectTypes) =>
    renderInAppContext(<ContractTypeSelect {...props} />);

describe('<ContractTypeSelect> layout', () => {
    let props: ContractTypeSelectTypes = {
        id: 'contractType',
        name: 'contractType',
        onChange: jest.fn(),
        placeholder: 'Select',
        value: '',
    };

    it('renders', () => {
        const { container } = renderComponent(props);
        expect(container).toBeDefined();
        expect(screen.getByText('Select')).toBeDefined();
    });

    it('select contract type', () => {
        renderComponent(props);
        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: 'distribution' },
        });
        expect(screen.getByText('Distribution')).toBeDefined();
        expect(screen.getByText('Legacy Distribution')).toBeDefined();
    });

    it('removed options from contract type', () => {
        props = { ...props, removeOptions: ['legacy_distribution'] };
        renderComponent(props);
        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: 'distribution' },
        });
        expect(screen.getByText('Distribution')).toBeDefined();
        expect(screen.queryByText('Legacy Distribution')).toBeNull();
    });
});