Skip to content

Latest commit

 

History

History
56 lines (37 loc) · 1.81 KB

README.md

File metadata and controls

56 lines (37 loc) · 1.81 KB
Raw

Angular Storybook Screenshot Snapshot testing demonstration CircleCI

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