42 lines
2.2 KiB
TypeScript
42 lines
2.2 KiB
TypeScript
import { expect, loginAs, test } from "./fixtures";
|
|
|
|
// Playwright's default browser color-scheme emulation is "light", which
|
|
// would make styles.css's `@media (prefers-color-scheme: light)` block
|
|
// apply even with no `data-theme` attribute set, collapsing the "dark"
|
|
// and "light" reads below into the same value. Pin the emulated OS
|
|
// preference to dark so the initial (no localStorage) state is
|
|
// deterministic and the toggle's own explicit `data-theme` write -- not
|
|
// an OS-preference coincidence -- is what the test is proving out.
|
|
test.use({ colorScheme: "dark" });
|
|
|
|
test.describe("theme toggle", () => {
|
|
test("switching to light theme persists across reload and changes the rendered background", async ({ page }) => {
|
|
await loginAs(page, "hub-viewer");
|
|
await page.goto("/settings");
|
|
const darkBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
|
|
await page.getByRole("button", { name: "Light" }).click();
|
|
const lightBackground = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
|
|
expect(lightBackground).not.toBe(darkBackground);
|
|
await page.reload();
|
|
const afterReload = await page.evaluate(() => getComputedStyle(document.documentElement).backgroundColor);
|
|
expect(afterReload).toBe(lightBackground);
|
|
await page.getByRole("button", { name: "Dark" }).click();
|
|
});
|
|
|
|
test("appearance toggle exposes which theme is selected, not just the applied state", async ({ page }) => {
|
|
// Regression test alongside the density toggle fix: SettingsPage had no
|
|
// state tracking the current theme at all, so Dark/Light always
|
|
// rendered as the same solid pill regardless of which was active.
|
|
await loginAs(page, "hub-viewer");
|
|
await page.goto("/settings");
|
|
const dark = page.getByRole("button", { name: "Dark" });
|
|
const light = page.getByRole("button", { name: "Light" });
|
|
await expect(dark).toHaveAttribute("aria-pressed", "true");
|
|
await expect(light).toHaveAttribute("aria-pressed", "false");
|
|
await light.click();
|
|
await expect(dark).toHaveAttribute("aria-pressed", "false");
|
|
await expect(light).toHaveAttribute("aria-pressed", "true");
|
|
await dark.click();
|
|
});
|
|
});
|