SO - QUnit & AJAX testing (mockjax)

http://stackoverflow.com/q/8476675/1011582

by dzejkej

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="https://raw.github.com/jquery/qunit/master/qunit/qunit.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

JavaScript

var bar = {};

bar.ajaxCall = function() {
    return $.ajax({
        url: "foo/foo",
        dataType: "json",
        data: { "blah": "blee" }
    });
};

bar.handleAjax = function() {
    return $.when(this.ajaxCall.call(this)).done(function(data) {}).fail(function() { throw "Error!!"; });
};

// solution #2 - introducing callbacks
bar.handleAjax2 = function(success, error) {
    return $.when(this.ajaxCall.call(this))
      .done(function(data) { success && success.call(this); })
      .fail(function() { error && error.call(this); });
};

var mock = $.mockjax({
    url: "foo/foo", contentType: "json", status: 500
});

asyncTest("testing load failure", function () {

    // solution #1 - making AJAX synchronous
    raises(function () {
        $.ajaxSetup({ async: false });
        bar.handleAjax();
    }, "We expect an error to be thrown");
    
    // solution #2 - introducing callbacks
    bar.handleAjax2(function() { ok(false, "We expect AJAX to fail"); }, function() { ok(true); });  
    
    start();
  
 });