Angular2 - HTTP call unit testing

Question

I am a beginner of angular2.

My service.ts will be,

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Headers, RequestOptions, URLSearchParams}  from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class HomeService {

    url : string;

    constructor(private _http: Http) {}

    getUserInfo(userId : string) {

        this.url = "http://localhost:9080/GetUserData";

        let content = new URLSearchParams();
        content.set('userId', userId.toString());

        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        return this._http
            .post(this.url, content.toString(), {headers: headers})
            .map((res: Response) => res.json())
            .catch(this.handleError);
    }

    handleError (error: Response | any) {

        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

}

I have written the unit test case as,

import { TestBed, async, inject } from '@angular/core/testing';
import { HomeService } from './home.service';
import { BaseRequestOptions, Response, ResponseOptions, Http } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import {Observable} from 'rxjs/Observable';

describe('FacilityPopupService', () => {
  let subject: HomeService = null;
  let backend: MockBackend = null;
  let userid="UID1";

  beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [
          HomeService,
          Response,
        BaseRequestOptions,
        MockBackend,
        {
          provide: Http,
          useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
            return new Http(backend, defaultOptions);
          },
          deps: [MockBackend, BaseRequestOptions],
        }

          ]
    });
  });

  beforeEach(inject([HomeService, MockBackend], (userService: HomeService, mockBackend: MockBackend) => {
    subject = userService;
    backend = mockBackend;

  }));

  it('get Facility list should call endpoint and return it\'s result', (done) => {
      backend.connections.subscribe((connection: MockConnection) => {
          let options = new ResponseOptions({
            body: JSON.stringify({ success: true })
          });
          connection.mockRespond(new Response(options));
      });

      subject.getUserInfo(userid)
        .subscribe((response) => {
            expect(response).toEqual({ success: true });
            done();
      });

  });

});

I want to write the test case for both success case and error case. I don't know how how to execute catch block. Also I don't know how to write test case for handleError method .

I cannot cannot cover all the possible scenarios here. Can you please help me to get 100% coverage for the service.ts.

Which cases do you want to cover?

BILL
– BILL

2017-03-04 22:45:28 +00:00
Commented Mar 4, 2017 at 22:45 — BILL
– BILL, Commented Mar 4, 2017 at 22:45
@BILL. Updated the question. Please check now.

Human Being
– Human Being

2017-03-04 23:42:40 +00:00
Commented Mar 4, 2017 at 23:42 — Human Being
– Human Being, Commented Mar 4, 2017 at 23:42

BILL · Accepted Answer · 2017-03-05 09:48:19Z

1

For covering negative case you can mock response with non-200 status code. You can follow this example MockBackend.

 it('getUserInfo() while server is down', fakeAsync(() => {
       let result: any;
       let catchedError: any;
       this.userUser.getUserInfo(1)
           .then((userInfo: any) => result = userInfo)
           .catch((error: any) => catchedError = error);
       this.lastConnection.mockRespond(new Response(new ResponseOptions({
         status: 404, //here
         statusText: 'URL not Found',
       })));
       tick();
       expect(result).toBeUndefined();
       expect(catchedError).toBeDefined();
     }));
});

answered Mar 5, 2017 at 9:48

BILL

4,89710 gold badges63 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Human Being Over a year ago

Thanks for your answer bill... what is tick() here. I am getting compilation error when it put tick().

BILL Over a year ago

@HumanBeing you can import tick function from @angular/core/testing

Human Being Over a year ago

Great... _+1 for u... Can u please look in to the issue in component.ts . stackoverflow.com/questions/42814752/…

Aravind · Accepted Answer · 2017-03-05 04:15:31Z

0

You can use the below code for the positive case.

describe('HomeService',() =>{
    let homeService:HomeService,
        mockHttp;

        beforeEach(() => {
            mockHttp=jasmine.createSpyObject('mockHttp',['get'])
            homeService=new HomeService(mockHttp);

        });
        describe('GetbyID', =>{
            it('should get the detail of user with passed id', =>{
            let user={id:1,name:'some Name'}
                mockHttp.get.and.returnValue(Observable.of(false));
                homeService.getUserInfo(1);
                expect(mockHttp.get).toHaveBeenCalledWith('your url');

            });
        });
});

For negative case: Make a mistake in the URL and check if the call is failing and error handler method is invoked or not.

edited Mar 5, 2017 at 4:15

answered Mar 5, 2017 at 1:03

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

1 Comment

Human Being Over a year ago

Any idea about negative case ?

Collectives™ on Stack Overflow

Angular2 - HTTP call unit testing

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related