Làm cách nào để giả mạo thời gian hoạt ảnh jQuery bằng Sinon trong thử nghiệm đơn vị Jasmine?

Question

Tôi có một hành động jQuery .animate 1 giây khởi chạy 5 giây sau khi tải trang. Tôi thiết lập một bộ đếm thời gian Sinon trong mã thử nghiệm đơn vị Jasmine của tôi và kiểm tra sau khi đánh dấu 7 giây để xem các thuộc tính hậu hoạt hình có giống như chúng không.

Nó không hoạt động đúng, vì vậy tôi đã đặt một thể hiện của hoạt hình trên trang thử nghiệm HTML Jasmine của tôi để xem điều gì đang diễn ra tốt hơn.

• Trong Firefox và Chrome, tải trang, chức năng hoạt ảnh được gọi, kiểm tra đơn vị ngay lập tức không thành công, và sau đó (ngay lập tức) hoạt ảnh hiển thị rõ ràng.

• Trong IE, Opera và Safari, trang tải, chức năng hoạt ảnh được gọi, kiểm tra đơn vị ngay lập tức không thành công và hoạt ảnh không bao giờ hiển thị rõ ràng.

Những gì tôi hy vọng là sau (trong tất cả các trình duyệt):

• Các tải trang, các chức năng hoạt hình được gọi, hình ảnh động hoàn thành ngay lập tức, và các đơn vị kiểm tra ngay lập tức thành công.

Nhìn vào Sinon's documentation, đó là giờ giả bao gồm các quy trình sau: setTimeout, clearTimeout, setInterval, clearInterval, Date

Tôi không biết làm thế nào jQuery tác phẩm hoạt hình, nhưng tôi tưởng tượng nó đang sử dụng CSS để chuyển tiếp và chuyển tiếp CSS không được đề cập trong số useFakeTimers của Sinon, vì vậy tôi cho rằng đây là vấn đề. Tuy nhiên, nếu tôi đúng về vấn đề tôi vẫn cần một giải pháp.

Có lẽ tôi nên thử thứ gì khác ngoài Sinon? Jasmine của waits() hoạt động hoàn hảo trong thử nghiệm này, nhưng là cực kỳ không thực tế cho những người thiếu kiên nhẫn như bản thân mình.

Bất kỳ đề xuất nào khác? Hãy ghi nhớ rằng tôi mới đến thử nghiệm đơn vị JS, do đó, câu trả lời mơ hồ sẽ gây nhầm lẫn cho tôi nhiều hơn giúp tôi. ; o)

Answer 1

Bạn có thể sử dụng jQuery off để tắt hiệu ứng jQuery:

jQuery.fx.off = true 

này sẽ không giải quyết được vấn đề của bạn trong những inital 7 chờ đợi thứ hai cho sự kiện của bạn để bắn nhưng nó không có nghĩa là bạn có thể kiểm tra xem có DOM đã được thay đổi như bạn mong đợi.

Answer 2

Tôi đã gặp sự cố tương tự. Tôi tin rằng điều đó xảy ra vì hoạt ảnh của jQuery tận dụng lợi thế của requestAnimationFrame() nếu có sẵn thay vì dựa vào số setTimeout().

Tôi đã làm việc xung quanh vấn đề này bằng cách thiết lập tất cả các trình duyệt cụ thể requestAnimationFrame chức năng trên đối tượng window để null:

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

Hãy chắc chắn rằng mã này thực hiện trước jQuery được nạp.

Answer 3

Tôi nghĩ rằng đó là có thể với SinonJs vì nó cho thấy ở đây: 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")); 
});