Test local site

Share This

Editor’s note: This tutorial was last updated on 7 December 2022 to ensure that it is compatible with the latest version of Angular, (v15 at the time of writing) and to add a section on how to generate an Angular unit test automatically. Check out these articles if you are interested in unit testing in React Native or React and Cypress.

In this Angular unit testing tutorial, we’ll demonstrate how to build a simple Angular app and then walk through the unit testing process step by step with examples.

We’ll cover the following in detail:

To follow along with this tutorial, you should have a basic understanding of how to use Angular.

What is Angular testing?

Angular testing is a core feature available in every project set up with the Angular CLI.

To stay synchronized with the JavaScript ecosystem, the Angular team makes a point to release two major Angular versions each year. Since its inception through to its most recent release, Angular 15, Angular has been designed with testability in mind.

There are two types of Angular testing:

  1. Unit testing is the process of testing small, isolated pieces of code. Also known as isolated testing, unit tests do not use external resources, such as the network or a database
  2. Functional testing refers to testing the functionality of your Angular app from a user experience perspective — i.e., interacting with your app as it’s running in a browser just as a user would

 

What is Angular unit testing?

Unit testing in Angular refers to the process of testing individual units of code.

An Angular unit test aims to uncover issues such as incorrect logic, misbehaving functions, etc. by isolating pieces of code. This is sometimes more difficult than it sounds, especially for complex projects with poor separation of concerns. Angular is designed to help you write code in such a way that enables you to test your app’s functions individually in isolation.

Why you should unit test Angular apps

Angular unit testing enables you to test your app based on user behavior. While testing each possible behavior would be tedious, inefficient, and ineffective, writing tests for each coupling block in your application can help demonstrate how these blocks behave.

One of the easiest ways to test the strengths of these blocks is to write a test for each one. You don’t necessarily need to wait until your users complain about how the input field behaves when the button is clicked. By writing a unit test for your blocks (components, services, etc.), you can easily detect when there is a break.

Our example Angular app has a service, a component, and an async task to simulate data being fetched from the server: