Burlarse de jQuery para probar el uso básico

Question

Me está costando mucho tiempo entender cómo configurar un objeto que me permita probar mis llamadas jQuery. No necesito burlarme de ninguna llamada Async ni nada, solo uso básico. Así que permítanme puse mi función que quiero probar (truncada por simplicidad):

listGamesCallback : function(data) { 
    var gameList = $("#gameList select"); 

    gameList.empty(); 

    $.each(data, function() { 
      var newOption = $('<option>', {value : this.gameId }); 
      newOption.text(string); 
      newOption.data("isJoinable", isJoinable); 

      // Add it to the list 
      gameList.append(newOption); 
    }); 


} 

necesito para burlarse del jQuery aquí para unidad de prueba de este método, pero soy incapaz de encontrar la manera de hacer esto en javascript Incluso sin jsMockito, no sé cómo crear un objeto con las propiedades que jQuery tiene en esta situación. Cualquier ayuda con esto sería apreciada.

Estoy usando jsTestDriver, jsHamcrest, jsMockito y jQuery. Sin embargo, un enfoque generalizado para crear un objeto $ que tenga estas propiedades también sería asombroso. ¡Gracias!

Para aquellos que preguntaron, esto es lo que se me ocurrió que parecía funcionar un poco ... pero no entiendo por qué.

var saved$ = $; 

var mockContruct = mockFunction(); 
var mockedGamelist = mock(jQuery); 
var mockedOption = mock(jQuery); 

mocked$ = (function() { 
    var test = function(name) { 
     var args = jQuery.makeArray(arguments); 
     return mockContruct.call(test, args); 
    }; 

    $.extend(test, $); 

    // This is what confuses me. This worked, but it's wierd 
    // It allows me to use the regular jQuery functions like 
    // $.each, while returning mocked objects when selectors are used. 
    test.prototype.constructor = test; 

    return test; 
})(); 

$ = mocked$;  

when(mockContruct).call(anything(), hasItem(containsString("#gameList"))) 
    .thenReturn(mockedGamelist); 

when(mockContruct).call(anything(), hasItems(containsString("<option>"), both(object()).and(hasMember("value")))) 
     .thenReturn(mockedOption); 

headerFunctions.listGamesCallback([ { 
    gameId : 1, 
    isWhitesTurn : false, 
    isGameOver : false, 
    whiteUserName : "foobar", 
    blackUserName : "barfoo" 
} ]); 

JsMockito.verify(mockedGamelist).empty(); 
JsMockito.verify(mockedGamelist).append(mockedOption); 

$ = saved$; 

Answer 1

Ok, aquí lo que se me ocurrió es que hace el trabajo con una configuración mínima. .extend es completamente necesario aquí para que el objeto jQuery esté configurado correctamente. Esto le permite burlarse del constructor para devolver objetos jQuery simulados que puede usar para ejecutar sus pruebas. Como espía, jQuery funcionará como se espera en todas las situaciones, excepto cuando desee que haga otra cosa. Aquí está:

TestCase("HeaderTest", { 
    testListGamesCallback : function() { 
     var saved$ = $; 

     $ = $.prototype.construct = jQuery.extend(spy(jQuery), jQuery); 

     var mockGameList = mock(jQuery); 
     when($)(containsString("#gameList")).thenReturn(mockGameList); 

     headerFunctions.listGamesCallback([ { 
      gameId : 1, 
      isWhitesTurn : false, 
      isGameOver : false, 
      whiteUserName : "foobar", 
      blackUserName : "barfoo" 
     } ]); 

     verify(mockGameList).empty(); 
     verify(mockGameList).append(object()); 

     $ = saved$; 
    } 
}); 

La advertencia de esta solución es que burla que no sea el constructor de todo es un poco complicado. Deberá configurar cada función individual que desee simular, luego programar el comportamiento. Entonces:

$.each = mockFunction(); 
when($.each)(...matchers...).thenReturn(...); 

Pero todavía permite probar lo que necesita.

Answer 2

No estoy seguro si entiendo lo que quieres decir, pero si desea crear 'datos' para usted ejemplo, este es el método que sé:

var data = [ { id : 1 , name : 'foo' } , { id : 2, name : 'bar' ] ​ 

pero - si desea crear una lista de opciones, de lo que necesita un código par de correcciones: ver http://jsfiddle.net/7MMap/

var data = [ { gameId : 1 , name : 'foo' ,isJoinable:true} , { gameId : 2, name : 'bar' ,isJoinable:false}] 

    listGamesCallback = function(data) { 
    var gameList = $("#gameList select") 
        .empty(); 

    $.each(data, function(i,d) { 
      var newOption = $('<option>', {value : d.gameId }) 
      .text(d.name) 
      .data("isJoinable", d.isJoinable); 

      // Add it to the list 
      gameList.append(newOption); 
    }) 
      }; 

listGamesCallback(data); 

Answer 3

burlando de jQuery no es lo que es para burlona. Solo debe burlarse de los colaboradores de su objeto. jQuery te proporciona algunas utilidades, no es un colaborador y, por lo tanto, no se debe burlar.

Lo que está colaborando aquí es el DOM, o algún objeto intermedio entre su código y el DOM. data es un objeto de valor y simplemente se puede crear en su prueba como sugiere Avi.

En mis pruebas de JS, no me burlo del DOM, utilizo el DOM real y estoy seguro de derribar todo lo que he creado entre las pruebas, y esto parece funcionar bastante bien.

Answer 4

Como una extensión de la respuesta de alpian, puede crear elementos DOM sin tener que agregarlos a la página.Hacer sus funciones JS toman los elementos relevantes como parámetros:

listGamesCallback : function(data, gameListSelectElem) { 
    var gameList = $(gameListSelectElem); 
    ... 

y prueba de ellos, así:

var fakeSelect = $('<select>'), 
    data = ...; 

listGamesCallback(data, fakeSelect[0]); 

equal(fakeSelect.find('option').length, 1, 'must have exactly 1 option'); 
... 

La última línea de código anterior es para qUnit. Toma lo que necesites, el punto es decir que puedes pasar un elemento DOM que nunca se agregó a la página y luego investigar ese elemento DOM usando jQuery para encontrar si fue manipulado correctamente.