Add unit tests for the hooks in 'src/hooks'

Author: git-babel

src/hooks/__tests__/useAppendDomNode.spec.tsx

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useAppendDomNode from '../useAppendDomNode';
+
+describe('useAppendDomNode', () => {
+  const ids = ['test-id-0', 'test-id-1'];
+  const rootId = 'root';
+  const rootSelector = `#${rootId}`;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = `
+    <div id=${rootId}>
+    </div>
+    `;
+  });
+
+  it('renders correctly', () => {
+    const { result } = renderHook(() => useAppendDomNode(ids, rootSelector));
+
+    expect(document.getElementById(rootId).children.length).toBe(ids.length);
+    ids.forEach((_, i) => {
+      expect(document.getElementById(rootId).children[i].id).toBe(ids[i]);
+    });
+  });
+});

src/hooks/__tests__/useAsyncRequest.spec.tsx

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useAsyncRequest } from '../useAsyncRequest';
+
+describe('useAsyncRequest', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle request with no response correctly', async () => {
+    const mockPromise = Promise.resolve();
+    const mockRequest = jest.fn().mockReturnValue(mockPromise);
+
+    const { result } = renderHook(() => useAsyncRequest(mockRequest));
+
+    await mockPromise;
+
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('handle request with response correctly', async () => {
+    const mockResponse = { code: 'ok' };
+    const mockPromise = Promise.resolve(mockResponse);
+    const mockRequest = jest.fn().mockReturnValue(mockPromise);
+
+    const { result } = renderHook(() => useAsyncRequest(mockRequest));
+
+    await mockPromise;
+
+    expect(result.current.response).toBe(mockResponse);
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('cancel request correctly', async () => {
+    const mockCancel = jest.fn();
+    const mockRequest = { cancel: mockCancel };
+
+    const { unmount } = renderHook(() => useAsyncRequest(mockRequest));
+
+    unmount();
+
+    expect(mockCancel).toBeCalled();
+  });
+
+});

src/hooks/__tests__/useDebounce.spec.tsx

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useDebounce } from '../useDebounce';
+
+describe('useAsyncRequest', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle useDebounce correctly', async () => {
+    const mockFunction = jest.fn();
+    const { result } = renderHook(() => useDebounce(mockFunction, 1000));
+
+    const debounceFunction = result.current;
+
+    debounceFunction();
+    debounceFunction();
+    debounceFunction();
+    debounceFunction();
+    debounceFunction();
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    expect(mockFunction).toBeCalledTimes(1);
+  });
+
+});

src/hooks/__tests__/useLongPress.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import useLongPress from '../useLongPress';
+import { screen, fireEvent, render, waitFor } from '@testing-library/react';
+
+describe('useLongPress', () => {
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle long press correctly', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnClick = jest.fn();
+
+    const { result } = renderHook(() => useLongPress({
+      onLongPress: mockOnLongPress,
+      onClick: mockOnClick,
+    }));
+    const { onTouchStart, onTouchEnd } = result.current;
+
+    const targetComponent = <div id="target" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>touch this</div>;
+    render(targetComponent);
+
+    const element = screen.getByText('touch this');
+    fireEvent.touchStart(element);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    fireEvent.touchEnd(element);
+
+    await waitFor(() => {
+      expect(mockOnLongPress).toHaveBeenCalled();
+    });
+  });
+
+  it('cancel long press if touch is too short', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnClick = jest.fn();
+
+    const { result } = renderHook(() => useLongPress({
+      onLongPress: mockOnLongPress,
+      onClick: mockOnClick,
+    }));
+    const { onTouchStart, onTouchEnd } = result.current;
+
+    const targetComponent = <div id="target" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>touch this</div>;
+    render(targetComponent);
+
+    const element = screen.getByText('touch this');
+    fireEvent.touchStart(element);
+    await new Promise(resolve => setTimeout(resolve, 100));
+    fireEvent.touchEnd(element);
+
+    await waitFor(() => {
+      expect(mockOnClick).toHaveBeenCalled();
+      expect(mockOnLongPress).not.toHaveBeenCalled();
+    });
+  });
+
+});

src/hooks/__tests__/useMouseHover.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { screen, fireEvent, render, waitFor } from '@testing-library/react';
+import useMouseHover from '../useMouseHover';
+
+describe('useMouseHover', () => {
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle mouse over and out correctly', async () => {
+    const mockSetHover = jest.fn();
+
+    const targetComponent = <div id="target">hover</div>;
+    render(targetComponent);
+
+    const hoverElement = screen.getByText('hover');
+    const ref = {
+      current: hoverElement,
+    };
+
+    renderHook(() => useMouseHover({
+      ref,
+      setHover: mockSetHover,
+    }));
+
+    fireEvent.mouseEnter(hoverElement);
+    fireEvent.mouseLeave(hoverElement);
+
+    await waitFor(() => {
+      expect(mockSetHover).toHaveBeenCalledTimes(2);
+      expect(mockSetHover).toHaveBeenCalledWith(true);
+      expect(mockSetHover).toHaveBeenCalledWith(false);
+    });
+  });
+
+});

src/hooks/__tests__/useOutsideAlerter.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { screen, fireEvent, render, waitFor } from '@testing-library/react';
+import useOutsideAlerter from '../useOutsideAlerter';
+
+describe('useOutsideAlerter', () => {
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle click outside correctly', async () => {
+    const mockClickOutside = jest.fn();
+
+    const targetComponent = <div id="target">inside</div>;
+    render(targetComponent);
+
+    const insideElement = screen.getByText('inside');
+    const ref = {
+      current: insideElement,
+    };
+
+    renderHook(() => useOutsideAlerter({
+      ref,
+      callback: mockClickOutside,
+    }));
+
+    fireEvent.mouseDown(insideElement);
+
+    await waitFor(() => {
+      expect(mockClickOutside).toHaveBeenCalledTimes(1);
+    });
+  });
+
+});

src/hooks/__tests__/useThrottleCallback.spec.tsx

@@ -0,0 +1,50 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useThrottleCallback } from '../useThrottleCallback';
+
+describe('useThrottleCallback', () => {
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('handle throttle callback correctly when leading is true', async () => {
+    const mockCallback = jest.fn();
+
+    const { result: { current: throttleCallback } } = renderHook(() => useThrottleCallback(mockCallback, 1000, { leading: true }));
+
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+
+  });
+
+  it('handle throttle callback correctly when trailing is true', async () => {
+    const mockCallback = jest.fn();
+
+    const { result: { current: throttleCallback } } = renderHook(() => useThrottleCallback(mockCallback, 1000, { trailing: true }));
+
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+    throttleCallback();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(mockCallback).toHaveBeenCalledTimes(0);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+});

src/hooks/useThrottleCallback.ts

@@ -46,43 +46,3 @@ export function useThrottleCallback<T extends(...args: any[]) => void>(
     timer.current = setTimeout(invoke, delay);
   }) as T;
 }
-
-/**
- * Note: `leading` has higher priority rather than `trailing`
- * */
-export function throttle<T extends(...args: any[]) => void>(
-  callback: T,
-  delay: number,
-  options: { leading?: boolean; trailing?: boolean } = {
-    leading: true,
-    trailing: false,
-  },
-) {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  let trailingArgs: null | any[] = null;
-
-  return ((...args: any[]) => {
-    if (timer) {
-      trailingArgs = args;
-      return;
-    }
-
-    if (options.leading) {
-      callback(...args);
-    } else {
-      trailingArgs = args;
-    }
-
-    const invoke = () => {
-      if (options.trailing && trailingArgs) {
-        callback(...trailingArgs);
-        trailingArgs = null;
-        timer = setTimeout(invoke, delay);
-      } else {
-        timer = null;
-      }
-    };
-
-    timer = setTimeout(invoke, delay);
-  }) as T;
-}