diff --git a/package.json b/package.json index d268d19cd..9bcf6ed89 100644 --- a/package.json +++ b/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", diff --git a/src/useTheme.test.ts b/src/useTheme.test.ts new file mode 100644 index 000000000..318226687 --- /dev/null +++ b/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(); + }); +}); diff --git a/yarn.lock b/yarn.lock index e024c00cd..1d7810801 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2787,6 +2787,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" @@ -6877,6 +6885,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"