Comment puis-je à temps simuler une animation jQuery en utilisant dans un test Sinon unité Jasmine?

Question

J'ai 1 seconde action jQuery .animate qui lance 5 secondes après la charge de la page. Je mis en place une minuterie dans mon code Sinon tester l'unité et Jasmine test après une tique de 7 secondes pour voir si les propriétés post-animation sont comme elles devraient être.

Il ne fonctionne pas bien, donc je l'ai placé une instance de l'animation elle-même sur ma page de test Jasmine HTML pour mieux voir ce qui se passe.

• Dans Firefox et Chrome, la page se charge, la fonction d'animation est appelée, le test unitaire échoue immédiatement, puis (également immédiatement) l'animation se produit visiblement.

• Dans IE, Opera et Safari, la page se charge, la fonction d'animation est appelée, le test unitaire échoue immédiatement, et l'animation ne se produit jamais visible.

Ce que j'espérais AVAIT (dans tous les navigateurs):

• La page se charge, la fonction d'animation est appelée, l'animation se termine instantanément, et le test de l'unité réussit immédiatement.

documentation Sinon, il est faux de minuteries couvrent les processus suivants: setTimeout, clearTimeout, setInterval, clearInterval, Date

Je ne sais pas comment l'animation de jQuery fonctionne, mais je suppose qu'il utilise CSS à la transition, et les transitions CSS ne sont pas couverts dans le useFakeTimers de Sinon, j'imagine que c'est le problème. Cependant, si je ne me trompe pas sur le problème que je dois encore une solution.

Peut-être que je devrais essayer autre chose que Sinon? Le waits() Jasmine fonctionne parfaitement dans ce test, mais il est incroyablement pratique pour les gens impatients de comme moi.

Toutes les autres suggestions? S'il vous plaît garder à l'esprit que je suis nouveau pour les tests unitaires JS, donc des réponses vagues me confondre plus me aider. ; O)

Answer 1

Vous pouvez utiliser jQuery off pour désactiver les effets jQuery:

jQuery.fx.off = true

Cela ne résoudra pas votre problème du inital 7 secondes d'attente pour votre événement au feu, mais cela ne signifie que vous pouvez vérifier que le DOM a été modifié comme prévu.

Answer 2

J'ai eu le même problème. Je crois que cela se produit parce que l'animation de jQuery profite de requestAnimationFrame() si elle est disponible comptant au lieu du setTimeout().

J'ai travaillé autour de ce problème en réglant toutes les fonctions de requestAnimationFrame spécifiques au navigateur sur l'objet window null:

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

Assurez-vous que ce code exécute avant jQuery est chargé.

Answer 3

Je pense qu'il est possible avec SinonJs comme montré ici: 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"));
});