¿Cómo reproduzco una animación de jQuery con Sinon en una prueba de unidad de jazmín?

Question

Tengo 1 segundo jQuery .animate acción que se inicia 5 segundos después de la carga de la página. Configuré un temporizador Sinon en mi código de prueba de la unidad Jasmine y lo compruebo después de un tic de 7 segundos para ver si las propiedades posteriores a la animación son como deberían ser.

No funciona bien, así que coloqué una instancia de la animación en mi página de prueba HTML de Jasmine para ver mejor lo que está sucediendo.

• En Firefox y Chrome, se carga la página, la función de animación se llama, la prueba de la unidad falla inmediatamente y, a continuación (también inmediatamente) la animación se produce visiblemente.

• En IE, Opera y Safari, la página carga, se llama a la función de animación, la prueba de unidad falla inmediatamente y la animación nunca se produce de forma visible.

lo que esperaba era el siguiente (en todos los navegadores):

• Las cargas de la página, la función de animación se llama, la animación se completa de forma instantánea, y la prueba de la unidad tiene éxito inmediatamente.

En cuanto a Sinon's documentation, es temporizadores falsos cubren los siguientes procesos: setTimeout, clearTimeout, setInterval, clearInterval, Date

No sé cómo funciona la animación de jQuery, pero me imagino que está usando CSS para transición, y las transiciones CSS no están cubiertas en Sinon useFakeTimers, así que me imagino que este es el problema. Sin embargo, si estoy en lo cierto sobre el problema, aún necesito una solución.

Tal vez debería probar algo diferente a Sinon? El waits() de Jasmine funciona perfectamente en esta prueba, pero es increíblemente poco práctico para personas impacientes como yo.

¿Alguna otra sugerencia? Tenga en cuenta que soy nuevo en las pruebas de unidad de JS, por lo que las respuestas imprecisas me confundirán más que me ayudarán. ; o)

Answer 1

Puede utilizar jQuery off para apagar efectos jQuery:

jQuery.fx.off = true 

Esto no resolverá el problema de la inital 7 segundos de espera para su evento para disparar pero sí significa que usted puede probar que el DOM tiene cambiado como esperabas

Answer 2

He tenido el mismo problema. Creo que sucede porque la animación de jQuery toma ventaja de requestAnimationFrame() si está disponible en lugar de confiar en setTimeout().

He trabajado alrededor de este problema estableciendo todos requestAnimationFrame funciones específicas de cada navegador del objeto window a nulo:

window.webkitRequestAnimationFrame = null; 
window.mozRequestAnimationFrame = null; 
window.oRequestAnimationFrame = null; 

asegurarse de que este código se ejecuta antes de se carga jQuery.

Answer 3

creo que es posible con SinonJs ya que mostraba aquí: http://sinonjs.org/qunit

test("should animate element over 500ms", function() { 
    var el = jQuery("<div></div>"); 
    el.appendTo(document.body); 

    el.animate({ height: "200px", width: "200px" }); 
    this.clock.tick(510); 

    equals("200px", el.css("height")); 
    equals("200px", el.css("width")); 
});