Mocking an Angular Repository with SinonJs - angularjs

Question

I'm a little new at Angular \ SinonJS so please forgive the silly question and bear with if this is obvious. I've done some googling and can't seem to find an answer. I've used SinonJs to do mocking as that was recommended in a Pluralsight video. Unsure if its the best choice. Any alternatives welcome.
I want to test the behaviour of my AngularJS controller and test that it calls my repository Search method with the criteria I specify only once.
I have the following in my controller and am getting the error in my Jasmin test runner:
goal-controller.js:
stepByStepApp.controller("goalController", function ($scope, goalRepository) {
$scope.viewGoalButtonDisabled = true;
$scope.search = function (criteria) {
$scope.errors = [];
return goalRepository.search(criteria).$promise.then(
function (goals) {
$scope.viewGoalButtonDisabled = true;
return goals;
},
function (response) {
$scope.viewGoalButtonDisabled = true;
$scope.errors = response.data;
});
};
});
goal-controller-tests.js
'use strict';
(function () {
describe('Given a Goal Controller', function () {
var scope, controller, goalRepositoryMock, goals, criteria;
beforeEach(function () {
module('stepByStepApp');
inject(function ($rootScope, $controller, goalRepository) {
scope = $rootScope.$new();
goalRepositoryMock = sinon.mock(goalRepository);
goals = [{ foo: 'bar' }];
criteria = 'test search criteria';
controller = $controller('goalController', { $scope: scope });
});
});
it('the View Goal Button should be disabled', function () {
expect(scope.viewGoalButtonDisabled).toBe(true);
});
describe("when a goal is searched for, it", function () {
it("should search the Goal Repository", function () {
goalRepositoryMock.expects('search').once().returns(goals);
scope.search(criteria);
goalRepositoryMock.verify();
});
});
});
}())
I am getting the following error:
2 specs, 1 failure
Given a Goal Controller
when a goal is searched for, it
should search the Goal Repository
TypeError: Cannot read property 'then' of undefined
I'm clearly not mocking the call to "goalRepository.search(criteria).$promise.then" properly. How do I mock the $promise and .then properly? Thanks in advance.

Answer 1

I'm assuming that this repository is returning a resource object. With that said, here is how I would go about testing this controller.
Here is the working plunk.
Initial beforeEach block
You need to mock out the promise chain. For that, you need to inject the $q service. Below is how my class wide beforeEach statement. I use stubs for mocking. I inject that mock into my controller under test.
beforeEach(inject(function($controller, $rootScope, $q) {
q = $q
scope = $rootScope;
goalRepositoryStub = sinon.stub({
search: function() {}
});
testCtrl = $controller("goalController", {
$scope: scope,
goalRepository: goalRepositoryStub
});
}));
With that mocked repository I now have complete control over what it does.
beforeEach for testing repo
In this block I actually mock out the entire promise chain. I get a defer object from the q service. From it I get a promise. I then put that promise in a fake resource object. And I then return that fake resource object whenever search is called. I then call the search on scope.
beforeEach(function() {
deferred = q.defer();
promise = deferred.promise;
returnedResource = {
$promise: promise
};
goalRepositoryStub.search.returns(returnedResource);
scope.search(criteria);
});
The Actual Testing
For the actual testing you need to tell that deferred object what to do (either reject or resolve the promise) and trigger the scopes $apply() function. You then test to see if your code is doing what it should be doing.
Here is an example of how I would test a successful call to goalRepository:
describe('successful goalRepository call', function() {
beforeEach(function() {
deferred.resolve(dataToReturn);
scope.$apply();
});
it('should add the data to scope.goals.', function() {
expect(scope.goals).toBe(dataToReturn);
});
it('should not change scope.failureApi to true.', function() {
expect(scope.viewGoalButtonDisabled).toBeFalsy();
});
});
These aren't necessary "best practices" or anything. Just a way that I found to solve this particular problem on my own.