Add Unit Tests for useIsMobile Hook

package.json

@@ -126,6 +126,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@happy-dom/global-registrator": "^20.6.1",
     "@playwright/test": "^1.49.1",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
@@ -149,6 +150,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
+    "happy-dom": "^20.6.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

src/hooks/use-mobile.test.tsx

@@ -0,0 +1,165 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+GlobalRegistrator.register();
+
+import { describe, expect, test, mock, beforeEach, afterEach } from "bun:test";
+import { renderHook, act } from "@testing-library/react";
+import { useIsMobile } from "./use-mobile";
+
+// The hook uses 768 as the breakpoint internally.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const MOBILE_BREAKPOINT = 768;
+
+describe("useIsMobile", () => {
+  let listeners: Record<string, ((e: MediaQueryListEvent) => void)[]> = {};
+
+  // Store original implementation to restore later
+  let originalMatchMedia: any;
+  let originalInnerWidth: number;
+
+  beforeEach(() => {
+    listeners = {};
+
+    // Store original implementation
+    originalMatchMedia = window.matchMedia;
+    originalInnerWidth = window.innerWidth;
+
+    // Mock window.matchMedia
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: mock((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: mock(), // Deprecated
+        removeListener: mock(), // Deprecated
+        addEventListener: mock((type: string, listener: (e: MediaQueryListEvent) => void) => {
+          if (!listeners[type]) {
+            listeners[type] = [];
+          }
+          listeners[type].push(listener);
+        }),
+        removeEventListener: mock((type: string, listener: (e: MediaQueryListEvent) => void) => {
+          if (listeners[type]) {
+            listeners[type] = listeners[type].filter((l) => l !== listener);
+          }
+        }),
+        dispatchEvent: mock(),
+      })),
+    });
+
+    // Mock window.innerWidth
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      value: 1024, // Default to desktop
+    });
+  });
+
+  afterEach(() => {
+    if (originalMatchMedia) {
+      Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: originalMatchMedia,
+      });
+    }
+
+    if (originalInnerWidth !== undefined) {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: originalInnerWidth,
+      });
+    }
+    mock.restore();
+  });
+
+  test("should return false when window width is greater than MOBILE_BREAKPOINT", () => {
+    // Set width to desktop size
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      value: 1024,
+    });
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(false);
+  });
+
+  test("should return true when window width is less than MOBILE_BREAKPOINT", () => {
+    // Set width to mobile size
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      value: 500,
+    });
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(true);
+  });
+
+  test("should update value when window resizes to mobile", () => {
+    // Start with desktop
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      value: 1024,
+    });
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(false);
+
+    // Simulate resize to mobile
+    act(() => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 500,
+      });
+
+      // Trigger the 'change' event on the media query list
+      // The hook listens to 'change' event
+      if (listeners["change"]) {
+        listeners["change"].forEach((listener) =>
+          listener({ matches: true } as MediaQueryListEvent)
+        );
+      }
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  test("should update value when window resizes to desktop", () => {
+    // Start with mobile
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      value: 500,
+    });
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(true);
+
+    // Simulate resize to desktop
+    act(() => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+
+      // Trigger the 'change' event
+      if (listeners["change"]) {
+        listeners["change"].forEach((listener) =>
+          listener({ matches: false } as MediaQueryListEvent)
+        );
+      }
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  test("should cleanup event listener on unmount", () => {
+    const { unmount } = renderHook(() => useIsMobile());
+
+    // Get the mock instance
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mqlMock = (window.matchMedia as any).mock.results[0].value;
+
+    unmount();
+
+    expect(mqlMock.removeEventListener).toHaveBeenCalledTimes(1);
+    expect(mqlMock.removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+  });
+});