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);

或者，您也可以等他们完成（ 在此介绍）

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