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. --- .../organisms/forms/search-form/search-form.test.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'src/components/organisms/forms/search-form/search-form.test.tsx') diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx index d1fdfa9..8b4379b 100644 --- a/src/components/organisms/forms/search-form/search-form.test.tsx +++ b/src/components/organisms/forms/search-form/search-form.test.tsx @@ -1,7 +1,8 @@ import { describe, expect, it, jest } from '@jest/globals'; import { userEvent } from '@testing-library/user-event'; -import { render, screen as rtlScreen } from '../../../../../tests/utils'; -import { SearchForm } from './search-form'; +import type { Ref } from 'react'; +import { act, render, screen as rtlScreen } from '../../../../../tests/utils'; +import { SearchForm, type SearchFormRef } from './search-form'; describe('SearchForm', () => { it('renders a search input with a submit button', () => { @@ -36,4 +37,16 @@ describe('SearchForm', () => { expect(onSubmit).toHaveBeenCalledTimes(1); expect(onSubmit).toHaveBeenCalledWith({ query }); }); + + it('can give focus to the search input', () => { + const ref: Ref = { current: null }; + + render(); + + act(() => { + ref.current?.focus(); + }); + + expect(rtlScreen.getByRole('searchbox')).toHaveFocus(); + }); }); -- cgit v1.2.3