From 655be4404630a20ae4ca40c4af84afcc2e63557b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 2 Nov 2023 15:36:21 +0100
Subject: refactor(hooks): replace useInputAutofocus with useAutofocus hook

* extract setTimeout logic using useTimeout
* change condition to be a function
* return a ref
---
 .../hooks/use-autofocus/use-autofocus.test.ts      | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create 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
new file mode 100644
index 0000000..1a9a3be
--- /dev/null
+++ b/src/utils/hooks/use-autofocus/use-autofocus.test.ts
@@ -0,0 +1,79 @@
+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<HTMLInputElement>());
+    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<HTMLInputElement>({ 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<HTMLInputElement>({ 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<HTMLInputElement>({ condition })
+    );
+    result.current.current = input;
+
+    jest.advanceTimersByTime(defaultTimeoutDelay);
+
+    expect(rtlScreen.getByRole('textbox')).not.toHaveFocus();
+    expect(condition).toHaveBeenCalledTimes(1);
+  });
+});
-- 
cgit v1.2.3