diff --git a/docs/best-practices.md b/docs/best-practices.md index 714ab0d..8c427fe 100644 --- a/docs/best-practices.md +++ b/docs/best-practices.md @@ -14,13 +14,13 @@ You can log into [Chromatic](https://www.chromatic.com/) and navigate to a build :white_check_mark: Good :::align-image-left -![](./static/turbosnap_good.png) +![](./static/turbosnap-good.png) ::: :no_entry_sign: Bad :::align-image-left -![](./static/turbosnap_bad.png) +![](./static/turbosnap-bad.png) ::: ## Merge PRs quickly @@ -31,6 +31,8 @@ As a general rule, once a PR is open and ready for review, there should be **no To help with this, if you need to share a PR that isn’t ready for review, you can open it as a [draft](https://learn.microsoft.com/en-us/azure/devops/repos/git/pull-requests?view=azure-devops&tabs=browser#create-draft-prs). The Chromatic CLI "step" will not run for PRs marked as "draft". +> If you expect to use "draft" PR, make sure to either add the `drafts: false` to your pipeline configuration or that your build policies do not run for "draft" PRs. + ## Create small, fast-merging PRs for changes that disable TurboSnap Some changes can disable TurboSnap for a build. These changes include: diff --git a/docs/getting-started.md b/docs/getting-started.md index 15653c2..076692a 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -29,6 +29,12 @@ Chromado is compatible with [TurboSnap](https://www.chromatic.com/docs/turbosnap Using TurboSnap is important because we pay for every snapshot taken by Chromatic. We still pay for TurnoSnaps, but they cost **1/5th** of a regular snapshot. !!! +If TurboSnap is disabled for your build, the PR message will indicate so. In some cases, such as for a _"rebuild"_, this is fine. However, in most cases, you should review the details of your Chromatic build to understand why TurboSnap was disabled. + +:::align-image-left +![TurboSnap disabled warning example](./static/pr-turbosnap-disabled.png) +::: + ### Squash merge Chromatic doesn't offer any mechanism to support [squash merge](https://learn.microsoft.com/en-us/azure/devops/repos/git/merging-with-squash?view=azure-devops) on Azure DevOps. This means that when using Azure DevOps as a Git provider, if you wish to keep your Chromatic [baselines](https://www.chromatic.com/docs/branching-and-baselines/) up-to-date, you would be constrained to merging your pull requests with regular merge commits. Fortunately, Chromado implements a workflow based on Chromatic's [auto-accept-changes](https://www.chromatic.com/docs/azure-pipelines/#azure-squashrebase-merge-and-the-main-branch) feature, allowing pull requests to be completed with squash merges. @@ -73,7 +79,7 @@ First, let's create a new [Chromatic project](#create-a-new-chromatic-project), 2.1. If your project already includes a [template file](https://learn.microsoft.com/en-us/azure/devops/pipelines/process/templates?view=azure-devops&pivots=templates-includes) to set up your pipelines, then paste the following configuration: -```yaml !#19,22,27,29-30 chromatic.yml +```yaml !#14,21,24,29,31-32 chromatic.yml # Run Chromatic on the "main" branch after a pull request has been merged # (currently required to update the baseline when doing "squash" merge for pull requests). trigger: @@ -81,11 +87,13 @@ trigger: include: - main -# Run Chromatic on every pull request targeting the "main" branch as destination. +# Run Chromatic on every pull request targeting the "main" branch as destination +# that is ready for review (not a draft). pr: branches: include: - main + drafts: false steps: # Chromatic needs the full Git history to compare the baselines. @@ -112,7 +120,7 @@ Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuratio 2.2. If your project doesn't include a template file to set up your pipelines, paste the following configuration: -```yaml #19,54,56-57 chromatic.yml +```yaml #14,21,56,58-59 chromatic.yml # Run Chromatic on the "main" branch after a pull request has been merged # (currently required to update the baseline when doing "squash" merge for pull requests). trigger: @@ -120,11 +128,13 @@ trigger: include: - main -# Run Chromatic on every pull request targeting the "main" branch as destination. +# Run Chromatic on every pull request targeting the "main" branch as destination +# that is ready for review (not a draft). pr: branches: include: - main + drafts: false steps: # Chromatic needs the full Git history to compare the baselines. diff --git a/docs/static/chromatic-pr-notification.png b/docs/static/chromatic-pr-notification.png index aa88d30..b05357a 100644 Binary files a/docs/static/chromatic-pr-notification.png and b/docs/static/chromatic-pr-notification.png differ diff --git a/docs/static/pr-turbosnap-disabled.png b/docs/static/pr-turbosnap-disabled.png new file mode 100644 index 0000000..01b818a Binary files /dev/null and b/docs/static/pr-turbosnap-disabled.png differ diff --git a/docs/static/turbosnap_bad.png b/docs/static/turbosnap-bad.png similarity index 100% rename from docs/static/turbosnap_bad.png rename to docs/static/turbosnap-bad.png diff --git a/docs/static/turbosnap_good.png b/docs/static/turbosnap-good.png similarity index 100% rename from docs/static/turbosnap_good.png rename to docs/static/turbosnap-good.png diff --git a/src/bin.ts b/src/bin.ts index da95577..fba4fdf 100644 --- a/src/bin.ts +++ b/src/bin.ts @@ -136,7 +136,7 @@ ${changeCount === 0 ${output.inheritedCaptureCount !== 0 ? `✅  Captured ${output.actualCaptureCount} snapshots and inherited from ${output.inheritedCaptureCount} TurboSnaps` - : "❌  This build is not using TurboSnaps. Be sure to read Workleap's best practices for Chromatic." + : "❌  This build is not using TurboSnap. Be sure to read Workleap's best practices for Chromatic." }