AgentHub/client/src/hooks/__tests__/useTheme.test.ts

/**
 * @file useTheme.test.ts
 * @description Tests for useTheme — the dark/light/system mode and per-mode named-theme hook.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
import { renderHook, act } from "@testing-library/react";
import { useTheme } from "../useTheme";

describe("useTheme", () => {
  beforeEach(() => {
    localStorage.clear();
    document.documentElement.classList.remove("dark");
    document.documentElement.removeAttribute("data-theme");
    document.documentElement.removeAttribute("data-mode");
  });
  afterEach(() => {
    document.documentElement.classList.remove("dark");
    vi.unstubAllGlobals();
  });

  it("defaults to dark when localStorage is empty", () => {
    const { result } = renderHook(() => useTheme());
    expect(result.current.theme).toBe("dark");
    expect(document.documentElement.classList.contains("dark")).toBe(true);
  });

  it("reads a persisted light theme on mount", () => {
    localStorage.setItem("theme", "light");
    const { result } = renderHook(() => useTheme());
    expect(result.current.theme).toBe("light");
    expect(document.documentElement.classList.contains("dark")).toBe(false);
  });

  it("toggleTheme flips the theme, the DOM class, and persists it", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.toggleTheme());
    expect(result.current.theme).toBe("light");
    expect(document.documentElement.classList.contains("dark")).toBe(false);
    expect(localStorage.getItem("theme")).toBe("light");
  });

  it("setTheme sets an explicit value", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setTheme("light"));
    expect(result.current.theme).toBe("light");
    act(() => result.current.setTheme("dark"));
    expect(result.current.theme).toBe("dark");
    expect(document.documentElement.classList.contains("dark")).toBe(true);
  });

  it("system mode follows prefers-color-scheme, live", () => {
    let dark = true;
    const listeners = new Set<() => void>();
    vi.stubGlobal("matchMedia", (query: string) => ({
      get matches() {
        return dark;
      },
      media: query,
      addEventListener: (_: string, fn: () => void) => listeners.add(fn),
      removeEventListener: (_: string, fn: () => void) => listeners.delete(fn),
    }));
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setMode("system"));
    expect(result.current.mode).toBe("system");
    expect(result.current.theme).toBe("dark");
    expect(localStorage.getItem("theme")).toBe("system");
    act(() => {
      dark = false;
      listeners.forEach((fn) => fn());
    });
    expect(result.current.theme).toBe("light");
    expect(document.documentElement.classList.contains("dark")).toBe(false);
    expect(document.documentElement.dataset.mode).toBe("light");
  });

  it("system mode without matchMedia falls back to dark", () => {
    vi.stubGlobal("matchMedia", undefined);
    localStorage.setItem("theme", "system");
    const { result } = renderHook(() => useTheme());
    expect(result.current.theme).toBe("dark");
  });

  it("each mode remembers its own named theme", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setThemeFor("dark", "darcula"));
    act(() => result.current.setThemeFor("light", "canvas"));
    expect(document.documentElement.dataset.theme).toBe("darcula");
    expect(localStorage.getItem("agenthub.theme.dark")).toBe("darcula");
    act(() => result.current.toggleTheme());
    expect(result.current.theme).toBe("light");
    expect(document.documentElement.dataset.theme).toBe("canvas");
    expect(result.current.themeFor).toEqual({ dark: "darcula", light: "canvas" });
  });

  it("applies the Orca themes by id", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setThemeFor("dark", "orca-dark"));
    expect(document.documentElement.dataset.theme).toBe("orca-dark");
    act(() => result.current.setThemeFor("light", "orca-light"));
    act(() => result.current.toggleTheme());
    expect(document.documentElement.dataset.theme).toBe("orca-light");
  });

  it("the default theme carries no data-theme attribute", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setThemeFor("dark", "darcula"));
    act(() => result.current.setThemeFor("dark", "default"));
    expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
  });

  it("an unknown stored theme id falls back to default", () => {
    localStorage.setItem("agenthub.theme.dark", "no-such-theme");
    const { result } = renderHook(() => useTheme());
    expect(result.current.themeFor.dark).toBe("default");
    expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
  });

  it("a light theme id is never applied in dark mode", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setThemeFor("dark", "canvas"));
    expect(result.current.themeFor.dark).toBe("default");
    expect(document.documentElement.hasAttribute("data-theme")).toBe(false);
  });

  it("two hook instances stay in sync", () => {
    const a = renderHook(() => useTheme());
    const b = renderHook(() => useTheme());
    act(() => a.result.current.setTheme("light"));
    act(() => a.result.current.setThemeFor("light", "apple-light"));
    expect(b.result.current.theme).toBe("light");
    expect(b.result.current.themeFor.light).toBe("apple-light");
  });

  it("another tab's storage write updates a mounted hook", () => {
    const { result } = renderHook(() => useTheme());
    expect(result.current.theme).toBe("dark");
    act(() => {
      localStorage.setItem("theme", "light");
      localStorage.setItem("agenthub.theme.light", "canvas");
      window.dispatchEvent(new StorageEvent("storage", { key: "theme" }));
    });
    expect(result.current.theme).toBe("light");
    expect(document.documentElement.dataset.theme).toBe("canvas");
    expect(document.documentElement.dataset.mode).toBe("light");
  });

  it("disabled storage (throwing) falls back to dark/default and setters do not crash", () => {
    const get = vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
      throw new Error("SecurityError");
    });
    const set = vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
      throw new Error("QuotaExceededError");
    });
    try {
      const { result } = renderHook(() => useTheme());
      expect(result.current.theme).toBe("dark");
      expect(result.current.mode).toBe("dark");
      expect(result.current.themeFor).toEqual({ dark: "default", light: "default" });
      expect(() => act(() => result.current.setMode("light"))).not.toThrow();
      expect(() => act(() => result.current.setThemeFor("dark", "darcula"))).not.toThrow();
      expect(() => act(() => result.current.toggleTheme())).not.toThrow();
      expect(result.current.theme).toBe("dark");
    } finally {
      get.mockRestore();
      set.mockRestore();
    }
  });

  it("setThemeFor with an unknown id keeps the previous pick", () => {
    const { result } = renderHook(() => useTheme());
    act(() => result.current.setThemeFor("dark", "darcula"));
    act(() => result.current.setThemeFor("dark", "no-such-theme"));
    act(() => result.current.setThemeFor("light", ""));
    expect(result.current.themeFor).toEqual({ dark: "darcula", light: "default" });
    expect(localStorage.getItem("agenthub.theme.dark")).toBe("darcula");
    expect(localStorage.getItem("agenthub.theme.light")).toBeNull();
    expect(document.documentElement.dataset.theme).toBe("darcula");
  });

  it("an unknown stored mode falls back to dark", () => {
    localStorage.setItem("theme", "blue");
    const { result } = renderHook(() => useTheme());
    expect(result.current.mode).toBe("dark");
    expect(result.current.theme).toBe("dark");
    expect(document.documentElement.dataset.mode).toBe("dark");
  });

  it.each([
    [true, "light"],
    [false, "dark"],
  ])("toggle from system (OS dark=%s) sets the explicit opposite: %s", (osDark, expected) => {
    vi.stubGlobal("matchMedia", (query: string) => ({
      matches: osDark,
      media: query,
      addEventListener: () => {},
      removeEventListener: () => {},
    }));
    localStorage.setItem("theme", "system");
    const { result } = renderHook(() => useTheme());
    expect(result.current.mode).toBe("system");
    act(() => result.current.toggleTheme());
    expect(result.current.mode).toBe(expected);
    expect(result.current.theme).toBe(expected);
    expect(localStorage.getItem("theme")).toBe(expected);
  });

  it("unmount removes the matchMedia listener", () => {
    const listeners = new Set<() => void>();
    vi.stubGlobal("matchMedia", (query: string) => ({
      matches: true,
      media: query,
      addEventListener: (_: string, fn: () => void) => listeners.add(fn),
      removeEventListener: (_: string, fn: () => void) => listeners.delete(fn),
    }));
    const { unmount } = renderHook(() => useTheme());
    expect(listeners.size).toBeGreaterThan(0);
    unmount();
    expect(listeners.size).toBe(0);
  });
});