フッター バー用の 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);
上位 2 つのテストは正常に動作しているようですが、クリック イベントがトリガーされた 3 番目のテストでは、このブロックでバーが最小化されません。終了すると、そのステータスが変更されます。
フッター バーが最小化されている場合、またはアクティブになっている場合、フッター バーの状態を変更するにはどうすればよいですか?