单元测试map.catch angular4服务

Question

Can any one please suggest how to test the below catch function in spec.ts file?

 getTemplate(){
        this._http.get('http//localhost:8080/new').map((response : Response) => response.json())).catch(this.serverError);
      }
      private serverError(err: any) {
        console.log('sever error:', err); // debug
        if(err instanceof Response) {
         //return Observable.throw(err.json().error || 'backend server error');
          // if you're using lite-server, use the following line
          // instead of the line above:
        return Observable.throw(err.text() || 'backend server error');
        }
        return Observable.throw(err || 'backend server error');
      }

Answer 1

In order to test that you need to receive the HttpErrorResponse from the server. To test this you can write a small interceptor, and throw an error while monitoring the response, then your catch will be triggered.

Check this post out, it has reference to both how to write an interceptor and how to generate the httperror response when requied,

https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

In the code below you also need to make sure that all the setup and imports are done properly, below code snippet will trigger the httperror response, to be precise it would be Http 404.

Update 1

here is how a sample test case file would look like, assume your service name is YourService

import {Injectable, ReflectiveInjector} from '@angular/core';
import {async, fakeAsync, tick} from '@angular/core/testing';
import {BaseRequestOptions, ConnectionBackend, Http, RequestOptions} from '@angular/http';
import {Response, ResponseOptions} from '@angular/http';
import {MockBackend, MockConnection} from '@angular/http/testing';

import { YourService } from './serviceIndependent.service';


describe('MockBackend NameService Example', () => {
  beforeEach(() => {
    this.injector = ReflectiveInjector.resolveAndCreate([
      {provide: ConnectionBackend, useClass: MockBackend},
      {provide: RequestOptions, useClass: BaseRequestOptions},
      Http,
      YourService,
    ]);
    this.yourService = this.injector.get(YourService);
    this.backend = this.injector.get(ConnectionBackend) as MockBackend;
    this.backend.connections.subscribe((connection: any) => this.lastConnection = connection);
  });


  it('getNames() while server is not Reachable', fakeAsync(() => {
       let result: String[];
       let catchedError: any;
       this.yourService.getNames()
           .then((names: String[]) => result = names)
           .catch((error: any) => catchedError = error);
       this.lastConnection.mockRespond(new Response(new ResponseOptions({
         status: 404,
         statusText: 'URL not Found',
       })));
       tick();
       expect(result).toBeUndefined();
       expect(catchedError).toBeDefined();
     }));
});