Skip navigation, jump to main content

Example applications

In this guide, we will explore the different aspects of testing Angular applications by looking at two examples.

The counter Component

The counter is a reusable Component that increments, decrements and resets a number using buttons and input fields.

For intermediate Angular developers, this might look trivial. That is intentional. This guide assumes that you know Angular basics and that you are able to build a counter Component, but struggle testing the ins and outs.

The goals of this example are:

The counter comes in three flavors with different state management solutions:

  1. An independent, self-sufficient counter Component that holds its own state.
  2. A counter that is connected to a Service using dependency injection. It shares its state with other counters and changes it by calling Service methods.
  3. A counter that is connected to a central NgRx Store. (NgRx is a popular state management library.) The counter changes the state indirectly by dispatching NgRx Actions.

While the counter seems easy to implement, it already offers valuable challenges from a testing perspective.

This application allows you to search for photos on Flickr, the popular photo hosting site.

First, you enter a search term and start the search. The Flickr search API is queried. Second, the search results with thumbnails are rendered. Third, you can select a search result to see the photo details.

This application is straight-forward and relatively simple to implement. Still it raises important questions:

The Flickr search comes in two flavors using different state management solutions:

  1. The state is managed in the top-level Component, passed down in the Component tree and changed using Outputs.
  2. The state is managed by an NgRx Store. Components are connected to the store to pull state and dispatch Actions. The state is changed in a Reducer. The side effects of an Action are handled by NgRx Effects.

Once you are able to write automatic tests for this example application, you will be able to test most features of a typical Angular application.