Trying to mock $http in Angular

Question

I am trying to create some basic test coverage of a service that I have created. Here is my service:

App.factory('encounterService', function ($resource, $rootScope) {
  return {
    encounters: [],
    encountersTotalCount: 0,
    encountersIndex: 0,
    resource: $resource('/encounters/:encounterId', {encounterId:'@encounterId'}, {
      search: {
        method: 'GET',
        headers: {
          'RemoteUser': 'jjjyyy',
          'Content-Type': 'application/json'
        }
      }
    }),
    getMoreEncounters: function() {
      var that = this;
      that.resource.search({}, function(data) {
        that.encountersTotalCount = data.metadata.totalCount;
        _.each(data.encounters, function(encounter) {
          that.encounters.push(encounter);
        });
        that.busy = false;
        that.offset += 10;
        $rootScope.$broadcast('encountersFetched');
      });
    }
  };
});

Here is my test that I cannot get to work:

describe('encounterService', function() {
  var _encounterService, httpBackend;
  beforeEach(inject(function(encounterService, $httpBackend) {
    _encounterService = encounterService;
    httpBackend = $httpBackend;
    var url = '/encounters/';
    httpBackend.when('GET', url).respond([{}, {}, {}]);
  }));

  afterEach(function() {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
  });

  it('should return a list of encounters', function() {
    _encounterService.getMoreEncounters();
    httpBackend.flush();
    expect(_encounterService.encounters.size).toBe(3);
  });
});

The error I get is

Chrome 31.0.1650 (Mac OS X 10.8.5) Clinical App services encounterService should return a list of encounters FAILED
    Error: Unexpected request: GET encounters
    No more request expected
        at $httpBackend (/Users/mhamm/Developer/clinical/app/bower_components/angular-mocks/angular-mocks.js:1179:9)
        at sendReq (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:7611:9)
        at $http.serverRequest (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:7345:16)
        at wrappedCallback (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:10549:81)
        at wrappedCallback (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:10549:81)
        at /Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:10635:26
        at Scope.$eval (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:11528:28)
        at Scope.$digest (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:11373:31)
        at Function.$httpBackend.flush (/Users/mhamm/Developer/clinical/app/bower_components/angular-mocks/angular-mocks.js:1453:16)
        at null. (/Users/mhamm/Developer/clinical/test/spec/clinical.spec.js:78:21)
    Error: [$rootScope:inprog] $digest already in progress
    http://errors.angularjs.org/1.2.0/$rootScope/inprog?p0=%24digest
        at /Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:78:12
        at beginPhase (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:11830:15)
        at Scope.$digest (/Users/mhamm/Developer/clinical/app/bower_components/angular/angular.js:11364:9)
        at Function.$httpBackend.verifyNoOutstandingExpectation (/Users/mhamm/Developer/clinical/app/bower_components/angular-mocks/angular-mocks.js:1486:16)
        at null. (/Users/mhamm/Developer/clinical/test/spec/clinical.spec.js:68:21)

I do not fully understand mocking, so I am sure I am doing something basic incorrectly. Please show me what I am doing wrong.

Trying to mock $http in Angular

1 Answers