chore: component visual regression tests using percy #166
Conversation
| version: 2 | ||
| snapshot: | ||
| widths: | ||
| - 1280 |
There was a problem hiding this comment.
@bclark-p44 I limited this to one width to save on screenshots. We can easily add 375px to cover mobile.
There was a problem hiding this comment.
Yeah we will be adding our adaptive sizes to the design system soon.
| @@ -14,7 +14,7 @@ export default { | |||
| }; | |||
|
|
|||
| const Template: ComponentStory<typeof Tooltip> = (args) => ( | |||
| <Tooltip {...args} title="Tooltip"> | |||
| <Tooltip defaultOpen {...args} title="Tooltip"> | |||
There was a problem hiding this comment.
Added defaultOpen so tooltip would be present when snapshot was taken.
| @@ -5,7 +5,9 @@ | |||
| "scripts": { | |||
| "build": "build-storybook -c .storybook -o ./build", | |||
| "dev": "start-storybook -p 6006 --quiet", | |||
| "clean": "rm -rf .turbo node_modules build" | |||
| "clean": "rm -rf .turbo node_modules build", | |||
| "percy": "percy storybook ./build", | |||
There was a problem hiding this comment.
Runs against static Storybook build instead of local or live Storybook URL
There was a problem hiding this comment.
could we hoist this command to the root? would make the calling the script easier.
package.json
Outdated
| "prepare": "husky install", | ||
| "release-packages": "yarn build && yarn changeset publish", | ||
| "storybook:build": "yarn ./apps/storybook/ exec build-storybook -c .storybook -o ./build", |
There was a problem hiding this comment.
you should just be able to use a filter with turbo to run this command
yarn turbo run build --filter=@project44-manifest/storybook
|
@bclark-p44 looks like we ran out of Percy snapshots 😭 |
|
Got approval from @bclark-p44 it was okay to merge. CI/CD will fail until snapshots renew in January. |
Closes #DES-381
📝 Description
Percy
Added Percy SDK for Storybook and Percy's CLI.
I ultimately decided this was a way better solution than Cypress + Percy plugin just due to Storybook rendering components within an iframe. TLDR: Cypress does not play nice with iframes. It's very hard to work with the elements in inside iframes and they usually do not show up in test failure snapshots (at least with Cypress).
I found the the documentation for Percy Storybook SDK and it is super straight forward and covers all test cases I think we are interested in. If you want additional snapshots for a particular state of a component, just add a new stories in Storybook.
CI/CD
.stories.tsxfiles)Screenshots
Example Percy build: https://percy.io/7dd77246/Manifest/builds/23346035
Merge checklist