@gooddata/test-storybook

GoodData Test Storybook

Visual regression testing for Storybook

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 your package.json
• Add this line into your .gitignore file:

  test-storybook/
  

• Disable testing and linting for test-storybook/ folder
• Use

  import { screenshotWrap } from '@gooddata/test-storybook';
  

  in your stories and wrap elements that you want to test in the function.
  Warning: Only stories which contain screenshotWrap() call will be tested, see example.
• You should 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)

Release

git checkout master && git pull upstream master
npm version [major|minor|patch]
git commit -am "test-storybook - Release v[your_version]"
npm publish
git push upstream master

Tests

• Unit tests yarn test
• Lint JavaScript yarn validate