added focus functionality back to select component, fixed missing act…

…() warnings, added tests for usePrefetch
8by8-org · Sep 4, 2024 · 979f1f2 · 979f1f2
1 parent d612e6c
commit 979f1f2
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 17 deletions.
diff --git a/src/__tests__/unit/components/form-components/select/menu/menu.test.tsx b/src/__tests__/unit/components/form-components/select/menu/menu.test.tsx
@@ -5,6 +5,7 @@ import {
   cleanup,
   fireEvent,
   waitFor,
+  act,
 } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -105,7 +106,7 @@ describe('Menu', () => {
     );
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('g');
     await user.keyboard('{Enter}');
 
@@ -140,7 +141,7 @@ describe('Menu', () => {
     );
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('g');
     await user.keyboard('{Tab}');
 
@@ -230,7 +231,7 @@ describe('Menu', () => {
 
     const combobox = screen.getByRole('combobox');
     const menuOptions = screen.getAllByRole('option');
-    combobox.focus();
+    act(() => combobox.focus());
 
     for (let i = 0; i <= options.length + 10; i++) {
       await user.keyboard('{ArrowDown}');
@@ -279,7 +280,7 @@ describe('Menu', () => {
 
     const combobox = screen.getByRole('combobox');
     const menuOptions = screen.getAllByRole('option');
-    combobox.focus();
+    act(() => combobox.focus());
 
     for (let i = options.length - 1; i >= -10; i--) {
       await user.keyboard('{ArrowUp}');
@@ -328,7 +329,7 @@ describe('Menu', () => {
 
     const combobox = screen.getByRole('combobox');
     const menuOptions = screen.getAllByRole('option');
-    combobox.focus();
+    act(() => combobox.focus());
 
     for (let i = 0; i < options.length; i++) {
       await user.keyboard(options[i].value[0]);
@@ -364,7 +365,7 @@ describe('Menu', () => {
 
     const combobox = screen.getByRole('combobox');
     const menuOptions = screen.getAllByRole('option');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard(options[0].value[0]);
     expect(menuOptions[0]).toHaveFocus();
 
@@ -659,7 +660,7 @@ describe('Menu', () => {
     );
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{Enter}');
     await waitFor(() =>
       expect(screen.queryByAltText('Scroll up')).toBeInTheDocument(),
@@ -1042,7 +1043,7 @@ describe('Menu', () => {
     );
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{Enter}');
     await waitFor(() =>
       expect(screen.queryByAltText('Scroll down')).toBeInTheDocument(),

diff --git a/src/__tests__/unit/components/form-components/select/select.test.tsx b/src/__tests__/unit/components/form-components/select/select.test.tsx
@@ -237,7 +237,7 @@ describe('Select', () => {
     expect(menuContainer.classList).toContain('hidden');
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{Enter}');
 
     await waitFor(() =>
@@ -279,7 +279,7 @@ describe('Select', () => {
     expect(menuContainer.classList).toContain('hidden');
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{Enter}');
 
     await waitFor(() =>
@@ -317,7 +317,7 @@ describe('Select', () => {
     expect(menuContainer.classList).toContain('hidden');
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{ArrowDown}');
 
     await waitFor(() =>
@@ -357,7 +357,7 @@ describe('Select', () => {
     expect(menuContainer.classList).toContain('hidden');
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{ArrowUp}');
 
     await waitFor(() =>
@@ -400,7 +400,7 @@ describe('Select', () => {
     // options[1] should be selected when G is typed (regardless of case)
     // First, try uppercase G
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('G');
     await waitFor(() =>
       expect(menuContainer.classList).not.toContain('hidden'),
@@ -448,7 +448,7 @@ describe('Select', () => {
     const menuContainer = document.getElementsByClassName('menu_container')[0];
     expect(menuContainer.classList).toContain('hidden');
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('z');
     await waitFor(() =>
       expect(menuContainer.classList).not.toContain('hidden'),
@@ -488,7 +488,7 @@ describe('Select', () => {
     const menuContainer = document.getElementsByClassName('menu_container')[0];
     expect(menuContainer.classList).toContain('hidden');
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('z');
     await waitFor(() =>
       expect(menuContainer.classList).not.toContain('hidden'),
@@ -960,7 +960,7 @@ describe('Select', () => {
     );
 
     const combobox = screen.getByRole('combobox');
-    combobox.focus();
+    act(() => combobox.focus());
     await user.keyboard('{Enter}');
 
     expect(isKeyboardNavigating.current).toBe(true);

diff --git a/src/__tests__/unit/hooks/use-prefetch.test.tsx b/src/__tests__/unit/hooks/use-prefetch.test.tsx
@@ -0,0 +1,51 @@
+import { render, cleanup } from '@testing-library/react';
+import { usePrefetch } from '@/hooks/use-prefetch';
+import navigation from 'next/navigation';
+import { Builder } from 'builder-pattern';
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
+jest.mock('next/navigation', () => {
+  return {
+    ...jest.requireActual('next/navigation'),
+    useRouter: jest.fn(),
+  };
+});
+
+describe('usePrefetch', () => {
+  let useRouterSpy: jest.SpyInstance<AppRouterInstance>;
+  let router: AppRouterInstance;
+
+  interface TestComponentProps {
+    route: string;
+  }
+
+  function TestComponent({ route }: TestComponentProps) {
+    usePrefetch(route);
+
+    return null;
+  }
+
+  beforeEach(() => {
+    router = Builder<AppRouterInstance>().prefetch(jest.fn()).build();
+
+    useRouterSpy = jest
+      .spyOn(navigation, 'useRouter')
+      .mockImplementationOnce(() => {
+        return router;
+      });
+  });
+
+  afterEach(() => {
+    useRouterSpy.mockRestore();
+    cleanup();
+  });
+
+  it('prefetches the provided route.', () => {
+    const testRoute = '/test';
+
+    render(<TestComponent route={testRoute} />);
+
+    expect(router.prefetch).toHaveBeenCalledTimes(1);
+    expect(router.prefetch).toHaveBeenCalledWith(testRoute, undefined);
+  });
+});
diff --git a/src/components/form-components/select/combobox/combobox.tsx b/src/components/form-components/select/combobox/combobox.tsx
@@ -7,13 +7,13 @@ import {
   type RefObject,
 } from 'react';
 import {
+  Field,
   usePipe,
   useMultiPipe,
   useValue,
   ValidityUtils,
   type FieldOfType,
   type IGroup,
-  type Field,
 } from 'fully-formed';
 import Image from 'next/image';
 import { isPrintableCharacterKey } from '../utils/is-printable-character-key';

diff --git a/src/components/form-components/select/select.tsx b/src/components/form-components/select/select.tsx
@@ -12,6 +12,7 @@ import {
   ValidityUtils,
   type Field,
   type FieldOfType,
+  useCancelFocusOnUnmount,
 } from 'fully-formed';
 import Image from 'next/image';
 import { Combobox } from './combobox';
@@ -145,6 +146,10 @@ export function Select({
       }
 
       menuRef.current?.closeMenu();
+
+      if (field.state.isInFocus) {
+        field.blur();
+      }
     }
 
     document.addEventListener('click', handleClickOutsideSelect);
@@ -153,12 +158,15 @@ export function Select({
       document.removeEventListener('click', handleClickOutsideSelect);
   }, [field]);
 
+  useCancelFocusOnUnmount(field);
+
   return (
     <div
       className={classNames.join(' ')}
       ref={selectRef}
       style={style}
       title={label}
+      onFocus={() => field.focus()}
     >
       <div className={styles.combobox_container}>
         <Combobox