From 1302e782838b9ed8518a8ae856db81c7e5074752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?McKayla=20=E3=81=AF=E3=81=AA?= Date: Mon, 29 Jun 2026 08:57:07 -0600 Subject: [PATCH] ci: remove chromatic (#26777) --- .github/workflows/ci.yaml | 87 ----------------------------- docs/about/contributing/frontend.md | 4 +- site/package.json | 2 - 3 files changed, 2 insertions(+), 91 deletions(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 4a900bc2bf..c189817c0c 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -1091,93 +1091,6 @@ jobs: env: PIXEL_KEY: ${{ secrets.PIXEL_KEY }} - # Reference guide: - # https://www.chromatic.com/docs/turbosnap-best-practices/#run-with-caution-when-using-the-pull_request-event - chromatic: - # REMARK: this is only used to build storybook and deploy it to Chromatic. - runs-on: ubuntu-latest - needs: changes - if: needs.changes.outputs.site == 'true' || needs.changes.outputs.ci == 'true' - steps: - - name: Harden Runner - uses: step-security/harden-runner@f808768d1510423e83855289c910610ca9b43176 # v2.17.0 - with: - egress-policy: audit - - - name: Checkout - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - with: - # 👇 Ensures Chromatic can read your full git history - fetch-depth: 0 - # 👇 Tells the checkout which commit hash to reference - ref: ${{ github.event.pull_request.head.ref }} - persist-credentials: false - - - name: Set up mise tools - uses: ./.github/actions/setup-mise - with: - install-args: "node pnpm" - - - name: Install pnpm dependencies - uses: ./.github/actions/pnpm-install - - # 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' && github.repository_owner == 'coder' - uses: chromaui/action@5c6ec06f45a2117a25f07b1bf2b2f3009233fac8 # v16.3.0 - env: - NODE_OPTIONS: "--max_old_space_size=4096" - STORYBOOK: true - with: - # Do a fast, testing build for change previews - buildScriptName: "storybook:ci" - exitOnceUploaded: true - # This will prevent CI from failing when Chromatic detects visual changes - exitZeroOnChanges: true - # Chromatic states its fine to make this token public. See: - # https://www.chromatic.com/docs/github-actions#forked-repositories - projectToken: 695c25b6cb65 - workingDir: "./site" - storybookBaseDir: "./site" - storybookConfigDir: "./site/.storybook" - # Prevent excessive build runs on minor version changes - skip: "@(renovate/**|dependabot/**)" - # Run TurboSnap to trace file dependencies to related stories - # and tell chromatic to only take snapshots of relevant stories - onlyChanged: true - # Avoid uploading single files, because that's very slow - zip: true - - # 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. 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' && github.repository_owner == 'coder' - uses: chromaui/action@5c6ec06f45a2117a25f07b1bf2b2f3009233fac8 # v16.3.0 - env: - NODE_OPTIONS: "--max_old_space_size=4096" - STORYBOOK: true - with: - autoAcceptChanges: true - # This will prevent CI from failing when Chromatic detects visual changes - exitZeroOnChanges: true - # Do a full build with documentation for mainline builds - buildScriptName: "storybook:build" - projectToken: 695c25b6cb65 - workingDir: "./site" - storybookBaseDir: "./site" - storybookConfigDir: "./site/.storybook" - # Run TurboSnap to trace file dependencies to related stories - # and tell chromatic to only take snapshots of relevant stories - onlyChanged: true - # Avoid uploading single files, because that's very slow - zip: true - offlinedocs: name: offlinedocs needs: changes diff --git a/docs/about/contributing/frontend.md b/docs/about/contributing/frontend.md index 791f3172d2..af2981ed6c 100644 --- a/docs/about/contributing/frontend.md +++ b/docs/about/contributing/frontend.md @@ -40,7 +40,7 @@ the most important. - [Vitest](https://vitest.dev/) for integration testing - [Playwright](https://playwright.dev/) for end-to-end (E2E) testing - [Storybook](https://storybook.js.org/) and - [Chromatic](https://www.chromatic.com/) for visual testing + [pixel-storybook](https://www.npmjs.com/package/@coder/pixel-storybook) for visual testing - [pnpm](https://pnpm.io/) as the package manager ## Structure @@ -290,7 +290,7 @@ We use unit and integration tests mostly for testing code that does _not_ pertai ### Visual Testing – Storybook We use Storybook for testing all of our React code. For static components, you simply add a story that renders the components with the props that you would like to test, and Storybook will record snapshots of it to ensure that it isn't changed unintentionally. If you would like to test an interaction with the component, then you can add an interaction test by specifying a `play` function for the story. For stories with an interaction test, a snapshot will be recorded of the end state of the component. We use -[Chromatic](https://www.chromatic.com/) to manage and compare snapshots in CI. +[pixel-storybook](https://www.npmjs.com/package/@coder/pixel-storybook) to manage and compare snapshots in CI. To learn more about testing components that fetch API data, refer to the [**Where to fetch data**](#where-to-fetch-data) section. diff --git a/site/package.json b/site/package.json index 0532178f76..9db41828d3 100644 --- a/site/package.json +++ b/site/package.json @@ -10,7 +10,6 @@ "check": "biome check --error-on-warnings .", "check:fix": "biome check --error-on-warnings --fix .", "check:all": "pnpm check && pnpm test", - "chromatic": "chromatic", "dev": "vite", "format": "biome format --write .", "format:check": "biome format .", @@ -27,7 +26,6 @@ "gen:provisioner": "protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./e2e/ --ts_proto_opt=outputJsonMethods=false,outputEncodeMethods=encode-no-creation,outputClientImpl=false,nestJs=false,outputPartialMethods=false,fileSuffix=Generated,suffix=hey -I ../provisionersdk/proto ../provisionersdk/proto/provisioner.proto", "storybook": "STORYBOOK=true storybook dev -p 6006", "storybook:build": "storybook build", - "storybook:ci": "storybook build --test", "test": "vitest run --project=unit", "test:storybook": "vitest --project=storybook", "test:ci": "vitest run --project=unit",