@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 Mozilla Firefox installed
• Install slimerJS globally using yarn global add slimerjs@0.10.3
• If you are using slimerJS version 0.10.3 and you have installed Mozilla Firefox version >= 55, you must change Gecko MaxVersion property in your ~/.config/yarn/global/node_modules/slimerjs/src/application.ini file

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
• Ignore test results and test reports except reference images in version control. Add this two lines into your .gitignore file:

  test-storybook/
  !test-storybook/bitmaps-reference/
  

• Disable eslint validation 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 test-storybook from the root of your repository in which you want to test Storybook. You should specify some parameters:

  • -p [value] run Grizzly with Storybook on port different than 9001
  • -r generate reference screenshots

• 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

• If you want to change some reference screenshot:

  • download new reference screenshot from CI html report
  • replace old reference screenshot in test-storybook/bitmaps-reference/ folder with new one
  • commit changes

Tests

• Unit tests yarn test
• Lint JavaScript yarn validate