Question

我有1秒jQuery .animate操作，在页面加载后5秒启动。我在我的Jasmine单元测试代码中设置了一个Sinon计时器，并在7秒钟后测试，以查看动画后属性是否正常。

它无法正常工作，所以我在Jasmine HTML测试页面上放置了一个动画实例，以便更好地了解正在发生的事情。

在Firefox和Chrome中，页面加载，调用动画功能，单元测试立即失败，然后（也立即）动画明显发生。
在IE，Opera和Safari中，页面加载，动画函数被调用，单元测试立即失败，动画永远不会明显发生。

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

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

查看Sinon's documentation，它的假定时器涵盖以下过程： setTimeout，clearTimeout，setInterval，clearInterval，Date

我不知道jQuery的动画是如何工作的，但是我想它正在使用CSS进行转换，并且Sinon的useFakeTimers中没有涉及CSS转换，所以我想这就是问题所在。但是，如果我对这个问题说得对，我仍然需要一个解决方案。

也许我应该尝试除了Sinon以外的其他东西？ Jasmine的waits()在这个测试中表现非常出色，但对于像我这样的不耐烦的人来说，这是非常不切实际的。

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

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

我认为Sinon Js可以在这里显示：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"));
});

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

3 个答案: