refactor(components): rewrite SearchForm component

* remove searchPage prop (the consumer should handle the submit)
* change onSubmit type
* use `useForm` hook to handle the form

1 files changed, 26 insertions, 6 deletions

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 908a8eb..56ba0d7 100644
--- a/src/components/organisms/forms/search-form/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form/search-form.test.tsx
@@ -1,19 +1,39 @@
 import { describe, expect, it } from '@jest/globals';
+import { userEvent } from '@testing-library/user-event';
 import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
-  it('renders a search input', () => {
-    render(<SearchForm searchPage="#" />);
+  it('renders a search input with a submit button', () => {
+    render(<SearchForm />);
+
     expect(
       rtlScreen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
-  });
-
-  it('renders a submit button', () => {
-    render(<SearchForm searchPage="#" />);
     expect(
       rtlScreen.getByRole('button', { name: 'Search' })
     ).toBeInTheDocument();
   });
+
+  it('can submit the form', async () => {
+    const onSubmit = jest.fn((_search: { query?: string }) => undefined);
+    const user = userEvent.setup();
+    const query = 'autem voluptatum eos';
+
+    render(<SearchForm onSubmit={onSubmit} />);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect.assertions(3);
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    await user.type(
+      rtlScreen.getByRole('searchbox', { name: 'Search for:' }),
+      query
+    );
+    await user.click(rtlScreen.getByRole('button', { name: 'Search' }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({ query });
+  });
 });