I created a jQuery widget for the footer bar. This bar contains several events available to the click. I want to write unit test to test the functionality. For testing, I use qunit. I want to create a test unit for these functions: -
- The control panel is loading
- Check that the button panel is closed should be minimized.
- The next time you click on the close button bar, again get the maximum
Can someone help me write the correct test modules.
Here is my footer 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 created these modules: -
Test panel 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);
Validation 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);
Test panel allows you to minimize / maximize the click of the close button
(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);
The top two tests seem to work fine, but in the third test, when the click event is triggered, this block is not minimized. His status changes when he leaves.
What should I do to change the status of the footer if it is minimized or active?