Skip to content

Commit

Permalink
Test useTheme hook (#2625)
Browse files Browse the repository at this point in the history
* Test useTheme hook
  • Loading branch information
toger5 authored Sep 24, 2024
1 parent ed35d6b commit d7b0676
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
78 changes: 78 additions & 0 deletions src/useTheme.test.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
15 changes: 15 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit d7b0676

Please sign in to comment.