import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as statementPeriods from 'src/__fixtures__/graphql/statement-periods-list-response.json';
import * as statementPeriodQuery from 'src/apollo/queries/statement-periods';
import {
    StatementPeriodSelect,
    StatementPeriodSelectPropTypes,
} from '../statement-period-select';

describe('<StatementPeriodSelect>', () => {
    const defaultProps = {
        id: 'statementPeriod',
        onChange: jest.fn(),
        name: 'statementPeriod',
        placeholder: 'Select Statement Period',
        value: '',
    };

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            statementPeriodQuery,
            'useStatementPeriodsList'
        ).mockReturnValue({
            data: statementPeriods,
            loading: false,
            error: undefined,
        });
    });

    const render = (props: StatementPeriodSelectPropTypes) =>
        renderInAppContext(<StatementPeriodSelect {...props} />);

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

    it('selects statement period', () => {
        render(defaultProps);
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
        expect(screen.getByText('January 2020')).toBeDefined();
        expect(screen.getByText('February 2020')).toBeDefined();
        expect(screen.getByText('March 2020')).toBeDefined();
        expect(screen.getByText('April 2020')).toBeDefined();
        expect(screen.getByText('May 2020')).toBeDefined();
    });
});