Angular.js promise not resolving when unit testing service with karma - javascript

I am trying to unit test an Angular.js service, and need to set an expect on a promise returned from a Mock service (using Jasmine). I am using the karma unit testing framework. The relevant code snippet is below:
// I can't figure out how to do the equivalent of a $scope.$digest here.
var loginStatusPromise = FacebookService.getFacebookToken();
loginStatusPromise.then(function(token) {
expect(false).toBeTruthy(); // If this test passes, there is something going wrong!
expect(token).not.toBeNull(); // The token should be ValidToken
expect(token).toBe('ValidToken');
});
The complete unit test code can be seen here.
The problem is the promise.then statement never fires when karma is executing. Hence, none of my expect statements are executed.
In my controller tests, I use $scope.$digest() to resolve the promises, but I am not clear on how to do this in a service test. As I thought there was no notion of 'scope' in a service test.
Do I have the wrong end of the stick here? Do I need to injecct $rootScope into my service test and then use $digest? Or, is there another way?

I had this problem and resolved it by simply putting a
$rootScope.$apply() at the end of my test
Your FacebookService might be the issue, as suggested by #mpm. Are you sure it doesn't have any http calls happening inside of that Facebook dependency which wouldn't be occurring during unit testing? Are you certain that resolve has been called on the deferred yet?

Assuming that you are using ngFacebook/ngModule a quick note before the solution/ideas is that this project does not have unit tests ! Are you sure you want to use this project ?
I did a quick scan of your Unit Tests on Github and found following missing:-
1) Module initialization.
ngFacebook needs that or you need to initialize your module that does the same thing.
beforeEach(module('ngFacebook'));
OR
beforeEach(module('yieldtome'));
2) Seriously consider mocking ngFacebook module
At unit level tests you are testing your code within a mocked bubble where outside interfaces are stubbed out.
Otherwise) Try adding calling the API as below:-
$rootScope.$apply(function() {
this.FacebookService.getFacebookToken().then(function(){
//your expect code here
});
});
$httpBackend.flush();//mock any anticipated outgoing requests as per [$httpBackend][2]

beforeEach(function(){
var self=this;
inject(function($rootScope,Facebook){
self.$rootScope=$rootScope;
self.Facebook=Facebook;
});
})
it('resolves unless sourcecode broken',function(done){
// I can't figure out how to do the equivalent of a $scope.$digest here.
var loginStatusPromise = this.FacebookService.getFacebookToken();
loginStatusPromise.then(function(token) {
expect(token).toBe('ValidToken');
done();
});
$rootscope.$apply();
});
https://docs.angularjs.org/api/ng/service/$q

I agree with the above answers that a service should have nothing to do with $rootScope.
In my case had a $q promise, that used a second service internally resolving to a promise as well. No way to resolve the external one, unless I added $rootScope.$digest() into my service code (not the test)...
I ended-up writing this quick shim for $q to use in my tests, but be careful, as it's just an example and not a complete $q implementation.
beforeEach(module(function($provide) {
$provide.value('$q', {
defer: function() {
var _resolve, _reject;
return {
promise: {
then: function (resolve, reject) {
_resolve = resolve;
_reject = reject;
}
},
resolve: function (data) {
window.setTimeout(_resolve, 0, data);
},
reject: function (data) {
window.setTimeout(_reject, 0, data);
}
};
}
});
}));
Hope it will be useful to someone, or if you have any feedback.
Thanks.

Related

JS mock promise on http call [duplicate]

It seems that promises do not resolve in Angular/Jasmine tests unless you force a $scope.$digest(). This is silly IMO but fine, I have that working where applicable (controllers).
The situation I'm in now is I have a service which could care less about any scopes in the application, all it does it return some data from the server but the promise doesn't seem to be resolving.
app.service('myService', function($q) {
return {
getSomething: function() {
var deferred = $q.defer();
deferred.resolve('test');
return deferred.promise;
}
}
});
describe('Method: getSomething', function() {
// In this case the expect()s are never executed
it('should get something', function(done) {
var promise = myService.getSomething();
promise.then(function(resp) {
expect(resp).toBe('test');
expect(1).toEqual(2);
});
done();
});
// This throws an error because done() is never called.
// Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
it('should get something', function(done) {
var promise = myService.getSomething();
promise.then(function(resp) {
expect(resp).toBe('test');
expect(1).toEqual(2);
done();
});
});
});
What is the correct way to test this functionality?
Edit: Solution for reference. Apparently you are forced to inject and digest the $rootScope even if the service is not using it.
it('should get something', function($rootScope, done) {
var promise = myService.getSomething();
promise.then(function(resp) {
expect(resp).toBe('test');
});
$rootScope.$digest();
done();
});
You need to inject $rootScope in your test and trigger $digest on it.
there is always the $rootScope, use it
inject(function($rootScope){
myRootScope=$rootScope;
})
....
myRootScope.$digest();
So I have be struggling with this all afternoon. After reading this post, I too felt that there was something off with the answer;it turns out there is. None of the above answers give a clear explanation as to where and why to use $rootScope.$digest. So, here is what I came up with.
First off why? You need to use $rootScope.$digest whenever you are responding from a non-angular event or callback. This would include pure DOM events, jQuery events, and other 3rd party Promise libraries other than $q which is part of angular.
Secondly where? In your code, NOT your test. There is no need to inject $rootScope into your test, it is only needed in your actual angular service. That is where all of the above fail to make clear what the answer is, they show $rootScope.$digest as being called from the test.
I hope this helps the next person that comes a long that has is same issue.
Update
I deleted this post yesterday when it got voted down. Today I continued to have this problem trying to use the answers, graciously provided above. So, I standby my answer at the cost of reputation points, and as such , I am undeleting it.
This is what you need in event handlers that are non-angular, and you are using $q and trying to test with Jasmine.
something.on('ready', function(err) {
$rootScope.$apply(function(){deferred.resolve()});
});
Note that it may need to be wrapped in a $timeout in some case.
something.on('ready', function(err) {
$timeout(function(){
$rootScope.$apply(function(){deferred.resolve()});
});
});
One more note. In the original problem examples you are calling done at the wrong time. You need to call done inside of the then method (or the catch or finally), of the promise, after is resolves. You are calling it before the promise resolves, which is causing the it clause to terminate.
From the angular documentation.
https://docs.angularjs.org/api/ng/service/$q
it('should simulate promise', inject(function($q, $rootScope) {
var deferred = $q.defer();
var promise = deferred.promise;
var resolvedValue;
promise.then(function(value) { resolvedValue = value; });
expect(resolvedValue).toBeUndefined();
// Simulate resolving of promise
deferred.resolve(123);
// Note that the 'then' function does not get called synchronously.
// This is because we want the promise API to always be async, whether or not
// it got called synchronously or asynchronously.
expect(resolvedValue).toBeUndefined();
// Propagate promise resolution to 'then' functions using $apply().
$rootScope.$apply();
expect(resolvedValue).toEqual(123);
}));

Unit testing async functions in Ember controllers

I've hit a very weird problem: I'm trying to make unit tests to achieve 100% testing coverage on my application.
And of course I wrote some tests for my controllers but it seems like there is no way to test anything async in Ember (2.4.0) using ember-cli.
I have a function in controller that does this:
readObject() {
this.store.findRecord('myModel',1).then(function(obj) {
this.set('property1',obj.get('property2');
}.bind(this));
}
I'm writing a test that should cover this function.
test('action readObject', function (assert) {
const cont = this.subject();
cont.readObject();
assert.equal(cont.get('property1'), 'someValue);
});
Obivously, this assert wouldn't work because readObject() is async call but this isn't the root of the problem. The problem is that then a callback in this.store.findRecord is being executed - my controller is already destroyed! So I get "calling set on destroyed object" error there.
In other words - even if I wrap my function in a promise and reformat both functions like this:
readObject() {
return new Promise(function(resolve) {
this.store.findRecord('myModel',1).then(function(obj) {
this.set('property1',obj.get('property2');
resolve();
}.bind(this));
}.bind(this));
}
and
test('action readObject', function (assert) {
const cont = this.subject();
cont.readObject().then(function() {
assert.equal(cont.get('property1'), 'someValue);
});
});
It wouldn't work, because after executing readObject() my controllers become immediately destroyed, not waiting for any callbacks.
So, it could be any async call instead of store.findRecord - it could be Ember.run.later, for example.
Does anybody had the same issue? I've read a lot of articles I can't believe that Ember with such a big community doesn't provide a way to make async unit tests.
If anyone has any clues - please give me a hint, cause I'm kinda lost here. At the moment I have two thoughts:
I'm making controllers wrong, Ember doesn't suppose any async operations inside of it. But even if I move async calls to services - I hit the same problem with writing unit tests for them.
I have to decompose my functions to
readObject() {
this.store.findRecord('myModel',1).then(this.actualReadObject.bind(this));
}
actualReadObject(obj) {
this.set('property1',obj.get('property2');
}
to have at least callbacks body covered with tests, but this means I never get 100% testing coverage in my app.
Thank you in advance for any clues. :)
I had a similar problem and looking at the QUnit API - async I solved it. Try out following:
// ... in your controller ...
readObject() {
return this.store.findRecord('myModel',1).then(function(obj) {
this.set('property1', obj.get('property2');
}.bind(this));
}
// ... in your tests, either with assert.async: ...
const done = assert.async(); // asynchronous test due to promises usage
Ember.run(function(){
subject.readObject().then(function(){
// once you reach this point you are sure your promise has been resolved
done();
});
});
// or without assert.async
let promise;
Ember.run(function(){
promise = subject.readObject();
});
return promise;
In a case of unit tests I do also mock other dependencies, for example: store.
this.subject({
property1: null,
store: {
findRecord(modelName, id){
assert.equal(modelName, "myModel1");
assert.equal(id, 1);
return new Ember.RSVP.Promise(function(resolve){
resolve(Ember.Object.create({ property2: "a simple or complex mock" }));
})
}
}
});
I am not sure about the second case (the one without assert.async). I think it would work too, because the test suite returns a promise. This gets recorgnized by QUnit that waits for the promise.
I copy my own solution here, cause code formatting in comments isn't too good.
test('async', function (assert) {
const cont = this.subject();
const myModel = cont.get('store').createRecord('myModel'); //
// Make store.findRecord sync
cont.set('store',{
findRecord(){
return { then : function(callback) { callback(myModel); } }
}
});
// Sync tests
assert.equal(cont.get('property2'), undefined);
cont.readObject(); // This line calls store.findRecord underneath
assert.equal(cont.get('property2'), true);
});
So, I just turned store.findRecord into a sync function and it runs perfect. And again - many thanks to Pavol for a clue. :)

Testing services that return promises using Jasmine 2.4.*

I'm having some issues testing functions return promises in the Jasmine. This solution is very close to the issue that i'm having: How to resolve promises in AngularJS, Jasmine 2.0 when there is no $scope to force a digest?
The post is from 2014 and it's not clear what version of jasmine they are using. Is this still the correct why to test a function that resolves a promise in the current (2.4.0^) version?
Edit:
I have a service whose pattern looks something like this:
angular.module('somemodule').factory('listOfDependencies','NewService');
function NewService(listOfDependencies){
var getObject = function(para1, para2,...,paraN){
var deferred = $q.defer();
if(someDependency.method())
deferred.resolve(someDependency.get(key));
else
deferred.resolve(returnsNewObject);
// there's also a case that returns deferred.reject(reason);
return deferred.promise;
};
return getObject:getObject;
};
In my spec, the test currently looks something like this
it('should return the object', inject(function() {
var obj = { some: Object };
NewService.getObject('param1'...'paramN').then(
function(data){
expect(data.obj).toEqual(obj);
},
function(response){
//promise failed
});
Now what I expect to be returned based on the object 'obj' should pass. In my service it's this case it should logically return"
if(someDependency.method())
deferred.resolve(someDependency.get(key));
The problem is that is that the object it returns is:
else
deferred.resolve(returnsNewObject);
There's nothing wrong the the logic in the code or any its dependencies (I pulled all of this apart and tested it many time) so I feel like something is wrong in my syntax(?) in the jasmine spec or i'm just not testing the promise correctly. Thanks for taking a look at this!
Resolving the promise and then checking that the values it resolves to are valid and expected are definitely one way of doing it.
If you're ok with using the Chai library, it's a lot more concise:
http://chaijs.com/plugins/chai-as-promised/
To make your code easier to unit test, try doing as much of the heavy lifting as possible in Angular services (as opposed to in the controllers), and have the services return promises. That way your unit tests can call the service methods with various inputs and ensure the promises are rejected/resolved as expected.
I resolved this issue by calling $rootScope.$apply(); at the end of my test.

currentSpec in Jasmine 2 is undefined

I want to upgrade my test suite to the latest Jasmine version 2.3.4. I have some custom helper methods for testing AngularJS stuff inside my spy_helper.js like this:
(function() {
this.stubPromise = function(service, functionName) {
var $q = jasmine.getEnv().currentSpec.$injector.get("$q")
var $rootScope = jasmine.getEnv().currentSpec.$injector.get("$rootScope")
var deferred = $q.defer();
var spy = spyOn(service, functionName).andReturn(deferred.promise);
spy.andResolveWith = function(value) {
deferred.resolve(value);
$rootScope.$apply();
return spy;
};
spy.andRejectWith = function(value) {
deferred.reject(value);
$rootScope.$apply();
return spy;
};
return spy;
};
}).call(this);
// inside a test you can do
stubPromise(someService, 'foobar').andResolveWith("test");
The helper stubs a promise and immediately resolves or rejects the promise. I have a bunch of such helpers.
The problem with Jasmine 2 is, that jasmine.getEnv().currentSpec is undefined. This is intended by the Jasmine 2 developers, as far as I know.
But how could I adapt my helpers for Jasmine 2? I could extend the arguments to get the $injector or even $q and $rootScope, but that would result in unhandy tests like stubPromise(someService, 'foobar', $injector).andResolveWith("test"); AND you would have to inject the $injector on top of every test.
So, is there a way to get angular's $injector inside my helpers?
Furthermore in some other helpers, I need to catch the after method of a spec, to check if expected spies on promises where called jasmine.getEnv().currentSpec.after(flush);
Any help is appreciated, because those helpers saved me a lot of time, and I'd be not very happy to rewrite all of them or throw them out. Maybe there is also a library out there, which does something similar (and I didn't know it).

Angular / Karma - $http.get not executing

I have an AngularJS project which uses Karma to run some unit tests in the browser. I'm using mocha as the test framework.
However, I've got some specification tests which need to read some JSON files and check that they adhere to a given convention spec (types, name convention etc).
I should make it clear that it is the actual contents of these files that I want to test. Not a spoofed version of them through Angular Mock's $httpBackend.
I'm marking the JSON files for serving in karma.conf.js.
files: [
{ pattern: 'static/assets/json/cards/*.json', included: false, served: true },
'path/to/angular.js',
'path/to/angular-mocks.js',
'tests/**/*.js'
]
If I run karma start, I can browse over to /base/static/assets/json/cards/something.json and see that the files are being served.
Next, in my test, both the $http and the $q services are injected.
var $http, $q;
beforeEach(module('chai'));
beforeEach(inject(function(_$http_, _$q_) {
$http = _$http_;
$q = _$q_;
}));
Then I try to load each resource using $http.get. Finally, the promises returned from $http.get are collated and a call to $q.all is made in order to wait for them all to be done, before calling done() and moving on.
it('should load the resources', function(done) {
var promises = ['admissions.json', 'discharge.json']
.map(function(resource) {
console.log('Loading', resource);
return $http.get('/base/static/assets/json/cards/' + resource);
});
$q.all(promises)
.then(function(card) {
console.log('Success');
done();
}, function(err) {
console.log('Failure', err);
done();
});
});
When my tests run, I see following console output:
Loading admissions.json
Loading discharge.json
Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.
At first I assumed that it might have been exceeding the timeout by taking a long time to load, but the file is only 95kb.
Next, I wondered whether the custom promise interface (.success and .error) for $http was breaking the $q.all method. But apparently not.
Finally I tried to make a standalone request for /base/static/assets/json/cards/admissions.json at the beginning of all the tests.
It returns a promise, as expected, but it is never resolved, because no response is sent back. I checked the network tools to see what was coming back and it turns out that the request isn't even made in the first place. The code definitely runs, but for some reason $http doesn't actually make the request.
My inclination is that this is something to do with Angular Mocks intercepting $http requests for it's own $httpBackend service. How can I circumvent this?
I found a solution in this blog. The problem it's that you have to add the digest of the scope, even if you are not testing controllers.
it('does a thing one way', function() {
var value;
deferred.promise.then(function(_value_) {
value = _value_;
});
deferred.resolve(10);
expect(value).not. toBe(10); // not yet 10 because $digest hasn't run
$scope.$digest();
expect(value).toBe(10); // 10 because $digest already ran
});

Categories