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

Question

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

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

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

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

Я надеялся на следующее (во всех браузерах):

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

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

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

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

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

Answer 1

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

jQuery.fx.off = true

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

Answer 2

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

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

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

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

Answer 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"));
});