qunit测试样式应用于目标元素

Question

我正在针对我正在编写的插件进行第一组javascript单元测试。 它基于一个jquery ui小部件，看起来像这样

$.widget("my.carousel", {
 // Set up the widget
        _create: function () {
            var self = this;
            _items = $(this.element).children();
            _totalItems = _items.length;
            _items.each(function(index) {
                $(this).addClass('my-carousel-item');
                if (index > 0) {
                    $(this).effect("scale", { percent: 50 });
                }
            });
}

因此，当它被应用到一个元素时，它会获得它的所有子元素，并将它们与第一个元素分开50％。

在我的qunit测试中我有

$(document).ready(function () {

    test('my-carousel-items are scaled to a given percentage if they are not the current item', function () {
            //setup
            var list = $('<div id="testDiv" />');
            for (var i = 0; i < 5; i++) {
                $('<div style="height:40px; background-color:red; margin-bottom:5px;">').appendTo(list);
            }
            $('#testArea').append(list);

            var carousel = list.carousel();

            expect(5);
            carousel.children().each(function(index) {
                if (index == 0)
                    equals($(this).css('height'), 40);
                else
                    equals($(this).css('height'), 20);
            });
        });
});

尽管这实际上显示正确（元素的高度值是20px），但测试结果失败了。我认为这是因为在测试运行后应用了比例效果。如果有人有任何建议，我会欢迎它。

Answer 1

您必须在运行测试之前停止动画。

$("*").stop(false, true);

或者你可以等他们完成（描述here）

var wait = setInterval(function() {
    if(!$("#testDiv div").is(":animated") ) {
        clearInterval(wait);
        // run tests
    }
}, 100);