Angular 2 Unit Testing Observable Errors (HTTP)

Question

I am trying to write unit tests for my API service but have some trouble catching HTTP errors. I am following this guide along with the Angular2 docs since the guide is (slightly) out of date in some minor areas.

All unit tests pass apart from those where an error is thrown by the service (due to error HTTP status code). I can tell this by logging out response.ok. From what i've read this has something to do with the unit tests not executing asynchronously, hence, not waiting for the error response. However, I have no idea why this is the case here since I have used the async() utility function in the beforeEach method.

API Service

get(endpoint: string, authenticated: boolean = false): Observable<any> {
    endpoint = this.formatEndpoint(endpoint);
    return this.getHttp(authenticated) // Returns @angular/http or a wrapper for handling auth headers
        .get(endpoint)
        .map(res => this.extractData(res))
        .catch(err => this.handleError(err)); // Not in guide but should work as per docs
}
private extractData(res: Response): any {
    let body: any = res.json();
    return body || { };
}

private handleError(error: Response | any): Observable<any> {
    // TODO: Use a remote logging infrastructure
    // TODO: User error notifications
    let errMsg: string;
    if (error instanceof Response) {
        const body: any = error.json() || '';
        const err: string = 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);
}

Error unit test

// Imports

describe('Service: APIService', () => {
    let backend: MockBackend;
    let service: APIService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [
                BaseRequestOptions,
                MockBackend,
                APIService,
                {
                    deps: [
                        MockBackend,
                        BaseRequestOptions
                    ],
                    provide: Http,
                        useFactory: (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
                            return new Http(backend, defaultOptions);
                        }
                },
                {provide: AuthHttp,
                    useFactory: (http: Http, options: BaseRequestOptions) => {
                        return new AuthHttp(new AuthConfig({}), http, options);
                    },
                    deps: [Http, BaseRequestOptions]
                }
            ]
        });
        const testbed: any = getTestBed();
        backend = testbed.get(MockBackend);
        service = testbed.get(APIService);
    }));

    /**
     * Utility function to setup the mock connection with the required options
     * @param backend
     * @param options
     */
    function setupConnections(backend: MockBackend, options: any): any {
        backend.connections.subscribe((connection: MockConnection) => {
            const responseOptions: any = new ResponseOptions(options);
            const response: any = new Response(responseOptions);
            console.log(response.ok); // Will return false during the error unit test and true in others (if spyOn log is commented).
            connection.mockRespond(response);
        });
    }

    it('should log an error to the console on error', () => {
        setupConnections(backend, {
            body: { error: `Some strange error` },
            status: 400
        });
        spyOn(console, 'error');
        spyOn(console, 'log');

        service.get('/bad').subscribe(null, e => {
            // None of this code block is executed.
            expect(console.error).toHaveBeenCalledWith("400 - Some strange error");
            console.log("Make sure an error has been thrown");
        });

        expect(console.log).toHaveBeenCalledWith("Make sure an error has been thrown."); // Fails
    });

Update 1

when I check the first callback, response.ok is undefined. This leads me to believe that there is something wrong in the setupConnections utility.

    it('should log an error to the console on error', async(() => {
        setupConnections(backend, {
            body: { error: `Some strange error` },
            status: 400
        });
        spyOn(console, 'error');
        //spyOn(console, 'log');

        service.get('/bad').subscribe(res => {
            console.log(res); // Object{error: 'Some strange error'}
            console.log(res.ok); // undefined
        }, e => {
            expect(console.error).toHaveBeenCalledWith("400 - Some strange error");
            console.log("Make sure an error has been thrown");
        });

        expect(console.log).toHaveBeenCalledWith("Make sure an error has been thrown.");
    }));

Update 2

If, instead of catching errors in the get method I do it explicitly in map then still have same problem.

get(endpoint: string, authenticated: boolean = false): Observable<any> {
    endpoint = this.formatEndpoint(endpoint);
    return this.getHttp(authenticated).get(endpoint)
        .map(res => {
            if (res.ok) return this.extractData(res);
            return this.handleError(res);
        })
        .catch(this.handleError);
}

Update 3

After some discussion this issue submitted

Pectin

Are you sure the error callback is supposed to be called for error status codes? – Barbiturism

@peeskillet, pretty sure. See the HTTP guide and the ok property of Response – Pectin

I don't know. None of those links explicitly says anything on the matter. Digging through the source I don't see any checks for error status codes. I think it's up to the developer to handle this from the Response. – Barbiturism

@peeskillet i would agree, but the HTTP guide is quite explicit in the way errors are caught from http.get(). Even so, see my new update. The same problem occurs if I manually test for an okay response – Pectin

Actually, nevermind, it's checked here – Barbiturism

Thought as much. Thanks for checking though! – Pectin

Let us continue this discussion in chat. – Pectin

Answer 1

From what i've read this has something to do with the unit tests not executing asynchronously, hence, not waiting for the error response. However, I have no idea why this is the case here since I have used the async() utility function in the beforeEach method

You need to use it in the test case (the it). What async does is create an test zone that waits for all async tasks to complete before completing the test (or test area, e.g. beforeEach).

So the async in the beforeEach is only waiting for the async tasks to complete in the method before exiting it. But the it also needs that same thing.

it('should log an error to the console on error', async(() => {

}))

UPDATE

Aside from the missing async, there seems to be a bug with the MockConnection. If you look at the mockRespond, it always calls next, not taking into consideration the status code

mockRespond(res: Response) {
  if (this.readyState === ReadyState.Done || this.readyState === ReadyState.Cancelled) {
    throw new Error('Connection has already been resolved');
  }
  this.readyState = ReadyState.Done;
  this.response.next(res);
  this.response.complete();
}

They have a mockError(Error) method, which is what calls error

mockError(err?: Error) {
  // Matches ResourceLoader semantics
  this.readyState = ReadyState.Done;
  this.response.error(err);
}

but this does not call allow you to pass a Response. This is inconsistent with how the real XHRConnection works, which checks for the status, and sends the Response either through the next or error, but is the same Response

response.ok = isSuccess(status);
if (response.ok) {
  responseObserver.next(response);
  // TODO(gdi2290): defer complete if array buffer until done
  responseObserver.complete();
  return;
}
responseObserver.error(response);

Sounds like a bug to me. Something you should probably report. They should allow you to either send the Response in the mockError or do the same check in the mockRespond that they do in the XHRConnection.

Updated (by OP) SetupConnections()

Current solution

function setupConnections(backend: MockBackend, options: any): any {
    backend.connections.subscribe((connection: MockConnection) => {
        const responseOptions: any = new ResponseOptions(options);
        const response: any = new Response(responseOptions);

        // Have to check the response status here and return the appropriate mock
        // See issue: https://github.com/angular/angular/issues/13690
        if (responseOptions.status >= 200 && responseOptions.status <= 299)
            connection.mockRespond(response);
        else
            connection.mockError(response);
    });
}

Barbiturism

thanks. I have tried this but still get exactly the same result. Nothing in the onerror block of the unit test is called. I actually tried this before since thought the same thing but no luck. This is also not done in the guide i referenced. – Pectin

Did you check the first callback? – Barbiturism

I did the same as above and was able to go to catch, but getting TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. the code looks like this.http.get(url, options) .map(res => { return res.json()}) .catch(res => { return res.json(); } }).finally(() => { }); In spec service.get('geturl').subscribe(() => { }); Am I missing any? – Paola

Answer 2

Here is my working solution which is similar to above suggestions but with more clarity:

it('should log an error to the console on error', async(inject([AjaxService, MockBackend], (
    ajaxService: AjaxService, mockBackend: MockBackend) => {
    service = ajaxService;
    backend = mockBackend;
    backend.connections.subscribe((connection: MockConnection) => {
      const options: any = new ResponseOptions({
        body: { error: 'Some strange error' },
        status: 404
      });
      const response: any = new Response(options);
      connection.mockError(response);
    });
    spyOn(console, 'error');
    service.get('/bad').subscribe(res => {
      console.log(res); // Object{error: 'Some strange error'}
    }, e => {
      expect(console.error).toHaveBeenCalledWith('404 - Some strange error');
    });

  })));

Reference full working code:

Below are all possible test scenarios. Note: Don't worry about AjaxService. It's my custom wrapper on angular http service which is being used as a interceptor.

ajax.service.spec.ts

import { AjaxService } from 'app/shared/ajax.service';
import { TestBed, inject, async } from '@angular/core/testing';
import { Http, BaseRequestOptions, ResponseOptions, Response } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';

describe('AjaxService', () => {
  let service: AjaxService = null;
  let backend: MockBackend = null;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        MockBackend,
        BaseRequestOptions,
        {
          provide: Http,
          useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => {
            return new Http(backendInstance, defaultOptions);
          },
          deps: [MockBackend, BaseRequestOptions]
        },
        AjaxService
      ]
    });
  }));

  it('should return mocked post data',
    async(inject([AjaxService, MockBackend], (
      ajaxService: AjaxService, mockBackend: MockBackend) => {
      service = ajaxService;
      backend = mockBackend;
      backend.connections.subscribe((connection: MockConnection) => {
        const options = new ResponseOptions({
          body: JSON.stringify({ data: 1 }),
        });
        connection.mockRespond(new Response(options));
      });

      const reqOptions = new BaseRequestOptions();
      reqOptions.headers.append('Content-Type', 'application/json');
      service.post('', '', reqOptions)
        .subscribe(r => {
          const out: any = r;
          expect(out).toBe(1);
        });
    })));

  it('should log an error to the console on error', async(inject([AjaxService, MockBackend], (
    ajaxService: AjaxService, mockBackend: MockBackend) => {
    service = ajaxService;
    backend = mockBackend;
    backend.connections.subscribe((connection: MockConnection) => {
      const options: any = new ResponseOptions({
        body: { error: 'Some strange error' },
        status: 404
      });
      const response: any = new Response(options);
      connection.mockError(response);
    });
    spyOn(console, 'error');
    service.get('/bad').subscribe(res => {
      console.log(res); // Object{error: 'Some strange error'}
    }, e => {
      expect(console.error).toHaveBeenCalledWith('404 - Some strange error');
    });

  })));

  it('should extract mocked data with null response',
    async(inject([AjaxService, MockBackend], (
      ajaxService: AjaxService, mockBackend: MockBackend) => {
      service = ajaxService;
      backend = mockBackend;
      backend.connections.subscribe((connection: MockConnection) => {
        const options = new ResponseOptions({
        });
        connection.mockRespond(new Response(options));
      });

      const reqOptions = new BaseRequestOptions();
      reqOptions.headers.append('Content-Type', 'application/json');
      service.get('test', reqOptions)
        .subscribe(r => {
          const out: any = r;
          expect(out).toBeNull('extractData method failed');
        });
    })));

  it('should log an error to the console with empty response', async(inject([AjaxService, MockBackend], (
    ajaxService: AjaxService, mockBackend: MockBackend) => {
    service = ajaxService;
    backend = mockBackend;
    backend.connections.subscribe((connection: MockConnection) => {
      const options: any = new ResponseOptions({
        body: {},
        status: 404
      });
      const response: any = new Response(options);
      connection.mockError(response);
    });
    spyOn(console, 'error');
    service.get('/bad').subscribe(res => {
      console.log(res); // Object{error: 'Some strange error'}
    }, e => {
      expect(console.error).toHaveBeenCalledWith('404 - {}');
    });

    // handle null response in error
    backend.connections.subscribe((connection: MockConnection) => {
      connection.mockError();
    });
    const res: any = null;
    service.get('/bad').subscribe(res, e => {
      console.log(res);
    }, () => {
      expect(console.error).toHaveBeenCalledWith(null, 'handleError method with null error response got failed');
    });

  })));

});

ajax.service.ts

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

/**
 * Wrapper around http, use this for all http operations.
 * It has centralized error handling as well.
 * @export
 * @class AjaxService
 */
@Injectable()
export class AjaxService {
  /**
   * Creates an instance of AjaxService.
   * @param {Http} http
   *
   * @memberOf AjaxService
   */
  constructor(
    private http: Http,
  ) { }

  /**
   * Performs a request with get http method.
   *
   * @param {string} url
   * @param {RequestOptionsArgs} [options]
   * @returns {Observable<Response>}
   *
   * @memberOf AjaxService
   */
  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    options = this.getBaseRequestOptions(options);
    options = this.setHeaders(options);
    return this.http.get(url, options)
      .map(this.extractData)
      .catch(this.handleError);
  }

  /**
   * Performs a request with post http method.
   *
   * @param {string} url
   * @param {*} body
   * @param {RequestOptionsArgs} [options]
   * @returns {Observable<Response>}
   *
   * @memberOf AjaxService
   */
  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    options = this.getBaseRequestOptions(options);
    options = this.setHeaders(options);
    return this.http.post(url, body, options)
      .map(this.extractData)
      .catch(this.handleError);
  }

  /**
   * Util function to fetch data from ajax response
   *
   * @param {Response} res
   * @returns
   *
   * @memberOf AjaxService
   */
  private extractData(res: Response) {
    const body = res.json();
    const out = body && body.hasOwnProperty('data') ? body.data : body;
    return out;
  }

  /**
   * Error handler
   * Future Scope: Put into remote logging infra like into GCP stackdriver logger
   * @param {(Response | any)} error
   * @returns
   *
   * @memberOf AjaxService
   */
  private 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);
  }

  /**
   * Init for RequestOptionsArgs
   *
   * @private
   * @param {RequestOptionsArgs} [options]
   * @returns
   *
   * @memberOf AjaxService
   */
  private getBaseRequestOptions(options: RequestOptionsArgs = new BaseRequestOptions()) {
    return options;
  }

  /**
   * Set the default header
   *
   * @private
   * @param {RequestOptionsArgs} options
   * @returns
   *
   * @memberOf AjaxService
   */
  private setHeaders(options: RequestOptionsArgs) {
    if (!options.headers || !options.headers.has('Content-Type')) {
      options.headers.append('Content-Type', 'application/json');
    }
    return options;
  }

}

Duralumin

import { MockBackend, MockConnection } from '@angular/http/testing' is deprecated right? Any idea how we would use @angular/common/http instead? – Situla