Angular Testing Techniques

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.

Quick Start

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

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

Visualize component states

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

Tools

• Storybook

Tests

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

Running the tests

yarn storybook

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

Unit testing

Tests a single component in isolation.

Tools

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

Tests

• 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.

Running the tests

ng test

Integration (end-to-end) testing

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

Tools

• Protractor: Selenium wrapper
• Jasmine: Testing framework

Tests

• 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.

Running the tests

ng e2e

Screenshot (visual regression) testing

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

Tools

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

Tests

• 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;
}

Running the tests

yarn screenshot-test