Test useTheme hook

package.json

@@ -41,6 +41,7 @@
     "@sentry/vite-plugin": "^2.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",

src/useTheme.test.ts

@@ -0,0 +1,122 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react-hooks";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  Mock,
+  test,
+  vi,
+} from "vitest";
+
+import { useTheme } from "./useTheme";
+import { useUrlParams } from "./UrlParams";
+
+// Mock the useUrlParams hook
+vi.mock("./UrlParams", () => ({
+  useUrlParams: vi.fn(),
+}));
+
+describe("useTheme", () => {
+  let originalClassList: DOMTokenList;
+  beforeEach(() => {
+    // Save the original classList so we can restore it later
+    originalClassList = document.body.classList;
+
+    vi.spyOn(document.body.classList, "add").mockImplementation(vi.fn());
+    vi.spyOn(document.body.classList, "remove").mockImplementation(vi.fn());
+    vi.spyOn(document.body.classList, "item").mockImplementation(() => null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("should apply dark theme by default when no theme is specified", () => {
+    // Mock useUrlParams to return no theme
+    (useUrlParams as Mock).mockReturnValue({ theme: null });
+
+    renderHook(() => useTheme());
+
+    expect(originalClassList.remove).toHaveBeenCalledWith(
+      "cpd-theme-light",
+      "cpd-theme-dark",
+      "cpd-theme-light-hc",
+      "cpd-theme-dark-hc",
+    );
+    expect(originalClassList.add).toHaveBeenCalledWith("cpd-theme-dark");
+  });
+
+  test("should apply light theme when theme is set to light", () => {
+    // Mock useUrlParams to return light theme
+    (useUrlParams as Mock).mockReturnValue({ theme: "light" });
+
+    renderHook(() => useTheme());
+
+    expect(originalClassList.remove).toHaveBeenCalledWith(
+      "cpd-theme-light",
+      "cpd-theme-dark",
+      "cpd-theme-light-hc",
+      "cpd-theme-dark-hc",
+    );
+    expect(originalClassList.add).toHaveBeenCalledWith("cpd-theme-light");
+  });
+
+  test("should apply dark-high-contrast theme when theme is set to dark-high-contrast", () => {
+    // Mock useUrlParams to return dark-high-contrast theme
+    (useUrlParams as Mock).mockReturnValue({
+      theme: "dark-high-contrast",
+    });
+
+    renderHook(() => useTheme());
+
+    expect(originalClassList.remove).toHaveBeenCalledWith(
+      "cpd-theme-light",
+      "cpd-theme-dark",
+      "cpd-theme-light-hc",
+      "cpd-theme-dark-hc",
+    );
+    expect(originalClassList.add).toHaveBeenCalledWith("cpd-theme-dark-hc");
+  });
+
+  test("should apply light-high-contrast theme when theme is set to light-high-contrast", () => {
+    // Mock useUrlParams to return light-high-contrast theme
+    (useUrlParams as Mock).mockReturnValue({
+      theme: "light-high-contrast",
+    });
+
+    renderHook(() => useTheme());
+
+    expect(originalClassList.remove).toHaveBeenCalledWith(
+      "cpd-theme-light",
+      "cpd-theme-dark",
+      "cpd-theme-light-hc",
+      "cpd-theme-dark-hc",
+    );
+    expect(originalClassList.add).toHaveBeenCalledWith("cpd-theme-light-hc");
+  });
+
+  test("should not reapply the same theme if it hasn't changed", () => {
+    // Mock useUrlParams to return dark theme initially
+    (useUrlParams as Mock).mockReturnValue({ theme: "dark" });
+    // Simulate a previous theme
+    originalClassList.item = vi.fn().mockReturnValue("cpd-theme-dark");
+
+    renderHook(() => useTheme());
+
+    expect(document.body.classList.add).not.toHaveBeenCalledWith(
+      "cpd-theme-dark",
+    );
+
+    // Ensure the 'no-theme' class is removed
+    expect(document.body.classList.remove).toHaveBeenCalledWith("no-theme");
+    expect(originalClassList.add).not.toHaveBeenCalled();
+  });
+});

yarn.lock

@@ -2795,6 +2795,14 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@testing-library/react-hooks@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
+  integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-error-boundary "^3.1.0"
+
 "@testing-library/react@^16.0.0":
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875"
@@ -6871,6 +6879,13 @@ react-dom@18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-error-boundary@^3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-i18next@^15.0.0:
   version "15.0.1"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.0.1.tgz#fc662d93829ecb39683fe2757a47ebfbc5c912a0"