Unit testing for jQuery widget in Qunit - jquery-ui

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.