test(visual): add visual regression testing across all routes and the… · gitify-app/gitify@e594f20 · GitHub
Skip to content

Commit e594f20

Browse files
afonsojramosafonsojramos
authored
test(visual): add visual regression testing across all routes and themes (#3161)
1 parent b04806d commit e594f20

50 files changed

Lines changed: 829 additions & 23 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitattributes‎

Lines changed: 3 additions & 0 deletions

‎.github/workflows/test.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,49 @@ jobs:
3636
name: code-coverage-report
3737
path: coverage/lcov.info
3838

39+
visual-regression:
40+
name: Visual Regression
41+
# arm64 to match `scripts/visual.sh`, which cannot generate amd64 baselines
42+
# because Chromium segfaults under emulation on Apple Silicon.
43+
runs-on: ubuntu-24.04-arm
44+
permissions:
45+
contents: read
46+
47+
# The same image the baselines were generated with. The committed
48+
# screenshots are comparable only against an identical browser build and
49+
# font stack, which a bare runner does not provide.
50+
#
51+
# This tag must match the `playwright` devDependency, which ships the
52+
# matching browser build. Renovate groups the two so they always move
53+
# together; `scripts/visual.sh` reads the version straight from package.json.
54+
container: mcr.microsoft.com/playwright:v1.62.1-noble
55+
56+
steps:
57+
- name: Checkout
58+
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
59+
with:
60+
persist-credentials: false
61+
62+
- name: Setup Node.js
63+
uses: ./.github/actions/setup-node
64+
65+
- name: Run visual regression tests
66+
# The job already runs in the pinned image, so the script runs vitest
67+
# directly instead of starting another container.
68+
env:
69+
GITIFY_VISUAL_IN_CONTAINER: '1'
70+
run: pnpm test:visual
71+
72+
# Vitest writes the actual and diff images here; the reference stays in
73+
# __screenshots__. Download this to see what changed.
74+
- name: Archive visual diffs
75+
if: failure()
76+
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
77+
with:
78+
name: visual-regression-diffs
79+
path: .vitest-attachments/
80+
if-no-files-found: ignore
81+
3982
sonarqube:
4083
name: SonarQube Cloud Analysis
4184
runs-on: ubuntu-latest

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,15 @@ schema.graphql
2121
coverage
2222
*.lcov
2323

24+
# Visual regression screenshots. Only the Linux baselines CI compares against
25+
# are committed; anything generated on a developer's own OS would never match
26+
# it (font rendering differs) and must not become a baseline. Regenerate with
27+
# `pnpm test:visual:update`, which runs in the pinned Linux container.
28+
src/renderer/**/__screenshots__/**/*.png
29+
!src/renderer/**/__screenshots__/**/*-chromium-linux.png
30+
31+
# Actual/diff images written by a failing visual regression run
32+
.vitest-attachments/
33+
2434
# Mac Files
2535
.DS_Store

‎CONTRIBUTING.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,38 @@ pnpm test
5353
pnpm test -u
5454
```
5555

56+
#### Visual regression tests
57+
58+
`pnpm test` covers the DOM snapshots. Pixel-level regressions (colour tokens,
59+
spacing, theme changes) are covered separately by a browser-mode project that
60+
screenshots every route across the light, dark, accessibility, and Glass themes.
61+
62+
Screenshots only match when the browser build and font stack are identical, so
63+
both commands below run the suite inside a pinned Playwright container, and CI
64+
verifies against that same container. You do not need to install Playwright's
65+
browsers locally.
66+
67+
```shell
68+
# Verify against the committed baselines
69+
pnpm test:visual
70+
71+
# Regenerate them after an intentional UI change
72+
pnpm test:visual:update
73+
```
74+
75+
Both need Docker on an arm64 host, because Chromium crashes under amd64
76+
emulation on Apple Silicon. On any other machine, push the branch and read the
77+
diff from the Visual Regression job's `visual-regression-diffs` artifact.
78+
79+
Do not invoke the `browser [visual]` project through `vitest` directly. Vitest
80+
namespaces baselines per platform and creates missing ones automatically, so a
81+
bare run on macOS writes a fresh set from your working tree and then passes
82+
against it — reporting green even on a branch that has a real regression. A
83+
guard fails the run outside Linux rather than letting that happen.
84+
85+
Note that these baselines capture the `backdrop-filter` fallback for Glass, not
86+
the macOS native vibrancy material, which Chromium cannot render.
87+
5688
### Code Style & Conventions
5789

5890
- Linting and formatting are configured in `vite.config.ts` (the `lint` and `fmt` blocks). Please run `pnpm check` before submitting a PR.

‎package.json‎

Lines changed: 7 additions & 2 deletions

0 commit comments

Comments
 (0)