Тест qunit, что стили применяются к целевым элементам - PullRequest
Новая
       18

Тест qunit, что стили применяются к целевым элементам

2 голосов
/ 24 ноября 2011

Я делаю свой первый набор модульных тестов 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), результаты теста не пройдены.Я предполагаю, что это потому, что эффект масштаба применяется после запуска теста.Если у кого-то есть совет, я бы его приветствовал.

qunit results

1 Ответ

0 голосов
/ 07 декабря 2011

Вы должны остановить анимацию перед запуском теста. 

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

Или вы можете дождаться их окончания (описано здесь ) 

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