appearance-theme.spec.ts

appearance-theme.spec.tstests/e2e/specs/appearance-theme.spec.tsraw ← specs5,116 B← Back to the app
1/**
2 * E2E regression guard: Appearance → theme (light / dark / system).
3 *
4 * This is the E2E half of the "Appearance theme not working" fix. The root
5 * cause was a token-format mismatch: the core theme tokens in globals.css
6 * were stored as FULL `oklch(…)` colors while tailwind.config.ts wrapped them
7 * as `oklch(var(--token) / <alpha-value>)`, producing the invalid nested
8 * `oklch(oklch(…))`. The browser resolved that to TRANSPARENT, so every
9 * `bg-*` / `text-*` / `border-*` utility painted nothing and toggling
10 * `.dark` produced no visible change.
11 *
12 * The spec asserts the OBSERVABLE behavior (the actual bug), not the
13 * implementation:
14 *   1. switching to Dark toggles `.dark` on <html> AND paints a non-transparent
15 *      body background that differs from the light one (the transparency
16 *      regression would make both transparent/identical).
17 *   2. the choice persists to localStorage (`factory-theme`) and survives a
18 *      hard reload.
19 *   3. switching back to Light reverses it.
20 *
21 * Uses a fresh (auto-deleted) workspace so the test is self-contained.
22 * The Appearance settings route is `/w/:workspace/settings/appearance`.
23 */
24import type { Page } from "@playwright/test";
25import { expect, test } from "../fixtures";
26 
27/** Read a theme signal straight from the page. */
28interface ThemeSignal {
29  dark: boolean;
30  bodyBg: string;
31  stored: string;
32}
33 
34function readTheme(page: Page): Promise<ThemeSignal> {
35  return page.evaluate(() => ({
36    dark: document.documentElement.classList.contains("dark"),
37    bodyBg: getComputedStyle(document.body).backgroundColor,
38    stored: localStorage.getItem("factory-theme") ?? "",
39  }));
40}
41 
42function isTransparent(bg: string): boolean {
43  // `rgba(0, 0, 0, 0)` / `transparent` — the exact symptom of the bug.
44  return /rgba?\([^)]*,\s*(0|0\.\d+)\s*\)$/.test(bg) || bg === "transparent";
45}
46 
47async function gotoAppearance(page: Page, workspaceId: string): Promise<void> {
48  await page.goto(`/w/${workspaceId}/settings/appearance`);
49  // Wait for the three theme option buttons to render.
50  await expect(
51    page.getByRole("button", { name: /^dark$/i }),
52  ).toBeVisible();
53}
54 
55test("theme: dark toggles .dark, paints an opaque distinct bg, and persists", async ({
56  authPage,
57  freshWorkspace,
58}) => {
59  const ws = await freshWorkspace("E2E Theme");
60  await gotoAppearance(authPage, ws.id);
61 
62  const light = await readTheme(authPage);
63  // Sanity: we start light (no stored preference in this fresh context).
64  expect(light.dark).toBe(false);
65  expect(isTransparent(light.bodyBg)).toBe(false);
66 
67  // 1) Switch to Dark.
68  await authPage.getByRole("button", { name: /^dark$/i }).click();
69  await expect.poll(async () => (await readTheme(authPage)).dark).toBe(true);
70  const dark = await readTheme(authPage);
71  expect(dark.dark).toBe(true);
72  expect(dark.stored).toBe("dark");
73  // The regression: body bg was transparent in BOTH themes. It must now paint,
74  // and it must differ from the light value.
75  expect(isTransparent(dark.bodyBg)).toBe(false);
76  expect(dark.bodyBg).not.toBe(light.bodyBg);
77 
78  // 2) Persists across a hard reload (localStorage + re-apply on load).
79  await authPage.reload();
80  await expect.poll(async () => (await readTheme(authPage)).dark).toBe(true);
81  expect((await readTheme(authPage)).stored).toBe("dark");
82 
83  // 3) The dark class is global — a different route sees it too (not scoped
84  //    to the settings page).
85  await authPage.goto(`/w/${ws.id}/settings`);
86  await expect
87    .poll(async () =>
88      authPage.evaluate(() => document.documentElement.classList.contains("dark")),
89    )
90    .toBe(true);
91 
92  // 4) Switch back to Light — reverses cleanly.
93  await authPage.goto(`/w/${ws.id}/settings/appearance`);
94  await authPage.getByRole("button", { name: /^light$/i }).click();
95  await expect.poll(async () => (await readTheme(authPage)).dark).toBe(false);
96  const backToLight = await readTheme(authPage);
97  expect(backToLight.stored).toBe("light");
98  expect(isTransparent(backToLight.bodyBg)).toBe(false);
99  expect(backToLight.bodyBg).toBe(light.bodyBg);
100});
101 
102test("theme: system follows the OS preference via .dark sync", async ({
103  authPage,
104  freshWorkspace,
105}) => {
106  const ws = await freshWorkspace("E2E Theme System");
107  await gotoAppearance(authPage, ws.id);
108 
109  // No stored preference → the store defaults to "system".
110  await authPage.evaluate(() => localStorage.removeItem("factory-theme"));
111  await authPage.reload();
112  await gotoAppearance(authPage, ws.id);
113  await authPage.getByRole("button", { name: /^system$/i }).click();
114 
115  // Emulate a DARK OS: system must apply .dark.
116  await authPage.emulateMedia({ colorScheme: "dark" });
117  await expect
118    .poll(async () =>
119      authPage.evaluate(() => document.documentElement.classList.contains("dark")),
120    )
121    .toBe(true);
122 
123  // Emulate a LIGHT OS: system must drop .dark (the media-query listener
124  // re-applies on change).
125  await authPage.emulateMedia({ colorScheme: "light" });
126  await expect
127    .poll(async () =>
128      authPage.evaluate(() => document.documentElement.classList.contains("dark")),
129    )
130    .toBe(false);
131});
132