-
Notifications
You must be signed in to change notification settings - Fork 38
89 lines (69 loc) · 2.97 KB
/
visual_test_storybook.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
name: Visual test
on:
pull_request:
jobs:
ci:
if: ${{ github.repository == 'primer/brand' }}
name: Storybook
runs-on: ubuntu-24.04
env:
NODE_ENV: test
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Node
uses: actions/setup-node@v2
with:
node-version: 20
- name: Cache dependencies
uses: actions/cache@v4
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install Playwright
run: |
npx playwright install
npx playwright install-deps chromium
- name: Install dependencies
run: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps
- name: Build assets
run: NODE_ENV=test npm run build:lib && cd apps/storybook && npx storybook build
- name: Run visual tests
id: playwright-step
run: NODE_ENV=test npx start-server-and-test 'npx http-server ./apps/storybook/storybook-static -p 6006' 6006 'cd packages/e2e && npx playwright test'
continue-on-error: true
- name: Upload test results
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
- name: Comment on the PR about no visual differences
if: steps.playwright-step.outcome != 'success'
uses: phulsechinmay/rewritable-pr-comment@v0.2.1
with:
message: |
### ⚠️ Visual differences found
<details><summary>Our visual comparison tests found UI differences.</summary>
Please review the differences by using the test artifacts to ensure that the changes were intentional.
Artifacts can be downloaded and reviewed locally.
Download links are available at the bottom of the workflow summary screen.
##### Example:
If the changes are expected, please run `npm run test:visual:update-snapshots` to replace the previous fixtures.
</details>
[Review visual differences](https://github.com/primer/brand/actions/runs/${{ github.run_id }})
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
COMMENT_IDENTIFIER: 'visual-comparison-diff'
- name: Comment on the PR about no visual differences
if: steps.playwright-step.outcome == 'success'
uses: phulsechinmay/rewritable-pr-comment@v0.2.1
with:
message: |
### 🟢 No visual differences found
Our visual comparison tests did not find any differences in the UI.
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
COMMENT_IDENTIFIER: 'visual-comparison-diff'