How to unit test this JavaScript function, including mockery of an Ajax call?

Question

As you can see from this jsFiddle , I have a function called 'init' that configures the button so that when clicked it opens a progress dialog and issues an Ajax call. I want to unit test this JavaScript code (using QUnit ) and check the following cases:

• Ajax call succeeds
• Failed to make Ajax call

I need to make fun of at least an Ajax call and a window.open call, as well as other calls that I'm sure, depending on the implementation of unit test.

How can I write QUnit unit tests for my code that validates these two scenarios?

EDIT: Code to be tested:

 var statusmod = (function() { var spinner = $("#spinner"); var init = function(id) { var progressDialog = $("#progressdialog-content").dialog({ autoOpen: false, title: "Launching Status Page" }); var errorDialog = $("#errordialog-content").dialog({ autoOpen: false, modal: true, buttons: { "OK": function() { $(this).dialog("close"); } } }); var btn = $("#button-status"); btn.button().click(function() { spinner.show(); progressDialog.dialog("open"); var url = $.validator.format("/api/binid/?id={0}", id); // Call Web service to get binary ID $.ajax({ url: url, dataType: "json" }).done(function(data) { window.open($.validator.format("http://status/?Page=Status&Id={0}", data.Id), target = "_newtab"); }).fail(function(jqXHR, msg, errorThrown) { errorDialog.dialog("open"); }).always(function() { progressDialog.dialog("close"); }); return false; }); }; return { init: init, _spinner: spinner }; }()); 

Answer 1

I have successfully written a QUnit test for a success case and another for a failure case, as you can see from this jsFiddle . I used Mockjax to fake Ajax responses and simulate success / failure conditions. Notably, I configured Ajax calls synchronously, so that I could write synchronous tests since I was unable to figure out how to run the tests after the asynchronous Ajax callbacks were run.

I also use the Sinon.JS library to fake dependencies and check, for example, dialogs start correctly.

The following is a working test code, see my question for the function under test ( statusmod.init ). Let me know if something you think I forgot.

 var dialogSpy = null; var windowSpy = null; var id = "srcId"; var binId = "binId"; var url = $.validator.format("/api/binid/?id={0}", id); var btnId = "#button-status"; module("Open status page", { setup: function() { // Allow us to run tests synchronously $.ajaxSetup({ async: false }); windowSpy = sinon.spy(window, "open"); dialogSpy = sinon.spy(); sinon.stub($.fn, "dialog", function() { return { "dialog": dialogSpy }; }); statusmod.init(id); }, teardown: function() { windowSpy.restore(); $.fn.dialog.restore(); $.mockjaxClear(); // Remove click event handler for each test $(btnId).unbind(); } }); test("Successfully open status page", function() { expect(4); $.mockjax({ url: url, contentType: "text/json", responseText: { Id: binId } }); var spinner = statusmod._spinner; var spinnerSpy = sinon.spy(spinner, "show"); $(btnId).click(); ok(spinnerSpy.calledOnce, "Spinner shown"); ok(dialogSpy.withArgs("open").calledOnce, "Dialog opened"); ok(dialogSpy.withArgs("close").calledOnce, "Dialog closed"); equal(windowSpy.lastCall.args[0], $.validator.format("http://status/?Page=Status&Id={0}", binId), "Window opened"); }); test("Binary ID not found on server", function() { expect(3); $.mockjax({ url: url, contentType: "text/json", status: 404 }); $(btnId).click(); ok(dialogSpy.withArgs("open").calledTwice, "Dialogs opened"); ok(dialogSpy.withArgs("close").calledOnce, "Progress dialog closed"); ok(!windowSpy.called, "Window not launched"); }); 

Answer 2

First of all, download and enable Mockjax .

Then they mock your ajax calls:

 module("Mock Ajax", { setup: function () { /** this mocks the ajax call **/ $.mockjax({ url: 'yourUrl.php', data: {'action': 'your', 'data': { 'that': 'you', 'send': 'here' } }, responseText:'{"your": ["returned":"json"],"string"}' }); }); }); 

And then you can make your ajax call in the test file:

 test( "Your testcase", function() { $.ajax('yourUrl.php', data: {'action': 'your', 'data': { 'that': 'you', 'send': 'here' } }, function(data) { ok("do something with your data"); }); }); 

Et voilà, you have successfully tested something! You can add additional parameters to your mockjax call (isTImeout, isError, etc.). The documentation can be found here .

These are the basics, you can edit them to suit your needs, using documentation that is pretty comprehensive.