Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-31 07:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Review:

Browse Source 
Use `.each` to shorten the tests.
This commit is contained in:
Timo
2024-09-24 21:35:25 +02:00
parent 7ad033ab39
commit 2f62c893bd
1 changed files with 20 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/useTheme.test.ts
View File

@@ -27,84 +27,40 @@ vi.mock("./UrlParams", () => ({
describe("useTheme", () => {
let originalClassList: DOMTokenList;
beforeEach(() => {
// Save the original classList so we can restore it later
// Save the original classList to setup spies
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);
vi.spyOn(originalClassList, "add");
vi.spyOn(originalClassList, "remove");
vi.spyOn(originalClassList, "item").mockReturnValue(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 });
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());
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",
expect(originalClassList.remove).toHaveBeenCalledWith(
"cpd-theme-light",
"cpd-theme-dark",
"cpd-theme-light-hc",
"cpd-theme-dark-hc",
);
expect(originalClassList.add).toHaveBeenCalledWith(...add);
});
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");