I've found several posts that shows this code as a way to do async unit testing:
The service:
angular.module('miservices', [])
.service('myAppServices', ['$http', 'httpcalls', function($http, httpcalls) {
this.getAccountType = function(){
return httpcalls.doGet('http://localhost:3010/...').then(function(data){
return data;
}, function(error){
...
});
};
...
The test:
describe('testing myAppServices', function(){
beforeEach(module('smsApp'));
it('should handle names correctly', inject(function(myAppServices){
myAppServices.getAccountType()
.then(function(data) {
expect(data).equal({...});
});
...
We're using AngularJS, Mocha, Chai and we have Sinon installed.
The test never gets to the .then part, but why?
Thanks!
If you are testing your service I would recommend to mock your "httpcalls" service (as that is outside scope in this test).
To mock it you can have several ways, one approach would be to have a mocks module that you use only with your unit tests.
angular.module('miservices.mocks', [])
.service('httpcalls', ['$q', function($q) {
this.returnGet = '';
this.doGet = function(url) {
return $q.when(this.returnGet);
};
};
And your unit test then would be something like:
describe('testing myAppServices', function(){
beforeEach(function() {
module('smsApp');
module('miservices.mocks');
});
it('should handle names correctly', inject(function(myAppServices, httpcalls){
httpcalls.returnGet = 'return data';
myAppServices.getAccountType()
.then(function(data) {
expect(data).equal('return data');
});
...
Because we are inserting the mocks module after application module, httpcalls service gets overwritten by its mock version and allows us to test properly myAppServices without further dependencies.
Related
I am trying to perform unit testing with Karma. I have done everything according to the documentation. When I write this part of the test that follows it never calls the last two functions.
it('should create the mock object', function (done) {
service.createObj(mockObj)
.then(test)
.catch(failTest)
.finally(done);
});
var test = function() {
expect(2).toEqual(1);
};
var failTest = function(error) {
expect(2).toEqual(1);
};
Try to inject into your beforeEach function rootScope. For example like this:
var rootScope;
beforeEach(inject(function (_$rootScope_) {
rootScope = _$rootScope_.$new();
//other injections
}));
and next invoke $digest() after your service method:
it('should create the mock object', function (done) {
service.createObj(mockObj)
.then(test)
.catch(failTest)
.finally(done);
rootScope.$digest();
});
Install angular-mocks module.
Inject module with module in beforeEach.
Inject your service with inject function in beforeEach.
Use $httpBackend to simulate your server.
Do, not forget, to make it, sync. with $http.flush().
I'm trying to spy on methods defined in a controller, but no matter what I do I see test failures with the message:
Error: Expected a spy, but got Function.
I'm using Karma, Jasmine and Sinon alongside Angular. I'm pretty sure things are set up correctly because tests that just read properties from the $scope pass.
For example, I have this very simple app module:
angular.module('app', []);
And this very simple controller:
angular.module('app').controller('myController', ['$scope', function($scope) {
$scope.test = '';
$scope.setTest = function (newString) {
$scope.test = newString || 'default';
}
$scope.updateTest = function (newString) {
$scope.setTest(newString);
};
}]);
My spec file is as follows:
describe('myController', function () {
'use strict';
beforeEach(module('app'));
var $scope, sandbox;
beforeEach(inject(function ($controller) {
$scope = {};
$controller('myController', { $scope: $scope });
sandbox = sinon.sandbox.create();
}));
afterEach(function () {
sandbox.restore();
});
describe('#updateTest()', function () {
beforeEach(function () {
sandbox.spy($scope, 'setTest');
});
it('updates the test property with a default value', function () {
$scope.updateTest();
expect($scope.test).toEqual('default');
});
it('calls the setTest method', function () {
$scope.updateTest();
expect($scope.setTest).toHaveBeenCalled();
});
});
});
The first test (where it's just checking the test property gets updated) passes.
The second test, where I just want to spy on the setTest() method, fails with the error message above.
If I log out the $scope in the beforeEach I can see the setTest method and there are no script errors.
What am I missing?
I guess it's happening because you are mixing Jasmine and Sinon, I do no think that Sinon spy sandbox.spy() gonna work with Jasmine matcher expect().toHaveBeenCalled(). You should choose which one to use:
Use Sinon spies and convert the result to primitive to pass it to Jasmine:
sandbox.spy($scope, 'setTest');
expect($scope.setTest.called).toBeTruthy();
But this approach will give you less verbose output: Expected true to be false, instead of usual Expected spy to have been called.
Use Jasmine spies:
spyOn($scope, 'setTest');
expect($scope.setTest).toHaveBeenCalled();
Also you can take a look at the tool jasmine-sinon, which adds extra Jasmine matchers and allows to use Sinon spies with Jasmine spy matchers. As a result you should be able to use like in your sample:
sandbox.spy($scope, 'setTest');
expect($scope.setTest).toHaveBeenCalled();
While it is fairly easy to unit test services/controllers in angular it seems very tricky to test decorators.
Here is a basic scenario and an approach I am trying but failing to get any results:
I defined a separate module (used in the main app), that is decorating $log service.
(function() {
'use strict';
angular
.module('SpecialLogger', []);
angular
.module('SpecialLogger')
.config(configureLogger);
configureLogger.$inject = ['$provide'];
function configureLogger($provide) {
$provide.decorator('$log', logDecorator);
logDecorator.$inject = ['$delegate'];
function logDecorator($delegate) {
var errorFn = $delegate.error;
$delegate.error = function(e) {
/*global UglyGlobalFunction: true*/
UglyGlobalFunction.notify(e);
errorFn.apply(null, arguments);
};
return $delegate;
}
}
}());
Now comes a testing time and I am having a really hard time getting it working. Here is what I have come up with so far:
(function() {
describe('SpecialLogger module', function() {
var loggerModule,
mockLog;
beforeEach(function() {
UglyGlobalFunction = jasmine.createSpyObj('UglyGlobalFunctionMock', ['notify']);
mockLog = jasmine.createSpyObj('mockLog', ['error']);
});
beforeEach(function() {
loggerModule = angular.module('SpecialLogger');
module(function($provide){
$provide.value('$log', mockLog);
});
});
it('should initialize the logger module', function() {
expect(loggerModule).toBeDefined();
});
it('should monkey patch native logger with additional UglyGlobalFunction call', function() {
mockLog.error('test error');
expect(mockLog.error).toHaveBeenCalledWith('test error');
expect(UglyGlobalFunction.notify).toHaveBeenCalledWith('test error');
});
});
}());
After debugging for a while I have noticed that SpecialLogger config section is not even fired.. Any suggestions on how to properly test this kind of scenario?
You're missing the module('SpecialLogger'); call in your beforeEach function.
You shouldn't need this part: loggerModule = angular.module('JGM.Logger');
Just include the module and inject the $log. Then check if your decorator function exists and behaves as expected.
After some digging I came up with a solution. I had to create and inject my own mocked $log instance and only then I was able to check weather or not calling error function also triggers call to the global function I was decorating $log with.
The details can be found on a blog post I wrote to explain this problem in detail. Plus I open sourced an anuglar module that makes use of this functionality available here
I have a setup of AngularJS application that uses RequireJS to download and register services on-demand. I also use Jasmine for testing. I am trying to test if a function is called in the callback of a require() call that is executed inside of a module definition. Look at the following file I have and want to test:
define(['app'], function(app) {
app.registerService('myService', function($injector) {
this.someMethod = function() {
require(['some-other-file'], function() {
var someOtherService = $injector.get('someOtherService');
console.log("first");
someOtherService.bla();
});
};
});
});
I want to test that when myService.someMethod() is called, someOtherService.bla() is also called. This is my test file:
define(['some-file', 'some-other-file'], function() {
//....
it('should test if someOtherService.bla() is called', function(done) {
inject(function($rootScope, myService, someOtherService) {
spyOn(someOtherService, 'bla');
myService.someMethod();
$rootScope.$digest();
setTimeout(function() {
console.log("second");
done();
}, 500);
expect(someOtherService.bla).toHaveBeenCalled();
});
});
});
The console output shows that the statements are executed in the right order:
"first"
"second"
But the test fails, because the spy method never gets called. Why is that and how can I fix it? I very much appreciate your help.
I'm trying to test my AngularJS controller with Jasmine, using Karma. But a $timeout which works well in real-life, crashes my tests.
Controller:
var Ctrl = function($scope, $timeout) {
$scope.doStuff = function() {
$timeout(function() {
$scope.stuffDone = true;
}, 250);
};
};
Jasmine it block (where $scope and controller have been properly initialized):
it('should do stuff', function() {
runs(function() {
$scope.doStuff();
});
waitsFor(function() {
return $scope.stuffDone;
}, 'Stuff should be done', 750);
runs(function() {
expect($scope.stuffDone).toBeTruthy();
});
});
When I run my app in browser, $timeout function will be executed and $scope.stuffDone will be true. But in my tests, $timeout does nothing, the function is never executed and Jasmine reports error after timing out 750 ms. What could possibly be wrong here?
According to the Angular JS documentation for $timeout, you can use $timeout.flush() to synchronously flush the queue of deferred functions.
Try updating your test to this:
it('should do stuff', function() {
expect($scope.stuffDone).toBeFalsy();
$scope.doStuff();
expect($scope.stuffDone).toBeFalsy();
$timeout.flush();
expect($scope.stuffDone).toBeTruthy();
});
Here is a plunker showing both your original test failing and the new test passing.
As noted in one of the comments, Jasmine setTimeout mock is not being used because angular's JS mock $timeout service is used instead. Personally, I'd rather use Jasmine's because its mocking method lets me test the length of the timeout. You can effectively circumvent it with a simple provider in your unit test:
module(function($provide) {
$provide.constant('$timeout', setTimeout);
});
Note: if you go this route, be sure to call $scope.apply() after jasmine.Clock.tick.
As $timeout is just a wrapper for window.setTimeout, you can use jasmines Clock.useMock() which mocks the window.setTimeout
beforeEach(function() {
jasmine.Clock.useMock();
});
it('should do stuff', function() {
$scope.doStuff();
jasmine.Clock.tick(251);
expect($scope.stuffDone).toBeTruthy();
});