Angular - Testing http services with httpBackend throws unexpected exception

Question

The module definition

var module = angular.module('test', []);
module.provider('client', function() {
    this.$get = function($http) {
        return {
            foo: function() {
                return $http.get('foo');
            }
        }
    }
});

module.factory('service', ['client', function(client) {
    return {
        bar: function() {
            return client.foo();
        }
    }
}]);

Basically, client is a wrapper for http calls, and service is a wrapper around the client basic features.

I'm unit testing both the provider and the service with karma+jasmine. The provider tests run as expected, but i have a problem with the service tests:

describe('service test', function(){
    var service = null;
    beforeEach(function(){
        module('test')

        inject(function(_service_, $httpBackend, $injector) {
            service = _service_;
            $httpBackend = $injector.get('$httpBackend');
        });
    });

    it('should invoke client.foo via service.bar', function() {
        $httpBackend.expect("GET", "foo");
        service.bar();
        expect($httpBackend.flush).not.toThrow();
    });

});

I get Expected function not to throw, but it threw Error: No pending request to flush !.. When testing the provider with the same way, this test passes. Why?

Does [this](http://stackoverflow.com/a/19586921/771848) help? — alecxe, Mar 29 '16 at 16:44
Something looks fishy in your `beforeEach()` ... The beforeEach gets an argument of `$httpBackend`, and then you overwrite that argument with `$httpBackend = $injector.get('$httpBackend');` ... From the code you have shown, `$httpBackend` seems like it woul be `undefined` inside the `it()` block. — Sunil D., Mar 29 '16 at 17:07

score 1 · Answer 1 · answered Mar 30 '16 at 14:05

When you are testing your service, you need to mock the client and inject that mock instead of the real client. Your mock can be in the same file if you only expect to use it for testing this service or in a separate file if you'll use it again elsewhere. Doing it this way does not require the use of $httpBackend (because you are not actually making an http call) but does require using a scope to resolve the promise.

The mock client:

angular.module('mocks.clientMock', [])
    .factory('client', ['$q', function($q) {
        var mock = {
            foo: function() {
                var defOjb = $q.defer();
                defOjb.resolve({'your data':'1a'});
                return defOjb.promise;
            }
        };
        return mock;
    }]);

Using the mock:

describe('service test', function(){
    var service, mock, scope;
    beforeEach(function(){
        module('test', 'mocks.clientMock');

        inject(function(_service_, $rootScope) {
            service = _service_;
            scope = $rootScope.$new();
        });
    });

    it('should invoke client.foo via service.bar', function() {
        spyOn(client, 'foo').and.callThrough();
        service.bar();
        scope.$digest();
        expect(client.foo).toHaveBeenCalled();
    });
});

Angular - Testing http services with httpBackend throws unexpected exception

1 Answers1