Jak przetestować obiekt DOM w qUnit?

Question

Testuję JavaScript z qUnit. W jednym obiekcie przekazuję element DOM, a niektóre metody zmienią niektóre właściwości elementu.

Jak mogę sfałszować obiekt DOM w qUnit?

Chciałbym użyć niezależnej przeglądarki rozwiązań, ponieważ testuję również aplikacje XUL.

Answer 1

Zawsze możesz utworzyć element w JavaScript. Jeśli nie dołączyć go (np do ciała), to nie będzie widoczne, więc można to nazwać makiety element:

document.createElement('div'); // 'div' will create a '<div>' 

Więc można użyć tej funkcji w badanej qUnit równie dobrze : 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

miałem taką sytuację, gdzie chciałem stworzyć testów jednostkowych dla jQuery plugin pisałem, że zapewnia prosty podstawowe możliwości ekspansji drzewo. Znalazłem sposób na utworzenie fikcyjnego elementu zamówienia ("LI") za pomocą QUnit "ok" i wstrzyknięcie testu DOM jako elementu potomnego tego elementu listy, w ten sposób wynikowy zmanipulowany DOM może zostać sprawdzony przez rozszerzenie testu. Również w przypadku niepowodzenia testu manipulowane elementy DOM będą automatycznie wyświetlane przez system QUnit. Wynikiem QUnit wygląda następująco:

Moje rozwiązanie tego problemu było stworzenie funkcji o nazwie „testSpace”, gdzie tekst poz linia i testy HTML można zdefiniować tak polecenia testowe QUnit może sprawdzić wynikowy DOM. Poniżej znajduje się kod test, który wykorzystuje tę funkcję:

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")'); 
}); 

Funkcja „testSpace” określa element zamówienia przy użyciu QUnit „ok” metody, ale początkowo konstruuje DOM obiektów w tymczasowej lokalizacji dopóki Definiuje systemowych QUnit element zamówienia. Ta funkcja jest zdefiniowana w następujący sposób:

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(); 
}