Как мне подделать анимацию jQuery с помощью Sinon в Jasmine unit test?

У меня есть 1-секундное действие jQuery .animate, которое запускается через 5 секунд после загрузки страницы. Я установил таймер Sinon в своем модульном модульном модуле Jasmine и проверил после отметки 7 секунд, чтобы узнать, соответствуют ли свойства после анимации, как они должны быть.

Это не работает правильно, поэтому я разместил экземпляр самой анимации на моей тестовой странице Jasmine HTML, чтобы лучше понять, что происходит.

  • В Firefox и Chrome загружается страница, вызывается функция анимации, unit test немедленно выходит из строя, а затем (также сразу) анимация заметно появляется.

  • В IE, Opera и Safari загружается страница, вызывается функция анимации, unit test немедленно завершается с ошибкой, и анимация никогда не появляется.

На что я надеялся, было следующее (во всех браузерах):

  • Загрузка страницы, вызывается функция анимации, анимация завершается мгновенно, а unit test сразу же выполняется.

Глядя на документацию Sinon, поддельные таймеры охватывают следующие процессы: setTimeout, clearTimeout, setInterval, clearInterval, Date

Я не знаю, как работает анимация jQuery, но я полагаю, что она использует CSS для перехода, а переходы CSS не рассматриваются в Sinon useFakeTimers, поэтому я думаю, что это проблема. Однако, если я прав по поводу проблемы, мне все еще нужно решение.

Может, мне стоит попробовать что-то другое, кроме Синона? Жасмин waits() отлично работает в этом тесте, но невероятно непрактичен для нетерпеливых людей, подобных мне.

Любые другие предложения? Пожалуйста, имейте в виду, что я новичок в тестировании модулей JS, поэтому смутные ответы будут меня путать больше, чем помочь мне.; О)

Ответы

Ответ 1

Вы можете использовать jQuery off, чтобы отключить эффекты jQuery:

jQuery.fx.off = true

Это не решит вашу проблему в течение 7 секунд ожидания вашего события, но это означает, что вы можете проверить, что DOM был изменен, как вы ожидали.

Ответ 2

У меня была такая же проблема. Я считаю, что это происходит потому, что анимация jQuery использует requestAnimationFrame(), если она доступна, вместо того, чтобы полагаться на setTimeout().

Я работал над этой проблемой, установив для всех requestAnimationFrame функций, специфичных для браузера, для объекта window значение null:

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

Убедитесь, что этот код выполняется до загрузки jQuery.

Ответ 3

Я думаю, что это возможно с SinonJs, как показано здесь: 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"));
});