13

我有一个 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，所以我想这就是问题所在。但是，如果我对这个问题是正确的，我仍然需要一个解决方案。

或许我应该试试诗乃以外的东西？Jasminewaits()在这个测试中表现完美，但对于像我这样没有耐心的人来说非常不切实际。

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

4

3 回答 3

20

你可以使用jQuery off来关闭 jQuery 效果：

jQuery.fx.off = true

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

于 2012-02-29T13:49:23.777 回答
4

我有同样的问题。我相信它的发生是因为 jQuery 的动画利用了requestAnimationFrame()它是否可用而不是依赖setTimeout().

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

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

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

于 2011-09-27T18:02:21.183 回答
2

我认为使用 SinonJs 是可能的，如下所示：https ://sinonjs.org/releases/latest/fake-timers/

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"));
});
于 2014-02-06T16:16:08.273 回答