main 🧊 rework use page leave test

Author: debabin

src/hooks/useIdle/useIdle.test.ts

@@ -14,49 +14,53 @@ it('Should use idle', () => {
 });
 
 it('Should be true after 60e3', () => {
-  const { result } = renderHook(() => useIdle(60e3));
-
+  const { result } = renderHook(useIdle);
   expect(result.current.idle).toBe(false);
 
-  act(() => {
-    vi.advanceTimersByTime(60e3);
-  });
+  act(() => vi.advanceTimersByTime(60e3));
   expect(result.current.idle).toBe(true);
 });
 
-it('Should be equal to initially passed state', () => {
-  const { result } = renderHook(() => useIdle(60e3, { initialState: true }));
-
+it('Should set initial state', () => {
+  const { result } = renderHook(() => useIdle(60e3, { initialValue: true }));
   expect(result.current.idle).toBe(true);
 });
 
 it('Should be false after interaction', () => {
-  const { result } = renderHook(() => useIdle(60e3, { initialState: true }));
+  const { result } = renderHook(() => useIdle(60e3));
 
+  act(() => vi.advanceTimersByTime(60e3));
   expect(result.current.idle).toBe(true);
 
-  act(() => {
-    window.dispatchEvent(new Event('mousemove'));
-  });
+  act(() => window.dispatchEvent(new Event('mousemove')));
+
   expect(result.current.idle).toBe(false);
   expect(result.current.lastActive).toBeLessThanOrEqual(Date.now());
 });
 
-it('Should be false after visibilitychange', () => {
-  const { result } = renderHook(() => useIdle(60e3, { initialState: true }));
+it('Should be false after visibilitychange event', () => {
+  const { result } = renderHook(() => useIdle(60e3));
 
-  act(() => {
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  act(() => vi.advanceTimersByTime(60e3));
+  expect(result.current.idle).toBe(true);
+
+  act(() => document.dispatchEvent(new Event('visibilitychange')));
   expect(result.current.idle).toBe(false);
   expect(result.current.lastActive).toBeLessThanOrEqual(Date.now());
 });
 
-it('Should not react to unexpected events', () => {
-  const { result } = renderHook(() => useIdle(60e3, { initialState: true, events: ['click'] }));
+it('Should work with custom events', () => {
+  const { result } = renderHook(() => useIdle(60e3, { events: ['mousedown'] }));
+
+  act(() => vi.advanceTimersByTime(60e3));
+  expect(result.current.idle).toBe(true);
+
+  act(() => window.dispatchEvent(new Event('mousedown')));
+  expect(result.current.idle).toBe(false);
+
+  act(() => vi.advanceTimersByTime(60e3));
+  expect(result.current.idle).toBe(true);
 
-  act(() => {
-    window.dispatchEvent(new Event('mousemove'));
-  });
+  act(() => document.dispatchEvent(new Event('mousemove')));
   expect(result.current.idle).toBe(true);
 });

src/hooks/useIdle/useIdle.ts

@@ -3,8 +3,8 @@ import React from 'react';
 import { throttle } from '@/utils/helpers';
 
 interface UseIdleOptions {
-  initialState?: boolean;
-  events?: Array<keyof WindowEventMap>;
+  initialValue?: boolean;
+  events?: Array<keyof DocumentEventMap>;
 }
 
 const IDLE_EVENTS = [
@@ -14,7 +14,7 @@ const IDLE_EVENTS = [
   'touchstart',
   'wheel',
   'resize'
-] satisfies Array<keyof WindowEventMap>;
+] satisfies Array<keyof DocumentEventMap>;
 const ONE_MINUTE = 60e3;
 
 //* The use idle return type */
@@ -39,9 +39,9 @@ export interface UseIdleReturn {
  */
 export const useIdle = (
   milliseconds = ONE_MINUTE,
-  { initialState = false, events = IDLE_EVENTS }: UseIdleOptions = {}
+  { initialValue = false, events = IDLE_EVENTS }: UseIdleOptions = {}
 ): UseIdleReturn => {
-  const [idle, setIdle] = React.useState(initialState);
+  const [idle, setIdle] = React.useState(initialValue);
   const [lastActive, setLastActive] = React.useState(Date.now());
 
   React.useEffect(() => {
@@ -51,7 +51,7 @@ export const useIdle = (
     const onEvent = throttle(() => {
       setIdle(false);
       setLastActive(Date.now());
-      window.clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
       timeoutId = setTimeout(onTimeout, milliseconds);
     }, 500);
 
@@ -67,7 +67,7 @@ export const useIdle = (
     return () => {
       events.forEach((event) => window.addEventListener(event, onEvent));
       document.removeEventListener('visibilitychange', onVisibilitychange);
-      window.clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
     };
   }, [milliseconds, events]);
 

src/hooks/usePageLeave/usePageLeave.test.ts

@@ -1,16 +1,16 @@
-import { act, fireEvent, renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 
 import { usePageLeave } from './usePageLeave';
 
 it('Should use page leave', () => {
   const callback = vi.fn();
   renderHook(() => usePageLeave(callback));
 
-  act(() => fireEvent.mouseLeave(document));
+  act(() => document.dispatchEvent(new Event('mouseleave')));
   expect(callback).toBeCalledTimes(1);
 
-  act(() => fireEvent.mouseEnter(document));
+  act(() => document.dispatchEvent(new Event('mouseenter')));
 
-  act(() => fireEvent.mouseLeave(document));
+  act(() => document.dispatchEvent(new Event('mouseleave')));
   expect(callback).toBeCalledTimes(2);
 });