import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { LEDGER_EVENT_NAMES_MAPPING } from 'src/apollo/type-constants/account';
import AccountLedgerEventsSelect, {
    AccountLedgerEventsSelectPropTypes,
} from 'src/components/account-ledger/account-ledger-events-select';

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

    const props: AccountLedgerEventsSelectPropTypes = {
        compact: true,
        isDisabled: false,
        onChange: jest.fn(),
        value: '',
    };

    it('renders "Event" filter', async () => {
        render(props);

        expect(screen.getByText('Event')).toBeDefined();
        expect(screen.getByRole('combobox', { hidden: true })).toBeDefined();
    });

    it('renders ledger event options in dropdown', async () => {
        render(props);

        const ledgerEventsSelect = screen.getByRole('combobox', {
            hidden: true,
        });
        fireEvent.click(ledgerEventsSelect);

        await waitFor(() => {
            Object.keys(LEDGER_EVENT_NAMES_MAPPING).forEach((key: string) => {
                expect(key).toBeDefined();
            });
        });
    });

    it('renders selected value', () => {
        render({ ...props, value: ['Adjustment', 'Mechanical Deductions'] });

        expect(screen.getByText('Adjustment')).toBeDefined();
        expect(screen.getByText('+1')).toBeDefined();
    });
});