qUnitでDOMオブジェクトをテストするには？

Question

私はいくつかのJavaScriptをqUnitでテストしています。あるオブジェクトでは、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出力は次のようになります

この問題に対する私のソリューションは、QUnitのテストコマンドを確認することができるようにライン項目のテキストと、テストHTMLを定義することができ、「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」メソッドを使用してラインアイテムを定義するが、最初に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(); 
}