Unit testing components in Angular 2

Unit testing in Angular 2:
Directives
Components
Services

Unit testing a component is similar to directives. They need to be compiled as there are some templates being rendered.

What does the component do:

  • It makes an http request to get todos
  • It renders a list of todos
  • There is user interaction (a click) to complete a todo

It makes a http call to get the todo list, which we need to mock in the unit test. We are not using the official MockBackend module. Instead we create a stub for the Http.get method that returns an observable.

To consider this component fully tested we need to do two things:

  • Validate the logic in the component
  • Validate the template rendering and behaving correctly to user interaction

The component:

The unit test: