We Keep Coding

Testing how many times a method was called from another method's return statement in AngularJS

Newbie to JS. I have this function. First, it checks for data in cache. If it's not there, it calls backend for this data and saves it to cache.
function doSomething() {
return getCachedData()
.catch(function() {
return getData()
.then(saveDataToCache);
});
}
I need to test how many times cache and backend are called on the first and the second time the method doSomething is executed. Here is my test:
it('should test', function() {
spyOn(this.service, 'doSomething').andCallThrough();
spyOn(this.service, 'getCachedData').andCallThrough();
spyOn(this.service, 'getData').andCallThrough();
this.service.doSomething();
this.$rootScope.$apply();
expect(this.service.doSomething.callCount).toBe(1);
expect(this.service.getCachedData.callCount).toBe(1);
expect(this.service.getData.callCount).toBe(1);
this.service.doSomething();
this.$rootScope.$apply();
expect(this.service.doSomething.callCount).toBe(2);
expect(this.service.getCachedData.callCount).toBe(2);
expect(this.service.getData.callCount).toBe(1);
});
However, I am getting an error saying that call count for getCachedData and getData is always 0, both the first and the second time.
Changing this.$rootScope.$apply(); to this.$rootScope.$digest(); doesn't improve anything. I also tested it manually and everything seems to be working fine.
I also noticed that if I change the function doSomething as below then the counts for getCachedData are 2 & 2, which is correct.
function doSomething() {
this.getCachedData();
return getCachedData()
.catch(function() {
return getData()
.then(saveDataToCache);
});
}

create an object. for example:
system_metrics ={
cache_calls:0,
backend_calls:0,
reset_cache:function(){this.cache_calls=0;},
reset_backend_calls:function(){this.backend_calls=0;},
add_cache_call:function(){this.cache_calls++;}
add_backend_call:function(){this.cache_calls++;}
}
in
function getCachedData(){
//add this line
system_metrics.add_cache_call();
}
in
function getData(){
//add this line
system_metrics.add_backend_call();
}
I need to test how many times cache and backend are called on the first and the second time the method doSomething is executed
in
function doSomething(){
if(system_metrics.cache_calls === 1){
//the first time the method doSomething is executed
}
if(system_metrics.cache_calls === 2){
//the second time the method doSomething is executed
}
if(system_metrics.backend_calls === 1){
//the first time the method doSomething is executed
}
if(system_metrics.backend_calls === 2){
//the second time the method doSomething is executed
}
}
at anytime during execution.. lets say at the end of the day
you can now check system_metrics.cache_calls to give you total number of cache calls for the day.. thats if you never resetted the cache calls
at anytime during execution you can clear the number of cache calls with system_metrics.reset_cache_calls
if your question is to check how many times cache was called
when doSomething runs for the first time or second time.
if your question is to check how many times backend was called
when doSomething runs for the first time or second time.
add the following to your system_metrics
do_something_calls
add_do_something_call
reset_do_something_call
& add add_do_something_call to your do_something function
i think you get the picture
with this approach you can track any metric that you want anytime that you want to

Stopping synchronous function after 2 seconds

I'm using the npm library jsdiff, which has a function that determines the difference between two strings. This is a synchronous function, but given two large, very different strings, it will take extremely long periods of time to compute.
diff = jsdiff.diffWords(article[revision_comparison.field], content[revision_comparison.comparison]);
This function is called in a stack that handles an request through Express. How can I, for the sake of the user, make the experience more bearable? I think my two options are:
Cancelling the synchronous function somehow.
Cancelling the user request somehow. (But would this keep the function still running?)
Edit: I should note that given two very large and different strings, I want a different logic to take place in the code. Therefore, simply waiting for the process to finish is unnecessary and cumbersome on the load - I definitely don't want it to run for any long period of time.

fork a child process for that specific task, you can even create a queu to limit the number of child process that can be running in a given moment.
Here you have a basic example of a worker that sends the original express req and res to a child that performs heavy sync. operations without blocking the main (master) thread, and once it has finished returns back to the master the outcome.
Worker (Fork Example) :
process.on('message', function(req,res) {
/* > Your jsdiff logic goes here */
//change this for your heavy synchronous :
var input = req.params.input;
var outcome = false;
if(input=='testlongerstring'){outcome = true;}
// Pass results back to parent process :
process.send(req,res,outcome);
});
And from your Master :
var cp = require('child_process');
var child = cp.fork(__dirname+'/worker.js');
child.on('message', function(req,res,outcome) {
// Receive results from child process
console.log('received: ' + outcome);
res.send(outcome); // end response with data
});
You can perfectly send some work to the child along with the req and res like this (from the Master): (imagine app = express)
app.get('/stringCheck/:input',function(req,res){
child.send(req,res);
});

I found this on jsdiff's repository:
All methods above which accept the optional callback method will run in sync mode when that parameter is omitted and in async mode when supplied. This allows for larger diffs without blocking the event loop. This may be passed either directly as the final parameter or as the callback field in the options object.
This means that you should be able to add a callback as the last parameter, making the function asynchronous. It will look something like this:
jsdiff.diffWords(article[x], content[y], function(err, diff) {
//add whatever you need
});
Now, you have several choices:
Return directly to the user and keep the function running in the background.
Set a 2 second timeout (or whatever limit fits your application) using setTimeout as outlined in this
answer.
If you go with option 2, your code should look something like this
jsdiff.diffWords(article[x], content[y], function(err, diff) {
//add whatever you need
return callback(err, diff);
});
//if this was called, it means that the above operation took more than 2000ms (2 seconds)
setTimeout(function() { return callback(); }, 2000);

Delayed Ajax calls to same URL using same data

While waiting for the back end devs to implement a "cancel all" feature, which cancels all tasks tracked by the back end, I am attempting to makeshift it by cancelling each individual task. The cancel REST service accepts an ID in the form of a data object {transferID: someID}.
I use a FOR loop to iterate over an array of IDs that I have stored elsewhere. Anticipating that people MAY end up with dozens or hundreds of tasks, I wanted to implement a small delay that will theoretically not overflow the number of HTTP requests the browser can handle and will also reduce a blast of load on the back end CPU. Here is some code with comments for the purpose of this discussion:
ta.api.cancel = function (taskArray, successCallback, errorCallback) {
// taskArray is ["task1","task2"]
// this is just the latest attempt. I had an attempt where I didn't bother
// with this and the results were the same. I THOUGHT there was a "back image"
// type issue so I tried to instantiate $.ajax into two different variables.
// It is not a back image issue, though, but one to do with setTimeout.
ta.xhrObjs = ta.xhrObjs || {};
for (var i = 0; i < taskArray.length; i++) {
console.log(taskArray); // confirm that both task1 and task2 are there.
var theID = taskArray[i];
var id = {transferID: theID}; // convert to the format understood by REST
console.log(id); // I see "task1" and then "task2" consecutively... odd,
// because I expect to see the "inside the setTimeout" logging line next
setTimeout(function () {
console.log('inside the setTimeout, my id is: ')
console.log(id.transferID);
// "inside the setTimeout, my id is: task2" twice consecutively! Y NO task1?
ta.xhrObjs[theID] = doCancel(id);
}, 20 * i);
}
function doCancel(id) {
// a $.Ajax call for "task2" twice, instead of "task1" then "task2" 20ms
// later. No point debugging the Ajax (though for the record, cache is
// false!) because the problem is already seen in the 'setTimeout' and
// fixed by not setting a timeout.
}
}
Thing is: I know setTimeout makes the containing function execute asynchronously. If I take out the timeout, and just call doCancel in the iterator, it will call it on task1 and then task2. But although it makes the call async, I don't understand why it just does task2 twice. Can't wrap my head around it.
I am looking for a way to get the iterator to make the Ajax calls with a 20ms delay. But I need it to call on both! Anybody see a glaring error that I can fix, or know of a technique?

You must wrap your function setTimeout and pass the id variable into it, like this:
(function(myId, i) {
setTimeout(function () {
console.log('inside the setTimeout, my id is: ', myId);
}, 20 * i);
}(theId, i));

This pattern does not create a unique variable1 for each instance of the loop as one might expect.
function () {
for (var i = 0; i < length; i++) {
var variable1;
}
}
In javascript variables are "hoisted". To quote Mozilla:
"Because variable declarations (and declarations in general) are
processed before any code is executed, declaring a variable anywhere
in the code is equivalent to declaring it at the top."
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
So it should be re-written as:
function () {
var variable1;
for (var i = 0; i < length; i++) {
}
}
What this means is that after the loop has finished, any asynchronous callbacks that reference this variable will see the last value of the loop.

Chaining multiple callbacks to a single jquery promise

I have the following setup, and I'm curious if this is the correct way to do it. It works correctly, but I'm just making sure that I'm doing it right, or if there is a better way to accomplish the same task.
//custom ajax wrapper
var pageLoadPromise = ajax({
url: //call to webmethod
});
//this is the way I have been doing it
pageLoadPromise.done(cB1)
.done(cB2)
.done(cB3)
.done(cB4)
.done(function(){cB5(args);});
//this function requires that cB1 has been completed
//I tried this and it worked as well
pageLoadPromise.done(cB1,cB2,cB3,cB4)
.done(function(){cB5(agrs)});
Doing it both ways works, but like I said, am I wondering if it is this the correct way to accomplish this?
UPDATE:
I have made a small adjustment to my code, specifically for cB1 and the callback to cB5
pageloadPromise.done(
function(data){
cB1(data).done(function(){
cB5(args);
});
},cB2,cB3,cB4
);
function cB1(data){
var cB1Promise = $.Deferred();
...
cB1Promise.resolve();
return cB1Promise;
}

As pointed out by #Bergi, regardless of how you add the callbacks, they are all run in the order they are attached using done. So, promise.done(cb1, cb2, cb3, cb4).done(cb5) is the same as promise.done(cb1).done(cb2).done(cb3).done(cb4).done(cb5).
To make sure cb5 runs after cb1 use:
promise.done( function(data) {cb1(data).done(cb5);}, cb2, cb3, cb4);
Remove data if you don't need it.
I played around with the scenarios in http://jsbin.com/moqiko/4/edit?js,console,output

Doing it both ways works
Yes, they are pretty much equivalent (except for the .done(function(){cB5}); which doesn't work).
I am wondering if it is this the correct way to accomplish this?
Use the one you like better. This is more a design question than one of "correctness". However, both ways look quite odd in my eyes, and I've seen lots of promise code. I would recommend two different structures, depending on how your app is structured:
You use the pageLoadPromise as a global cache for your initial data. It is then consumed in very different places, possibly at different times, for multiple different things (or maybe even repeatedly for the same thing). Then use pageLoadPromise repeatedly in each module:
var pageLoadPromise = ajax({url: …}); // initialisation
pageLoadPromise.done(cB1); // somewhere
…
pageLoadPromise.done(cB2); // somewhere else
…
pageLoadPromise.done(cB3); // other place or time
…
You use the pageLoadPromise in one place only, and want to basically do one thing when it's loaded, except that it is structured in multiple subtasks; and each needs only a part of, not the whole structure. Then use a single callback only:
ajax({url: …}).then(function(data) {
cb1(data.d.cb1data);
cb2(data.d.cb2data);
cb3(data.d.cb3data);
cb4(data.d.cb4data);
cb5(data.d.cb5data, some_additional_data);
});
I have made a small adjustment to my code, specifically for cB1 and the callback to cB5
You should not make cb1 return a promise when it doesn't do anything asynchronous. Don't modify it. If you want to express explicitly that cb5 needs to be executed with the result of cb1, then you should use .then for chaining:
var pageLoadPromise = ajax({url: …}); // initialisation
var cB1promise = pageLoadPromise.then(cB1);
cB1promise.done(cb5); // does get called with the return value of cB1
or
ajax({url: …}).then(function(data) {
var res1 = cb1(data.d.cb1data);
…
cb5(data.d.cb5data, some_additional_data, res1);
});

Update. Thanks to #Bergi who pointed out that jQuery's done() returns in fact the same promise. I've updated the answer based on that.
If cB2,cB3,cB4 are not interconnected and all of them process the same data from the ajax call, then you can add them to the same promise (pageloadPromise).
With the above assumption in mind, your second version of code can be simplified without involving a new promise to be created in cB1(), and without having to go one extra indentation level:
pageloadPromise.then(cB1).done(cB5);
pageloadPromise.done(cB2, cB3, cB4);
function cB1(data){
// ...
//data2 would be the argument value passed when resolving
// your original cB1Promise
return data2;
}
What happens here is that the .then() call creates a new promise that gets resolved with whatever data cB1 returns, allowing cB5 to receive that data without creating an extra callback and without involving another promise (as we already have one in hand).
However if cB1 needs another ajax then your original implementation of cB1 would be more appropriate (the callback scheduling remains the same though).
And one final note, I didn't noticed any failure handlers, in case the ajax call fails.

How to synchronise ajax and non-ajax code paths

So I've got this basket functionality where you enter, say, an author's name and it lists the available books. You select what you want and then you can click to select another author. When you do, you get a list looking roughly like this:
Stephen King
The Stand [remove]
The Talisman [remove]
Pet Sematary [remove]
Terry Pratchett
Mort [remove]
Guards Guards [remove]
In the example above, the Stephen King books have been stored in Session, the Terry Pratchett books have not. If I click the remove button on a Pratchett book, some jquery will just hide those. If I remove a Stephen King book, an ajax request is triggered to remove it from Session before jquery hides it.
So my javascript looks something like this:
$('.book-remove').click(removeBook);
function deleteFromBasket(bookId) {
var ajaxArgs = { BookId : bookId };
return $.ajax({
// blah blah, no problems here
success: function(e) {
hideRow();
}
});
}
function hideRow(bookId) {
$('.book-id-' + bookId).hide();
}
function removeBook(e) {
e.preventDefault();
if ($(this).hasClass('needs-ajax-call') {
var promise = deleteFromBasket($(this).prop("id").replace("book-id-", ""));
// this is the problem. how do I wait here for the ajax to complete?
}
else
hideRow();
// if i put promise.done(hideRow) up there, it still runs this too soon.
doMoreStuff();
}

You can structure all your code (both code paths with and without ajax) to use promises. The code that doesn't have to do an ajax call can just start with a promise that is already resolved and both code paths will execute the same sequence (one will be faster to execute because it doesn't have to wait for the ajax call), but both will execute things in the same order:
Any stuff you want done AFTER the ajax call simply has to be moved into the promise.then() handler:
function removeBook(e) {
e.preventDefault();
var promise;
if ($(this).hasClass('needs-ajax-call') {
promise = deleteFromBasket($(this).prop("id").replace("book-id-", ""));
} else {
// get an already resolved promise since no ajax call is required
promise = $.Deferred().resolve();
}
// you can return this promise if you want the calling code
// to be able to know when you're done with everything
return promise.then(function() {
hideRow(bookId); // assumes you've calculated a bookId somewhere
doOtherStuff();
});
}
This has the advantage that the lions share of your code is in one code path rather than two separate code paths and it solves your issue because all the code in the .then() handler will not execute until after the ajax call is done.

Here's an answer to the question plus some suggestions for tidier DOM/javascript.
First, let's make sure that :
the "session" entries are in static container(s) (eg a <div>) with class="sessionResultsWrapper"
the "non session" entries are in static container(s) (eg a <div>) with class="otherResultsWrapper"
each entry is an element (eg an <li>) with class="entry" and data-bookID="xxxx"
Now you are in a better position :
to select elements without the need for cumbersome id parsing
to establish a click handler that will fire on all existing "remove" buttons and any that are added later to the static containers.
$(".sessionResultsWrapper, .otherResultsWrapper").on('click', '.book-remove', function(e) {
e.preventDefault();
var $this = $(this),
promise;
if ($this.parents(".sessionResultsWrapper").length) {
promise = deleteFromBasket($this.closest('entry').data('bookID'));
} else {
promise = $.when();//this is the most compact syntax for a resolved promise
});
// At this point, you have a promise regardless of whether a "session" or "non-session" button was clicked.
// The only difference is that a "non-session" promise will be already resolved, while a "session" promise will be resolved later.
// Because of the way promises work, we can simply chain a .then(fn), which will fire immediately (non session, Terry Pratchett title) or later (when ajax successfully returns, Stephen King title).
promise.then(function() {
$this.closest(".entry").hide();//or, if the entry will never be re-shown then .remove()
doMoreStuff();
});
});

You could add the doMoreStuff as a callback to the promise.
Something like this
function removeBook(e) {
e.preventDefault();
if ($(this).hasClass('needs-ajax-call') {
var promise = deleteFromBasket($(this).prop("id").replace("book-id-", ""));
promise.done(doMoreStuff);
}
else{
hideRow();
doMoreStuff();
}
}