import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    PaymentScheduleSelect,
    PaymentScheduleSelectPropTypes,
} from '../payment-schedule-select';

describe('<PaymentScheduleSelect> layout', () => {
    const defaultProps: PaymentScheduleSelectPropTypes = {
        id: 'paymentSchedule',
        name: 'paymentSchedule',
        onChange: jest.fn(),
        placeholder: 'Please Select',
        value: '',
    };

    const renderComponent = (props: PaymentScheduleSelectPropTypes) =>
        renderInAppContext(<PaymentScheduleSelect {...props} />);

    it('renders expected markup', () => {
        renderComponent(defaultProps);
        expect(screen.getByText('Please Select')).toBeDefined();
    });

    it('select payment schedule', () => {
        const onChangeHandler = jest.fn();
        const newProps = {
            ...defaultProps,
            onChange: onChangeHandler,
        };

        renderComponent(newProps);
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        fireEvent.click(screen.getByText('30 days after month end'));
        expect(onChangeHandler).toHaveBeenCalled();
        expect(screen.getByText('30 days after month end')).toBeDefined();
    });
});