如何在 Jasmine 单元测试中使用 Sinon 模拟 jQuery 动画？

Question

我有一个 1 秒的 jQuery .animate 操作，它在页面加载后 5 秒启动。我在 Jasmine 单元测试代码中设置了一个 Sinon 计时器，并在 7 秒后进行测试，看看动画后属性是否符合预期。

它无法正常工作，因此我在 Jasmine HTML 测试页上放置了动画本身的一个实例，以便更好地了解发生了什么。

• 在 Firefox 和 Chrome 中，页面加载，调用动画函数，单元测试立即失败，然后（也立即）明显出现动画。

• 在 IE、Opera 和 Safari 中，页面加载、调用动画函数，单元测试立即失败，并且动画永远不会明显发生。

我希望的是以下内容（在所有浏览器中）：

• 页面加载，调用动画函数，动画立即完成，单元测试立即成功。

查看Sinon的文档，它的假定时器涵盖了以下流程： setTimeout、clearTimeout、setInterval、clearInterval、Date

我不知道如何jQuery的动画可以工作，但我想它是使用CSS来过渡的，而CSS过渡并没有在Sinon的useFakeTimers中涵盖，所以我想这就是问题所在。但是，如果我对这个问题的看法是正确的，我仍然需要一个解决方案。

或许我应该尝试一下诗乃以外的东西？ Jasmine 的 waits() 在此测试中完美运行，但对于像我这样不耐烦的人来说非常不切实际。

还有其他建议吗？请记住，我是 JS 单元测试的新手，所以模糊的答案会让我感到困惑而不是帮助我。 ;o)

Answer 1

您可以使用 jQuery off 关闭 jQuery 效果：

jQuery.fx.off = true

这不能解决您的问题最初的 7 秒等待事件触发，但这确实意味着您可以测试 DOM 是否已按预期更改。

Answer 2

我也遇到过同样的问题。我相信会发生这种情况是因为 jQuery 的动画利用了 requestAnimationFrame()（如果可用）而不是依赖于 setTimeout()。

我通过将 window 对象上的所有特定于浏览器的 requestAnimationFrame 函数设置为 null 来解决此问题：

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

确保此代码在 jQuery 之前执行已加载。

Answer 3

我认为 SinonJs 是可能的，如下所示： https://sinonjs.org/releases /最新/假定时器/

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