Controller not invoking then with mock service's deferred - angularjs

Question

I am trying to mock a method in a service that returns a promise. The controller:
app.controller('MainCtrl', function($scope, foo) {
var self = this;
this.bar = "";
this.foobar = function() {
console.log('Calling the service.');
foo.fn().then(function(data) {
console.log('Received data.');
self.bar = data;
});
}
this.foobar();
});
The spec file:
angular.module('mock.foo', []).service('foo', function($q) {
var self = this;
this.fn = function() {
console.log('Fake service.')
var defer = $q.defer();
defer.resolve('Foo');
return defer.promise;
};
});
describe('controller: MainCtrl', function() {
var ctrl, foo, $scope;
beforeEach(module('app'));
// inject the mock service
beforeEach(module('mock.foo'));
beforeEach(inject(function($rootScope, $controller, _foo_) {
foo = _foo_;
$scope = $rootScope.$new();
ctrl = $controller('MainCtrl', {$scope: $scope , foo: foo });
}));
it('Should call foo fn', function() {
expect($scope.bar).toBe('Foo');
});
});
When debugging, I can see in the controller the promise object state being 1 (resolved). Yet, the success callback within then is never invoked.
The following Plunker http://plnkr.co/edit/xpiPKPdjhiaI8KEU1T5V reproduces the scenario. Any help would be greatly appreciated.

Answer 1

You must get a reference to $rootScope in your test and call:
$rootScope.$digest()
Your plunk, revisited:
$digest called and test passed.
Also your mock didn't return anything in the resolve, I added:
defer.resolve('Foo');
HTH