mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Clean collapse unit tests up
This commit is contained in:
Heinrich Fenkart
parent
6a523bf99d
commit
77d0557468
@ -19,156 +19,153 @@ $(function () {
|
||||
})
|
||||
|
||||
test('should provide no conflict', function () {
|
||||
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
|
||||
strictEqual($.fn.collapse, undefined, 'collapse was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
test('should return element', function () {
|
||||
ok($(document.body).bootstrapCollapse()[0] == document.body, 'document.body returned')
|
||||
test('should return jquery collection containing the element', function () {
|
||||
var $el = $('<div/>')
|
||||
var $collapse = $el.bootstrapCollapse()
|
||||
ok($collapse instanceof $, 'returns jquery collection')
|
||||
strictEqual($collapse[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
test('should show a collapsed element', function () {
|
||||
var el = $('<div class="collapse"></div>').bootstrapCollapse('show')
|
||||
ok(el.hasClass('in'), 'has class in')
|
||||
ok(!/height/.test(el.attr('style')), 'has height reset')
|
||||
var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
|
||||
|
||||
ok($el.hasClass('in'), 'has class "in"')
|
||||
ok(!/height/.test($el.attr('style')), 'has height reset')
|
||||
})
|
||||
|
||||
test('should hide a collapsed element', function () {
|
||||
var el = $('<div class="collapse"></div>').bootstrapCollapse('hide')
|
||||
ok(!el.hasClass('in'), 'does not have class in')
|
||||
ok(/height/.test(el.attr('style')), 'has height set')
|
||||
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
|
||||
|
||||
ok(!$el.hasClass('in'), 'does not have class "in"')
|
||||
ok(/height/.test($el.attr('style')), 'has height set')
|
||||
})
|
||||
|
||||
test('should not fire shown when show is prevented', function () {
|
||||
$.support.transition = false
|
||||
stop()
|
||||
|
||||
$('<div class="collapse"/>')
|
||||
.on('show.bs.collapse', function (e) {
|
||||
e.preventDefault()
|
||||
ok(true)
|
||||
ok(true, 'show event fired')
|
||||
start()
|
||||
})
|
||||
.on('shown.bs.collapse', function () {
|
||||
ok(false)
|
||||
ok(false, 'shown event fired')
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
test('should reset style to auto after finishing opening collapse', function () {
|
||||
$.support.transition = false
|
||||
stop()
|
||||
|
||||
$('<div class="collapse" style="height: 0px"/>')
|
||||
.on('show.bs.collapse', function () {
|
||||
ok(this.style.height == '0px')
|
||||
equal(this.style.height, '0px', 'height is 0px')
|
||||
})
|
||||
.on('shown.bs.collapse', function () {
|
||||
ok(this.style.height === '')
|
||||
strictEqual(this.style.height, '', 'height is auto')
|
||||
start()
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
test('should add active class to target when collapse shown', function () {
|
||||
$.support.transition = false
|
||||
test('should remove "collapsed" class from target when collapse is shown', function () {
|
||||
stop()
|
||||
|
||||
var target = $('<a data-toggle="collapse" href="#test1"></a>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"></div>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('show.bs.collapse', function () {
|
||||
ok(!target.hasClass('collapsed'))
|
||||
ok(!$target.hasClass('collapsed'))
|
||||
start()
|
||||
})
|
||||
|
||||
target.click()
|
||||
$target.click()
|
||||
})
|
||||
|
||||
test('should remove active class to target when collapse hidden', function () {
|
||||
$.support.transition = false
|
||||
test('should add "collapsed" class to target when collapse is hidden', function () {
|
||||
stop()
|
||||
|
||||
var target = $('<a data-toggle="collapse" href="#test1"></a>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1" class="in"></div>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
$('<div id="test1" class="in"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hide.bs.collapse', function () {
|
||||
ok(target.hasClass('collapsed'))
|
||||
ok($target.hasClass('collapsed'))
|
||||
start()
|
||||
})
|
||||
|
||||
target.click()
|
||||
$target.click()
|
||||
})
|
||||
|
||||
test('should remove active class from inactive accordion targets', function () {
|
||||
$.support.transition = false
|
||||
test('should remove "collapsed" class from active accordion target', function () {
|
||||
stop()
|
||||
|
||||
var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
var accordionHTML = '<div id="accordion">' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'</div>'
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
|
||||
|
||||
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(0))
|
||||
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="in"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(0))
|
||||
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
|
||||
|
||||
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(1))
|
||||
var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
$('<div id="body2"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(1))
|
||||
$('<div id="body2"/>').appendTo($groups.eq(1))
|
||||
|
||||
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(2))
|
||||
var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
|
||||
|
||||
$('<div id="body3"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(2))
|
||||
$('<div id="body3"/>')
|
||||
.appendTo($groups.eq(2))
|
||||
.on('show.bs.collapse', function () {
|
||||
ok(target1.hasClass('collapsed'))
|
||||
ok(target2.hasClass('collapsed'))
|
||||
ok(!target3.hasClass('collapsed'))
|
||||
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
|
||||
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
|
||||
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
|
||||
|
||||
start()
|
||||
})
|
||||
|
||||
target3.click()
|
||||
$target3.click()
|
||||
})
|
||||
|
||||
test('should allow dots in data-parent', function () {
|
||||
$.support.transition = false
|
||||
stop()
|
||||
|
||||
var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
|
||||
.appendTo($('#qunit-fixture'))
|
||||
var accordionHTML = '<div class="accordion">' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'<div class="accordion-group"/>' +
|
||||
'</div>'
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
|
||||
|
||||
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(0))
|
||||
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="in"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(0))
|
||||
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
|
||||
|
||||
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(1))
|
||||
var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
$('<div id="body2"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(1))
|
||||
$('<div id="body2"/>').appendTo($groups.eq(1))
|
||||
|
||||
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(2))
|
||||
var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
|
||||
|
||||
$('<div id="body3"></div>')
|
||||
.appendTo(accordion.find('.accordion-group').eq(2))
|
||||
$('<div id="body3"/>')
|
||||
.appendTo($groups.eq(2))
|
||||
.on('show.bs.collapse', function () {
|
||||
ok(target1.hasClass('collapsed'))
|
||||
ok(target2.hasClass('collapsed'))
|
||||
ok(!target3.hasClass('collapsed'))
|
||||
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
|
||||
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
|
||||
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
|
||||
|
||||
start()
|
||||
})
|
||||
|
||||
target3.click()
|
||||
$target3.click()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user