Come testare un oggetto DOM in qUnit?

Question

Sto testando alcuni JavaScript con qUnit. In un oggetto passo un elemento DOM, e alcuni metodi cambieranno alcune proprietà dell'elemento.

Come posso simulare un oggetto DOM in qUnit?

Mi piacerebbe utilizzare una soluzione browser indipendente, in quanto eseguo anche il test delle applicazioni XUL.

Answer 1

È sempre possibile creare un elemento in JavaScript. Se non si aggiunge che (ad esempio per il corpo), non sarà visibile, in modo che si potrebbe chiamare un elemento finto:

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

modo da poter utilizzare questo in una funzione di test qUnit altrettanto bene : 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

ho avuto questa situazione in cui ho voluto creare uno unit test per un plugin jQuery che ho scritto che fornisce capacità di espansione albero di base semplice. Ho trovato un modo per creare un elemento di linea fittizio (elemento "LI") usando il metodo "ok" QUnit e iniettare il DOM di test come figlio di questo elemento di elenco, in questo modo il DOM manipolato risultante può essere esaminato espandendo il test. Inoltre, se il test fallisce, gli elementi DOM manipolati verranno automaticamente visualizzati dal sistema QUnit. L'output QUnit risultante è simile al seguente:

La mia soluzione a questo problema è stato quello di creare una funzione chiamata “testSpace” dove il testo di elemento pubblicitario e di prova HTML possono essere definiti in modo che i comandi di prova QUnit possono controllare il DOM risultante. Il seguente è il codice di prova che utilizza questa funzionalità:

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

la funzione “testSpace” definisce l'elemento pubblicitario utilizzando il metodo QUnit “OK”, ma inizialmente costruisce il DOM oggetti in una posizione temporanea finché le definisce sistema QUnit l'elemento pubblicitario. Questa funzione è definita come segue:

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