如何在Jasmine單元測試中使用Sinon僞造一個jQuery動畫？

我有一個1秒的jQuery .animate操作，在頁面加載後啓動5秒。我在Jasmine單元測試代碼中設置了一個Sinon計時器，並在7秒鐘的時間後測試，看看動畫後屬性是否應該如此。如何在Jasmine單元測試中使用Sinon僞造一個jQuery動畫？

它不能正常工作，所以我在我的Jasmine HTML測試頁面上放置了一個動畫本身的實例，以便更好地瞭解發生了什麼。

在Firefox和鉻，在頁面加載，動畫函數被調用時，單元測試立即失敗，然後（也立即）動畫明顯發生。
在IE，Opera和Safari中，加載頁面，調用動畫函數，單元測試立即失敗，並且動畫從未出現。

我希望什麼是以下（在所有瀏覽器）：

該頁面加載，動畫函數被調用，在動畫完成瞬間，和單元測試立即成功。在Sinon's documentation

來看，這是假的定時器包括以下過程： setTimeout，clearTimeout，setInterval，clearInterval，Date

我不知道jQuery的如何動畫作品，但我想它是使用CSS轉換和CSS轉換不在Sinon的useFakeTimers中，所以我想這是問題所在。但是，如果我對這個問題是正確的，我仍然需要一個解決方案。

也許我應該嘗試一下Sinon以外的事情嗎？茉莉花的waits()在這個測試中完美的工作，但是對於像我這樣的不耐煩的人來說，這是非常不切實際的。

任何其他建議？請記住，我是JS單元測試新手，所以模糊的答案會讓我困惑，而不是幫助我。 ; o）

來源

2011-09-06 gcdev

這是一個幾天，沒有人回答。我現在正在做的就是使用Jasmine的waits（）功能來解決這個問題。它運行良好，雖然測試不是即時的，而是實時完成的。哪里哪里。請張貼您對我可能有的任何其他想法。謝謝。 – gcdev

嘿！你有沒有找到解決這個問題的新方法？ $ .fx.off答案完美，但它仍然不是應該的方式... –

我沒有。我一直在使用waits（）。我實際上已經忘記了這個問題。但是看到德里克的解決方案比亞歷克斯的解決方案更簡單，並且它有幾張贊成票（因此它可能適用於其他人），我會試試它，並將它標記爲答案，如果它對我有用。 – gcdev

您可以使用jQuery off關閉jQuery效果：

jQuery.fx.off = true

這不會解決你的inital7秒等待的問題，爲您的觸發事件，但它意味着你可以測試在DOM已按預期更改。

來源

2012-02-29 13:49:23

謝謝。運行良好，（可悲？）使sinon.useFakeTimers冗餘...... –

我有同樣的問題。我相信這是因爲jQuery的動畫利用了requestAnimationFrame()，如果它可用，而不是依靠setTimeout()。

我由window對象上的所有瀏覽器特定功能設置爲null解決此問題的工作：

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

確保代碼執行的jQuery加載之前。

來源

2011-09-27 18:02:21

使用jasmine + jquery + sinon.js時，這並不適用於我。我什至確定它加載爲任何我的規格文件，甚至jQuery之前的src依賴項。也許我做錯了什麼？奇怪的是，當我單獨運行測試（沒有任何其他測試）時，它就會通過。 – thekingoftruth

我認爲這是可能的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")); 
});

來源

2014-02-06 16:16:08 aliry

如何在Jasmine單元測試中使用Sinon僞造一個jQuery動畫？

回答

相關問題