Test useTheme hook (#2625)

* Test useTheme hook

src/useTheme.test.ts

@@ -0,0 +1,78 @@
+/*
+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 to setup spies
+    originalClassList = document.body.classList;
+
+    vi.spyOn(originalClassList, "add");
+    vi.spyOn(originalClassList, "remove");
+    vi.spyOn(originalClassList, "item").mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe.each([
+    { setTheme: null, add: ["cpd-theme-dark"] },
+    { setTheme: "light", add: ["cpd-theme-light"] },
+    { setTheme: "dark-high-contrast", add: ["cpd-theme-dark-hc"] },
+    { setTheme: "light-high-contrast", add: ["cpd-theme-light-hc"] },
+  ])("apply procedure", ({ setTheme, add }) => {
+    test(`should apply ${add[0]} theme when ${setTheme} theme is specified`, () => {
+      (useUrlParams as Mock).mockReturnValue({ theme: setTheme });
+
+      renderHook(() => useTheme());
+
+      expect(originalClassList.remove).toHaveBeenCalledWith(
+        "cpd-theme-light",
+        "cpd-theme-dark",
+        "cpd-theme-light-hc",
+        "cpd-theme-dark-hc",
+      );
+      expect(originalClassList.add).toHaveBeenCalledWith(...add);
+    });
+  });
+
+  test("should not reapply the same theme if it hasn't changed", () => {
+    (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();
+  });
+});