如何針對qUnit中的DOM對象進行測試？

Question

我正在用qUnit測試一些JavaScript。在一個對象中，我傳遞了一個DOM元素，並且一些方法會改變元素的一些屬性。

如何在qUnit中模擬DOM對象？

我想獨立使用解決方案瀏覽器，因爲我也測試XUL應用程序。

Answer 1

您可以隨時在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"); 
}); 

Answer 2

我有這個情況，我想創建一個jQuery插件我寫的，它提供簡單的基本樹擴展能力的單元測試。我發現了一種使用QUnit「ok」方法創建虛擬行項目（「LI」元素）的方法，並將測試DOM作爲此列表項的子項注入，這樣可以通過展開測試來檢查生成的受操縱DOM。此外，如果測試失敗，則操縱的DOM元素將自動顯示在QUnit系統中。得到的QUnit輸出如下所示：

我對這個問題的解決方案是創建一個名爲在訂單項文本和HTML測試可以定義這樣的QUnit測試命令可以查看「testSpace」功能由此產生的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(); 
}