Files
kandev/apps/web/e2e/tests/settings/settings-typography.spec.ts
T
2026-09-22 21:24:43 +01:00

65 lines
2.6 KiB
TypeScript

import { test, expect } from "../../fixtures/test-base";
test.describe("Settings typography contract on desktop", () => {
test("keeps page, section, and preference row roles distinct", async ({
testPage,
prCapture,
}) => {
await testPage.setViewportSize({ width: 1280, height: 900 });
await testPage.goto("/settings/preferences/appearance");
const pageTitle = testPage.getByRole("heading", { level: 2, name: "Appearance", exact: true });
const sectionTitle = testPage.getByRole("heading", {
level: 3,
name: "Appearance",
exact: true,
});
const card = testPage.getByTestId("theme-settings-card");
await expect(pageTitle).toBeVisible();
await expect(sectionTitle).toBeVisible();
await expect(card).toHaveAttribute("data-settings-row", "true");
const pageSize = await pageTitle.evaluate((element) =>
parseFloat(getComputedStyle(element).fontSize),
);
const sectionSize = await sectionTitle.evaluate((element) =>
parseFloat(getComputedStyle(element).fontSize),
);
expect(pageSize).toBeCloseTo(24, 1);
expect(sectionSize).toBeCloseTo(18, 1);
await expect(testPage.getByTestId("theme-settings-card").locator("button")).toHaveCount(1);
const controlBox = await testPage
.getByTestId("theme-settings-card")
.locator("button")
.boundingBox();
expect(controlBox).not.toBeNull();
expect(controlBox!.height).toBeGreaterThanOrEqual(28);
expect(await testPage.evaluate(() => document.documentElement.scrollWidth)).toBe(
await testPage.evaluate(() => document.documentElement.clientWidth),
);
await prCapture.screenshot("appearance-desktop-typography", {
caption: "Settings Appearance page with shared desktop typography roles",
});
});
test("uses one page heading on the combined Terminal and Editors route", async ({
testPage,
prCapture,
}) => {
await testPage.setViewportSize({ width: 1280, height: 900 });
await testPage.goto("/settings/preferences/terminal-editors");
await expect(testPage.getByTestId("terminal-font-select")).toBeVisible();
await expect(testPage.getByRole("heading", { level: 2 })).toHaveCount(1);
await expect(testPage.getByRole("heading", { level: 3, name: "Editors" })).toBeVisible();
expect(await testPage.evaluate(() => document.documentElement.scrollWidth)).toBe(
await testPage.evaluate(() => document.documentElement.clientWidth),
);
await prCapture.screenshot("terminal-editors-desktop-typography", {
caption: "Combined Terminal and Editors settings page",
});
});
});