0

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
Improve this question
4
  • You'll have to edit the service because you are checking properties on an undefined object. rejection.config.bypassInterceptor is undefined, which means you'll want to add angular.isDefined(rejection) && in front of the if statement. Commented Sep 13, 2016 at 16:29
  • @Tom Thanks for the help. This has helped me get past that initial error, but I still have an error. I have updated my question to show Commented Sep 13, 2016 at 16:34
  • I think you'll have to mock the $window service by putting a spy on it. Commented Sep 13, 2016 at 16:43
  • On second thought, no, the $stateProvider is unknown. Any line numbers on which the error shows? Do you have a stateProvider config? Commented Sep 13, 2016 at 16:46

1 Answer 1

Reset to default
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); ... }))

I.e. 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); })) });
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

This doesn't seem to be working for me. I get an error Can't find variable: $state for this line: expect($state.go).toHaveBeenCalledWith('404');
It is a service that should be injected with inject, as any other.
Would you be able to give an example of how my test would look? I just can't seem to get this working with your instructions.
This gives me the error: Unknown provider: HttpInterceptorServiceProvider <- HttpInterceptorService
Would you be able to show how your answer fits into my full test code in my original question?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.