Skip to content

Commit 5782879

Browse files
authored
chore: configure chromatic snapshot tests (#896)
Resolves: #444 Summary: This commit installs and configures a GH action for chromatic. Chromatic is used for snapshot testing build-over-build. Details: * chore: install chromatic * chore: add chromatic package.json script Suggested by the docs for convenience so that we can run chromatic like: ```console yarn run chromatic ... ``` * chore: gitignore storybook builds * ci: configure chromatic This action configures chromatic to run in CI on pushes to all branches. By running this in CI, we get the following: - snapshot (build-over-build) - checks in our CI The snapshots and build-over-build behavior are per branch; this way we can work on a feature branch without worrying about changes being made to mainline independently. * chore: remove manual storybook build from CI This is now the responsibility of Chromatic
1 parent eefca43 commit 5782879

File tree

5 files changed

+59
-4
lines changed

5 files changed

+59
-4
lines changed

.github/workflows/chromatic.yaml

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Note: Chromatic is a separate workflow for coder.yaml as suggested by the
2+
# chromatic docs. Explicitly, Chromatic works best on 'push' instead of other
3+
# event types (like pull request), keep in mind that it works build-over-build
4+
# by storing snapshots.
5+
#
6+
# SEE: https://www.chromatic.com/docs/ci
7+
name: "Chromatic"
8+
9+
# Chromatic works best with push events, not pull_request or other event types.
10+
on: push
11+
12+
jobs:
13+
chromatic-deployment:
14+
# REMARK: this is only used to build storybook and deploy it to Chromatic.
15+
runs-on: ubuntu-latest
16+
17+
steps:
18+
- uses: actions/checkout@v3
19+
with:
20+
# Required by Chromatic for build-over-build history, otherwise we
21+
# only get 1 commit on shallow checkout.
22+
fetch-depth: 0
23+
24+
- name: Install dependencies
25+
run: cd site && yarn
26+
27+
# This step is not meant for mainline because any detected changes to
28+
# storybook snapshots will require manual approval/review in order for
29+
# the check to pass. This is desired in PRs, but not in mainline.
30+
- name: Publish to Chromatic (non-mainline)
31+
if: github.ref != 'refs/heads/main'
32+
uses: chromaui/action@v1
33+
with:
34+
buildScriptName: "storybook:build"
35+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
36+
workingDir: "./site"
37+
38+
# This is a separate step for mainline only that auto accepts and changes
39+
# instead of holding CI up. Since we squash/merge, this is defensive to
40+
# avoid the same changeset from requiring review once squashed into
41+
# main. Chromatic is supposed to be able to detect that we use squash
42+
# commits, but it's good to be defensive in case, otherwise CI remains
43+
# infinitely "in progress" in mainline unless we re-review each build.
44+
- name: Publish to Chromatic (mainline)
45+
if: github.ref == 'refs/heads/main'
46+
uses: chromaui/action@v1
47+
with:
48+
autoAcceptChanges: true
49+
buildScriptName: "storybook:build"
50+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
51+
workingDir: "./site"

.github/workflows/coder.yaml

-4
Original file line numberDiff line numberDiff line change
@@ -387,10 +387,6 @@ jobs:
387387
run: yarn build
388388
working-directory: site
389389

390-
- name: Build Storybook
391-
run: yarn storybook:build
392-
working-directory: site
393-
394390
- run: yarn test:coverage
395391
working-directory: site
396392

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ site/test-results/
2525
site/yarn-error.log
2626
coverage/
2727
site/**/*.typegen.ts
28+
site/build-storybook.log
2829

2930
# Build
3031
dist/

site/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"postinstall": "yarn typegen",
88
"build": "NODE_ENV=production webpack build --config=webpack.prod.ts",
99
"build:analyze": "NODE_ENV=production webpack --profile --progress --json --config=webpack.prod.ts > out/stats.json && webpack-bundle-analyzer out/stats.json out",
10+
"chromatic": "chromatic",
1011
"dev": "webpack-dev-server --config=webpack.dev.ts",
1112
"format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
1213
"format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
@@ -59,6 +60,7 @@
5960
"@typescript-eslint/eslint-plugin": "5.17.0",
6061
"@typescript-eslint/parser": "5.17.0",
6162
"@xstate/cli": "0.1.5",
63+
"chromatic": "6.5.3",
6264
"copy-webpack-plugin": "10.2.4",
6365
"css-loader": "6.7.1",
6466
"css-minimizer-webpack-plugin": "3.4.1",

site/yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -5484,6 +5484,11 @@ chownr@^2.0.0:
54845484
resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
54855485
integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
54865486

5487+
chromatic@6.5.3:
5488+
version "6.5.3"
5489+
resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.5.3.tgz#dd96e6df6d2ed9d0c79277dc18b06a089080ce62"
5490+
integrity sha512-6Wy2lsNaojY5wTvobE3WV5VrQ5oP7B8kal6zWGrxu9g7Qbenb2cTcQ5SYgQY7tzT0Ed0zeHVyQm4TMmKz+XfXA==
5491+
54875492
chrome-trace-event@^1.0.2:
54885493
version "1.0.3"
54895494
resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"

0 commit comments

Comments
 (0)