如何使用JsTestDriver测试jquery和ajax调用

另一种选择是让JsTestDriver为模板和一些测试JSON数据提供服务。下面的配置允许你把静态JSON测试数据(例如my_data.json)放在src/test/webapp/JSON中，把Mustache模板放在src/main/webapp/templates中。如果这对你的口味来说太maven了，你可以改变它来匹配你的源布局。

请注意，JsTestDriver使用/test/预先挂载到服务属性中指定的URI来服务资产，所以src/test/webapp/json/my_data. js . js . js . js . js . js . js . js . js。Json实际上是从http://localhost:9876/test/src/test/webapp/Json/my_data.json提供的。

server: http://localhost:9876
serve:
- src/main/webapp/templates/*.html
- src/test/webapp/json/*.json
load:
- src/main/webapp/js/*.js
- src/main/webapp/js/libs/*.js
test:
- src/test/webapp/js/*.js

然后，在测试用例中，您可以轻松加载模板和JSON数据。

    testLoadTemplateAndData : function () {
        // Variables
        var onComplete, template, data, expected, actual, templateLoaded, dataLoaded;
        dataLoaded = false;
        templateLoaded = false;
        expected = "<h2>Your expected markup</h2>";
        // Completion action
        onComplete = function () {
            if (dataLoaded && templateLoaded) {
                // Render the template and data
                actual = Mustache.to_html(template, data);
                // Compare with expected
                assertEquals('Markup should match', expected, actual);
            }
        };
        // Load data with jQuery
        $.ajax({
            url : '/test/src/test/webapp/json/demo.json', 
            success : 
                function (result) {
                    data = result;
                    dataLoaded = true;
            },
            error : 
                function () {
                    fail("Data did not load.");
            },
            complete :
                function () {
                    onComplete();
                }
            }
        );
        // Load the template with jQuery
        $.get('/test/src/main/webapp/templates/demo.html',
            function(result) {
                template = result;
                templateLoaded = true;
            }
        )
        .error(function() { fail("Template did not load."); })
        .complete(function() {
            onComplete();
        });
    }

当两个jQuery回调完成后，Mustache应该用JSON数据解析模板并呈现预期的输出。

我找到了一种方法:模拟ajax调用。在http://tddjs.com/上，第12章中有一个示例，git存储库在这里:http://tddjs.com/code/12-abstracting-browser-differences-ajax.git

TestCase("AppTest", {
    setUp: function() {
        tddjs.isLocal = stubFn(true);
        var ajax = tddjs.ajax;
        this.xhr = Object.create(fakeXMLHttpRequest);
        this.xhr.send=function () {
            this.readyState = 4;
            this.onreadystatechange();
        };
        this.xhr.responseText="<expected data>";
        ajax.create = stubFn(this.xhr);
    },

   "test article html ok": function () {
        var actualHtml = "";
        getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) {
            actualHtml = html;
        });
        assertEquals("<expected html>", actualHtml);
   }
});

和生产代码:

function getHtml(model, resultFunc) {
        tddjs.ajax.get("http://url/to/template", {
                success: function (xhr) {
                        resultFunc(mergeArticleModelAndView(model, xhr.responseText));
                }
        });
}

阅读jQuery代码后，我认为可以模拟jQuery ajax请求。参考jquery 1.5 mock ajax

是的，可以用jquery做同样的事情:

测试代码(只是设置测试是相同的):

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

和生产代码:

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

使用sinon.js就更简单了:

TestCase("AppTest", {
setUp: function() {
    this.server = sinon.fakeServer.create();
},
tearDown: function() {
    this.server.restore();
},
"test article html ok": function () {
    this.server.respondWith("mustache template");
    this.server.respond();
    var actualHtml = "";
    getHtml({ "title": "title", "header": "header", "text": "text", "authors": [ {"firstname": "firstname", "lastname": "lastname"} ] }, function(html) {
        actualHtml = html;
    });
    assertEquals("<expected html>", actualHtml);
}