私はqUnitでいくつかのJavaScriptをテストしています。1 つのオブジェクトで DOM 要素を渡すと、いくつかのメソッドが要素のいくつかのプロパティを変更します。
qUnitでDOMオブジェクトをモックするにはどうすればよいですか?
私は XUL アプリケーションもテストしているので、ソリューション ブラウザーに依存しないものを使用したいと考えています。
私はqUnitでいくつかのJavaScriptをテストしています。1 つのオブジェクトで DOM 要素を渡すと、いくつかのメソッドが要素のいくつかのプロパティを変更します。
qUnitでDOMオブジェクトをモックするにはどうすればよいですか?
私は XUL アプリケーションもテストしているので、ソリューション ブラウザーに依存しないものを使用したいと考えています。
JavaScript ではいつでも要素を作成できます。追加しない場合 (例: 本文に)、表示されないため、モック要素と呼ぶことができます。
document.createElement('div'); // 'div' will create a '<div>'
したがって、これを qUnit テスト関数でも同様に使用できます: http://jsfiddle.net/LeMFH/。
test("test", function() {
expect(1);
var elem = document.createElement("div");
elem.style.position = "absolute";
equals(elem.style.position, "absolute");
});
シンプルで基本的なツリー展開機能を提供する、私が書いた JQuery プラグインの単体テストを作成したいという状況がありました。QUnit の「ok」メソッドを使用してダミーの行アイテム (「LI」要素) を作成し、このリスト アイテムの子としてテスト DOM を挿入する方法を見つけました。また、テストが失敗した場合、操作された DOM 要素は QUnit システムによって自動的に表示されます。結果の QUnit 出力は次のようになります。
この問題に対する私の解決策は、QUnit テスト コマンドが結果の DOM をチェックできるように、行項目テキストとテスト HTML を定義できる「testSpace」という関数を作成することでした。以下は、この機能を使用するテスト コードです。
test("$.fn.tocControl", function () {
var sTest =
"<div>"
+ "<ul>"
+ "<li>item1</li>"
+ "<li>item2"
+ "<ul>"
+ "<li>s1item1</li>"
+ "<li>s1item2"
+ "<ul>"
+ "<li>s2item1</li>"
+ "<li>s2item2"
+ "</li>"
+ "<li>s2item3</li>"
+ "<li>s2item4</li>"
+ "</ul>"
+ "</li>"
+ "<li>s1item3</li>"
+ "<li>s1item4</li>"
+ "</ul>"
+ "</li>"
+ "<li>item3</li>"
+ "<li>item4</li>"
+ "<li>item5</li>"
+ "</ul>"
+ "</div>";
// Create the test HTML here.
var jqTest = testSpace("$.fn.tocControl.test", sTest);
// Invoke the JQuery method to test.
jqTest.find("ul").tocControl();
// QUnit tests check if DOM resulting object is as expected.
equal(jqTest.find("ul.ea-toc-control").length, 1, '$("div#testSpace ul.tocControl").length');
equal(jqTest.find("ul:first").hasClass("ea-toc-control"), true, '$("div#testSpace ul:first").hasClass("tocControl")');
});
「testSpace」関数は、QUnit の「ok」メソッドを使用して項目を定義しますが、QUnit システムが項目を定義するまで、最初は一時的な場所に DOM オブジェクトを構築します。この関数は次のように定義されます。
function testSpace(sName, sHTML) {
ok(true, sName);
var jqTestItem = $("ol#qunit-tests > li:last");
jqTestItem.append('<div id="testSpaceContainer" style="display:none;">' + sHTML + '</div>');
var jqTestSpace = jqTestItem.children("div#testSpaceContainer:first");
var moveTestSpaceStart = $.TimeStamp();
var moveTestSpace = function () {
var jqTestArea = jqTestItem.find("ol > li:contains(" + sName + ")").filter(function () { return $(this).text() == sName; });
if (jqTestArea.length <= 0) {
if (!$.HasTimedOut(moveTestSpaceStart, 5000)) setTimeout(moveTestSpace, 200);
return false;
}
var oTestSpace = jqTestSpace.detach();
jqTestArea.append(oTestSpace);
jqTestArea.find("div#testSpaceContainer").show();
return true;
}
moveTestSpace();
return jqTestSpace.children().first();
}