GoodData Test Storybook
Visual regression testing for Storybook with automatically found test scenarios
Usage
Note: Run screenshots tests only on CI to ensure the same environment (platform, browser, display pixel density, etc.)
Preparing environment
- Ensure you have Chrome 62 or greater installed
Preparing repository where you want to test Storybook
- Ensure you have your Storybook stories in
stories/
folder both in*.jsx
or*.tsx
- Run
yarn add --dev @gooddata/test-storybook
- Add
"test-storybook": "test-storybook"
into"scripts"
section in yourpackage.json
- Add this line into your
.gitignore
file:test-storybook/
- Disable testing and linting for
test-storybook/
folder - Use
in your stories and wrap elements that you want to test in the function.
import { screenshotWrap } from '@gooddata/test-storybook';
Warning: Only stories which contain screenshotWrap() call will be tested, see example. - You may generate initial reference screenshots via
-r
parameter, i.e.yarn test-storybook -r
. These will be discarded later and replaced with CI outputs.
Running tests
- Run
yarn test-storybook
from the root of your repository in which you want to test Storybook. - To run tests via GitHub PR comment you can type
extended test - storybook
. The link to CI html report appears in GitHub PR comment
Replacement of reference screenshots
- Download new reference screenshots from CI html report (artifacts)
ie.https://ci.intgdc.com/job/.../123/artifact/test-storybook/tests/
- Replace old reference screenshot in
stories/__screenshots__/
folder with new one - Commit changes
- (You may also run the job in your local docker)
Advanced config
For some scenarios you may need to add specific backstopjs options. All advanced options are available.
Add this section to packages.json
:
"test-storybook": {
"<section name>": {
"<scenario name>": {
"delay": 1000,
"removeSelectors": ".removeRandomValueElement",
"hoverSelector": ".hoverOverThisElementBeforeScreenshot"
}
}
}
Development
Install Node.js (node 12.16.1, npm v6.13.4) and Yarn 1.22.4.
Install dependencies:
yarn install --frozen-lockfile
Release @gooddata/test-storybook
Use CI job to release the library.
Tests
- Unit tests
yarn test
- Lint JavaScript
yarn validate