element-web/test/unit-tests/theme-test.ts

173 lines
6.2 KiB
TypeScript
Raw Normal View History

2022-09-28 12:42:40 +02:00
/*
Copyright 2024 New Vector Ltd.
2022-09-28 12:42:40 +02:00
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
2022-09-28 12:42:40 +02:00
*/
import SettingsStore from "../../src/settings/SettingsStore";
import { enumerateThemes, getOrderedThemes, setTheme } from "../../src/theme";
2022-09-28 12:42:40 +02:00
2022-12-12 12:24:14 +01:00
describe("theme", () => {
afterEach(() => {
jest.restoreAllMocks();
});
2022-12-12 12:24:14 +01:00
describe("setTheme", () => {
let lightTheme: HTMLStyleElement;
let darkTheme: HTMLStyleElement;
let lightCustomTheme: HTMLStyleElement;
2022-09-28 12:42:40 +02:00
2022-09-28 15:25:16 +02:00
let spyQuerySelectorAll: jest.MockInstance<NodeListOf<Element>, [selectors: string]>;
let spyClassList: jest.SpyInstance<void, string[], any>;
2022-09-28 15:25:16 +02:00
2022-09-28 12:42:40 +02:00
beforeEach(() => {
const styles = ["light", "dark", "light-custom", "dark-custom"].map(
(theme) =>
({
dataset: {
mxTheme: theme,
},
disabled: true,
href: "fake URL",
onload: (): void => void 0,
}) as unknown as HTMLStyleElement,
);
2022-09-28 12:42:40 +02:00
lightTheme = styles[0];
darkTheme = styles[1];
lightCustomTheme = styles[2];
2022-09-28 12:42:40 +02:00
2022-12-12 12:24:14 +01:00
jest.spyOn(document.body, "style", "get").mockReturnValue([] as any);
spyQuerySelectorAll = jest.spyOn(document, "querySelectorAll").mockReturnValue(styles as any);
spyClassList = jest.spyOn(document.body.classList, "add");
2022-09-28 12:42:40 +02:00
});
afterEach(() => {
jest.useRealTimers();
});
2022-12-12 12:24:14 +01:00
it("should switch theme on onload call", async () => {
2022-09-28 12:42:40 +02:00
// When
2022-12-12 12:24:14 +01:00
await new Promise((resolve) => {
setTheme("light").then(resolve);
lightTheme.onload!({} as Event);
2022-09-28 12:42:40 +02:00
});
// Then
2022-12-12 12:24:14 +01:00
expect(spyQuerySelectorAll).toHaveBeenCalledWith("[data-mx-theme]");
2023-03-01 16:23:35 +01:00
expect(spyQuerySelectorAll).toHaveBeenCalledTimes(1);
2022-09-28 12:42:40 +02:00
expect(lightTheme.disabled).toBe(false);
expect(darkTheme.disabled).toBe(true);
expect(spyClassList).toHaveBeenCalledWith("cpd-theme-light");
});
it("should switch to dark", async () => {
// When
await new Promise((resolve) => {
setTheme("dark").then(resolve);
darkTheme.onload!({} as Event);
});
// Then
expect(spyClassList).toHaveBeenCalledWith("cpd-theme-dark");
2022-09-28 12:42:40 +02:00
});
2022-12-12 12:24:14 +01:00
it("should reject promise on onerror call", () => {
return expect(
new Promise((resolve) => {
setTheme("light").catch((e) => resolve(e));
lightTheme.onerror!("call onerror");
2022-12-12 12:24:14 +01:00
}),
).resolves.toBe("call onerror");
2022-09-28 12:42:40 +02:00
});
2022-12-12 12:24:14 +01:00
it("should switch theme if CSS are preloaded", async () => {
2022-09-28 12:42:40 +02:00
// When
2022-12-12 12:24:14 +01:00
jest.spyOn(document, "styleSheets", "get").mockReturnValue([lightTheme] as any);
2022-09-28 12:42:40 +02:00
2022-12-12 12:24:14 +01:00
await setTheme("light");
2022-09-28 12:42:40 +02:00
// Then
expect(lightTheme.disabled).toBe(false);
expect(darkTheme.disabled).toBe(true);
});
2022-12-12 12:24:14 +01:00
it("should switch theme if CSS is loaded during pooling", async () => {
2022-09-28 12:42:40 +02:00
// When
jest.useFakeTimers();
2022-12-12 12:24:14 +01:00
await new Promise((resolve) => {
setTheme("light").then(resolve);
jest.spyOn(document, "styleSheets", "get").mockReturnValue([lightTheme] as any);
2022-09-28 12:42:40 +02:00
jest.advanceTimersByTime(200);
});
// Then
expect(lightTheme.disabled).toBe(false);
expect(darkTheme.disabled).toBe(true);
});
2022-12-12 12:24:14 +01:00
it("should reject promise if pooling maximum value is reached", () => {
2022-09-28 12:42:40 +02:00
jest.useFakeTimers();
2022-12-12 12:24:14 +01:00
return new Promise((resolve) => {
setTheme("light").catch(resolve);
2022-09-28 12:42:40 +02:00
jest.advanceTimersByTime(200 * 10);
});
});
it("applies a custom Compound theme", async () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([
{
name: "blue",
compound: {
"--cpd-color-icon-accent-tertiary": "var(--cpd-color-blue-800)",
"--cpd-color-text-action-accent": "var(--cpd-color-blue-900)",
},
},
]);
const spy = jest.spyOn(document.head, "appendChild").mockImplementation();
await new Promise((resolve) => {
setTheme("custom-blue").then(resolve);
lightCustomTheme.onload!({} as Event);
});
expect(spy).toHaveBeenCalled();
expect(spy.mock.calls[0][0].textContent).toMatchSnapshot();
spy.mockRestore();
});
2022-09-28 12:42:40 +02:00
});
describe("enumerateThemes", () => {
it("should return a list of themes", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([{ name: "pink" }]);
expect(enumerateThemes()).toEqual({
"light": "Light",
"light-high-contrast": "Light high contrast",
"dark": "Dark",
"custom-pink": "pink",
});
});
it("should be robust to malformed custom_themes values", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([23]);
expect(enumerateThemes()).toEqual({
"light": "Light",
"light-high-contrast": "Light high contrast",
"dark": "Dark",
});
});
});
describe("getOrderedThemes", () => {
it("should return a list of themes in the correct order", () => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue([{ name: "Zebra Striped" }, { name: "Apple Green" }]);
expect(getOrderedThemes()).toEqual([
{ id: "light", name: "Light" },
{ id: "dark", name: "Dark" },
{ id: "custom-Apple Green", name: "Apple Green" },
{ id: "custom-Zebra Striped", name: "Zebra Striped" },
]);
});
});
2022-09-28 12:42:40 +02:00
});