test: cover theme persistence and reduced motion

2026-09-21 17:48:17 +07:00
parent 4052350632
commit 2729e7a035
2 changed files with 40 additions and 1 deletions
@@ -0,0 +1,39 @@
+import { expect, test } from "@playwright/test";
+
+test("theme switcher persists the explicit choice and keeps browser metadata in sync", async ({ page, context }) => {
+  await context.clearCookies();
+  await page.goto("/");
+
+  await expect(page.locator("html")).not.toHaveAttribute("data-theme");
+  await expect(page.locator('[data-theme-option="system"]')).toHaveAttribute("aria-pressed", "true");
+
+  await page.locator('[data-theme-option="dark"]').click();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
+  await expect(page.locator('[data-theme-option="dark"]')).toHaveAttribute("aria-pressed", "true");
+  await expect(page.locator('meta[data-theme-color="dark"]')).toHaveAttribute("media", "all");
+  await expect(page.locator('meta[data-theme-color="light"]')).toHaveAttribute("media", "not all");
+
+  const cookies = await context.cookies();
+  expect(cookies.find(cookie => cookie.name === "rf4-theme")).toMatchObject({ value: "dark", sameSite: "Lax" });
+
+  await page.reload();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
+  await expect(page.locator('[data-theme-option="dark"]')).toHaveAttribute("aria-pressed", "true");
+
+  await page.locator('[data-theme-option="system"]').click();
+  await expect(page.locator("html")).not.toHaveAttribute("data-theme");
+  await expect(page.locator('[data-theme-option="system"]')).toHaveAttribute("aria-pressed", "true");
+  await expect(page.locator('meta[data-theme-color="dark"]')).toHaveAttribute("media", "(prefers-color-scheme: dark)");
+});
+
+test("reduced motion disables decorative animation loops", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await page.goto("/");
+
+  const motion = await page.locator(".pulse-orb span").evaluate(element => {
+    const style = getComputedStyle(element);
+    return { duration: style.animationDuration, iterations: style.animationIterationCount };
+  });
+  expect(motion.duration).toBe("0.01s");
+  expect(motion.iterations).toBe("1");
+});