Unable to get valid assertion involving Jasmine spy on Angular

Question

I'm trying to write tests for a service that simply takes a HttpResponse as input and outputs a console.error in case the HttpResponse involves an error.

The service works fine and even in the browser instance that Karma populates, I can see the console.error, but the test I wrote asserting the same is failing. Not sure why.

Here's the test:-

import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";

describe("GlobalErrorHandler Service", () => {
  let service: GlobalErrorHandler;
  beforeEach(() => {
    service = new GlobalErrorHandler();
  });
  afterEach(() => {
    service = null;
  });

  it("should catch HttpErrors and output to console", () => {
    let error = new HttpErrorResponse({
      url: "Some url",
      error: { message: "error message details" },
      status: 404
    });
    let errorLog = {
      status: error.status,
      message: error.message,
      details: error.error.message
    };
    service.handleError(error);
    console.error = jasmine.createSpy("error");
    expect(console.error).toHaveBeenCalled();
  });
});

Here's the service that I'm testing:-

import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class GlobalErrorHandler {
  constructor() {}
  handleError(error: any) {
    if (error instanceof HttpErrorResponse) {
      const errorToShow = {
        status: error.status,
        message: error.message,
        details: error.error.message
      };
      console.error(`Backend returned this error => `, errorToShow);
    } else {
      console.error(`An error occurred => "${error.message}"`);
    }
    // Throwing error...
    throw error;
    // enable the following line to show notification...
    // this.errorNotifier.handleError(error);
  }
}

Here's the test output on the terminal:-

ng test
10% building 7/8 modules 1 active ...tarter-app-seven/src sync /\.spec\.ts$/25 01 2019 17:24:12.806:WARN [karma]: No captured browser, open http://localhost:9876/
25 01 2019 17:24:12.817:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
25 01 2019 17:24:12.818:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
25 01 2019 17:24:12.830:INFO [launcher]: Starting browser Chrome
25 01 2019 17:24:23.171:WARN [karma]: No captured browser, open http://localhost:9876/    
25 01 2019 17:24:23.405:INFO [Chrome 71.0.3578 (Linux 0.0.0)]: Connected on socket FvdOGo3cHANej7U5AAAA with id 24264291
ERROR: 'Backend returned this error => ', Object{status: 404, message: 'Http failure response for Some url: 404 undefined', details: 'error message details'}
Chrome 71.0.3578 (Linux 0.0.0): Executed 3 of 4 SUCCESS (0 secs / 0.307 secs)
ERROR: 'Backend returned this error => ', Object{status: 404, message: 'Http failure response Chrome 71.0.3578 (Linux 0.0.0) GlobalErrorHandler Service should catch HttpErrors and output to console FAILED
  HttpErrorResponse: Http failure response for Some url: 404 undefined
Chrome 71.0.3578 (Linux 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.311 secs)
Chrome 71.0.3578 (Linux 0.0.0) GlobalErrorHandler Service should catch HttpErrors and output to console FAILED
Chrome 71.0.3578 (Linux 0.0.0): Executed 4 of 4 (1 FAILED) (0.359 secs / 0.311 secs)
TOTAL: 1 FAILED, 3 SUCCESS
TOTAL: 1 FAILED, 3 SUCCESS

Screenshot of browser test instance:-

I expect the test to pass, especially when the browser actually returns a console.error. I'm new to testing and Jasmine. So it's likely something silly, please help me out. Thanks in advance :)

Update:-

Tried rearranging the lines to have the spy created before the service is called (in the beforeEach section) but got the same result:-

import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";

describe("GlobalErrorHandler Service", () => {
  let service: GlobalErrorHandler;
  let errorSpy;
  beforeEach(() => {
    service = new GlobalErrorHandler();
    errorSpy = jasmine.createSpy('error');
  });
  afterEach(() => {
    service = null;
  });

  it("should catch HttpErrors and output to console", () => {
    let error = new HttpErrorResponse({
      url: "Some url",
      error: { message: "error message details" },
      status: 404
    });
    let errorLog = {
      status: error.status,
      message: error.message,
      details: error.error.message
    };
    service.handleError(error);
    expect(errorSpy).toHaveBeenCalled();
  });
});

Solution:-

Got it to work, the problem was that there was a throw statement in my method which was cancelling the test before it reached the expect statement. Here I am using a promise to call that function so that the expect statement only gets called when the method returns an error.

import { Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class GlobalErrorHandler {
  constructor() {}
  /**
   * If an error occurs, we display it in the console with pertinent details
   * @param error the error object
   */
  handleError(error: any) {
    if (error instanceof HttpErrorResponse) {
      const errorToShow = {
        status: error.status,
        message: error.message,
        details: error.error.message
      };
      console.error(`Backend returned this error => `, errorToShow);
    } else {
      // If error is not an instance of HttpErrorResponse...
      console.error(`An error occurred => "${error.message}"`);
    }
    throw new Error(error.message);
    // enable the following line to show notification...
    // this.errorNotifier.handleError(error);
  }
}

Test:-

import { TestBed } from "@angular/core/testing";
import { HttpErrorResponse } from "@angular/common/http";
import { GlobalErrorHandler } from "./global-error-handler.service";

describe("GlobalErrorHandler Service", () => {
  let service: GlobalErrorHandler;
  let error;
  beforeEach(() => {
    service = new GlobalErrorHandler();
    error = new HttpErrorResponse({
      url: "Some url",
      error: { message: "error message details" },
      status: 404
    });
  });
  afterEach(() => {
    service = null;
    error = null;
  });

  it("should show output error message to console", () => {
    const errorSpy = spyOn(console, "error");
    let promise = new Promise((resolve, reject) => {
      resolve(()=>service.handleError(error));
    })
    promise.then(()=> {},()=>expect(errorSpy).toHaveBeenCalled());
  });

  it("should throw error when called", () => {
    expect(() => {
      service.handleError(error);
    }).toThrow(new Error(error.message));
  });
});

Answer 1

You are creating the spy after handling the error, thats why the assertion fails.

Try with the following:

const errorSpy = spyOn(console,"error");
service.handleError(error);
expect(errorSpy).toHaveBeenCalled();