I want to test a javascript click event handler in which I have a ajax(asynchronous) GET call which fetches the data from the server.
And I have all the business logic inside the done() function. When I keep debug pointer while running the jasmine test cases, I am seeing it is not at all hitting the done() logic .
How to handle this in Jasmine?
$('#setup').click(function () {
$("div#spinner").addClass('spinner show');
$.ajax({
type: "GET",
url: "http://localhost:3000/setup.cgi",
}).done(function () {
$("div#divLoadingSpinner").removeClass('spinner show');
$('#setup').attr('disabled', 'disabled');
});
});
it("should disable clicking of Edit setup", function () {
setup = $("#setup");
setup.click();
console.log(">>" + setup[0].attributes.length);
expect(setup.attr('disabled')).toBeTruthy();
});
You can use deferred objects and resolve them to hit your success (done) scenario. See a sample below. Need not be exact, you can modify it as per your requirement.
spyOn($, 'ajax').and.callFake(function (request) {
var d = $.Deferred();
d.resolve(put your expected data here);
return d.promise();
});
Related
$(".getDetails").click(function() {
// some stuff like fetching response from server
})
when user clicks getDetails button on UI multiple times within fraction of second , jquery generates two calls for click function and my logic fails.
I think solution to this will be to disable the button on first click itself(so that use can't click multiple times). Once i get the response or just before returning
from click method i make it enable. Is there any better solution ?
If no, how can i make button disable as soon as user click button first time. I think it needs to be done before calling click method or some where in html element ?
Java provides synchronized keyword so that only one thread enters at time inside method , i am not sure is similar thing exist in javascript or not ?
Assuming the click handler executes an AJAX request you can set the button as disabled before making the request, then enable it again once the request completes. Try this:
$(".getDetails").click(function(){}
var $btn = $(this).prop('disabled', true);
$.ajax({
url: '/foo'
success: function() {
console.log('It worked!');
},
error: function() {
console.log('It failed!');
},
complete: function() {
$btn.prop('disabled', false);
}
});
});
you can try unbinding click event and after ajax call again bind click to that class
$(".getDetails").click(function(){}
$(".getDetails").unbind('click');
// some stuff like fetching response from server
)
You can use simple flag to prevent firing your logic multiple times:
var flag = true
$(".getDetails").click(function() {
if (flag) {
flag = false;
//your logic...
//when your code ends (in after-AJAX callback for example)
flag = true;
}
});
$(".getDetails").click(function(e){
var $target = $(e.currentTarget);
// assuming the click listener is on the button
$target.prop('disabled',true);
// request, stuff...and when done:
$target.prop('disabled',false);
})
try Prevent Default and return false to avoid any other event propagation
This is solution is like semaphore or monitor
var progress = false;
$(".getDetails").on('click', function(e) {
if(!progress){
progress = true;
// some stuff like fetching response from server
//also after sucessfull fetch make true to false again
}else{
console.log('something in progress');
}
e.preventDefault();
return false;
})
This should make sure that your button will not fire the async request twice, until you have a response.
function doAjaxReq() {
/*
Add your ajax operation here
as a return value of doAjaxReq
like so:
return $.ajax({
url: '/foo',
type: 'POST',
data: data
})
Since i can't use ajax here let's smilulate
it useing a promise.
*/
promise = new Promise(function(res, rej) {
setTimeout(function(){
res({foo: "bar"});
}, 1000)
})
return promise;
}
/*
Inside here you add the click handlder
only once use `elem.one('click'...`
*/
function addClickHandler(elem) {
elem.one('click', function() {
// do your ajax request and when its
// done run `addClickHanlder` again
// i'm using `.then` because of the promise,
// you should be using `.done`.
doAjaxReq().then(function(data) {
console.log(data);
addClickHandler(elem);
});
})
}
addClickHandler($(".getDetails"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="getDetails">Get Details</button>
I got a problem with mocking the location reload functionality within Jasmine. I tried several methods (method 1 , method 2) to mock any location reload events but with no luck.
My situation is the following thing. I have a rather simple function:
function TestCall(xhr) {
if (xhr === 401) {
location.reload();
}
}
I tried creating the following Jasmine tests:
it("FakeCall", function (){
spyOn(TestCall, 'reload').and.callFake(function(){});
TestCall(401);
expect(TestCall).toHaveBeenCalled(); // this should check if reload functionality have been called
});
I want to mock the location reload function but I have no clue why this does not work. Can anyone guide/tell me what I do wrong?
Total code:
describe("multiple scripts", function () {
describe("2# FakeCall", function() {
function TestCall(xhr) {
if (xhr === 401) {
location.reload();
}
}
it("2.1 # Reload", function (){
spyOn(location, 'reload');
TestCall(401);
expect(location.reload).toHaveBeenCalled();
});
});
});
When you use spyOn, you give object as the first argument and a name of its method (it is attribute of that object) as the second.
So instead of spyOn(TestCall, 'reload') use this spyOn(location, 'reload'). Now it should work.
In your case it could look like this
it("FakeCall", function (){
spyOn(location, 'reload');
TestCall(401);
expect(location.reload).toHaveBeenCalled();
});
I have been trying to scroll the page to a dynamic div that is created by the an ajax call.
When #divnotifications div clicked (below), I make the first ajax call that adds the Post details, then within this ajax call, another ajax call is made to add the related comments to the div.
The part explained so far works great. Then, I use $.when().then() to scroll to a div item created based on the ajax calls. However, the page does not scroll to the element that was created by LoadCommentsForPost ajax call.
Did I get the logic of $.when().then() wrong?
$(document).on('click', '#divnotifications div', function (event) {
event.preventDefault();
$.ajax({
//other details
success: function (postid) {
$.when(DisplayPostWithFullDetails(postid)).then(function () {
//scroll to the content created by
//LoadCommentsForPost function nested
//inside DisplayPostWithFullDetails
});
}
});
});
function DisplayPostWithFullDetails(postId) {
$.ajax({
//other details
success: function (post) {
//The code to build the div to display the post -- working fine
LoadCommentsForPost(post.PostId);
}
});
}
function LoadCommentsForPost(postid) {
$.ajax({
//other details
success: function (response) {
var comments = JSON.parse(response);
DisplayComments(comments);//builds the div to display the comments - working fine
}
});
}
UPDATED CODE
After receiving some feedback, I ended up with the following code. However, it is still not working. It works only if I add some delay to make sure the div is loaded:
$(document).on('click', '#divnotifications div', function (event) {
event.preventDefault();
$.ajax({
//other ajax stuff
success: function (postid) {
DisplayPostWithFullDetails(postid).done(function () {
setTimeout(function () {
var scrollto = $("div[data-" + type.toLowerCase() + "displayform='" + relateditem + "']").offset().top;
$("html, body").animate({ scrollTop: scrollto }, 600);
}, 500);
});
}
});
});
function DisplayPostWithFullDetails(postId) {
jQuery.support.cors = true;
return $.ajax({
//other ajax stuff
success: function (post) {
post = JSON.parse(post);
//display the post details
LoadCommentsForPost(post.PostId);
}
});
}
function LoadCommentsForPost(postid) {
var promise = new $.Deferred();
jQuery.support.cors = true;
$.ajax({
//other ajax stuff
success: function (response) {
var comments = JSON.parse(response);
DisplayComments(comments);//this is not ajax
promise.resolve('loadedcomments');
}
});
return promise;
}
Did I get the logic of $.when().then() wrong?
Yes, you need to return a promise from the functions if you want to use the function with $.when:
function DisplayPostWithFullDetails(postId) {
return $.ajax({...
// ^^^^^^
That said, wrapping a single promise in $.when is useless.
$.when(DisplayPostWithFullDetails(postid)).then(function () {
should just be:
DisplayPostWithFullDetail(postid).then(function () {
Did I get the logic of $.when().then() wrong?
No, but you are NOT returning the promise so you can't use the promise functions like .then().
UPDATE:
I use $.when().then() to scroll to a div item created based on the ajax calls. However, the page does not scroll to the element that was created by LoadCommentsForPost ajax call.
For me this means that you need to wait that both ajax calls are resolved.
This fiddle show how it should work emulating the ajax call using setTimeout Fiddle.
Your code may look similar to:
function DisplayPostWithFullDetails(postId) {
var promise = new $.Deferred();
$.ajax({
//other details
success: function (post) {
//The code to build the div to display the post -- working fine
LoadCommentsForPost(post.PostId).then(function() {
promise.resolve();
});
}
});
return promise;
}
function LoadCommentsForPost(postid) {
return $.ajax({
//other details
success: function (response) {
var comments = JSON.parse(response);
DisplayComments(comments);//builds the div to display the comments - working fine
}
});
}
Now when you execute the function DisplayPostWithFullDetails it return a promise.
So you can use .then() method;
DisplayPostWithFullDetails(postid)).then(function () {});
or...
var promise = DisplayPostWithFullDetails(postid);
promise.then(function(data){});
Also the major advantage of use $.when() is that you can execute the .then() method when all the promises that you pass to it are resolved.
There are not need to use it when you are waiting for a single promise.
I have this code for make a Ajax call:
$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
// Some logic here for done callback
// Redirect to another URL after 5 seconds
window.setTimeout(function () {
window.location = data.redirect_to;
}, 5000);
}).fail(function () {
// Some logic here for fail callback
})
That code works fine. Now I need to attach a "loader" to this Ajax call. I knew that I can attach this to $(document) as of jQuery 1.8+ docs expose (also found the same on this topic) so I have done the following:
$(function () {
// a bunch of logic here
}).ajaxStart(function () {
$('#loaderModal').modal('show');
$('#loaderModal').on('show.bs.modal', function (e) {
$('#loaderDiv').loader();
})
}).ajaxStop(function () {
$('#loaderModal').modal('hide');
$('#loaderModal').on('hidden.bs.modal', function (e) {
$('#loaderDiv').loader('destroy');
})
});
And once again that works but happens that I have other Ajax calls on the page (for validation purposes on some fields) and every time any of them run then the loader is show which is not correct since I need to attach only to the code shown above (the first piece of code). How I can accomplish this?
As a second part, an related to this post, some of the logic on done and fail callback trigger a Bootstrap Growl message and as you must have noticed I'm using the Twitter Bootstrap Modal component in which the loader is contained, so I'm fear that the call made to run the loader block in some way the second call when the callback for done is invoked, is that even possible? how fast is the execution of these events?
PS: If any of yours have a better solution to this then say and thanks in advance
Instead of using the global event handlers, show/hide the loader for the current ajax request like
//show the loader before the request
showLoader();
$.post($form.attr('action'), $form.serialize(), 'json').done(function (data, textStatus, jqXHR) {
// Some logic here for done callback
// Redirect to another URL after 5 seconds
window.setTimeout(function () {
window.location = data.redirect_to;
}, 5000);
}).fail(function () {
// Some logic here for fail callback
}).always(hideLoader) //hide the loader after the ajax request
function showLoader() {
$('#loaderModal').modal('show');
$('#loaderModal').on('show.bs.modal', function (e) {
$('#loaderDiv').loader();
})
}
function hideLoader() {
$('#loaderModal').modal('hide');
$('#loaderModal').on('hidden.bs.modal', function (e) {
$('#loaderDiv').loader('destroy');
})
}
Why not put your loading scripts into a function so you can call them at will? That way they fit into the logic of your code instead of running every time.
function startLoad() {
.ajaxStart(function () {
$('#loaderModal').modal('show');
$('#loaderModal').on('show.bs.modal', function (e) {
$('#loaderDiv').loader();
})
})
}
function stopLoad() {
.ajaxStop(function () {
$('#loaderModal').modal('hide');
$('#loaderModal').on('hidden.bs.modal', function (e) {
$('#loaderDiv').loader('destroy');
})
});
}
Is there a way to abort all Ajax requests globally without a handle on the request object?
The reason I ask is that we have quite a complex application where we are running a number of different Ajax requests in the background by using setTimeOut(). If the user clicks a certain button we need to halt all ongoing requests.
You need to call abort() method:
var request = $.ajax({
type: 'POST',
url: 'someurl',
success: function(result){..........}
});
After that you can abort the request:
request.abort();
This way you need to create a variable for your ajax request and then you can use the abort method on that to abort the request any time.
Also have a look at:
Aborting Ajax
You cannot abort all active Ajax requests if you are not tracking the handles to them.
But if you are tracking it, then yes you can do it, by looping through your handlers and calling .abort() on each one.
You can use this script:
// $.xhrPool and $.ajaxSetup are the solution
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(idx, jqXHR) {
jqXHR.abort();
});
$.xhrPool = [];
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
},
complete: function(jqXHR) {
var index = $.xhrPool.indexOf(jqXHR);
if (index > -1) {
$.xhrPool.splice(index, 1);
}
}
});
Check the result at http://jsfiddle.net/s4pbn/3/.
This answer to a related question is what worked for me:
https://stackoverflow.com/a/10701856/5114
Note the first line where the #grr says: "Using ajaxSetup is not correct"
You can adapt his answer to add your own function to window if you want to call it yourself rather than use window.onbeforeunload as they do.
// Most of this is copied from #grr verbatim:
(function($) {
var xhrPool = [];
$(document).ajaxSend(function(e, jqXHR, options){
xhrPool.push(jqXHR);
});
$(document).ajaxComplete(function(e, jqXHR, options) {
xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
});
// I changed the name of the abort function here:
window.abortAllMyAjaxRequests = function() {
$.each(xhrPool, function(idx, jqXHR) {
jqXHR.abort();
});
};
})(jQuery);
Then you can call window.abortAllMyAjaxRequests(); to abort them all. Make sure you add a .fail(jqXHRFailCallback) to your ajax requests. The callback will get 'abort' as textStatus so you know what happened:
function jqXHRFailCallback(jqXHR, textStatus){
// textStatus === 'abort'
}