I want to be thorough, so please bear with me, there's going to be a lot here. We have a remote logging service function that will send us some client-side information when we want to. Something like this:
callHome: function(message){
var deferred, promise;
try{
if (someService.getRemoteLoggingEnabled())
{
//collect all the info into remoteLog
promise = $http.post("Logging", remoteLog);
wipeLog();
}
else
{
deferred = $q.defer();
promise = deferred.promise;
deferred.resolve();
}
}
catch(error)
{
try{
if (!promise)
{
deferred = $q.defer();
promise = deferred.promise;
}
deferred.reject(error.message);
}
catch(e2){}
}
return promise;
}
This all works just fine when running it in the actual app. The problem comes when trying to write unit tests for it. I have tests for when remote logging isn't enabled and for when there is an error. Those look like this:
it ("should resolve the promise with nothing when remote logging is turned off", inject(function($rootScope) {
remoteLoggingEnabled = false; //this is declared above a beforeEach that mocks getRemoteLoggingEnabled
var successSpy = jasmine.createSpy("success");
var failSpy = jasmine.createSpy("fail");
var promise = loggingService.callHome("Hello World");
promise.then(successSpy, failSpy);
$rootScope.$digest();
expect(successSpy).toHaveBeenCalledWith(undefined);
expect(failSpy).not.toHaveBeenCalled();
}));
it ("should reject the promise when there is an error with the error message", inject(function($rootScope) {
remoteLoggingEnabled = true;
var successSpy = jasmine.createSpy("success");
var failSpy = jasmine.createSpy("fail");
//angular.toJson is called while it's gathering client-side info
spyOn(angular, "toJson").andCallFake(function() {throw new Error("This is an error");});
var promise = loggingService.callHome("Hello World");
promise.then(successSpy, failSpy);
$rootScope.$digest();
expect(successSpy).not.toHaveBeenCalled();
expect(failSpy).toHaveBeenCalledWith("This is an error");
}));
These work great. I next wanted to add tests for when it actually made the makes the request. I put together a test like this:
it ("should resolve the promise with the http info when it makes a successful request", inject(function($rootScope, $httpBackend) {
remoteLoggingEnabled = true;
var successSpy = jasmine.createSpy("success");
var failSpy = jasmine.createSpy("fail");
$httpBackend.expect("POST", new RegExp("Logging"), function(jsonStr){
//not concerned about the actual payload
return true;
}).respond(200);
var promise = loggingService.callHome("Hello World");
promise.then(successSpy, failSpy);
$httpBackend.flush();
$rootScope.$digest();
expect(successSpy).toHaveBeenCalledWith(/*http info*/);
expect(failSpy).not.toHaveBeenCalled();
}));
However, this test just hangs. I stepped through the code and it gets stuck in the $rootScope.$digest() call of $httpBackend.flush(), specifically in this while loop:
while(asyncQueue.length) {
try {
asyncTask = asyncQueue.shift();
asyncTask.scope.$eval(asyncTask.expression);
} catch (e) {
clearPhase();
$exceptionHandler(e);
}
lastDirtyWatch = null;
}
I've inspected the asyncTask.expression as it loops through, but I can't find any pattern to what it's doing.
I'm still getting a grasp on promises and how to use them, so I hope there's just something fundamentally wrong I'm doing here. Any help would be much appreciated.
The problem was just in the setup of my test (not shown as part of the question). This callHome function gets called anytime there is an Error via a decorated $exceptionHandler. There was an error during the test on callHome, so it got called again, and then just looped from there. I fixed that error, and now it all works just fine.
Related
Having trouble to understand how exactly Protractor order of execution works..
If I am having PageObject:InvitePage
And order of execution is defined like this:
InvitePage.EnterUsername()
InvitePage.EnterPassword()
InvitePage.EnterEmail()
InvitePage.Invite();
InviteHelper.waitForEmail()
browser.go(invitationUrl)
...
expect(somecondition)
All page methods are returning protractor promise(for example browser.sendKeys for entering the password)
waitForEmail also returns the promise that I have created using:
protractor.promise.defer()
Problem is that waitForEmail get executed first and methods after it don't wait for waitForEmail to finish, which I expected to be true by creating the promise using protractor method...anyway I found solution to it and it looks something like this:
lastMethodBeforeWaitForEmail.then(function(){
browser.driver.wait(InvitationHelper.waitForEmail(userEmail))
.then(function(recievedUrl){
...
//methods that I want after
expect(someCondition)
});
});
Pretty ugly don't you think?
Is there a way to do this one more nicely, any suggestions?
And which part around async nature of protractor I didn't get? Am I missing something?
getInvitationEmail
var getInvitationEmail = function (emailAddress){
var deferred = protractor.promise.defer();
mailbox.getEmailsByRecipient(emailAddress, function(err, emails) {
if (err) {
console.log('>Fetch email - call rejected');
deferred.reject(err);
}else{
console.log('>Email service fetched.')
deferred.fulfill(emails);
}
});
return deferred.promise;
};
and then waitForEmail
this.waitForEmail = function(email){
var deferred = protractor.promise.defer();
var timeout;
var interval = 3000;
var timePassed = 0;
var recursive = function () {
var message = '>Checking for invitational email';
if(timePassed>0) {
message = message + ":" + timePassed/1000 + "s";
}
console.log(message);
timePassed += interval;
getInvitationEmail(email).then(function(data){
if(data.length>0){
var loginUrl = data[0].html.links[0].href;
if(interval) clearTimeout(timeout);
console.log(">Email retrieved.Fetching stopped.")
deferred.fulfill(loginUrl);
}else{
console.log(">Still no email.");
}
});
timeout = setTimeout(recursive,interval);
};
recursive();
return deferred.promise;
};
In Protractor/WebDriverJS, there is that special mechanism called Control Flow, which is basically a queue of promises. If you have a "custom" promise, in order for it to be in the queue, you need to put it there:
flow = protractor.promise.controlFlow();
flow.await(InviteHelper.waitForEmail());
Or:
browser.controlFlow().wait(InviteHelper.waitForEmail());
One question and one remark.
Shouldn't you put other methods in the ControlFlow if you want to control the execution flow?
JavaScript engines add ; at the end of commands when needed, but it is always better to put them yourself.
In waitForEmail you have defined a promise, but you need to insert it into the controlFlow. As you may know, all of the normal webdriver actions click(), getText(), etc already know how to execute in the right order so you don't have to chain all your promises with .then every time.
... the bottom of your function should look like this
recursive();
return browser.controlFlow().execute(function() {
return deferred.promise;
});
Your ugly solution lastMethodBeforeWaitForEmail.then(function() ... works because it is one way to make sure the waitForEmail promise is executed in the right order, but the above code is the prettiness that you are looking for.
I'm trying to run a function when two compilation steps are complete, but the success callback keeps getting called even one fails. Here's the code:
function compile(tplStr) {
return new Promise(function(resolve,reject) {
// compile template here
var tpl = new function(){};
resolve(tpl);
});
}
function parse(json) {
return new Promise(function(resolve,reject) {
try {
var obj = JSON.parse(json);
resolve(obj);
} catch(err) {
console.log('JSON parse failed');
reject(err);
}
});
}
var i = 0;
function bothReady() {
$('#c').text(++i);
}
function oneFailed(err) {
console.log('oneFailed hit');
$('#c').text(err.message);
}
var compileProm = compile($('#a').val());
var parseProm = parse($('#b').val());
Promise.all([compileProm,parseProm]).then(bothReady).catch(oneFailed);
$('#a').on('input', function() {
Promise.all([compile($('#a').val()),parseProm]).then(bothReady).catch(oneFailed);
});
$('#b').on('input', function() {
Promise.all(compileProm,parse($('#b').val())).then(bothReady).catch(oneFailed);
});
code pen
When I create a syntax error in the JSON portion it logs "JSON parse failed" but does not log "oneFailed hit" like I'd expect. Why not? Shouldn't the .catch block be ran if any of the promises are rejected?
Your code doesn't work correctly when something is typed inside of #b because instead of passing an iterable to Promise.All 2 parameters are passed instead.
The result is that while both promises run, only the result of the first one is taken into account by the continuation of all.
The code read
Promise.all(compileProm,parse($('#b').val())).then(bothReady).catch(oneFailed);
Instead of
Promise.all([compileProm,parse($('#b').val())]).then(bothReady).catch(oneFailed);
PS: The 2 other calls are correct it explain why the problem seem to happen only when editing the JSON.
I need helps on notify() within the promise chain.
I have 3 promise base functions connect(), send(cmd), disconnect(). Now I would like to write another function to wrap those call in following manner with progress notification.
function bombard() {
return connect()
.then(function () {
var cmds = [/*many commands in string*/];
var promises = _.map(cmds, function (cmd) {
var deferred = Q.defer();
deferred.notify(cmd);
send(cmd).then(function (result) {
deferred.resovle(result);
});
return deferred.promise;
});
return Q.all(promises);
})
.finally(function () { return disconnect() })
}
Run the function like that
bombard.then(onResolve, onReject, function (obj) {
console.log(ob);
});
I supposed I will get notification for every command I have sent. However, it does not work as I expected. I get nothing actually.
Although I believe this is due to those notifications havn't propagated to outside promise, I have no idea on how to propagated those notifications on Q or wrapping that promise chain: connect, send, disconnect in a one deferred object.
Thanks
I have some good news and some bad news.
Very good! You have found out the problem with the notifications API and why it is being removed in Q in the v2 branch, being deprecated in newer libraries like Bluebird, and never included in ECMAScript 6. It really boils down to the fact promises are not event emitters.
The notifications API does not compose or aggregate very well. In fact, notifications being on promises does not make too much sense imo to begin with,.
Instead, I suggest using a progress notification even, kind of like IProgress in C#. I'm going to simulate all the actions with Q.delay() for isolation, your code will obviously make real calls
function connect(iProgress){
return Q.delay(1000).then(function(res){
iProgress(0.5,"Connecting to Database");
}).delay(1000).then(function(res){
iProgress(0.5,"Done Connecting");
});
}
function send(data,iProgress){
return Q.delay(200*Math.random() + 200).then(function(res){
iProgress(0.33, "Sent First Element");
}).delay(200*Math.random() + 400).then(function(){
iProgress(0.33, "Sent second Element");
}).delay(200*Math.random() + 500).then(function(){
iProgress(0.33, "Done sending!");
});
}
// disconnect is similar
Now, we can easily decide how our promises compose, for example:
function aggregateProgress(num){
var total = 0;
return function(progression,message){
total += progression;
console.log("Progressed ", ((total/num)*100).toFixed(2)+"%" );
console.log("Got message",message);
}
}
Which would let you do:
// bombard can accept iProgress itself if it needs to propagate it
function bombard() {
var notify = aggregateProgress(cmds.length+1);
return connect(notify)
.then(function () {
var cmds = [/*many commands in string*/];
return Q.all(cmds.map(function(command){ return send(command,notify); }));
});
}
Here is a complete and working fiddle to play with
The description of the task. I want to test the code that loads a list of resources using $.get.
So, the source code:
fetchTemplates: function(list, cb){
var promises = [],
$container = $('#templates');
Object.keys(list).forEach(function(tplSelector){
if($(tplSelector).length > 0){ return; }
var promise = $.get(list[tplSelector]);
promise
.done(function(tplHtml){
$container.append(tplHtml);
})
.fail(function(){
console.warn('Template "' + tplSelector + " not found by url:" + list[tplSelector]);
});
promises.push( promise );
});
return $.when.apply($,promises).done(cb);
}
The test suite:
it("Correct template fetching", function (done) {
var fetchResult = viewManager.fetchTemplates({
'#helpTpl': 'somecorrectaddress'
});
fetchResult.done(function () {
expect(true).toBeTruthy();
done();
});
fetchResult.fail(function () {
expect(false).toBeTruthy();
done();
});
});
What it generates. Test passes, but generates an error:
TypeError: 'null' is not an object (evaluating 'this.results_.addResult')
at jasmine.js?2348
So, the test case marks as passed. But whole test suite still generates the error above (and this method is the only one async, other parts are trivial to test). My thought was that since the tested method contains async operations and promises - results were not properly handled and thus TypeError. So I added jasmine async "done()" to handle the issue - unfortunately nothing changed. Also worth noting that if I leave only one test in the suite using "iit" - no error is generated. Search didn't find similar cases. Any ideas?
You need to wrap your async calls in 'runs()' with 'waitsFor()' after, read the documentation here. I've never worked with jquery, but try something like the following inside your it function:
var done = false;
var that = this;
runs( function() {
//your async test goes here
that.done = true;
});
waitsFor( function() {
return that.done;
}, "async code failed", 2000);
I am trying to read data from json and wait until data will be fetched into $scope.urls.content. So I write code:
$scope.urls = { content:null};
$http.get('mock/plane_urls.json').success(function(thisData) {
$scope.urls.content = thisData;
});
And now I am trying to write something like callback but that doesn't work. How can i do that? Or is there any function for this? I am running out of ideas ;/
Do you mean that ?
$http.get('mock/plane_urls.json').success(function(thisData) {
$scope.urls.content = thisData;
$scope.yourCallback();
});
$scope.yourCallback = function() {
// your code
};
You want to work with promises and $resource.
As $http itself returns a promise, all you got to do is to chain to its return. Simple as that:
var promise = $http.get('mock/plane_urls.json').then(function(thisData) {
$scope.urls.content = thisData;
return 'something';
});
// somewhere else in the code
promise.then(function(data) {
// receives the data returned from the http handler
console.log(data === "something");
});
I made a pretty simple fiddle here.
But if you need to constantly call this info, you should expose it through a service, so anyone can grab its result and process it. i.e.:
service('dataService', function($http) {
var requestPromise = $http.get('mock/plane_urls.json').then(function(d) {
return d.data;
});
this.getPlanesURL = function() {
return requestPromise;
};
});
// and anywhere in code where you need this info
dataService.getPlanesURL().then(function(planes) {
// do somehting with planes URL
$scope.urls.content = planes;
});
Just an important note. This service I mocked will cache and always return the same data. If what you need is to call this JSON many times, then you should go with $resource.