如何在指令单元测试中模拟资源

Question

I have a directive that calls a resource and then manipulate the response. My unit test always give me "Unexpected request GET". I have tried some ways to mock this resources, but without success. If someone knows how to do that, thanks very much in advance!

;(function(app){
  'use strict';

  app.directive('reportBalance', ['feelingsResource', function(feelingsResource){

    function reportBalanceDirective(scope){
      buildTotalObject(scope);
      getFeelingsTotals(scope);
    }

    function buildTotalObject(scope){
      scope.total = {
        'sad' : 0,
        'happy' : 0,
        getFeelingsTotal : function(){
          return this.sad + this.happy;
        },
        getPercentage: function(feeling) {
          if(!this.getFeelingsTotal())
            return '0%';
          return (this[feeling] / this.getFeelingsTotal() * 100) + '%';
        }
      };
    }

    function getFeelingsTotals(scope){
      feelingsResource.totals({}, function(response){
        onGetFeelingsTotalSuccess(scope, response);
      });
    }

    function onGetFeelingsTotalSuccess(scope, response){
      scope.total.sad = Math.abs(response.totals.sad);
      scope.total.happy = Math.abs(response.totals.happy);
    }

    return {
      restrict: 'E',
      scope: {},
      templateUrl: 'app/commons/directives/reports/balance/report-balance-template.html',
      link: reportBalanceDirective
    };

  }]);

})(app);

And here is the specification:

describe("Report Balance Directive:", function() {

  var scope, element;

  beforeEach(function(){
    module('app');
    module('templates');
  });

  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
    element = angular.element('<report-balance></report-balance>');
    $compile(element)(scope);
    scope.$digest();
  }));

  it('should contains a "totals" in its scope', function(){
    expect(scope.totals).toBeDefined();
  });

});

Error:

Error: Unexpected request: GET http://localhost:3000/feelings/totals

Answer 1

Well, you just need to use the mock $httpBackend , as for any other unit test involving $http requests:

$httpBackend.whenGET('/feelings/totals').respond(someData);

Or, since you delegate to a service to make that $http query, to mock the service itself:

spyOn(feelingsResource, 'totals').andCallFake(function(config, callback) {
    callback(someData);
});