How to mock service for angularjs directive's controller - 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();