Mohamed BoudraandGitHub
602860625c
* feat(app): separate content typography from interface size Readable prose benefits from its own scale without inflating navigation and controls. Preserve existing users’ rendered size during migration while giving fresh desktop installs a 15px content default. * test(app): cover independent content typography The appearance journey now verifies that changing interface size leaves content size intact. Timeline traversal yields when a test deliberately holds the requested page, so the helper no longer waits on its own gate. * test(desktop): cover independent content typography The desktop appearance regression follows the renamed Interface control and verifies it does not alter Content size.
53 lines
2.0 KiB
JavaScript
53 lines
2.0 KiB
JavaScript
const SETTINGS_TIMEOUT_MS = 5_000;
|
|
|
|
function assert(condition, message) {
|
|
if (!condition) throw new Error(message);
|
|
}
|
|
|
|
async function readFontSize(locator) {
|
|
return locator.evaluate((element) => getComputedStyle(element).fontSize);
|
|
}
|
|
|
|
export async function runAppearanceFontSizeRegression(page) {
|
|
await page.getByRole("button", { name: "Settings", exact: true }).click();
|
|
await page.getByRole("button", { name: "Appearance", exact: true }).click();
|
|
|
|
await page.getByLabel("Theme: System", { exact: true }).click();
|
|
await page.getByText("Pure black", { exact: true }).click();
|
|
|
|
const interfaceSizeInput = page.getByRole("textbox", { name: "Interface font size" });
|
|
const contentSizeInput = page.getByRole("textbox", { name: "Content font size" });
|
|
const sectionTitle = page.getByText("Theme", { exact: true }).first();
|
|
await interfaceSizeInput.waitFor({ state: "visible", timeout: SETTINGS_TIMEOUT_MS });
|
|
|
|
assert((await interfaceSizeInput.inputValue()) === "14", "Interface size did not start at 14px");
|
|
assert((await contentSizeInput.inputValue()) === "15", "Content size did not start at 15px");
|
|
assert(
|
|
(await readFontSize(sectionTitle)) === "12px",
|
|
"Theme label did not start at the default 12px ramp size",
|
|
);
|
|
|
|
await interfaceSizeInput.fill("12");
|
|
await interfaceSizeInput.press("Tab");
|
|
|
|
await page.waitForFunction(
|
|
() => {
|
|
const interfaceInput = document.querySelector('input[aria-label="Interface font size"]');
|
|
const contentInput = document.querySelector('input[aria-label="Content font size"]');
|
|
const themeLabel = [...document.querySelectorAll("div")].find(
|
|
(element) => element.children.length === 0 && element.textContent?.trim() === "Theme",
|
|
);
|
|
return (
|
|
interfaceInput?.value === "12" &&
|
|
contentInput?.value === "15" &&
|
|
themeLabel instanceof HTMLElement &&
|
|
getComputedStyle(themeLabel).fontSize === "10px"
|
|
);
|
|
},
|
|
undefined,
|
|
{ timeout: SETTINGS_TIMEOUT_MS },
|
|
);
|
|
|
|
await page.getByRole("button", { name: "Back", exact: true }).click();
|
|
}
|