import React from 'react';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as osr from 'src/data/queries/searchByIsrc/orchardSoundRecordingSearchByIsrc';
import SearchPage, { TESTID_INPUT } from '../searchPage';

describe('<SearchPage>', () => {
    const renderPage = () => renderInAppContext(<SearchPage />);

    const triggerSearch = (term: string) => {
        const search = screen.getByTestId(TESTID_INPUT);
        const input = search.querySelector('input');
        if (input) fireEvent.change(input, { target: { value: term } });
        return input;
    };

    afterEach(() => {
        jest.restoreAllMocks();
    });

    test('initial render', () => {
        jest.spyOn(osr, 'useOsrSearchByIsrcQuery').mockReturnValue({} as never);

        renderPage();

        expect(osr.useOsrSearchByIsrcQuery).toHaveBeenCalledWith({
            skip: true,
            variables: { term: '' },
        });
    });

    test('render with search term for osr tab', async () => {
        jest.spyOn(osr, 'useOsrSearchByIsrcQuery').mockReturnValue({} as never);

        renderPage();

        triggerSearch(' test term ');

        await waitFor(() => {
            expect(osr.useOsrSearchByIsrcQuery).toHaveBeenLastCalledWith({
                skip: false,
                variables: { term: 'test term' },
            });
        });
    });
});