单元测试Angular HTTP拦截器

Question

I have a standard HTTP interceptor as a factory:

angular
  .module('app.services')
  .factory('HttpInterceptorService', HttpInterceptorService);

function HttpInterceptorService($injector) {

  // Callable functions
  var service = {
    response: response,
    responseError: responseError
  };

  return service;

  // Pass through clean response
  function response(data) {
    return data;
  }

  // Handle error response
  function responseError(rejection) {

    // Handle bypass requests
    if (angular.isDefined(rejection.config) && rejection.config.bypassInterceptor) {
      return rejection;
    }

    // Get $state via $injector to avoid a circular dependency
    var state = $injector.get('$state');

    switch (rejection.status) {
      case 404:
        return state.go('404');
        break;
      default:
        return state.go('error');
    }
  }

}

In manual testing, I can see this works correctly by redirecting the user to the relevant 404 or error page if an HTTP call returns an error response. The basic principal of this is documented by Angular here: https://docs.angularjs.org/api/ng/service/ $http#interceptors

Now I'm trying to write a unit test with Karma & Jasmine to test that the responseError function works correctly. I've checked out this SO answer to help me. My test looks like this:

describe('HttpInterceptorService', function() {

  // Bindable members
  var $window,
      HttpInterceptorService;

  // Load module
  beforeEach(module('app.services'));

  // Set window value
  beforeEach(function () {
    $window = { location: { href: null } };

    module(function($provide) {
      $provide.value('$window', $window);
    });
  });

  // Bind references to global variables
  beforeEach(inject(function(_HttpInterceptorService_) {
    HttpInterceptorService = _HttpInterceptorService_;
  }));

  // Check service exists with methods
  it('Exists with required methods', function() {
    expect(HttpInterceptorService).toBeDefined();
    expect(angular.isFunction(HttpInterceptorService.response)).toBe(true);
    expect(angular.isFunction(HttpInterceptorService.responseError)).toBe(true);
  });

  // Test 404 HTTP response
  describe('When HTTP response 404', function () {
    beforeEach(function() {
      HttpInterceptorService.responseError({ status: 404 });
    });

    it('Sets window location', function () {
      expect($window.location.href).toBe('/404');
    });
  });

});

My test passes the Exists with required methods check but fails Sets window location with the following error:

Error: [$injector:unpr] Unknown provider: $stateProvider <- $state

Answer 1

The module doesn't seem to have ui.router module loaded, hence $state service is undefined. This is fine, because real router introduces extra moving parts and is highly undesirable in unit tests.

For functional test it is normal to treat a unit as a blackbox, provide initial conditions and test the results, asserting window.location would be appropriate.

For unit test there's no need to treat a unit as a blackbox, $state service may be stubbed:

var statePromiseMock = {};
beforeEach(module('app.services', {
  $state: {
    go: jasmine.createSpy().and.returnValue(statePromiseMock)
  }
}));

And tested like:

it('...', inject(function (HttpInterceptorService, $state) {
    var state404Promise = HttpInterceptorService.responseError({ status: 404 });
    expect($state.go).toHaveBeenCalledWith('404');
    expect(state404Promise).toBe(statePromiseMock);
    ...
}))

Ie it may be something like

describe('HttpInterceptorService', function() {

  // Bindable members
  var HttpInterceptorService;

  var statePromiseMock = {};
  beforeEach(module('app.services', {
    $state: {
      go: jasmine.createSpy().and.returnValue(statePromiseMock)
    }
  }));

  // Bind references to global variables
  beforeEach(inject(function(_HttpInterceptorService_) {
    HttpInterceptorService = _HttpInterceptorService_;
  }));

  // Check service exists with methods
  it('Exists with required methods', function() {
    expect(HttpInterceptorService).toBeDefined();
    expect(angular.isFunction(HttpInterceptorService.response)).toBe(true);
    expect(angular.isFunction(HttpInterceptorService.responseError)).toBe(true);
  });

  it('...', inject(function($state) {
    var state404Promise = HttpInterceptorService.responseError({
      status: 404
    });
    expect($state.go).toHaveBeenCalledWith('404');
    expect(state404Promise).toBe(statePromiseMock);
  }))

});