test(happo): add Happo for screenshot testing #1030
Conversation
| @@ -66,6 +68,7 @@ | |||
| "@visx/xychart": "1.4.0", | |||
| "@visx/zoom": "1.3.0", | |||
| "@zeit/next-css": "^1.0.1", | |||
| "babel-loader": "8.2.2", | |||
There was a problem hiding this comment.
needed by happo.io
|
|
||
| // happo is unable to resolve some imports if the tmpdir isn't located inside | ||
| // the project structure. The default is an OS provided folder, `os.tmpdir()`. | ||
| tmpdir: path.join(__dirname, happoTmpDir), |
There was a problem hiding this comment.
Good catch, I've seen this happen myself. I'll make a note to change the default tmp folder to something like ./.happo-tmp.
| }, | ||
| }, | ||
| }, | ||
| // needs timeout for animated axes |
There was a problem hiding this comment.
One option that you might want to consider is to not use an animation if prefers-reduced-motion is set to reduce, and then add prefersReducedMotion: true, to your RemoteBrowserTarget:
'chrome-desktop': new RemoteBrowserTarget('chrome', {
viewport: '800x552',
prefersReducedMotion: true,
}),There was a problem hiding this comment.
this is a cool idea. it'll be a bit of work to re-write those examples because the animations aren't css-based. looks like you can do the media query in JS to detect it, so I can swap out animated components for their static analogs. I may do this in a follow up PR depending on how big the change is.
packages/visx-demo/happo/gallery.tsx
Outdated
| }; | ||
| }; | ||
|
|
||
| const MAX_TIMEOUT_MS = 400; |
There was a problem hiding this comment.
Why 400? Is there a variable somewhere else that this could import and be based on?
There was a problem hiding this comment.
ideally this is in sync with .happo.js, will update to import from there.
There was a problem hiding this comment.
couldn't import asyncTimeout directly from .happo.js because node's child_process gets pulled into the webpack config step which throws. put it in a separate file.
Pull Request Test Coverage Report for Build 513163337
💛 - Coveralls |
| env: | ||
| HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }} | ||
| HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }} | ||
| HAPPO_COMMAND: '../../node_modules/happo.io/build/cli.js' |
There was a problem hiding this comment.
noting that the happo-ci binary expects this path to be in the same directory, but because this is run in ./packages/visx-demo/ it needs to point to the monorepo root node_modules where yarn installs it.
|
🎉 report looks good. I'm going to create one more PR to add a stable |
* deps(mock-data): d3-random@^2.2.2 for seeded random * new(mock-data): add getSeededRandom, support seeds in all generators * test(mock-data): add tests for seeded random across generators * new(mock-data): export getRandomNormal * internal(demo): use stable randomness for all demos
🏠 Internal
This PR adds happo.io to
visxso that we have more robust visual testing in our CI 🍾 🥳 .It specifically
happojob to our githubciworkflowsplitcifrom one job intobuild/test/lint/happojobs – would love 👀 on this because I'm new to github actionsbuildjob can't be used bylint/test/happohappoapp so it can post on PRshappoto run on all of our@visx/demogallery tileshappo.iodep + configurationnext.js-oriented configuration which mostly just leverages thenext.jswebpack configsandboxexamples to ensure a unique test names (taken from sandboxpackage.jsonnamefield)Locally I was able to test it on all examples (here's a sample report image), will see how CI goes 🤞
@hshoff @kristw @lencioni