This is a simple example to demonstrate various techniques to test Angular apps, specifically:

1. Visualizing different states of a component using Storybook
2. Unit testing a component
3. Integration testing (a.k.a. end-to-end testing) the entire app
4. Screenshot testing (a.k.a. visual regression testing) the entire app

A screenshot of the final app is shown below. It contains a single page with two tiles representing a buy order and a sell order in the stock market. Each tile is created using an Angular component called OrderViewComponent.

This project was generated with Angular CLI version 6.0.8.

$ yarn install  <--- npm install works too
$ ng serve

Now point your browser to http://localhost:4200/.

Allows you to visualize different states of your UI components and develop them interactively.

• Storybook

• index.stories.ts: Instantiates the OrderViewComponent in five different states to ensure that it is rendered correctly.

yarn storybook

Point your browser to http://localhost:6006/

Tests a single component in isolation.

• Karma: Test runner
• Jasmine: Testing framework
• Angular testing utilities: TestBed & Component Fixture

• order-progress-bar.component.spec.ts: Instantiates the OrderProgressBarComponent in different states and tests if the bars in the progress bar have the expected lengths.

• order-view.component.spec.ts: Instantiates the OrderViewComponent with a buy and a sell order and tests if the correct data and colors are rendered.

ng test

Tests an entire app with multiple components, pages and navigation, while fully integrated with its back-end.

• Protractor: Selenium wrapper
• Jasmine: Testing framework

• app.e2e-spec.ts: Navigates to the home page and tests if it renders two orders for the correct stocks. Uses a Page Object for low level page operations.

ng e2e

Compares current images of an app with previous images, and reports the differences

• Jest: Testing framework
• jest-image-snapshot: Jest matcher for image comparisons
• Puppeteer: Headless Chrome Node API used for taking screenshots

• home-page.test.js: Takes a screenshot of the home page and compares it with its previously stored image. If the images don't match, the test fails and the difference in the images is saved under snapshot-testing/__image_snapshots__/__diff_output__. Try it by changing some code. For example, in order-view.component.css, change the color of .title--buy to yellow:

.title--buy {
    color: #f2d200;
}

yarn screenshot-test