import { fireEvent, render } from '@testing-library/react'; import SearchInput from '../../customInput/SearchInput'; import { I18nextProvider } from 'react-i18next'; import i18n from '../../../i18n'; import { vi } from 'vitest'; const mockHistoryPushFn = vi.fn(); vi.mock('react-router-dom', () => ({ useHistory: () => ({ push: mockHistoryPushFn, location: { search: '', }, }), })); // clear the influence of vi.useFakeTimers afterEach(() => { vi.useRealTimers(); }); describe('test search input component', () => { it('renders default state', () => { const mockSearchFn = vi.fn(); const container = render( ); // material textfield input role is textbox expect(container.getByRole('textbox')).toBeInTheDocument(); expect(container.getByRole('textbox')).toHaveValue('search text'); }); it('checks input value change event', () => { const mockSearchFn = vi.fn(); const container = render( ); const input = container.getByRole('textbox'); fireEvent.change(input, { target: { value: 'search change test' } }); expect(input).toHaveValue('search change test'); // mock Enter key press event fireEvent.keyPress(input, { key: 'Enter', code: 13, charCode: 13 }); expect(mockSearchFn).toBeCalledTimes(1); // mock clear icon click event const clearIcon = container.getByTestId('clear-icon'); fireEvent.click(clearIcon); expect(input).toHaveValue(''); }); it('checks location change according to search value', () => { const mockSearchFn = vi.fn(); // mock setTimeout vi.useFakeTimers(); const container = render( ); const input = container.getByRole('textbox'); fireEvent.change(input, { target: { value: 'route' } }); expect(mockHistoryPushFn).not.toBeCalled(); // fast-forward until all timers have been executed vi.runAllTimers(); expect(mockHistoryPushFn).toBeCalled(); expect(mockHistoryPushFn).toBeCalledWith({ search: 'search=route' }); }); });