How to test jquery and ajax calls using JsTestDriver?

Question

I have a dynamic page built with jQuery. Html pieces are loaded from mustache templates. These templates are downloaded from a url, and I would like to unit test the overall html construction :

The JsTestDriver test is :

AppTest = TestCase("AppTest")

AppTest.prototype.test = function() {
    var actualHtml = "";

    getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) {
        actualHtml = html;
    });

    assertEquals("expected html", actualHtml);
};

And the code :

function getHtml(json, resultFunc) {
   jQuery.ajax({
            url: "url/to/mustache/template",
            success: function(view) {
                    resultFunc(mergeArticleModelAndView(json, view));
            },
            error: function(jqXHR, textStatus, errorThrown) {
                    resultFunc(textStatus + " errorThrown: " + errorThrown);
            },
            dataType: 'text',
            async: false 
    });
}

Then I launch the tests and the result is :

$ java -jar JsTestDriver-1.3.2.jar --port 9876 --browser /usr/bin/firefox --tests all
F
Total 1 tests (Passed: 0; Fails: 1; Errors: 0) (8,00 ms)
  Firefox 5.0 Linux: Run 1 tests (Passed: 0; Fails: 1; Errors 0) (8,00 ms)
    AppTest.test failed (8,00 ms): AssertError: expected "expected html" but was "error errorThrown: [Exception... \"Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)\"  nsresult: \"0x80004005 (NS_ERROR_FAILURE)\"  location: \"JS frame :: http://localhost:9876/test/main/js/jquery.min.js :: <TOP_LEVEL> :: line 16\"  data: no]"
  ()@http://localhost:9876/test/test/js/app_test.js:25

So the error callback has been called, and I don't understand why it breaks with JsTestDriver, and the code works when calling the application manually with a browser

Last thing, the jsTestDriver.conf :

server: http://localhost:9876

load:
  - test/js/app_test.js
  - main/js/jquery.min.js
  - main/js/jquery.mustache.js
  - main/js/app.js

Thank you for your advices. More generally, what unit test frameworks do you use for javascript and command line testing with DOM and jQuery ?

Answer 1

Yes it is possible to do quite the same with jquery :

Test code (just the setup the test is the same) :

TestCase("AppTest", {
    setUp: function() {
        this.xhr = Object.create(fakeXMLHttpRequest);
        this.xhr.send=function () {
            this.readyState = 4;
        };
        this.xhr.getAllResponseHeaders=stubFn({});
        this.xhr.responseText="<expected data>";
        jQuery.ajaxSettings.isLocal=stubFn(true);
        jQuery.ajaxSettings.xhr=stubFn(this.xhr);
    },
// same test method

And the production code :

function getHtml(model, resultFunc) {
        $.get("/url/to/template", function(view) {
                resultFunc(mergeArticleModelAndView(model, view));
        });
}

That's the solution that we have chosen.