@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
• Run yarn add --dev @gooddata/test-storybook
• Add "test-storybook": "test-storybook" into "scripts" section in your package.json
• Ignore logs, test reports and test results in version control. Add these lines into your .gitignore file:

  nohup.out
  start-storybook.log
  test-storybook/ci-report/
  test-storybook/html-report/
  test-storybook/tests/
  

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

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

  in your stories and add SCREENSHOT_WRAPPER_CLASS className for elements that you want to test

Running tests

• Run yarn test-storybook from the root of your repository in which you want to test Storybook.
• You should generate initial reference screenshots via -r parameter, i.e. yarn test-storybook -- -r
• To run tests via GitHub comment you should type extended test - storybook into GitHub PR comment. The link to CI html report appears in GitHub PR comment

Replacement of reference screenshots

• Download new reference screenshot from CI html report
• Replace old reference screenshot in test-storybook/references/ folder with new one
• Commit changes

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