Angular 2 – Testing

Hi Friends,

Hope you are all well. This post is about writing unit tests for angular 2 applications. If you are familiar with jasmine(framework) and karma(test runner) you will find this post quite easy to understand. Angular 2 was designed with testability in consideration. So, it becomes rather easy to use classes in ‘angular2/testing’ to write our test cases.

Let’s begin.

The full code of the tutorial is available here.

A video screencast of this post

First lets clone the quickstart app from the official site of angular 2 using the below command.

Then do an npm install after navigating into the directory.

Now run the below command.

You would see that karma test runner fires up and uses the karma.conf.js file and starts to execute tests automatically.

Okay, Let’s write some code and test cases.

Open up your app.component.ts file and modify it as shown below.

Then open up app.component.spec.ts file and modify it as shown below.

This is the file where we add the test cases. As you can see I have added a simple test case which will check the value of the variable somevar which we have used in app.component.ts. Now go ahead and run npm test. You could see that the test passed.

This is how you write a simple test case for your application.

Testing a service:

Let’s create a service first. Create 2 new files namely service.ts and service.spec.ts as shown below.

The test service has a function getnames() which simply returns 3 names.

Now open up service.spec.ts and add the below code.

Let’s break this down.

  1. beforeEach and beforeEachProviders are basically the setup for the tests. You could also see that we are injecting our TestService directly through beforeEach and then creating a reference for it using which we access getnames().
  2. In the specs section I am simply comparing the returned values and also the length of the array.

Now here the service din’t use http; but usually when we write apps we use http requests frequently. So let’s go ahead and mock a backend and see how to write tests.

Mocking

Open up service.ts file again and modify it to look like below.

Note that since I am creating a mock backend I am just giving some random string but in an app it would correspond to a real url.

Open up test.spec.ts and modify it as shown below.

Let’s break this down

  1. MockBackend and MockConnection are two classes that are shipped with angular2 especially for creating a mock backend for testing purposes.
  2. In the beforeEach setup we just create a backend that will return a repsone ‘hello raja’ to all the http requests being made.
  3. In the specs I have simply made a request to the getnames and I am checking whether the response corresponds to hello raja.
  4. Simply run npm test to see whether our tests go fine so far.

Testing Observables

Observables (Part of reactive extensions) can be tested too. Open up test.spec.ts and add the below lines of code.

Its pretty much easy to understand. If you notice I am just creating a new Observable and then pushing values subsequently. In the specs I am just subscribing to the observable and comparing the values with a predefined set of values in the expected array.

Testing Routes:

Let’s see how to test routes. Open up app.component.ts and add the below code.

I have simply created two routes for home and people respectively. (Make sure to create two files home.ts and people.ts respectively).

Now open up app.component.spec.ts and modify it as shown below.

Let’s break this down.

  1. SpyLocation is used to fire simulated Location events. I am using it here for Location.
  2. ROUTER_PRIMARY _COMPONENT is set to our AppComponent.
  3. Then in the specs, I am trying to navigate to /home url.
  4. In a subsequent spec I am trying to navigate to ‘/unknown’ and see if it redirects me to Home.

This is how we could do testing in Angular 2. I have only provided examples for few stuff. Similarly directives, pipes and the rest of the stuff in angular 2 could also be tested efficiently.

Thanks for reading guys.. Peace.. :)

  • Sudheer

    Nice tutorial, helped me a lot.