Question

我为Footer bar构建了一个jQuery小部件。此栏包含一些可点击的活动。我想编写单元测试来验证功能。为了测试我正在使用qunit。我想为这些功能创建测试单元： -

检查栏已加载
检查关闭按钮栏应该最小化
下次点击关闭按钮栏再次获得最大化

有人可以帮我写出正确的测试模块吗这是我的页脚栏小部件代码： -

// widget for footer bar 
(function($){
  $.widget("ui.footerbar", {
    options: {
        id: null, //id for the DOM element
        offset:0, // relative to right edge of the browser window
        width: '100%', // width of the chatbox
        boxClosed: function(id) {}, // called when the close icon is clicked 
    },
    init: function(elem) {
                this.elem = elem;
    },

    widget: function() {
        return this.uiFooterbar
    },

    _create: function(){ 
        var self = this,
        options = self.options,
        offset = options.offset,
        title = options.title || "No Title",
        // footerbar
        uiFooterbar = (self.uiFooterbar = $('<div></div>'))
        .appendTo(document.body)
        .attr('id', 'stickybar'),

        // close button tab
        uiFooterbarClosebox = (self.uiFooterbarClosebox = $('<div></div>'))
        .addClass('vmchat_bar_button'
         )
        .attr('id', 'hide_bar')
        .appendTo(uiFooterbar),

        uiFooterbarClose = (self.uiFooterbarClose = $('<input>'))
        .attr('id', 'closebtn')
        .attr('type', 'button')
        .appendTo(uiFooterbarClosebox) 
        .toggle(function () { alert('click1');
            $('#stickybar').effect("size", { to: {width: 36}, origin: ['bottom','right'] }, 1000, function (){$('#stickybar').css("left", "97%")});
        }, function () {alert('click2');
            $('#stickybar').effect("size", { to: {width: self.options.width}, origin: ['bottom','left'] }, 100, function (){$('#stickybar').css("left", 0)});
        });  

        //chatroom tab                 
        uiFooterbarchatroomtab = (self.uiFooterbarchatroomtab = $('<div></div>'))
            .addClass('vmchat_bar_button'
         )
        .attr('id', 'chatroom_bt')
        .appendTo(uiFooterbar),

        uiFooterbarchatroomContent = (self.uiFooterbarchatroomContent = $('<div class="inner_bt"></div>'))
        .appendTo(uiFooterbarchatroomtab) 

        uiFooterbarchatroomIcon= (self.uiFooterbarchatroomIcon = $('<div id="chatroom_icon"></div>'))
        .appendTo(uiFooterbarchatroomContent)
         uiFooterbarchatroomText= (self.uiFooterbarchatroomText = $('<div id="chatroom_text"></div>'))
        .appendTo(uiFooterbarchatroomContent)
        .text('Chatroom')
        .click(function(){
            alert('open comman chat room');
        })

        //userlist tab
        uiFooterbarUserlisttab = (self.uiFooterbarUserlisttab = $('<div></div>'))
        .addClass('vmchat_bar_button'
         )
        .attr('id', 'user_list')
        .appendTo(uiFooterbar),

        uiFooterbarUserlistContent = (self.uiFooterbarUserlistContent = $('<div class="inner_bt"></div>'))
        .appendTo(uiFooterbarUserlisttab) 

        uiFooterbarUserlistIcon= (self.uiFooterbarUserlistIcon = $('<div id="usertab_icon"></div>'))
        .appendTo(uiFooterbarUserlistContent)
         uiFooterbarUserlistText= (self.uiFooterbarUserlistText = $('<div id="usertab_text"></div>'))
        .appendTo(uiFooterbarUserlistContent)
        .text('Private Chat')
        .click(function(){
            alert('open comman chat room');
        })



        self._setWidth(self.options.width);

        self.init(self);

    },

   destroy: function () {
        this.element.remove();

        // if using jQuery UI 1.8.x
        $.Widget.prototype.destroy.call(this);
        // if using jQuery UI 1.9.x
        //this._destroy();
    },

    _setWidth: function(width) {
        this.uiFooterbar.width(width + "px");
     }
});
}(jQuery));

为了测试，我创建了这些模块： -

测试栏已加载且可见

var el;
var body = document.body;
function bar(){
return el.footerbar("widget");
}

(function($){

module("core");
test("init", function(){
    el = $("#qunit-fixture").footerbar();
    ok( bar().is(':visible'), 'bar is open');
});
})(jQuery);

测试正确的标签数

(function($){
var el, widget, elems;

module("html", {
    setup: function() {
        el = $("#qunit-fixture").footerbar();
        widget = el.footerbar("widget");
    }
});

test("check close button", function(){
    expect(4);

    elems = widget.find('.vmchat_bar_button');
    equal( elems.length, 3, 'There are three Tabs' );

    equal(widget.find('input[id="closebtn"]').parents('div').attr("id"),'hide_bar','close button is present');
    equal(widget.find('div[id="chatroom_text"]').parent().hasClass('inner_bt'),true,'chatroom tab is present');
    equal(widget.find('div[id="usertab_text"]').parent().hasClass('inner_bt'),true,'user list tab is present');

});

})(jQuery);

测试栏在关闭按钮单击时获得最小化/最大化

(function($){

module("event");

test("footerbaropen", function(){       
    // inject widget

    el = $("#qunit-fixture").footerbar();
    el.footerbar({})


    equal(bar().css('left'),'0px' ,'bar is open');

    // fire click event on close button
    bar().find("#closebtn").trigger("click");
    equal(bar().css('left'),'97%' ,'bar is closed'); // this is not working

});

})(jQuery);

前两个测试似乎工作正常，但在第三个测试中，当触发click事件时，bar在此块中未被最小化。退出时其状态会发生变化。

如果页脚栏已更改或处于活动状态，我该怎么做才能更改页脚栏的状态？

Answer 1

问题是$（'＃stickybar'）。效果。

在您的页脚栏完成此效果之前，您的测试正在运行。

在Qunit中对jQuery小部件进行单元测试

1 个答案: