6

jQueryで構築された動的ページがあります。HTMLピースは、口ひげテンプレートからロードされます。これらのテンプレートは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およびコマンドラインテストにどの単体テストフレームワークを使用しますか？

4

4 に答える 4

5

別の方法は、JsTestDriverにテンプレートといくつかのテストJSONデータを提供させることです。以下の構成では、静的JSONテストデータ（my_data.jsonなど）をsrc / test / webapp / jsonに配置し、Mustacheテンプレートをsrc / main / webapp/templatesに配置できます。これがMaven-yで好みに合わない場合は、ソースレイアウトに一致するようにこれを変更できます。

JsTestDriverは、serve属性で指定されたURIの前に/ test /が付加されたアセットを提供するため、src / test / webapp / json / my_data.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データを使用してテンプレートを解析し、期待される出力をレンダリングする必要があります。

于 2012-01-31T13:20:23.357 に答える
4

私はそれを行う方法を見つけました：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コードを読んだ後、jQueryajaxリクエストをモックすることは可能だと思います。Cfもjquery1.5モックajax

于 2011-07-18T22:37:44.510 に答える
3

はい、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));
        });
}

それが私たちが選んだソリューションです。

于 2011-07-19T20:34:50.670 に答える
0

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);
}
于 2014-01-28T14:18:23.570 に答える