AngularJS, spies, and resolving promises - angularjs

Question

I am writing tests for a controller. One method calls a method in a service, which utilises a promise. In my test, I have mocked the service, and (I think) correctly mocked the promise. I have been following this blog entry: http://codingsmackdown.tv/blog/2012/12/28/mocking-promises-in-unit-tests/.
Here is the test code:
describe('Controller: ResultsController', function () {
'use strict';
var ctrl;
var ResultsServiceMock;
var RouteServiceMock;
var $scope;
var mockResults;
var mockPromise;
var q;
var deferred;
beforeEach(module('waApp'));
beforeEach(function() {
ResultsServiceMock = {
get: function(query) {
deferred = q.defer();
return deferred.promise;
}
};
RouteServiceMock = {
getParams: function() {
}
};
});
beforeEach(inject(function(
$rootScope,
$controller,
$q
) {
$scope = $rootScope.$new();
q = $q;
ctrl = $controller('ResultsController', {
$scope: $scope,
results: ResultsServiceMock,
route: RouteServiceMock
});
}));
it('Should simulate requesting results from the api', function() {
spyOn(ResultsServiceMock, 'get').andCallThrough();
spyOn(RouteServiceMock, 'getParams').andReturn({input:'hamburger'});
$scope.getResults({input:'hamburger'}); // TODO give params. try query()
deferred.resolve();
$scope.$root.$digest();
expect($scope.getResults).toHaveBeenCalled();
});
});
However, when I run the tests, I get the following error:
Chrome 35.0 (Mac) Controller: ResultsController Should simulate requesting results from the api FAILED
TypeError: Cannot read property 'resolve' of undefined
at null.<anonymous> (/Users/maryc/wa/app/results/results-controller_test.js:70:17)
Chrome 35.0 (Mac): Executed 14 of 14 (1 FAILED) (0.313 secs / 0.093 secs)
I don't understand where this error is coming from; is it because the spy call on ResultsServiceMock is not working? Any help would be appreciated.
The function getResults is as follows:
$scope.getResults = function(params) {¬
$scope.$emit('startGetResults');¬
$scope.loading = true;¬
$scope.podRequestStatus.init = false;¬
$scope.podRequestStatus = {¬
async: {}¬
};¬
var didyoumeans;¬
if(params.didyoumeans) {¬
didyoumeans = params.didyoumeans;¬
delete params.didyoumeans;¬
}¬
ResultsService.get(params).success(function(result) {¬
$scope.$emit('getResultsSuccess');¬
if(!_.isUndefined(didyoumeans)) {¬
$scope.results.queryresult.didyoumeans = didyoumeans;¬
} else if(!_.isUndefined(result.queryresult.didyoumeans)) {¬
if (!_.isArray(result.queryresult.didyoumeans)){¬
result.queryresult.didyoumeans = [result.queryresult.didyoumeans];¬
}¬
$scope.getResults({input: result.queryresult.didyoumeans[0].val, didyoumeans: result.queryresul t.didyoumeans});¬
return;¬
}¬
$scope.loading = false;¬
$scope.podRequestStatus.init = true;¬
if(result.queryresult.success === false) { //TODO is this result.results.queryresult.success??¬
if(result.queryresult.error !== false) {¬
$log.error('Results error', 'code: ' + result.queryresult.error.code, 'msg: ' + result.quer yresult.error.msg);¬
switch (result.queryresult.error.code){¬
case '3000':¬
$location.url('/blockedip');¬
break;¬
}¬
return;¬
}¬
if($scope.results.queryresult.examplepage && $scope.results.queryresult.examplepage.category) { ¬
$scope.examples();¬
}¬
// convert tips to an array if we have a single item¬
if($scope.results.queryresult.tips && !_.isArray($scope.results.queryresult.tips)){¬
$scope.results.queryresult.tips = [$scope.results.queryresult.tips];¬
}¬
$log.error('Results error');¬
return;¬
}¬
$scope.results.queryresult.pods = _.map($scope.results.queryresult.pods, function(pod) {¬
pod.priority = PodService.priority.initial;¬
return pod;¬
});¬
if ($scope.results.queryresult.sources && _.where($scope.results.queryresult.sources, {'text':'Fina ncial data'})) {¬
$scope.$emit('financialData', true);¬
} else {¬
$scope.$emit('financialData', false);¬
}¬ ¬
$scope.asyncPods(PodService.priority.async, 'async');¬
$scope.recalculate();¬
$scope.related();¬
}).error(function() {¬
$log.error('error occurred during ResultsService.get call in ResultsController');¬
});¬
};¬
The functions asyncPods, recalculate and related are three other methods within the ResultsController.
Edited: Having fixed the first error, I now get the following error when running the tests:
Chrome 35.0 (Mac) Controller: ResultsController Should simulate requesting results from the api FAILED
TypeError: undefined is not a function
at Scope.$scope.getResults (/Users/maryc/wa/.tmp_test/results-controller.js:222:36)
at null.<anonymous> (/Users/maryc/wa/app/results/results-controller_test.js:67:16)
This error comes from the line at the beginning of getResults() which calls ResultsService.get(). This seems to imply that my promise is either not being resolved, or the call $scope.getResults() is somehow failing?
The code for the .get() function of ResultsService is:
get: function(query) {¬
this.reset();¬
return ApiService.get({¬
params: UtilService.merge(query, {¬
async: true,¬
scantimeout: 1,¬
formattimeout: 8,¬
parsetimeout: 5,¬
format: 'image,plaintext,imagemap',¬
banners: 'true'¬
}),¬
timeout: abort.promise,¬
type: 'init',¬
cache: UserService.user.cacheResults¬
}).success(function(data){results.queryresult = data.queryresult;});¬
},¬
I'm wondering now if the problem is that .get itself contains a promise?

Answer 1

From the information you have included so far, this is my guess of what might cause the problem.
In your $scope.getResults() method, you call the get() method of ResultsService, so it seems like a name of the service is ResultsService.
But in the unit testing, you pass the ResultsServiceMock as results:
ctrl = $controller('ResultsController', {
$scope: $scope,
results: ResultsServiceMock,
route: RouteServiceMock
});
It should be ResultsService instead like this:
ctrl = $controller('ResultsController', {
$scope: $scope,
ResultsService: ResultsServiceMock,
RouteService: RouteServiceMock
});
After this change, you might encounter another problems, but it should take you pass the error:
TypeError: Cannot read property 'resolve' of undefined
Hope this helps.