Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: New screenshots #36

Merged
merged 1 commit into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/best-practices.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand Down
18 changes: 14 additions & 4 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -73,19 +79,21 @@ 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:
branches:
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.
Expand All @@ -112,19 +120,21 @@ 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:
branches:
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.
Expand Down
Binary file modified docs/static/chromatic-pr-notification.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/pr-turbosnap-disabled.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
2 changes: 1 addition & 1 deletion src/bin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ ${changeCount === 0
<td>
${output.inheritedCaptureCount !== 0
? `✅&nbsp; Captured ${output.actualCaptureCount} snapshots and inherited from ${output.inheritedCaptureCount} TurboSnaps`
: "❌&nbsp; This build is not using TurboSnaps. Be sure to read Workleap's <a href=\"https://gsoft-inc.github.io/wl-chromado/best-practices/\" target=\"blank\" aria-label=\"https://gsoft-inc.github.io/wl-chromado/best-practices/ (Opens in a new window or tab)\">best practices<a/> for Chromatic."
: "❌&nbsp; This build is not using <a href=\"https://www.chromatic.com/docs/turbosnap\" target=\"blank\" aria-label=\"https://www.chromatic.com/docs/turbosnap (Opens in a new window or tab)\">TurboSnap</a>. Be sure to read Workleap's <a href=\"https://gsoft-inc.github.io/wl-chromado/best-practices\" target=\"blank\" aria-label=\"https://gsoft-inc.github.io/wl-chromado/best-practices (Opens in a new window or tab)\">best practices<a/> for Chromatic."
}
</td>
</tr>
Expand Down