import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { CurrencySelect, CurrencySelectPropTypes } from '../currency-select';

describe('<CurrencySelect>', () => {
    const defaultProps = {
        id: 'currencyCode',
        onChange: jest.fn(),
        name: 'currencyCode',
        placeholder: 'Select Currency',
        value: '',
    };
    const render = (props: CurrencySelectPropTypes) =>
        renderInAppContext(<CurrencySelect {...props} />);

    it('renders <CurrencySelect>', () => {
        render(defaultProps);
        expect(screen.getByText('Select Currency')).toBeDefined();
    });

    it('displays dropdown currency options', () => {
        render(defaultProps);
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        expect(screen.getByText('USD (US Dollar)')).toBeDefined();
        expect(screen.getByText('AUD (Australian Dollar)')).toBeDefined();
        expect(screen.getByText('CAD (Canadian Dollar)')).toBeDefined();
    });

    it('shows selected currency option', () => {
        render({ ...defaultProps, value: 'AUD' });

        expect(screen.queryByText('USD (US Dollar)')).toBeNull();
        expect(screen.getByText('AUD (Australian Dollar)')).toBeDefined();
    });
});