[英]How to test against a DOM object in qUnit?
我正在用qUnit測試一些JavaScript。 在一個對象中,我傳遞一個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系統將自動顯示受操縱的DOM元素。 生成的QUnit輸出如下所示:
我對這個問題的解決方案是創建一個名為“testSpace”的函數,其中可以定義行項文本和測試HTML,以便QUnit測試命令可以檢查生成的DOM。 以下是使用此功能的測試代碼:
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”方法定義行項目,但最初在臨時位置構造DOM對象,直到QUnit系統定義行項目。 該功能定義如下:
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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.