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

[Task] Fix Chromatic Visual Regression Builds #219

Open
billhimmelsbach opened this issue Oct 26, 2023 · 0 comments
Open

[Task] Fix Chromatic Visual Regression Builds #219

billhimmelsbach opened this issue Oct 26, 2023 · 0 comments
Assignees

Comments

@billhimmelsbach
Copy link
Contributor

billhimmelsbach commented Oct 26, 2023

  • Currently every component needs to be reviewed before the PR approved. Only changed components need to be reviewed.
  • Teach the team how to do the image diff reviews

Screenshot 2023-10-26 at 11 54 53 AM

@billhimmelsbach billhimmelsbach self-assigned this Oct 26, 2023
@billhimmelsbach billhimmelsbach changed the title [Task] Fix Chromatic Visual Diff Builds [Task] Fix Chromatic Visual Regression Builds Oct 26, 2023
billhimmelsbach added a commit that referenced this issue Nov 3, 2023
Chromatic's TurboSnap feature has been failing for awhile now, or perhaps never worked correctly? This small PR dug around to figure out why, and it looks like it's a problem with the creation of the `preview-stats.json` file. The passed command line option `--webpack-stats-json` to `build-storybook` in the `package.json` appears to be correct for webpack not vite. This PR uses [Chromatic's recommended plugin](https://www.chromatic.com/docs/turbosnap/#github-pullrequest-triggers:~:text=(for%20experimental%20Vite,)) `vite-plugin-turbosnap` to create the stats file. Take a look at the screenshots and commits for a history of attempted solutions.

Resolves issue #219 

## Changes

- removes dead code `--webpack-stats-json` from `build-storybook`
- add and configure `vite-plugin-turbosnap`

## How to test this PR

This PR fixes the turbosnap configuration, but it still needs to run again with these updated deps to do diffs. I'm not sure if this is the only fix required, but it's definitely a start.

1. Does Chromatic no longer error due to a [missing webpack-stats.json file](https://github.com/cfpb/design-system-react/actions/runs/6720471476/job/18264108900#step:5:120)? Should now only be stating that it is [disabled due to deps changes](https://github.com/cfpb/design-system-react/actions/runs/6726430803/job/18282666371#step:5:57).

## Screenshots

*Before Fix*: errors in GitHub action due to missing `webpack-stats.json file`
<img width="681" alt="Screenshot 2023-11-01 at 6 11 37 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/e4b09cf9-8cd3-44a1-bf33-09713d751134">

*Before Fix*: error in parsing file locally even [when forcing `webpack-stats.json` file](c5f38b3) via `WebpackStats()` in vite. Error persists [after name change](b490e65). Parsing error tracked down to the fact that Chromatic expects a different format for the file than what vite normally produces.
<img width="1073" alt="Screenshot 2023-11-01 at 8 12 08 AM" src="https://github.com/cfpb/design-system-react/assets/19983248/b8c35327-757b-466c-b3cd-27b82c572f61">

*After Fix*: Configured the plugin, and TurboSnap is ready to go!

<img width="833" alt="Screenshot 2023-11-01 at 6 20 00 PM" src="https://github.com/cfpb/design-system-react/assets/19983248/f83dcaff-3de5-4d5d-b08b-7f3b66abcdc0">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant