Unit testing angular service with dependencies

Question

I have the following Jasmine unit test:

describe('myService', function () {
    var myService, $q;

    // Instantiate the app
    beforeEach(module('myApp'));

    beforeEach(inject(function (_myService_, fileSystemService, $q) {
        myService = _myService_;
        spyOn(fileSystemService, 'listFiles').and.callFake(function () {
            var deferred = $q.defer();
            deferred.resolve('mockresult');
            return deferred.promise;
        });
    }));

    it('checks the number of outbound files', inject(function ($rootScope) {
        var result;
        myService.sendOutboundFiles2().then(function (res) {
            result = res;
        });
        $rootScope.$digest();
        expect(result).toBe('mockresult');
    }));
});

Which tests this very simple service function:

sendOutboundFiles2() {
     return fileSystemService.listFiles('Cached/Outbound').then(function(outfiles) {
         return outfiles;
     })
}

However when the test runs, it fails with a spurious Error: Unexpected request: GET blah\blah\blah.html No more request expected at $httpBackend error but i have no idea why as neither this test nor the service dependencies do anything with $httpBackend.

MORE INFO

If i comment out my existing controller tests, I get this error:

If i add my controller tests back in, I get this error:

So depending on which tests i add or remove, the HTML file in the GET error changes. But all the controller tests run fine. WTF?!?!?!!??!?!!?

That sounds like an error caused by Angular trying to fetch the template for a directive/component. Are you doing any manual compilation inside your services, or running other tests which do? — GregL
I have taken out my other unit tests, but i still get the error. Although strangely it's now referencing a different .html file in the GET error. — Jonathan Smith
Do you have any other services that compile directives when they are instantiated (i.e. in the constructor, or a method called from it)? Or ones that make $http requests in the constructor? Can you try making the smallest possible Angular module with just the bare minimum you need and then try testing that? Chances are something you don't expect and aren't trying to test is making a HTTP request. — GregL
I've stripped the service back as far as i can to do this test. Still get the same error. Put all my controller unit tests back, they all work fine. It's just the service test that's failing. — Jonathan Smith
Maybe show the full code for your myService then? Have you confirmed that if you remove this test and add back in all the controller tests, that they work fine? Sometimes other tests can bleed through and cause an unrelated test to fail, because they do something async or whatever. — GregL

Jonathan Smith Jonathan Smith · Accepted Answer · 2017-01-10T09:12:47

The problem is caused by Ionic's keen prefetching of all templates into a cache. No idea why this doesn't occur when testing a controller though. The problem only appears when i was testing a service. Any way, I found this thread: Karma test breaks after using ui-router and the relevant fix is to add this snippets before injecting any dependencies:

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

This stubs out the $ionicTemplateCache and prevents it from trying to preload all ui-router templates into the Ionic cache.

Unit testing angular service with dependencies

1 Answers