如何为angularjs指令的控制器模拟服务

Question

I have a directive that i want to unit test. This works but i need to use the service in the controller. How do i go about this?

app.directive('myDirective', function() {
return {
    restrict: 'EA',
    scope: true,
    templateUrl: 'my-directive.html',
    controllerAs: 'md',
    link:function (scope){

    },
    controller: function($scope, $element, $stateParams,service1) {
          this.test = service1.testData;
    }
  }
});

And my unit test file so far

describe("Directive : my directive", function() {
 var element, scope, controller, service1,stateParams;

 beforeEach(module("app"));
 beforeEach(module('src/templates/my-directive.html'));
 beforeEach(function() {
    service1 = {
        method : {
            name : "Test"
        }
    };
 });

 beforeEach(inject(function($compile, $rootScope ) {
   scope = $rootScope.$new();
   element = "<my-directive></my-directive>";
   element = $compile(element)(scope);
   scope.$digest();

   controller = element.controller("myDirective");

  }));

  it("should do something to the scope", function() {
     // test functions using service1
  })

});

and my service

app.factory('service1', function(){
      service1.testData = false;

      service1.myPromise = function (t) {
                               var deferred = $q.defer();
                               $http.get("....")
                               .success(function(result) {
                               deferred.resolve(result)
                           })
                           .error(function(error) {
                                deferred.reject(error)
                            });
                           return deferred.promise;
                        } 
});

How do i add my mocked service to my controller?

Answer 1

Before compiling the directive you can use the $provide service in a beforeEach block.

var service1;
beforeEach(module(function($provide) {
  service1 = {
    testData: 'Test data',
    myPromise: function() {}
  };
  $provide.value('service1', service1);
}));

If your service method returns a promise, you can spy on the method and return a promise when the method is called.

var deferred;
beforeEach(inject(function($q) {
  deferred = $q.defer(); 
  spyOn(service1, 'myPromise').and.returnValue(deferred.promise);
}));

So later in your specs you can reject or resolve the promise.

deferred.resolve();
deferred.reject();