Unit testing for jQuery widget in Qunit

Question

I have build a jQuery widget for Footer bar. This bar contain some click-able event. I want to write unit test to verify the functionality. For testing I am using qunit. I want to create test unit for these functionality:-

• Check bar is loaded
• Check on close button bar should be minimized
• On next click on close button bar again get maximized

Can someone help me to write correct test modules.
Here is my footer bar widget code :-

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

For testing I have created these modules:-

Testing bar is loaded and visible

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

Testing correct Number of tabs

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

Testing bar get minimize/maximize on close button click

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

Top two test seems to be working fine but in third test when click event is triggered bar does not get minimized in this block. Its status get changed when it exit out.

What should I do to get changed status of footer bar, if it is minimized or if it is active?

Answer 1

Problem is $('#stickybar').effect.

Your test is running before your footer bar complete this effect.