main 🧊 add test for use raf, use storage

debabin · debabin · commit db0dbdbd16a7 · 2026-04-07T23:29:22.000+07:00
diff --git a/packages/core/src/hooks/useConst/useConst.test.ts b/packages/core/src/hooks/useConst/useConst.test.ts
@@ -16,7 +16,7 @@ it('Should use const on server side', () => {
   expect(result.current).toBe('value');
 });
 
-it('should return the same constant value', () => {
+it('Should return the same constant value', () => {
   const { result, rerender } = renderHook(() => useConst('value'));
   expect(result.current).toBe('value');
 
diff --git a/packages/core/src/hooks/useDebounceCallback/useDebounceCallback.test.ts b/packages/core/src/hooks/useDebounceCallback/useDebounceCallback.test.ts
@@ -9,7 +9,6 @@ beforeEach(vi.useFakeTimers);
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.restoreAllMocks();
 });
 
 it('Should use debounce callback', () => {
diff --git a/packages/core/src/hooks/useDebounceEffect/useDebounceEffect.test.ts b/packages/core/src/hooks/useDebounceEffect/useDebounceEffect.test.ts
@@ -9,7 +9,6 @@ beforeEach(vi.useFakeTimers);
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.restoreAllMocks();
 });
 
 it('Should use debounce effect', () => {
diff --git a/packages/core/src/hooks/useDebounceState/useDebounceState.test.ts b/packages/core/src/hooks/useDebounceState/useDebounceState.test.ts
@@ -7,7 +7,6 @@ beforeEach(vi.useFakeTimers);
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.restoreAllMocks();
 });
 
 it('Should use debounce value', () => {
diff --git a/packages/core/src/hooks/useDebounceValue/useDebounceValue.test.ts b/packages/core/src/hooks/useDebounceValue/useDebounceValue.test.ts
@@ -7,7 +7,6 @@ beforeEach(vi.useFakeTimers);
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.restoreAllMocks();
 });
 
 it('Should use debounce value', () => {
diff --git a/packages/core/src/hooks/useFocus/useFocus.test.ts b/packages/core/src/hooks/useFocus/useFocus.test.ts
@@ -221,6 +221,34 @@ targets.forEach((target) => {
       expect(mockBlur).toHaveBeenCalledOnce();
     });
 
+    it('Should handle target changes', () => {
+      const addEventListenerSpy = vi.spyOn(element, 'addEventListener');
+      const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
+
+      const { result, rerender } = renderHook(
+        (target) => {
+          if (target)
+            return useFocus(target) as UseFocusReturn & {
+              ref: StateRef<HTMLDivElement>;
+            };
+          return useFocus<HTMLDivElement>();
+        },
+        {
+          initialProps: target
+        }
+      );
+
+      if (!target) act(() => result.current.ref(element));
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(0);
+
+      rerender({ current: document.getElementById('target') });
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
+    });
+
     it('Should cleanup event listeners on unmount', () => {
       const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
 
diff --git a/packages/core/src/hooks/useKeyboard/useKeyboard.test.ts b/packages/core/src/hooks/useKeyboard/useKeyboard.test.ts
@@ -164,6 +164,34 @@ targets.forEach((target) => {
       expect(callback).toHaveBeenCalledOnce();
       expect(callback.mock.calls[0][0].key).toBe('Enter');
     });
+
+    it('Should handle target changes', () => {
+      const addEventListenerSpy = vi.spyOn(element, 'addEventListener');
+      const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
+
+      const { result, rerender } = renderHook(
+        (target) => {
+          if (target)
+            return useKeyboard(target, () => {}) as unknown as UseKeyboardReturn & {
+              ref: StateRef<HTMLDivElement>;
+            };
+          return useKeyboard<HTMLDivElement>(() => {});
+        },
+        {
+          initialProps: target
+        }
+      );
+
+      if (!target) act(() => result.current.ref(element));
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(0);
+
+      rerender({ current: document.getElementById('target') });
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
+    });
   });
 
   it('Should cleanup on unmount', () => {
diff --git a/packages/core/src/hooks/useLocalStorage/useLocalStorage.test.ts b/packages/core/src/hooks/useLocalStorage/useLocalStorage.test.ts
@@ -4,15 +4,15 @@ import { renderHookServer } from '@/tests';
 
 import { useLocalStorage } from './useLocalStorage';
 
-it('Should use session storage', () => {
+it('Should use local storage', () => {
   const { result } = renderHook(() => useLocalStorage('key', 'initialValue'));
 
   expect(result.current.value).toBe('initialValue');
   expect(result.current.set).toBeTypeOf('function');
   expect(result.current.remove).toBeTypeOf('function');
 });
 
-it('should use session storage on server side', () => {
+it('Should use local storage on server side', () => {
   const { result } = renderHookServer(() => useLocalStorage('key', 'initialValue'));
 
   expect(result.current.value).toBe('initialValue');
diff --git a/packages/core/src/hooks/useLockCallback/useLockCallback.test.ts b/packages/core/src/hooks/useLockCallback/useLockCallback.test.ts
@@ -9,7 +9,6 @@ beforeEach(() => {
 
 afterEach(() => {
   vi.useRealTimers();
-  vi.restoreAllMocks();
 });
 
 it('Should lock callback', () => {
diff --git a/packages/core/src/hooks/useMouse/useMouse.test.ts b/packages/core/src/hooks/useMouse/useMouse.test.ts
@@ -123,6 +123,34 @@ targets.forEach((target) => {
       expect(result.current.snapshot.y).toBe(40);
     });
 
+    it('Should handle target changes', () => {
+      const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
+      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
+
+      const { result, rerender } = renderHook(
+        (target) => {
+          if (target)
+            return useMouse(target) as unknown as {
+              ref: StateRef<HTMLDivElement>;
+            } & UseMouseReturn;
+          return useMouse<HTMLDivElement>();
+        },
+        {
+          initialProps: target
+        }
+      );
+
+      if (!target) act(() => result.current.ref(element));
+
+      const initialAddEventListenerCalls = addEventListenerSpy.mock.calls.length;
+      const initialRemoveEventListenerCalls = removeEventListenerSpy.mock.calls.length;
+
+      rerender({ current: document.getElementById('target') });
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(initialAddEventListenerCalls + 2);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(initialRemoveEventListenerCalls + 2);
+    });
+
     it('Should cleanup on unmount', () => {
       const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
 
diff --git a/packages/core/src/hooks/usePictureInPicture/usePictureInPicture.test.ts b/packages/core/src/hooks/usePictureInPicture/usePictureInPicture.test.ts
@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeEach, vi } from 'vitest';
+import { beforeEach, vi } from 'vitest';
 
 import { renderHookServer } from '@/tests';
 import { target } from '@/utils/helpers';
@@ -38,10 +38,6 @@ beforeEach(() => {
   element.requestPictureInPicture = vi.fn().mockResolvedValue(undefined);
 });
 
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
 targets.forEach((target) => {
   describe(`${target}`, () => {
     it('Should use picture in picture', () => {
diff --git a/packages/core/src/hooks/useRaf/useRaf.test.ts b/packages/core/src/hooks/useRaf/useRaf.test.ts
@@ -0,0 +1,89 @@
+import { act, renderHook } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import { renderHookServer } from '@/tests';
+
+import { useRaf } from './useRaf';
+
+it('Should use raf', () => {
+  const callback = vi.fn();
+  const { result } = renderHook(() => useRaf(callback));
+
+  expect(result.current.active).toBeTruthy();
+  expect(result.current.pause).toBeTypeOf('function');
+  expect(result.current.resume).toBeTypeOf('function');
+});
+
+it('Should use raf on server side', () => {
+  const callback = vi.fn();
+  const { result } = renderHookServer(() => useRaf(callback));
+
+  expect(result.current.active).toBeFalsy();
+  expect(result.current.pause).toBeTypeOf('function');
+  expect(result.current.resume).toBeTypeOf('function');
+});
+
+it('Should start request animation frame by default', () => {
+  const requestAnimationFrameSpy = vi.spyOn(window, 'requestAnimationFrame');
+
+  renderHook(() => useRaf(vi.fn()));
+
+  expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
+});
+
+it('Should not start when disabled', () => {
+  const requestAnimationFrameSpy = vi.spyOn(window, 'requestAnimationFrame');
+  const { result } = renderHook(() => useRaf(vi.fn(), { enabled: false }));
+
+  expect(result.current.active).toBeFalsy();
+  expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+});
+
+it('Should pause animation frame', () => {
+  const cancelAnimationFrameSpy = vi.spyOn(window, 'cancelAnimationFrame');
+  const { result } = renderHook(() => useRaf(vi.fn()));
+
+  act(result.current.pause);
+
+  expect(result.current.active).toBeFalsy();
+  expect(cancelAnimationFrameSpy).toHaveBeenCalledTimes(1);
+});
+
+it('Should resume animation frame after pause', () => {
+  const requestAnimationFrameSpy = vi.spyOn(window, 'requestAnimationFrame');
+  const { result } = renderHook(() => useRaf(vi.fn()));
+
+  expect(result.current.active).toBeTruthy();
+
+  act(result.current.pause);
+  expect(result.current.active).toBeFalsy();
+
+  act(result.current.resume);
+
+  expect(result.current.active).toBeTruthy();
+  expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(2);
+});
+
+it('Should handle enabled changes', () => {
+  const requestAnimationFrameSpy = vi.spyOn(window, 'requestAnimationFrame');
+  const { result, rerender } = renderHook((enabled) => useRaf(vi.fn(), { enabled }), {
+    initialProps: false
+  });
+
+  expect(result.current.active).toBeFalsy();
+  expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+
+  rerender(true);
+
+  expect(result.current.active).toBeTruthy();
+  expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
+});
+
+it('Should cleanup on unmount', () => {
+  const cancelAnimationFrameSpy = vi.spyOn(window, 'cancelAnimationFrame');
+  const { unmount } = renderHook(() => useRaf(vi.fn()));
+
+  unmount();
+
+  expect(cancelAnimationFrameSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/packages/core/src/hooks/useScroll/useScroll.test.ts b/packages/core/src/hooks/useScroll/useScroll.test.ts
@@ -325,6 +325,34 @@ targets.forEach((target) => {
       expect(result.current.snapshot.arrived.bottom).toBe(true);
     });
 
+    it('Should handle target changes', () => {
+      const addEventListenerSpy = vi.spyOn(element, 'addEventListener');
+      const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
+
+      const { result, rerender } = renderHook(
+        (target) => {
+          if (target)
+            return useScroll(target) as unknown as {
+              ref: StateRef<HTMLDivElement>;
+            } & UseScrollReturn;
+          return useScroll<HTMLDivElement>();
+        },
+        {
+          initialProps: target
+        }
+      );
+
+      if (!target) act(() => result.current.ref(element));
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(0);
+
+      rerender({ current: document.getElementById('target') });
+
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
+    });
+
     it('Should cleanup on unmount', () => {
       const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');
 
diff --git a/packages/core/src/hooks/useSessionStorage/useSessionStorage.test.ts b/packages/core/src/hooks/useSessionStorage/useSessionStorage.test.ts
@@ -12,7 +12,7 @@ it('Should use session storage', () => {
   expect(result.current.remove).toBeTypeOf('function');
 });
 
-it('should use session storage on server side', () => {
+it('Should use session storage on server side', () => {
   const { result } = renderHookServer(() => useSessionStorage('key', 'initialValue'));
 
   expect(result.current.value).toBe('initialValue');
diff --git a/packages/core/src/hooks/useSpeechSynthesis/useSpeechSynthesis.test.ts b/packages/core/src/hooks/useSpeechSynthesis/useSpeechSynthesis.test.ts
@@ -93,7 +93,7 @@ it('Should bind options to utterance', () => {
   expect(result.current.utterance!.voice).toStrictEqual({ name: 'voice' } as SpeechSynthesisVoice);
 });
 
-it('should toggle speech synthesis', () => {
+it('Should toggle speech synthesis', () => {
   const { result } = renderHook(useSpeechSynthesis);
 
   act(result.current.toggle);
@@ -105,7 +105,7 @@ it('should toggle speech synthesis', () => {
   expect(result.current.playing).toBeFalsy();
 });
 
-it('should pause speech synthesis', () => {
+it('Should pause speech synthesis', () => {
   const { result } = renderHook(useSpeechSynthesis);
 
   act(result.current.speak);
@@ -119,7 +119,7 @@ it('should pause speech synthesis', () => {
   expect(result.current.playing).toBeFalsy();
 });
 
-it('should resume speech synthesis', () => {
+it('Should resume speech synthesis', () => {
   const { result } = renderHook(useSpeechSynthesis);
 
   act(result.current.resume);
@@ -128,7 +128,7 @@ it('should resume speech synthesis', () => {
   expect(result.current.playing).toBeTruthy();
 });
 
-it('should stop speech synthesis', () => {
+it('Should stop speech synthesis', () => {
   const { result } = renderHook(useSpeechSynthesis);
 
   act(result.current.speak);
diff --git a/packages/core/src/hooks/useStorage/useStorage.test.ts b/packages/core/src/hooks/useStorage/useStorage.test.ts
diff --git a/packages/core/src/hooks/useTextareaAutosize/useTextareaAutosize.test.ts b/packages/core/src/hooks/useTextareaAutosize/useTextareaAutosize.test.ts
diff --git a/packages/core/src/hooks/useThrottleCallback/useThrottleCallback.test.ts b/packages/core/src/hooks/useThrottleCallback/useThrottleCallback.test.ts
diff --git a/packages/core/src/hooks/useThrottleEffect/useThrottleEffect.test.ts b/packages/core/src/hooks/useThrottleEffect/useThrottleEffect.test.ts
diff --git a/packages/core/src/hooks/useThrottleState/useThrottleState.test.ts b/packages/core/src/hooks/useThrottleState/useThrottleState.test.ts
diff --git a/packages/core/src/hooks/useThrottleValue/useThrottleValue.test.ts b/packages/core/src/hooks/useThrottleValue/useThrottleValue.test.ts
