¿Cómo falso en el tiempo una animación jQuery usando Sinon en una prueba unitaria de Jasmine?

Question

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

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

• En Firefox y Chrome, la página se carga, se llama la función de animación, la prueba unitaria falla inmediatamente y luego (también inmediatamente) la animación ocurre visiblemente.

• En IE, Opera y Safari, las cargas de la página, se llama la función de animación, la prueba unitaria falla inmediatamente y la animación nunca ocurre visiblemente.

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

• La página se carga, se llama la función de animación, la animación se completa instantáneamente y la prueba unitaria tiene éxito inmediatamente.

Mirando a Documentación de Sinón, son temporizadores falsos cubren los siguientes procesos:setTimeout, clearTimeout, setInterval, clearInterval, Date

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

¿Quizás debería intentar algo más que Sinon? Jazmín waits() Funciona perfectamente en esta prueba, pero es increíblemente poco práctico para personas impacientes como yo.

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

Answer 1

Puedes usar JQuery Off Para apagar los efectos jQuery:

jQuery.fx.off = true

Esto no resolverá su problema de la espera inital de 7 segundos para que su evento se dispare, pero significa que puede probar que el DOM ha cambiado como esperaba.

Answer 2

He tenido el mismo problema. Creo que sucede porque la animación de JQuery se aprovecha de requestAnimationFrame() Si está disponible en su lugar, confiar en el setTimeout().

He trabajado en torno a este problema estableciendo todo el navegador específico requestAnimationFrame funciones en el window Objeto a NULL:

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

Asegúrese de que este código se ejecute antes de JQuery está cargada.

Answer 3

Creo que es posible con Sinonjs como se mostró 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"));
});