¿Cómo probar un selector jQuery?

Question

Solo una pregunta rápida ... Actualmente tengo el siguiente código jQuery con un selector en él.

var ID = "idControl"
function doesTreeViewExist()
{
    if($('#' + ID).length == 0)
    {
        return false;
    }
    else
    {
        return true;
    }
}

Me preguntaba cómo escribir la prueba para probar el selector usando QUnit. Más específicamente, tengo problemas para encontrar la sintaxis / código.

EDITAR:

Ok, supongamos que ahora quiero burlarme de la llamada del selector porque no puedo obtener acceso al sitio web real. Estoy usando JsTestDriver como mi herramienta de prueba, lo que significa que no puedo tocar el navegador en el que se ejecutan las pruebas (de lo contrario, las pruebas se detendrán). ¿Qué pasa en tal situación? ¿Cómo puedo probar el código?

Gracias.

Answer 1

Utilicé Jack y me burlé con éxito de la llamada jquery y devolví una longitud personalizada y el resultado esperado.

Algo así como:

jack (function() {
    jack.expect("
/*:DOC += <span id="idControl"></span> */
quot;).exactly("1").withArguments("#" + ID).returnValue( {length:0} );
    doesTreeViewExist()
    assertEquals(false, result);
});

También he logrado proporcionar una estructura DOM para satisfacer la llamada jquery, ya que estoy usando una de las funciones integradas de JsTestDriver, HtmlDoc. Algo así como:

<*>

o simplemente cree una estructura DOM sin la identificación especificada para obtener la declaración falsa.

HTH.

Answer 2

La función que publicas puede simplificarse mucho:

var ID = "idControl";
function doesTreeViewExist() {
  return !!$('#' + ID).length;
}

Usando la construcción !! ( doble bit a bit NO ), para convertir la propiedad length a booleana, devolverá false solo cuando la longitud es cero.

Hablando de qUnit, puede configurar fácilmente una prueba simple como esta:

test("Your selector test", function() {
  ok($('#idControl').length > 0, "idControl exists");
  // or simply
  ok($('#idControl').length, "idControl exists");
});

La función ok realiza una aserción booleana , equivalente a la afirmación verdadera de JUnit.

Answer 3

Pruebo los selectores manualmente, luego los paso al código que los usa. Entonces puedo probar el código que los usa. Si solo desea probar un selector, necesita acceso al HTML que afecta. Su prueba podría incluir HTML para apuntar, algo como:

test("selector works", function() {
    var html = $('<input type="select"><option value=0/></input');

    var result = $('option', html);

    ok(result.count() == 1);
});

Pero no hago eso ... coloco mis selectores en el borde del código para poder acceder a ellos rápidamente y pasar por debajo del depurador. Tendré una clase simple cuyas propiedades son esos selectores. Luego, me burlaré de esa clase simple para poder escribir código para todo lo que dependa de esos selectores.   La razón por la que no pruebo mis selectores es porque el HTML al que apuntan es generado por el código ASP.NET, y es difícil acceder desde una prueba de JavaScript. Pero puedo envolverlos en un Objeto Humilde (" http://xunitpatterns.com/Humble Object.html " ;) luego prueba el código que depende de ese humilde objeto. Aquí hay una clase de contenedor simple que puedo reemplazar con dobles de prueba:

var createSelectWidget = function(rootSelector)
{
    return {
        userText : $('span', rootSelector),
        inputList : $('option', rootSelector),
    };
}

Cualquiera que sea el patrón de inyección de dependencia que utilice, puede tropezarlo como se muestra a continuación. Supongamos que mi widget tiene una entrada de selección para leer el valor y un intervalo en el que quiero escribir algunos resultados:

var createSelectWidgetStub = function()
{
    return {
        userText : { text = function() {}},
        inputList : { val = function() {}},
    };
}

Entonces puedo pasar este trozo en pruebas en las que quiero aislar la dependencia pero no me importan las interacciones con esa dependencia. Cuando quiero verificar las interacciones con la dependencia, puedo simularlo con JSMock. Supongamos que quiero verificar las interacciones con la lista de entrada, prepararía un trozo con el elemento simulado:

var selectMock = createSelectWidgetStub();
selectMock.inputList = mc.createMock(selectMock.inputList);