@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 stories in stories/ folder
• Ensure you have your Storybook build in dist-storybook/ 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:

  http-server.log
  nohup.out
  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

• Don't forget to build your Storybook into dist-storybook/ folder before you will run next command

• Run yarn test-storybook from the root of your repository in which you want to test Storybook. You should specify some parameters:

  • -p [value] when you want to run http-server with Storybook on specific (not random free) port, e.g. yarn test-storybook -- -p 9002
  • -r when you want to generate reference screenshots first time, 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