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

我有一个用 jQuery 构建的动态页面。 Html 片段加载自mustache http://mustache.github.com/模板。这些模板是从 URL 下载的，我想对整个 html 结构进行单元测试：

JsTestDriver 测试是：

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);
};

和代码：

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 
    });
}

然后我启动测试，结果是：

$ 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

因此错误回调已被调用，我不明白为什么它会与 JsTestDriver 一起中断，并且代码在使用浏览器手动调用应用程序时有效

最后一件事，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

谢谢您的建议。更一般地说，您使用什么单元测试框架来使用 DOM 和 jQuery 进行 JavaScript 和命令行测试？

另一种方法是让 JsTestDriver 为您的模板和一些测试 JSON 数据提供服务。下面的配置允许您将静态 JSON 测试数据（例如 my_data.json）放在 src/test/webapp/json 中，将 Mustache 模板放在 src/main/webapp/templates 中。如果这对您来说太 Maven 风格，您可以更改它以匹配您的源布局。

请注意，JsTestDriver 提供的资产带有 /test/ ，前缀为在serve属性中指定的URI，因此 src/test/webapp/json/my_data.json 实际上是从 http://localhost:9876/test/src/ 提供的测试/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 数据解析模板并呈现预期的输出。