From c6212f927daf3c928f479afa052e4772216a2d8a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 21 Nov 2023 16:10:20 +0100 Subject: refactor(components): replace items prop in Navbar component * replace `items` prop with `children` prop: it is more readable this way, * handle navbar item state inside NavbarItem component: it avoid using three differents states and their methods to do exactly the same thing * remove useAutofocus hook since we can't use it anymore * add `onActivation` and `activationHandlerDelay` prop to NavbarItem component to be able to focus the search input only when the item is activated (it replicates the functioning of useAutofocus hook) * replace `ref` type in SearchForm component: it does not make sense to use an input ref for a form. Instead I use useImperativeHandle to provide different a focus method to the given ref. --- .../hooks/use-autofocus/use-autofocus.test.ts | 79 ---------------------- 1 file changed, 79 deletions(-) delete mode 100644 src/utils/hooks/use-autofocus/use-autofocus.test.ts (limited to 'src/utils/hooks/use-autofocus/use-autofocus.test.ts') diff --git a/src/utils/hooks/use-autofocus/use-autofocus.test.ts b/src/utils/hooks/use-autofocus/use-autofocus.test.ts deleted file mode 100644 index 1a9a3be..0000000 --- a/src/utils/hooks/use-autofocus/use-autofocus.test.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { - afterEach, - beforeEach, - describe, - expect, - it, - jest, -} from '@jest/globals'; -import { renderHook, screen as rtlScreen } from '@testing-library/react'; -import { useAutofocus } from './use-autofocus'; - -describe('useAutofocus', () => { - // When less than 1ms, setTimeout use 1. Default delay is 0ms. - const defaultTimeoutDelay = 1; - const input = document.createElement('input'); - input.type = 'text'; - - beforeEach(() => { - document.body.append(input); - jest.useFakeTimers(); - }); - - afterEach(() => { - document.body.removeChild(input); - jest.runOnlyPendingTimers(); - jest.useRealTimers(); - }); - - it('gives focus to the element without condition', () => { - const { result } = renderHook(() => useAutofocus()); - result.current.current = input; - - jest.advanceTimersByTime(defaultTimeoutDelay); - - expect(rtlScreen.getByRole('textbox')).toHaveFocus(); - }); - - it('can give focus to the element with custom delay', () => { - const delay = 2000; - const { result } = renderHook(() => - useAutofocus({ delay }) - ); - result.current.current = input; - - jest.advanceTimersByTime(defaultTimeoutDelay); - - expect(rtlScreen.getByRole('textbox')).not.toHaveFocus(); - - jest.advanceTimersByTime(delay); - - expect(rtlScreen.getByRole('textbox')).toHaveFocus(); - }); - - it('can give focus to the element when the condition is met', () => { - const condition = jest.fn(() => true); - const { result } = renderHook(() => - useAutofocus({ condition }) - ); - result.current.current = input; - - jest.advanceTimersByTime(defaultTimeoutDelay); - - expect(rtlScreen.getByRole('textbox')).toHaveFocus(); - expect(condition).toHaveBeenCalledTimes(1); - }); - - it('does not give focus to the element when the condition is not met', () => { - const condition = jest.fn(() => false); - const { result } = renderHook(() => - useAutofocus({ condition }) - ); - result.current.current = input; - - jest.advanceTimersByTime(defaultTimeoutDelay); - - expect(rtlScreen.getByRole('textbox')).not.toHaveFocus(); - expect(condition).toHaveBeenCalledTimes(1); - }); -}); -- cgit v1.2.3