4
바닥 글 바용 jQuery 위젯을 빌드했습니다. 이 막대에는 클릭 할 수있는 일정이 있습니다. 기능을 확인하기 위해 단위 테스트를 작성하고 싶습니다. 테스트를 위해 저는 qunit을 사용하고 있습니다. 나는이 기능을 테스트 장치를 만들려면 : -Qunit에서 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);
시험 올바른 번호 - 나는 이러한 모듈을 생성 한 테스트를 위해
// 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));
(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);
테스트 표시 줄 최소화/m 닫기 버튼에 aximize는
(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);
최고 두 개의 테스트가 잘 작동하는 것 같지만 클릭 이벤트가이 블록 최소화되지 않는 줄을 트리거 세 번째 테스트를 클릭합니다. 종료 될 때 상태가 변경됩니다.
바닥 글 막대가 최소화되어 있거나 활성화되어있는 경우 변경된 상태를 보려면 어떻게해야합니까?