mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 08:04:59 +02:00
Code Issues Releases Wiki Activity

Clean collapse unit tests up

Browse Source
This commit is contained in:
Heinrich Fenkart
2014-06-18 21:34:01 +02:00
parent 6a523bf99d
commit 77d0557468
1 changed files with 67 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
js/tests/unit/collapse.js
View File

@@ -19,156 +19,153 @@ $(function () {
}) })
test('should provide no conflict', 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 () { test('should return jquery collection containing the element', function () {
ok($(document.body).bootstrapCollapse()[0] == document.body, 'document.body returned') 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 () { test('should show a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('show') var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
ok(el.hasClass('in'), 'has class in')
ok(!/height/.test(el.attr('style')), 'has height reset') ok($el.hasClass('in'), 'has class "in"')
ok(!/height/.test($el.attr('style')), 'has height reset')
}) })
test('should hide a collapsed element', function () { test('should hide a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('hide') 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') 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 () { test('should not fire shown when show is prevented', function () {
$.support.transition = false
stop() stop()
$('<div class="collapse"/>') $('<div class="collapse"/>')
.on('show.bs.collapse', function (e) { .on('show.bs.collapse', function (e) {
e.preventDefault() e.preventDefault()
ok(true) ok(true, 'show event fired')
start() start()
}) })
.on('shown.bs.collapse', function () { .on('shown.bs.collapse', function () {
ok(false) ok(false, 'shown event fired')
}) })
.bootstrapCollapse('show') .bootstrapCollapse('show')
}) })
test('should reset style to auto after finishing opening collapse', function () { test('should reset style to auto after finishing opening collapse', function () {
$.support.transition = false
stop() stop()
$('<div class="collapse" style="height: 0px"/>') $('<div class="collapse" style="height: 0px"/>')
.on('show.bs.collapse', function () { .on('show.bs.collapse', function () {
ok(this.style.height == '0px') equal(this.style.height, '0px', 'height is 0px')
}) })
.on('shown.bs.collapse', function () { .on('shown.bs.collapse', function () {
ok(this.style.height === '') strictEqual(this.style.height, '', 'height is auto')
start() start()
}) })
.bootstrapCollapse('show') .bootstrapCollapse('show')
}) })
test('should add active class to target when collapse shown', function () { test('should remove "collapsed" class from target when collapse is shown', function () {
$.support.transition = false
stop() stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>') var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
.appendTo($('#qunit-fixture'))
$('<div id="test1"></div>') $('<div id="test1"/>')
.appendTo($('#qunit-fixture')) .appendTo('#qunit-fixture')
.on('show.bs.collapse', function () { .on('show.bs.collapse', function () {
ok(!target.hasClass('collapsed')) ok(!$target.hasClass('collapsed'))
start() start()
}) })
target.click() $target.click()
}) })
test('should remove active class to target when collapse hidden', function () { test('should add "collapsed" class to target when collapse is hidden', function () {
$.support.transition = false
stop() stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>') var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
.appendTo($('#qunit-fixture'))
$('<div id="test1" class="in"></div>') $('<div id="test1" class="in"/>')
.appendTo($('#qunit-fixture')) .appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () { .on('hide.bs.collapse', function () {
ok(target.hasClass('collapsed')) ok($target.hasClass('collapsed'))
start() start()
}) })
target.click() $target.click()
}) })
test('should remove active class from inactive accordion targets', function () { test('should remove "collapsed" class from active accordion target', function () {
$.support.transition = false
stop() stop()
var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') var accordionHTML = '<div id="accordion">' +
.appendTo($('#qunit-fixture')) '<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>') var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"></div>') $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
.appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>') var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"></div>') $('<div id="body2"/>').appendTo($groups.eq(1))
.appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>') var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"></div>') $('<div id="body3"/>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo($groups.eq(2))
.on('show.bs.collapse', function () { .on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed')) ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok(target2.hasClass('collapsed')) ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!target3.hasClass('collapsed')) ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
start() start()
}) })
target3.click() $target3.click()
}) })
test('should allow dots in data-parent', function () { test('should allow dots in data-parent', function () {
$.support.transition = false
stop() stop()
var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') var accordionHTML = '<div class="accordion">' +
.appendTo($('#qunit-fixture')) '<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>') var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"></div>') $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
.appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>') var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"></div>') $('<div id="body2"/>').appendTo($groups.eq(1))
.appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>') var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"></div>') $('<div id="body3"/>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo($groups.eq(2))
.on('show.bs.collapse', function () { .on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed')) ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok(target2.hasClass('collapsed')) ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!target3.hasClass('collapsed')) ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
start() start()
}) })
target3.click() $target3.click()
}) })
}) })