Skip to content

Latest commit

 

History

History
95 lines (64 loc) · 4.22 KB

example-applications.md

File metadata and controls

95 lines (64 loc) · 4.22 KB
Raw
layout title description
chapter
Angular example applications with tests
Fully-tested Angular projects used as example in this book

Example applications

Learning objectives
  • Example Angular applications used in the book
  • Features demonstrated by the examples

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

The counter Component

- [Counter Component: Source code](https://github.com/9elements/angular-workshop) - [Counter Component: Run the app](https://9elements.github.io/angular-workshop/)
See the counter Component app in action <script type="text/x-template">

<iframe src="https://9elements.github.io/angular-workshop/" class="responsive-iframe__iframe"></iframe>

</script>

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

Challenging to test

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:

  • Simplicity: Quickly grasp what the Component is supposed to do.
  • Cover core Angular features: Reusable Components with state, Inputs, Outputs, templates, event handling.
  • Scalability: Starting point for more complex application architectures.
State management

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.

The Flickr photo search

- [Flickr photo search: Source code](https://github.com/9elements/angular-flickr-search) - [Flickr photo search: Run the app](https://9elements.github.io/angular-flickr-search/)
See the Flickr photo search in action <script type="text/x-template">

<iframe src="https://9elements.github.io/angular-flickr-search/" class="responsive-iframe__iframe"></iframe>

</script>

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

Typical application flow

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:

  • App structure: How to split responsibilities into Components and how to model dependencies.
  • API communication: How to fetch data by making HTTP requests and update the user interface.
  • State management: Where to hold the state, how to pass it down in the Component tree, how to alter it.

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

State management
  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.

Angular testing principles