import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    NrTermTypeSelect,
    NrTermTypePropTypes,
} from 'src/components/shared/nr-term-type-select';

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

    const props = {
        id: 'termType',
        onChange: jest.fn(),
        name: 'termType',
        placeholder: '-Select-',
        value: '',
    };

    it('renders <NrTermTypeSelect>', () => {
        render(props);
        expect(screen.getByText('-Select-')).toBeDefined();
    });

    it('displays dropdown options', () => {
        render(props);
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        expect(screen.getByText('Contributor Only')).toBeDefined();
        expect(screen.getByText('Contribution Schedule')).toBeDefined();
    });

    it('shows selected term type option', () => {
        render({ ...props, value: 'contribution_schedule' });

        expect(screen.queryByText('Contributor Only')).toBeNull();
        expect(screen.getByText('Contribution Schedule')).toBeDefined();
    });
});