Angular Storybook Screenshot Snapshot testing demonstration

A demonstration Angular project includes:

• Storybook
• Screenshot stories
• Snapshot test using PNG files

How to setup

Angular

This project was generated with Angular CLI version 1.5.4.

Storybook

Storybook is interactive environment for UI component development.

yarn add @storybook/angular -D
yarn run getstorybook

The above command adds storybook task to your package.json.

yarn storybook

And go to http://localhost:6006/. You can preview stories.

Screenshot

Using storybook-chrome-screenshot addon, we can capture each story as PNG image file.

To install this addon, we need to change several files. To detail, see https://github.com/Quramy/angular-sss-demo/commit/cf03a041004643c610b8671a07e866149df662f8 .

After setup, run yarn screenshot. Each story is generated as PNG file under the __screenshot__ directory.

Snapshot testing

reg-suit provides visual snapshot testing environment. This tool compares images captured and reports the difference them (generated report).

reg-suit is a CLI and provides init wizard:

yarn add reg-suit -D
yarn run reg-suit init --use-yarn

If you want more installation details, check https://github.com/reg-viz/reg-puppeteer-demo#configure-reg-suit out.

And the following command runs visual regression testing:

yarn run reg-suit run