import React from 'react';
import { fireEvent, screen, waitFor } 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 StatementPeriodDropdown, {
    StatementPeriodDropdownPropTypes,
} from 'src/components/shared/statement-period-dropdown';

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

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

    afterEach(jest.restoreAllMocks);

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

    it('renders Statement Period search filter', () => {
        render(props);

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

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

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

        await waitFor(() => {
            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();
            expect(screen.getByText('June 2020')).toBeDefined();
            expect(screen.queryByText('July 2020')).toBeNull();
        });
    });

    it('renders selected value', () => {
        render({ ...props, value: '254' });

        expect(screen.getByText('February 2020')).toBeDefined();
    });
});