-
Notifications
You must be signed in to change notification settings - Fork 33
95 lines (74 loc) · 3.16 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
90
91
92
93
94
95
name: Visual test
on:
pull_request:
jobs:
ci:
if: ${{ github.repository == 'primer/brand' }}
name: Storybook
runs-on: ubuntu-latest
env:
NODE_ENV: test
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Node
uses: actions/setup-node@v2
with:
node-version: 18
- name: Cache dependencies
uses: actions/cache@v2
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 error screenshots
uses: actions/upload-artifact@v3
if: steps.playwright-step.outcome != 'success'
with:
name: playwright-test-results
path: playwright-test-results
- name: Upload test results
if: always()
uses: actions/upload-artifact@v3
with:
name: playwright-report
path: playwright-report
- name: Comment on the PR about no visual differences
if: steps.playwright-step.outcome != 'success'
uses: phulsechinmay/[email protected]
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/[email protected]
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'