import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { userEvent, waitForLoaded } from 'lib/test/helpers';
import PageControls from 'src/pages/publishersListPage/pageControls';
import { publishersMock } from '../mocks';

describe('<PageControls>', () => {
    const onSearchChangeSpy = jest.fn();
    const renderComponent = (contextProps = {}) => {
        const props = {
            vendorId: publishersMock.publishers[0].vendor?.id.vendorId,
            onSearchChange: onSearchChangeSpy,
            onLabelChange: jest.fn(),
        };

        return renderInAppContext(<PageControls {...props} />, contextProps);
    };

    test('renders PageControls component', async () => {
        renderComponent();
        await waitForLoaded();
        /* eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion */
        const searchInput = screen.getByPlaceholderText(
            'Search by Name or IPI...'
        ) as HTMLInputElement;
        expect(searchInput).toBeTruthy();
        await userEvent.type(searchInput, 'testing');
        expect(onSearchChangeSpy).toHaveBeenCalledTimes(7);
    });
});