Merge matrix-react-sdk into element-web
Merge remote-tracking branch 'repomerge/t3chguy/repomerge' into t3chguy/repo-merge Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
commit
f0ee7f7905
3265 changed files with 484599 additions and 699 deletions
159
test/unit-tests/settings/watchers/FontWatcher-test.tsx
Normal file
159
test/unit-tests/settings/watchers/FontWatcher-test.tsx
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 r00ster91 <r00ster91@proton.me>
|
||||
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.
|
||||
*/
|
||||
|
||||
import { sleep } from "matrix-js-sdk/src/utils";
|
||||
|
||||
import SettingsStore from "../../../../src/settings/SettingsStore";
|
||||
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
||||
import { FontWatcher } from "../../../../src/settings/watchers/FontWatcher";
|
||||
import { Action } from "../../../../src/dispatcher/actions";
|
||||
import { untilDispatch } from "../../../test-utils";
|
||||
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
|
||||
|
||||
async function setSystemFont(font: string | false): Promise<void> {
|
||||
await SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, font || "");
|
||||
await SettingsStore.setValue("useSystemFont", null, SettingLevel.DEVICE, !!font);
|
||||
await untilDispatch(Action.UpdateSystemFont);
|
||||
await sleep(1); // await the FontWatcher doing its action
|
||||
}
|
||||
|
||||
async function setUseBundledEmojiFont(use: boolean): Promise<void> {
|
||||
await SettingsStore.setValue("useBundledEmojiFont", null, SettingLevel.DEVICE, use);
|
||||
await untilDispatch(Action.UpdateSystemFont);
|
||||
await sleep(1); // await the FontWatcher doing its action
|
||||
}
|
||||
|
||||
const getFontFamily = () => {
|
||||
return document.body.style.getPropertyValue(FontWatcher.FONT_FAMILY_CUSTOM_PROPERTY);
|
||||
};
|
||||
const getEmojiFontFamily = () => {
|
||||
return document.body.style.getPropertyValue(FontWatcher.EMOJI_FONT_FAMILY_CUSTOM_PROPERTY);
|
||||
};
|
||||
|
||||
describe("FontWatcher", function () {
|
||||
it("should load font on start()", async () => {
|
||||
const watcher = new FontWatcher();
|
||||
await setSystemFont("Font Name");
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""`);
|
||||
await watcher.start();
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
|
||||
});
|
||||
|
||||
it("should load font on Action.OnLoggedIn", async () => {
|
||||
await setSystemFont("Font Name");
|
||||
await new FontWatcher().start();
|
||||
document.body.style.removeProperty(FontWatcher.FONT_FAMILY_CUSTOM_PROPERTY); // clear the fontFamily which was by start which we tested already
|
||||
defaultDispatcher.fire(Action.OnLoggedIn, true);
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
|
||||
});
|
||||
|
||||
it("should reset font on Action.OnLoggedOut", async () => {
|
||||
await setSystemFont("Font Name");
|
||||
const watcher = new FontWatcher();
|
||||
await watcher.start();
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
|
||||
defaultDispatcher.fire(Action.OnLoggedOut, true);
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""`);
|
||||
});
|
||||
|
||||
describe("Sets font as expected", () => {
|
||||
let fontWatcher: FontWatcher;
|
||||
beforeEach(async () => {
|
||||
fontWatcher = new FontWatcher();
|
||||
await fontWatcher.start();
|
||||
});
|
||||
afterEach(() => {
|
||||
fontWatcher.stop();
|
||||
});
|
||||
|
||||
it("encloses the fonts by double quotes and sets them as the system font", async () => {
|
||||
await setSystemFont("Fira Sans Thin, Commodore 64");
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Fira Sans Thin","Commodore 64", Twemoji"`);
|
||||
});
|
||||
it("does not add double quotes if already present and sets the font as the system font", async () => {
|
||||
await setSystemFont(`"Commodore 64"`);
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Commodore 64", Twemoji"`);
|
||||
});
|
||||
it("trims whitespace, encloses the fonts by double quotes, and sets them as the system font", async () => {
|
||||
await setSystemFont(` Fira Code , "Commodore 64" `);
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Fira Code","Commodore 64", Twemoji"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Sets bundled emoji font as expected", () => {
|
||||
let fontWatcher: FontWatcher;
|
||||
beforeEach(async () => {
|
||||
await setSystemFont(false);
|
||||
fontWatcher = new FontWatcher();
|
||||
await fontWatcher.start();
|
||||
});
|
||||
afterEach(() => {
|
||||
fontWatcher.stop();
|
||||
});
|
||||
|
||||
it("by default adds Twemoji font", async () => {
|
||||
expect(getEmojiFontFamily()).toMatchInlineSnapshot(`"Twemoji"`);
|
||||
});
|
||||
it("does not add Twemoji font when disabled", async () => {
|
||||
await setUseBundledEmojiFont(false);
|
||||
expect(getEmojiFontFamily()).toMatchInlineSnapshot(`""`);
|
||||
});
|
||||
it("works in conjunction with useSystemFont", async () => {
|
||||
await setSystemFont(`"Commodore 64"`);
|
||||
await setUseBundledEmojiFont(true);
|
||||
expect(getFontFamily()).toMatchInlineSnapshot(`""Commodore 64", Twemoji"`);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Migrates baseFontSize", () => {
|
||||
let watcher: FontWatcher | undefined;
|
||||
|
||||
beforeEach(() => {
|
||||
document.documentElement.style.fontSize = "14px";
|
||||
watcher = new FontWatcher();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
watcher!.stop();
|
||||
});
|
||||
|
||||
it("should not run the migration", async () => {
|
||||
await watcher!.start();
|
||||
expect(SettingsStore.getValue("fontSizeDelta")).toBe(0);
|
||||
});
|
||||
|
||||
it("should migrate from V1 font size to V3", async () => {
|
||||
await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 13);
|
||||
await watcher!.start();
|
||||
// 13px (V1 font size) + 5px (V1 offset) + 1px (root font size increase) - 14px (default browser font size) = 5px
|
||||
expect(SettingsStore.getValue("fontSizeDelta")).toBe(5);
|
||||
// baseFontSize should be cleared
|
||||
expect(SettingsStore.getValue("baseFontSize")).toBe(0);
|
||||
});
|
||||
|
||||
it("should migrate from V2 font size to V3 using browser font size", async () => {
|
||||
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
|
||||
await watcher!.start();
|
||||
// 18px - 14px (default browser font size) = 2px
|
||||
expect(SettingsStore.getValue("fontSizeDelta")).toBe(4);
|
||||
// baseFontSize should be cleared
|
||||
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
|
||||
});
|
||||
|
||||
it("should migrate from V2 font size to V3 using fallback font size", async () => {
|
||||
document.documentElement.style.fontSize = "";
|
||||
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
|
||||
await watcher!.start();
|
||||
// 18px - 16px (fallback) = 2px
|
||||
expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
|
||||
// baseFontSize should be cleared
|
||||
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
187
test/unit-tests/settings/watchers/ThemeWatcher-test.tsx
Normal file
187
test/unit-tests/settings/watchers/ThemeWatcher-test.tsx
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 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.
|
||||
*/
|
||||
|
||||
import SettingsStore from "../../../../src/settings/SettingsStore";
|
||||
import ThemeWatcher from "../../../../src/settings/watchers/ThemeWatcher";
|
||||
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
||||
|
||||
function makeMatchMedia(values: any) {
|
||||
class FakeMediaQueryList {
|
||||
matches: false;
|
||||
media?: null;
|
||||
onchange?: null;
|
||||
addListener() {}
|
||||
removeListener() {}
|
||||
addEventListener() {}
|
||||
removeEventListener() {}
|
||||
dispatchEvent() {
|
||||
return true;
|
||||
}
|
||||
|
||||
constructor(query: string) {
|
||||
this.matches = values[query];
|
||||
}
|
||||
}
|
||||
|
||||
return function matchMedia(query: string) {
|
||||
return new FakeMediaQueryList(query) as unknown as MediaQueryList;
|
||||
};
|
||||
}
|
||||
|
||||
function makeGetValue(values: any) {
|
||||
return function getValue<T = any>(settingName: string, _roomId: string | null = null, _excludeDefault = false): T {
|
||||
return values[settingName];
|
||||
};
|
||||
}
|
||||
|
||||
function makeGetValueAt(values: any) {
|
||||
return function getValueAt(
|
||||
_level: SettingLevel,
|
||||
settingName: string,
|
||||
_roomId: string | null = null,
|
||||
_explicit = false,
|
||||
_excludeDefault = false,
|
||||
): any {
|
||||
return values[settingName];
|
||||
};
|
||||
}
|
||||
|
||||
describe("ThemeWatcher", function () {
|
||||
it("should choose a light theme by default", () => {
|
||||
// Given no system settings
|
||||
global.matchMedia = makeMatchMedia({});
|
||||
|
||||
// Then getEffectiveTheme returns light
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light");
|
||||
});
|
||||
|
||||
it("should choose default theme if system settings are inconclusive", () => {
|
||||
// Given no system settings but we asked to use them
|
||||
global.matchMedia = makeMatchMedia({});
|
||||
SettingsStore.getValue = makeGetValue({
|
||||
use_system_theme: true,
|
||||
theme: "light",
|
||||
});
|
||||
|
||||
// Then getEffectiveTheme returns light
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light");
|
||||
});
|
||||
|
||||
it("should choose a dark theme if that is selected", () => {
|
||||
// Given system says light high contrast but theme is set to dark
|
||||
global.matchMedia = makeMatchMedia({
|
||||
"(prefers-contrast: more)": true,
|
||||
"(prefers-color-scheme: light)": true,
|
||||
});
|
||||
SettingsStore.getValueAt = makeGetValueAt({ theme: "dark" });
|
||||
|
||||
// Then getEffectiveTheme returns dark
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("dark");
|
||||
});
|
||||
|
||||
it("should choose a light theme if that is selected", () => {
|
||||
// Given system settings say dark high contrast but theme set to light
|
||||
global.matchMedia = makeMatchMedia({
|
||||
"(prefers-contrast: more)": true,
|
||||
"(prefers-color-scheme: dark)": true,
|
||||
});
|
||||
SettingsStore.getValueAt = makeGetValueAt({ theme: "light" });
|
||||
|
||||
// Then getEffectiveTheme returns light
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light");
|
||||
});
|
||||
|
||||
it("should choose a light-high-contrast theme if that is selected", () => {
|
||||
// Given system settings say dark and theme set to light-high-contrast
|
||||
global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
|
||||
SettingsStore.getValueAt = makeGetValueAt({ theme: "light-high-contrast" });
|
||||
|
||||
// Then getEffectiveTheme returns light-high-contrast
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light-high-contrast");
|
||||
});
|
||||
|
||||
it("should choose a light theme if system prefers it (via default)", () => {
|
||||
// Given system prefers lightness, even though we did not
|
||||
// click "Use system theme" or choose a theme explicitly
|
||||
global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: light)": true });
|
||||
SettingsStore.getValueAt = makeGetValueAt({});
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns light
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light");
|
||||
});
|
||||
|
||||
it("should choose a dark theme if system prefers it (via default)", () => {
|
||||
// Given system prefers darkness, even though we did not
|
||||
// click "Use system theme" or choose a theme explicitly
|
||||
global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
|
||||
SettingsStore.getValueAt = makeGetValueAt({});
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns dark
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("dark");
|
||||
});
|
||||
|
||||
it("should choose a light theme if system prefers it (explicit)", () => {
|
||||
// Given system prefers lightness
|
||||
global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: light)": true });
|
||||
SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns light
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light");
|
||||
});
|
||||
|
||||
it("should choose a dark theme if system prefers it (explicit)", () => {
|
||||
// Given system prefers darkness
|
||||
global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
|
||||
SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns dark
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("dark");
|
||||
});
|
||||
|
||||
it("should choose a high-contrast theme if system prefers it", () => {
|
||||
// Given system prefers high contrast and light
|
||||
global.matchMedia = makeMatchMedia({
|
||||
"(prefers-contrast: more)": true,
|
||||
"(prefers-color-scheme: light)": true,
|
||||
});
|
||||
SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns light-high-contrast
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("light-high-contrast");
|
||||
});
|
||||
|
||||
it("should not choose a high-contrast theme if not available", () => {
|
||||
// Given system prefers high contrast and dark, but we don't (yet)
|
||||
// have a high-contrast dark theme
|
||||
global.matchMedia = makeMatchMedia({
|
||||
"(prefers-contrast: more)": true,
|
||||
"(prefers-color-scheme: dark)": true,
|
||||
});
|
||||
SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
|
||||
SettingsStore.getValue = makeGetValue({ use_system_theme: true });
|
||||
|
||||
// Then getEffectiveTheme returns dark
|
||||
const themeWatcher = new ThemeWatcher();
|
||||
expect(themeWatcher.getEffectiveTheme()).toBe("dark");
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue