@gooddata/test-storybook

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 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 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"
        }
    }
}

Release @gooddata/test-storybook

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