¿Cómo probar un objeto DOM en qUnit?

Question

Estoy probando JavaScript con qUnit. En un objeto paso un elemento DOM, y algunos métodos cambiarán algunas propiedades del elemento.

¿Cómo puedo simular un objeto DOM en qUnit?

Me gustaría utilizar un navegador de soluciones independiente, ya que también pruebo las aplicaciones XUL.

Answer 1

Siempre puede crear un elemento en JavaScript. Si no lo añaden (por ejemplo, para el cuerpo), no será visible, por lo que se podría llamar un elemento de simulacro:

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

esta manera puede utilizar esto en una función de prueba qUnit igual de bien : 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

Tenía esta situación en la que quería crear una prueba unitaria para un plugin de jQuery escribí que proporciona una capacidad de expansión simple árbol básica. Encontré una manera de crear un artículo de línea ficticio (elemento "LI") usando el método "ok" de QUnit e inyectar el DOM de prueba como elemento secundario de este elemento de lista, de esta manera el DOM manipulado resultante puede examinarse expandiendo la prueba. Además, si la prueba falla, los elementos DOM manipulados se mostrarán automáticamente por el sistema QUnit. La salida QUnit resultante tiene el siguiente aspecto:

Mi solución a este problema fue la creación de una función llamada “testSpace” en el texto del elemento de línea y prueba de HTML pueden ser definidos por lo que los comandos de prueba QUnit pueden comprobar el DOM resultante. El siguiente es el código de prueba que utiliza esta característica:

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 función “testSpace” define el elemento de línea utilizando el método QUnit “ok”, pero inicialmente construye objetos del DOM en una ubicación temporal hasta que los define sistema QUnit la línea de pedido. Esta función se define de la siguiente manera:

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