🚀 Configure Chromatic to use TurboSnap

[patricklafrance]

Description

Chromatic introduce a new feature called TurboSnap. Orbit should use it to decrease build time and save on chromatic snapshots.

TurboSnap is an advanced Chromatic feature that speeds up builds for faster UI testing and review using Git and Webpack’s dependency graph. It identifies component files that change, then intelligently builds and snapshots only the stories associated with those components.

[patricklafrance]

I tryed to integrate Turbosnap but I can't understand how it works... It kept running taking all the snapshots despite no new changes.

Also, the warning in the documentation is quite scary:

GitHub workflows have various “triggers” that a Chromatic action could be running on. In general, we recommend sticking to push unless you really know what you’re doing. TurboSnap will not work when using the pull_request trigger or one of its variations. The reason is that pull_request workflows run against an ephemeral merge commit, which doesn’t actually exist in your Git history yet, but would if you were to merge the PR at that point. If your PR triggers multiple builds before being merged, Chromatic would not be able to find those earlier PR builds because your Git history does not actually contain the commit for which you ran a Chromatic build. Our own GitHub Action works around that by using pull_request.head.sha as the commit hash for the build, even though it’s really running against the merge commit, just so we can still track baseline history. However, this discrepancy means TurboSnap would be looking at a different set of changed files than were actually in the recorded commit (and which depends on the state of your base branch), yielding unpredictable results.

[patricklafrance]

@alexasselin008 is this issue fine with you or it should be closed and you'll create a new one once you get to work on this?

[alexasselin008]

I'm waiting a couple of days to make sure that the new CI (using Github Actions) works fine, and after that i'm going to start testing TurboRepo TurboSnap.

From what i'm reading, we're going to need to change the chromatic workflow from pull_request to push and add the onlyChanged property to the github action.

More on the pull_request to push changes: https://www.chromatic.com/docs/turbosnap#compatibility

[alexasselin008]

We should check if there is a possibility of switching to Squash and Merge in the PR if possible as well

[patricklafrance]

I'm waiting a couple of days to make sure that the new CI (using Github Actions) works fine, and after that i'm going to start testing TurboRepo.

From what i'm reading, we're going to need to change the chromatic workflow from pull_request to push and add the onlyChanged property to the github action.

More on the pull_request to push changes: https://www.chromatic.com/docs/turbosnap#compatibility

To clarify, you mean TurboSnap rather than TurboRepo?

We should check if there is a possibility of switching to Squash and Merge in the PR if possible as well

That would be pretty cool if Squash can work without any hackish setup. The reason why this repo is not leverage squash by default is because it wasn't playing well with Chromatic baselines.

[alexasselin008]

TurboSnap not TurboRepo, my bad*.

I wrote this comment because according to the TurboSnap documentation

Does TurboSnap work with squash/rebase merge?
TurboSnap is compatible with squash and merge rebasing as of version 6.6+. Please update your package to get support.

[patricklafrance]

TurboSnap not TurboRepo, my bad*.

I wrote this comment because according to the TurboSnap documentation

Does TurboSnap work with squash/rebase merge?
TurboSnap is compatible with squash and merge rebasing as of version 6.6+. Please update your package to get support.

Yeah this one puzzle me.

[alexasselin008]

Link to an example of how to use turbosnap in active Prs only
https://github.com/chromaui/chromatic-cli/blob/main/.github/workflows/chromatic-main-and-prs.yml

[alexasselin008]

The guardian uses the following config in order to run turbosnap on Prs, but full scans on the main branch
onlyChanged: '!(main)' # only turbosnap on non-main branches

https://github.com/guardian/dotcom-rendering/blob/main/.github/workflows/ar-chromatic.yml

[alexasselin008]

Related discussion :
#1205

Related Draft PR:
#1204