Testing HTTP services in Angular


Prerequisites :

    1. 1. Understanding of Angular.
    1. 2. Understanding of Component’s unit tests in Angular
    1. 3. Understanding of Karma and Jasmine

Http Service

Let’s consider a simple service to get data using get method of Http service.

Let’s start with writing a test case for this service.

Configuring Testing Module for Service:

First of all, we need an instance of our service i.e. AppService. We can create one using the get method of TestBed.

let service = TestBed.get(AppService);

But for doing that, we also need to add the service to the providers of this testing environment. We will do that by configuring the testing module, like we do while testing our components.

Let’s do that in the beforeEach block

Notice that we don’t have the compileComponents method. We need that only for components as it converts your html and css urls to inline code. Also, since we don’t need to call it, we don’t need to wrap it in async block.

The first test case I always add is to check if the module is configured properly and the instance of our class is defined or not.

You’ll get an error :
Error: No provider for Http!

Ofcourse, when we look at the AppService, we have an Http object as a dependency. We’ll have to provide that as well. And if you take a look at the Http class, it needs two parameters ConnectionBackend and RequestOptions as dependencies :

constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions)

So, we need them as well.

Angular makes our job easy by providing mock object for ConnectionBackend. Just import that with the BaseRequestOptions as the second parameter to Http Object :

import {MockBackend} from '@angular/http/testing';

import {Http, BaseRequestOptions} from '@angular/http';

Now we will use useFactory, to provide an instance of Http. If you’re not familiar with that, you can checkout Angular’s documentation on dependency injection here.

So, in the above code, we have configured that whenever an instance of Http will be required, it will look into these providers to figure out how to create that instance. And for that we have provided a method that returns an Http object using the two parameters we imported earlier.

Now, your test case should work, as we should get an instance of AppService.

Testing Http Service:

Now, for testing the getData method, we obviously need to mock the connection that Http creates and makes an http request. But as we have already provided mock object of ConnectionBackend while providing Http instance, the test case won’t create an actual connection.
Also we can configure the response for each http request. We will do that using the connection property of MockBackend.

Let’s create an instance of mockBackend first using TestBed get method :
mockBackend = TestBed.get(MockBackend);

This is our final test case :

In the above test case, for every http request getData method makes, it will get the response that we have provided.

We can also cover the error scenario using the mockError method like this :

You can find the code for this blog here


Advertisements
This entry was posted in AngularJs2.0, JavaScript, testing. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s