Unexpected HTTP GET calls from within a custom Service unit test

Question

Well, my question is pretty straightforward and described in title. I have a dummy service which I want to implement in TDD fashion.

I'm going to move my implementation towards using $http service and deferred+promises. This will require $scope().$apply() in the testing code. So, as soon as I added this invocation, I observe unexpected HTTP GET calls that try to retrieve ALL template htmls that exist in my project.

PhantomJS 1.9.8 (Windows 8 0.0.0) myService should search places just fine FAILED
    Error: Unexpected request: GET app/landing/landing.html
    No more request expected
        at $httpBackend (c:/workspace/ionic/myApp/www/lib/angular-mocks/angular-mocks.js:1245)
        at sendReq (c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:23514)
        at c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:23225
        at processQueue (c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:27747)
        at c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:27763
        at c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:29026
        at c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:28837
        at c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:29131
        at c:/workspace/ionic/myApp/tests/services/myServiceSpec.js:35
        at invoke (c:/workspace/ionic/myApp/www/lib/ionic/js/ionic.bundle.js:17630)
        at workFn (c:/workspace/ionic/myApp/www/lib/angular-mocks/angular-mocks.js:2439)
    undefined

Any clue why it is happening? Nooby question of angular devs I bet...

My simple service which doesn't even make $state.go() invocations.

(function () {
    'use strict';

    angular.module('myApp').factory('myService', ['$q', '$http', myService]);

    function myService($q, $http) {
        var service = this;

        function searchPlacesAsync() {
            var placesList = [
                { userName: 'Mister X', title: 'Haunted places' },
                { userName: 'Mister A', title: 'Cute places' },
                { userName: 'Mister S', title: 'Lovely places' }
            ];

            var deferred = $q.defer();
            deferred.resolve(placesList);
            return deferred.promise;
        };

        return {
            searchPlacesAsync: searchPlacesAsync
        };
    };
})();

Unit test

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

    beforeEach(module('myApp'));

    beforeEach(inject(function (_myService_, _$rootScope_){
        myService = _myService_;
        $scope = _$rootScope_.$new();
    }));

    it('should search places just fine', inject( function($httpBackend){
        // Arrange
        var placesFilter = { location: { country: 'Russia', city: 'Moscow'} };
        myService.setFilter(placesFilter);

       // TODO Why should I do it
       $httpBackend.whenGET('app/search_places/searchPlaces.html').respond({});
        //$httpBackend.whenGET('app/landing/landing.html').respond({});
        // Act
        var result = myService.searchPlacesAsync();
        $scope.$apply();
        // Assert
        expect(result).not.toBe(null);
    }) );
});

And finally, here's my Karma config file

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
        '../www/lib/ionic/js/ionic.bundle.js',
        '../www/lib/angular-mocks/angular-mocks.js',
        '../www/lib/angular/angular.js',
        '../www/lib/ionic-wizard/dist/ion-wizard.min.js',
        '../www/app/**/*.js',
        '**/*Spec.js'
    ],
    exclude: [],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

UPDATE Here's my app.js file

angular.module('myApp', ['ionic', 'ionic.wizard'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

    if (window.cordova && window.cordova.plugins.Keyboard) {
  // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }

    if (window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('landing', {
      // abstract: true,
      url: '/landing',
      templateUrl: 'app/landing/landing.html'
    })

    .state('user_wizard', {
      url: '/user/wizard',
      templateUrl: 'app/user_wizard/userWizard.html'
    })

    .state('provider_wizard', {
      url: '/provider/wizard',
      template: 'provider WIZARD...'
    })

    .state('search_places', {
      url: '/search/places',
      templateUrl: 'app/search_places/searchplaces.html'
    })

    .state('view_Place', {
      url: '/places/view/:id',
      templateUrl: 'app/view_place/viewPlace.html'
    });

  $urlRouterProvider.otherwise('/search/places');
}]);

Answer 1

I think your main problem is that you are using $scope.$apply() to make your service return it's pending values. Instead you can just use $httpBackend.flush() to force the backend to resolve any pending requests and resolve its promises. This should deal with your issue of template fetching.

For this reason, the mock $httpBackend has a flush() method, which allows the test to explicitly flush pending requests. This preserves the async api of the backend, while allowing the test to execute synchronously.

https://docs.angularjs.org/api/ngMock/service/$httpBackend

However, you'll probably run into this again later. When you do you'll have to tell the $httpBackend what to respond to for each template. This is an impossible task to do by hand. Instead use the ng-html2js preprocessor in Karma which automatically takes your html, and compiles it into appropriate Javascript strings. You can then create a bundle of templates available as a module. I just have one giant one with all of them in it that I include in tests which need them.

Unit Testing AngularJS directive with templateUrl <== Checkout the first answer for help with the karma preprocessor