import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    PaymentMethodDropdown,
    PaymentMethodDropdownPropTypes,
} from '../payment-method-dropdown';

describe('<PaymentMethodDropdown>', () => {
    const defaultProps = {
        id: 'paymentType',
        onChange: jest.fn(),
        name: 'paymentType',
        placeholder: 'Select Currency',
        value: 'Test value',
        isDisabled: false,
    };
    const render = (props: PaymentMethodDropdownPropTypes) =>
        renderInAppContext(<PaymentMethodDropdown {...props} />);

    it('renders <PaymetMethodDropdown>', () => {
        render(defaultProps);
        expect(screen.getByText('Test value')).toBeDefined();
    });

    it('displays dropdown options', () => {
        render({
            options: [
                { label: 'PAYONEER', value: '1' },
                { label: 'SAP', value: '2' },
            ],
            ...defaultProps,
        });
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        expect(screen.getByText('PAYONEER')).toBeVisible();
        expect(screen.getByText('SAP')).toBeVisible();
    });

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

        expect(screen.getByText('Test SAP')).toBeVisible();
    });
});