AngularJS Unit testing - A helper for stubbing dependent methods that return promises

Deferreds and Promises have changed javascript development for the better. They offer an escape from callback hell. AngularJS supports a version of promises heavily inspired by the popular q library.

This is great however testing mocking out angularjs service dependencies which return promises was less great!

I want to test this:

	angular.module('myApp.controllers', [])
	.controller('MyCtrl', ['$scope', 'MyService', function ($scope, MyService) {
	//Get promise and once resolved set it in the scope
	MyService.fetchData('foo').then(function(result) {
	$scope.result = result;
	});
	}]);

view raw controller.js hosted with ❤ by GitHub

Incidentally this kind of pattern is becoming more common now promise unwrapping is gone.

What I wanted:

• A way to easily mock the "fetchData" service method
• Capability to assert "fetchData" was called the with right arguments ( using jasmine spies)
• The mock "fetchData" should return a promise so I can call "then" and use utilities such as $q.all
• As little boiler plate code as possible

So I wrote this little helper:

	jasmineNG = {};
	//set $q in your test
	jasmineNG.$q = null;
	//Could make similar to test a failing promise
	jasmineNG.createPromiseReturningSpy = function(retval) {
	return jasmine.createSpy().andCallFake(function() {
	res = jasmineNG.$q.defer();
	res.resolve(retval)
	return res.promise
	});
	}

view raw jasmineNG.js hosted with ❤ by GitHub

And here is what the full test looks like:

	describe('myApp', function () {
	var scope,
	controller,
	service;
	beforeEach(function () {
	module('myApp.controllers');
	});
	// Mock service
	beforeEach(module(function ($provide) {
	service = {fetchData: jasmineNG.createPromiseReturningSpy("RESULT")}
	$provide.value('MyService', service);
	}));
	describe('MyCtrl', function () {
	beforeEach(inject(function ($rootScope, $controller, $q) {
	//IMPORTANT! set $q on the test helper
	jasmineNG.$q = $q;
	scope = $rootScope.$new();
	controller = $controller('MyCtrl', {
	'$scope': scope
	});
	}));
	it('should call service and set result on scope', function () {
	expect(scope.result).not.toBeDefined();
	expect(service.fetchData).toHaveBeenCalledWith('foo');
	//Call apply to propogate changes
	scope.$apply();
	expect(scope.result).toBe('RESULT');
	});
	});
	});

view raw controllerTest.js hosted with ❤ by GitHub

Here is a full working jsfiddle

There's potential to expand this out having more functionality such as dealing with failing promises and giving more control over when the promise is resolved etc. If you think that's a good idea let me know in the comments.