From 0b0375772ac23d1fa8796cb357fc9465c4f24b85 Mon Sep 17 00:00:00 2001 From: G r e y Date: Wed, 6 Apr 2022 19:47:58 +0000 Subject: [PATCH 1/4] chore(site): configure chromatic snapshot tests Resolves: #444 Summary: This commit installs and configures a GH action for chromatic. Chromatic is used for snapshot testing build-over-build. Details: * chore(site): install chromatic * chore(site): 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. --- .github/workflows/chromatic.yaml | 39 ++++++++++++++++++++++++++++++++ .gitignore | 1 + site/package.json | 2 ++ site/yarn.lock | 5 ++++ 4 files changed, 47 insertions(+) create mode 100644 .github/workflows/chromatic.yaml diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml new file mode 100644 index 0000000000000..2a485a056b0e6 --- /dev/null +++ b/.github/workflows/chromatic.yaml @@ -0,0 +1,39 @@ +name: "Chromatic" + +on: push + +jobs: + chromatic-deployment: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 # <-- required by Chromatic for build-over-build history + + - name: Install dependencies + run: cd site && yarn + + # This step is not meant for mainline because any detected changes to + # storybook snapshots will require manual approval/review in order for + # the check to pass. This is desired in PRs, but not in mainline. + - name: Publish to Chromatic (non-mainline) + if: github.ref != "refs/heads/main" + uses: chromaui/action@v1 + with: + buildScriptName: "storybook:build" + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: "./site" + + # This is a separate step for mainline only that auto accepts and changes + # instead of holding CI up. Since we squash/merge, this is defensive to + # avoid the same changeset from requiring review once squashed into + # main. + - name: Publish to Chromatic (mainline) + if: github.ref == "refs/heads/main" + uses: chromaui/action@v1 + with: + autoAcceptChanges: true + buildScriptName: "storybook:build" + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: "./site" diff --git a/.gitignore b/.gitignore index a35415467ce85..940c2eef38590 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ site/test-results/ site/yarn-error.log coverage/ site/**/*.typegen.ts +site/build-storybook.log # Build dist/ diff --git a/site/package.json b/site/package.json index 931c55a9bfde0..0adbce24ed63e 100644 --- a/site/package.json +++ b/site/package.json @@ -7,6 +7,7 @@ "postinstall": "yarn typegen", "build": "NODE_ENV=production webpack build --config=webpack.prod.ts", "build:analyze": "NODE_ENV=production webpack --profile --progress --json --config=webpack.prod.ts > out/stats.json && webpack-bundle-analyzer out/stats.json out", + "chromatic": "chromatic", "dev": "webpack-dev-server --config=webpack.dev.ts", "format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'", "format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'", @@ -59,6 +60,7 @@ "@typescript-eslint/eslint-plugin": "5.17.0", "@typescript-eslint/parser": "5.17.0", "@xstate/cli": "0.1.5", + "chromatic": "6.5.3", "copy-webpack-plugin": "10.2.4", "css-loader": "6.7.1", "css-minimizer-webpack-plugin": "3.4.1", diff --git a/site/yarn.lock b/site/yarn.lock index 74e49810e7539..7e6111932d1c9 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -5484,6 +5484,11 @@ chownr@^2.0.0: resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== +chromatic@6.5.3: + version "6.5.3" + resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.5.3.tgz#dd96e6df6d2ed9d0c79277dc18b06a089080ce62" + integrity sha512-6Wy2lsNaojY5wTvobE3WV5VrQ5oP7B8kal6zWGrxu9g7Qbenb2cTcQ5SYgQY7tzT0Ed0zeHVyQm4TMmKz+XfXA== + chrome-trace-event@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" From cf8975e9cf1c041f2cf6692760843d7a1a453c5f Mon Sep 17 00:00:00 2001 From: G r e y Date: Wed, 6 Apr 2022 20:54:13 +0000 Subject: [PATCH 2/4] fixup! chore(site): configure chromatic snapshot tests --- .github/workflows/chromatic.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml index 2a485a056b0e6..28d366d17d2d4 100644 --- a/.github/workflows/chromatic.yaml +++ b/.github/workflows/chromatic.yaml @@ -18,7 +18,7 @@ jobs: # storybook snapshots will require manual approval/review in order for # the check to pass. This is desired in PRs, but not in mainline. - name: Publish to Chromatic (non-mainline) - if: github.ref != "refs/heads/main" + if: github.ref != 'refs/heads/main' uses: chromaui/action@v1 with: buildScriptName: "storybook:build" @@ -30,7 +30,7 @@ jobs: # avoid the same changeset from requiring review once squashed into # main. - name: Publish to Chromatic (mainline) - if: github.ref == "refs/heads/main" + if: github.ref == 'refs/heads/main' uses: chromaui/action@v1 with: autoAcceptChanges: true From 09150fad5aa844b0b01c7ed4e0321adba756ff5c Mon Sep 17 00:00:00 2001 From: G r e y Date: Wed, 6 Apr 2022 21:19:36 +0000 Subject: [PATCH 3/4] Improve comments --- .github/workflows/chromatic.yaml | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml index 28d366d17d2d4..17afc06892d47 100644 --- a/.github/workflows/chromatic.yaml +++ b/.github/workflows/chromatic.yaml @@ -1,15 +1,25 @@ +# Note: Chromatic is a separate workflow for coder.yaml as suggested by the +# chromatic docs. Explicitly, Chromatic works best on 'push' instead of other +# event types (like pull request), keep in mind that it works build-over-build +# by storing snapshots. +# +# SEE: https://www.chromatic.com/docs/ci name: "Chromatic" +# Chromatic works best with push events, not pull_request or other event types. on: push jobs: chromatic-deployment: + # REMARK: this is only used to build storybook and deploy it to Chromatic. runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 with: - fetch-depth: 0 # <-- required by Chromatic for build-over-build history + # Required by Chromatic for build-over-build history, otherwise we + # only get 1 commit on shallow checkout. + fetch-depth: 0 - name: Install dependencies run: cd site && yarn @@ -28,7 +38,9 @@ jobs: # This is a separate step for mainline only that auto accepts and changes # instead of holding CI up. Since we squash/merge, this is defensive to # avoid the same changeset from requiring review once squashed into - # main. + # main. Chromatic is supposed to be able to detect that we use squash + # commits, but it's good to be defensive in case, otherwise CI remains + # infinitely "in progress" in mainline unless we re-review each build. - name: Publish to Chromatic (mainline) if: github.ref == 'refs/heads/main' uses: chromaui/action@v1 From 3df9af19be3b89c954a00aa370fca23d94afba40 Mon Sep 17 00:00:00 2001 From: G r e y Date: Wed, 6 Apr 2022 21:20:10 +0000 Subject: [PATCH 4/4] chore: remove manual storybook build from CI This is now the responsibility of Chromatic --- .github/workflows/coder.yaml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.github/workflows/coder.yaml b/.github/workflows/coder.yaml index 366553bcc0b86..7b7344ceb0b0b 100644 --- a/.github/workflows/coder.yaml +++ b/.github/workflows/coder.yaml @@ -387,10 +387,6 @@ jobs: run: yarn build working-directory: site - - name: Build Storybook - run: yarn storybook:build - working-directory: site - - run: yarn test:coverage working-directory: site