Develop Reference

Angular $q promise Unit testing using Mocha, Chai, Sinon

I'm trying to get my simple angualr $q promise unit test to work. But I've been having problems getting it to work.
Here's my angular file.
app.controller('theCtrl', ['$scope', '$q', function($scope, $q) {
$scope.addOne = function(num) {
var q = $q.defer();
if(angular.isNumber(num)) {
q.resolve(num+1);
} else {
q.reject('NaN');
}
return q.promise;
}
$scope.myVal = 0;
$scope.promise = $scope.addOne($scope.myVal);
// $scope.promise.then(function(v) {$scope.myVal = v }, function(err) {$scope.myVal = err});
}]);
I'm using Mocha, Chai and sinon for the unit testing.
Here's my test file.
describe("Contacts App", function() {
describe("the contact service", function(){
var $scope, theCtrl, $q;
beforeEach(module('Contacts'));
beforeEach(inject(function($injector) {
var $rootScope = $injector.get('$rootScope');
var $controller = $injector.get('$controller');
$scope = $rootScope.$new();
theCtrl = $controller('theCtrl', {$scope: $scope} );
$q = $injector.get('$q');
}));
it('should have a properly working promise', function() {
// Any answers?
});
});
});
Any suggestion would be really appreciated. Thanks, Cheers!

First proposition
You can use mocha's callback function to test asynchronous code along with the angular $timeout.flush()
it('should have a properly working promise', function(done) {
expect($scope.promise).to.be.defined;
$scope.promise.then(function() {
done();
});
$timeout.flush();
});
Second proposition (recommended by Mocha)
You can use https://github.com/domenic/chai-as-promised and return a promise. Your code should look as below
it('should increment the input if number given', function() {
return $scope.addOne(1).should.eventually.equal(2);
});

jasmine mocking angular $http - Error: describe does not expect a done parameter

I have an angular factory like this:
.factory('widgetFactory', ['$http', function($http){
function getWidgets(){
return $http.get('http://example.com/api/widgets/')
.then(function(response){
return response;
});
}
return {
getWidgets:getWidgets
};
}])
And I have the following jasmine test:
describe('widgetFactory', function ($q) {
var mockHttp,
fakeResponse = 'response'
beforeEach(function() {
mockHttp = {
get: jasmine.createSpy('get spy').and.callFake(function () {
var deferred = $q.defer();
deferred.resolve(fakeResponse);
return deferred.promise;
})
};
module(function ($provide) {
$provide.value('$http', mockHttp);
});
});
it('should call api when getWidgets is called', inject(function (widgetFactory) {
var result;
widgetFactory.getWidgets().then(function(response){
result = response;
});
expect(mockHttp.post).toHaveBeenCalledWith('http://example.com/api/widgets/');
expect(result).toBe(fakeResponse);
}));
});
But I get the following error: describe does not expect a done parameter
I think it may be to do with how I'm using $q in my test (other examples I've seen have inject(function($q){ ... inside the beforeEach, but I can't due to my use of module inside beforeEach as this then gives me the following error: Injector already created, can not register a module!)
Any ideas?

You can't inject in describe method. Here I've reworked your version to use ngMock and get rid of mockHttp. I hope it explains a little bit how ngMock works
describe('widgetFactory', function () {
var mockHttp,
fakeResponse = 'response',
getWidgetsDefer,
getWidgetsPromise,
$httpBackend,
widgetFactory,
$q;
beforeEach(module('plunker'));
beforeEach(inject(function($injector) {
$httpBackend = $injector.get('$httpBackend');
$q = $injector.get('$q');
widgetFactory = $injector.get('widgetFactory');
}));
beforeEach(function() {
getWidgetsDefer = $q.defer();
$httpBackend.when('GET', 'http://example.com/api/widgets/')
.respond(getWidgetsDefer);
getWidgetsPromise = widgetFactory.getWidgets();
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should call api when getWidgets is called', inject(function (widgetFactory) {
expect($httpBackend.flush).not.toThrow();
}));
});
You can find plunker here

'done' function is the argument that is expected in Jasmine blocks, but not in describe, that's the meaning of the error. Angular services can't be injected without inject wrapper because Jasmine is unaware of them, and the problem can't be solved just by ignoring this fact.
angular.mock.module is able to mock services with object argument, there's no need to re-invent the wheel.
Unfortunately, mocked services are meant to be self-contained, and it won't solve the problem with $q, so it has to be injected in addition after module:
var $q;
beforeEach(function() {
module({
$http: { ... }
});
inject(function (_$q_) {
$q = _$q_;
});
})
Fortunately, ngMock provides $httpBackend mock, so mocking $http is pointless. In fact, real request shouldn't (and can't) be performed with ngMock. The spec for widget service becomes as slim as that:
widgetFactory.getWidgets();
$httpBackend.expect('GET', 'http://example.com/api/widgets/').respond(fakeResponse);
expect($httpBackend.flush).not.toThrow();
Notice that it doesn't matter if the request was mocked before or after $http.get call, the requests are solved when $httpBackend.flush() is called. And fakeResponse === fakeResponse check can be safely skipped as well.

jasmine unit test mock a promise

I'm having trouble testing my promise unit test.
I've put an assertion called "expect(scope.test).toBe(12);".
This is inside the promise then where its returned in my code.
Below is my actual code I'm trying to test:
$scope.getBudgets = function(){
BudgetService.getBudgets().then(function(response) {
$scope.test = 12;
}, function(response) {
});
}
Below is my unit test:
describe('budgetOverviewCtrl tests', function() {
beforeEach(module('app'));
beforeEach(module('ngRoute'));
var ctrl, scope, deferred;
describe('budgetOverviewCtrl with test', function() {
beforeEach(inject(function($controller, _$rootScope_) {
scope = _$rootScope_.$new();
ctrl = $controller('budgetOverviewCtrl', {
$scope: scope
});
}));
it('Should check if getBudgets service promise exists and returns as expected', inject(function($injector, $q, BudgetService) {
BudgetService = $injector.get("BudgetService");
deferred = $q.defer();
deferred.resolve({"Hello": "World"});
spyOn(BudgetService, 'getBudgets').and.callFake(function() {
return deferred.promise;
});
scope.getBudgets();
expect(BudgetService.getBudgets).toHaveBeenCalled();
**//Below line isnt called - this is inside the promise then.**
expect(scope.test).toBe(12);
}));
});
});

It looks like you're missing a call to $rootScope.$apply() after the call to scope.getBudgets() in the test. In Angular, promise success and error callbacks run as part of the digest cycle, which must be manually triggered from tests.

Test a controller with success() and error ()

I'm trying to work out the best way to unit test success and error callbacks in controllers. I am able to mock out service methods, as long as the controller only uses the default $q functions such as 'then' (see the example below). I'm having an issue when the controller responds to a 'success' or 'error' promise. (Sorry if my terminology is not correct).
Here is an example controller \ service
var myControllers = angular.module('myControllers');
myControllers.controller('SimpleController', ['$scope', 'myService',
function ($scope, myService) {
var id = 1;
$scope.loadData = function () {
myService.get(id).then(function (response) {
$scope.data = response.data;
});
};
$scope.loadData2 = function () {
myService.get(id).success(function (response) {
$scope.data = response.data;
}).error(function(response) {
$scope.error = 'ERROR';
});
};
}]);
cocoApp.service('myService', [
'$http', function($http) {
function get(id) {
return $http.get('/api/' + id);
}
}
]);
I have the following test
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var controller;
var getResponse = { data: 'this is a mocked response' };
beforeEach(angular.mock.module('myApp'));
beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams){
scope = $rootScope;
var myServiceMock = {
get: function() {}
};
// setup a promise for the get
var getDeferred = $q.defer();
getDeferred.resolve(getResponse);
spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);
controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });
}));
it('this tests works', function() {
scope.loadData();
expect(scope.data).toEqual(getResponse.data);
});
it('this doesnt work', function () {
scope.loadData2();
expect(scope.data).toEqual(getResponse.data);
});
});
The first test passes and the second fails with the error "TypeError: Object doesn't support property or method 'success'". I get that in this instance that getDeferred.promise
does not have a success function. Okay here is the question, what is a nice way to write this test so that I can test the 'success', 'error' & 'then' conditions of a mocked service ?
I'm starting to think that I should avoid the use of success() and error() in my controllers...
EDIT
So after thinking about this some more, and thanks to the detailed answer below, I've come to the conclusion that the handling the success and error callbacks in the controller is bad. As HackedByChinese mentions below success\error is syntactic sugar that is added by $http. So, in actual fact, by trying to handle success \ error I am letting $http concerns leak into my controller, which is exactly what I was trying to avoid by wrapping the $http calls in a service. The approach I'm going to take is to change the controller not to use success \ error:
myControllers.controller('SimpleController', ['$scope', 'myService',
function ($scope, myService) {
var id = 1;
$scope.loadData = function () {
myService.get(id).then(function (response) {
$scope.data = response.data;
}, function (response) {
$scope.error = 'ERROR';
});
};
}]);
This way I can test the error \ success conditions by calling resolve() and reject() on the deferred object:
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var controller;
var getResponse = { data: 'this is a mocked response' };
var getDeferred;
var myServiceMock;
//mock Application to allow us to inject our own dependencies
beforeEach(angular.mock.module('myApp'));
//mock the controller for the same reason and include $rootScope and $controller
beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams) {
scope = $rootScope;
myServiceMock = {
get: function() {}
};
// setup a promise for the get
getDeferred = $q.defer();
spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);
controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });
}));
it('should set some data on the scope when successful', function () {
getDeferred.resolve(getResponse);
scope.loadData();
scope.$apply();
expect(myServiceMock.get).toHaveBeenCalled();
expect(scope.data).toEqual(getResponse.data);
});
it('should do something else when unsuccessful', function () {
getDeferred.reject(getResponse);
scope.loadData();
scope.$apply();
expect(myServiceMock.get).toHaveBeenCalled();
expect(scope.error).toEqual('ERROR');
});
});

As someone had mentioned in a deleted answer, success and error are syntactic sugar added by $http so they aren't there when you create your own promise. You have two options:
1 - Don't mock the service and use $httpBackend to setup expectations and flush
The idea is to let your myService act like it normally would without knowing it's being tested. $httpBackend will let you set up expectations and responses, and flush them so you can complete your tests synchronously. $http won't be any wiser and the promise it returns will look and function like a real one. This option is good if you have simple tests with few HTTP expectations.
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var expectedResponse = { name: 'this is a mocked response' };
var $httpBackend, $controller;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$controller_, _$httpBackend_){
// the underscores are a convention ng understands, just helps us differentiate parameters from variables
$controller = _$controller_;
$httpBackend = _$httpBackend_;
scope = _$rootScope_;
}));
// makes sure all expected requests are made by the time the test ends
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
describe('should load data successfully', function() {
beforeEach(function() {
$httpBackend.expectGET('/api/1').response(expectedResponse);
$controller('SimpleController', { $scope: scope });
// causes the http requests which will be issued by myService to be completed synchronously, and thus will process the fake response we defined above with the expectGET
$httpBackend.flush();
});
it('using loadData()', function() {
scope.loadData();
expect(scope.data).toEqual(expectedResponse);
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.data).toEqual(expectedResponse);
});
});
describe('should fail to load data', function() {
beforeEach(function() {
$httpBackend.expectGET('/api/1').response(500); // return 500 - Server Error
$controller('SimpleController', { $scope: scope });
$httpBackend.flush();
});
it('using loadData()', function() {
scope.loadData();
expect(scope.error).toEqual('ERROR');
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.error).toEqual('ERROR');
});
});
});
2 - Return a fully-mocked promise
If the thing you're testing has complicated dependencies and all the set-up is a headache, you may still want to mock the services and the calls themselves as you have attempted. The difference is that you'll want to fully mock promise. The downside of this can be creating all the possible mock promises, however you could make that easier by creating your own function for creating these objects.
The reason this works is because we pretend that it resolves by invoking the handlers provided by success, error, or then immediately, causing it to complete synchronously.
'use strict';
describe('SimpleControllerTests', function () {
var scope;
var expectedResponse = { name: 'this is a mocked response' };
var $controller, _mockMyService, _mockPromise = null;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$controller_){
$controller = _$controller_;
scope = _$rootScope_;
_mockMyService = {
get: function() {
return _mockPromise;
}
};
}));
describe('should load data successfully', function() {
beforeEach(function() {
_mockPromise = {
then: function(successFn) {
successFn(expectedResponse);
},
success: function(fn) {
fn(expectedResponse);
}
};
$controller('SimpleController', { $scope: scope, myService: _mockMyService });
});
it('using loadData()', function() {
scope.loadData();
expect(scope.data).toEqual(expectedResponse);
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.data).toEqual(expectedResponse);
});
});
describe('should fail to load data', function() {
beforeEach(function() {
_mockPromise = {
then: function(successFn, errorFn) {
errorFn();
},
error: function(fn) {
fn();
}
};
$controller('SimpleController', { $scope: scope, myService: _mockMyService });
});
it('using loadData()', function() {
scope.loadData();
expect(scope.error).toEqual("ERROR");
});
it('using loadData2()', function () {
scope.loadData2();
expect(scope.error).toEqual("ERROR");
});
});
});
I rarely go for option 2, even in big applications.
For what it's worth, your loadData and loadData2 http handlers have an error. They reference response.data but the handlers will be called with the parsed response data directly, not the response object (so it should be data instead of response.data).

Don't mix concerns!
Using $httpBackend inside a controller is a bad Idea since you are mixing concerns inside your Test. Whether you retrieve data from an Endpoint or not is not a concern of the Controller, is a concern of the DataService you are calling.
You can see this more clearly if you change the Endpoint Url inside the service you will then have to modify both tests: the service Test and the Controller Test.
Also as previously mentioned, the use of success and error are syntactic sugar and we should stick to the use of then and catch. But in reality you may find yourself in the need of testing "legacy" code. So for that I'm using this function:
function generatePromiseMock(resolve, reject) {
var promise;
if(resolve) {
promise = q.when({data: resolve});
} else if (reject){
promise = q.reject({data: reject});
} else {
throw new Error('You need to provide an argument');
}
promise.success = function(fn){
return q.when(fn(resolve));
};
promise.error = function(fn) {
return q.when(fn(reject));
};
return promise;
}
By calling this function you will get a true promise that respond to then and catch methods when you need to and will also work for the success or error callbacks. Note that the success and error returns a promise itself so it will work with chained then methods.
(NOTE: On the 4th and 6th line the function returns resolve and reject values inside the data property of an object. This is to mock the Behavior of $http since it returns the data, http Status etc.)

Yes, do not use $httpbackend in your controller, because we don't need to make real requests, you just need to make sure that one unit is doing it's job exactly as expected, have a look on this simple controller tests, it's easy to understand
/**
* #description Tests for adminEmployeeCtrl controller
*/
(function () {
"use strict";
describe('Controller: adminEmployeeCtrl ', function () {
/* jshint -W109 */
var $q, $scope, $controller;
var empService;
var errorResponse = 'Not found';
var employeesResponse = [
{id:1,name:'mohammed' },
{id:2,name:'ramadan' }
];
beforeEach(module(
'loadRequiredModules'
));
beforeEach(inject(function (_$q_,
_$controller_,
_$rootScope_,
_empService_) {
$q = _$q_;
$controller = _$controller_;
$scope = _$rootScope_.$new();
empService = _empService_;
}));
function successSpies(){
spyOn(empService, 'findEmployee').and.callFake(function () {
var deferred = $q.defer();
deferred.resolve(employeesResponse);
return deferred.promise;
// shortcut can be one line
// return $q.resolve(employeesResponse);
});
}
function rejectedSpies(){
spyOn(empService, 'findEmployee').and.callFake(function () {
var deferred = $q.defer();
deferred.reject(errorResponse);
return deferred.promise;
// shortcut can be one line
// return $q.reject(errorResponse);
});
}
function initController(){
$controller('adminEmployeeCtrl', {
$scope: $scope,
empService: empService
});
}
describe('Success controller initialization', function(){
beforeEach(function(){
successSpies();
initController();
});
it('should findData by calling findEmployee',function(){
$scope.findData();
// calling $apply to resolve deferred promises we made in the spies
$scope.$apply();
expect($scope.loadingEmployee).toEqual(false);
expect($scope.allEmployees).toEqual(employeesResponse);
});
});
describe('handle controller initialization errors', function(){
beforeEach(function(){
rejectedSpies();
initController();
});
it('should handle error when calling findEmployee', function(){
$scope.findData();
$scope.$apply();
// your error expectations
});
});
});
}());

How do I mock $location.host() in angularjs tests?

I have created an Env service which wraps up environment information, and I'm currently using $location.host() to determine what environment I'm in. How do I mock that in my tests?
I've read https://groups.google.com/forum/?fromgroups#!topic/angular/F0jFWC4G9hI, but it doesn't seem to work, for example:
describe("Env (environment) service", function() {
var Env;
beforeEach(module('App'));
beforeEach(inject(
['Env', function(e) {
Env = e;
}]
));
describe("for staging", function() {
beforeEach(inject(function($location, $rootScope) {
$location.host("http://staging-site.com");
$rootScope.$apply();
}));
it("returns envrionment as staging", function() {
expect(Env.environment).toEqual("staging");
});
it("returns .isStaging() as true", function() {
expect(Env.isStaging()).toBeTruthy();
});
});
});
I've also tried the $browser variant, but that doesn't work either. Any ideas?

The best way is to use spies IMHO: http://tobyho.com/2011/12/15/jasmine-spy-cheatsheet/
// inject $location
spyOn($location, "host").andReturn("super.domain.com");
var host = $location.host();
alert(host) // is "super.domain.com"
expect($location.host).toHaveBeenCalled();
Syntax for jasmine 2.0 and greater has changed as follows
// inject $location
spyOn($location, "host").and.returnValue("super.domain.com");
var host = $location.host();
alert(host) // is "super.domain.com"
expect($location.host).toHaveBeenCalled();

I had similar problem and have used $injector service. (I don't know if it is the simplest solution, but it worked for me :) )
Since $location cannot be relied in during tests I have prepared my own mock.
First, you need to create a factory method. (Or service or provider if you prefer - see https://gist.github.com/Mithrandir0x/3639232 for comparison):
function locationFactory(_host) {
return function () {
return {
/* If you need more then $location.host(), add more methods */
host: function () {
return _host;
}
};
};
}
Then before you create your 'Env', feed injector with this $location mock:
module(function ($provide) {
$provide.factory('$location', locationFactory('http://staging-site.com'));
});
Now every time your access $location in your code your mock is injected, so it returns whatever you need it to.
More on $provide method is in angular docs
Hope this helps you in the future.
Update: I see one place when you might have gone wrong (or which at least would be wrong in my solution). It seems like you are initiating you 'Env' module (which I guess calculates the data immediately) and only after this you change $location - which might be already too late.

There is a good example in the doc: https://docs.angularjs.org/guide/services
You want to make sure to use $provide before you instantiate the service. I like to use $injector in the testcase, to first decide the location then instantiate the service.
var mockLocation;
beforeEach(function() {
// control the $location.host() function
// which we fake in the testcases.
mockLocation = {
host: jasmine.createSpy()
};
module(function($provide) {
$provide.value('$location', mockLocation);
});
});
then
describe('staging server:', function() {
beforeEach(function() {
// mockLocation.host.andReturn('http://staging-site.com'); // jasmine 1.x
mockLocation.host.and.returnValue('http://staging-site.com');
});
it('returns envrionment as staging', inject(function($injector) {
Env = $injector.get('Env');
expect(Env.environment).toEqual('staging');
}));
});
and
describe('production server:', function() {
beforeEach(function() {
// mockLocation.host.andReturn('prod.example.com'); // jasmine 1.x
mockLocation.host.and.returnValue('prod.example.com');
});
it('returns envrionment as production', inject(function($injector) {
Env = $injector.get('Env');
expect(Env.environment).toEqual('production');
}));
});

Here's another way to mock $location, with Sinon.js
locationMock = {
path: sinon.spy()
};
And an example assertion:
locationMock.path.should.be.calledWith('/home');