From c6212f927daf3c928f479afa052e4772216a2d8a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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<SearchFormRef> = { current: null };
+
+    render(<SearchForm ref={ref} />);
+
+    act(() => {
+      ref.current?.focus();
+    });
+
+    expect(rtlScreen.getByRole('searchbox')).toHaveFocus();
+  });
 });
-- 
cgit v1.2.3

