1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00

Use a single class name for opened/expanded/shown state of widgets

This commit is contained in:
Johann-S
2016-10-24 10:57:32 +02:00
parent f11f630acd
commit 9d129a43d6
19 changed files with 113 additions and 113 deletions

View File

@@ -34,7 +34,7 @@ $(function () {
QUnit.test('should fade element out on clicking .close', function (assert) {
assert.expect(1)
var alertHTML = '<div class="alert alert-danger fade in">'
var alertHTML = '<div class="alert alert-danger fade active">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
@@ -43,12 +43,12 @@ $(function () {
$alert.find('.close').trigger('click')
assert.strictEqual($alert.hasClass('in'), false, 'remove .in class on .close click')
assert.strictEqual($alert.hasClass('active'), false, 'remove .active class on .close click')
})
QUnit.test('should remove element when clicking .close', function (assert) {
assert.expect(2)
var alertHTML = '<div class="alert alert-danger fade in">'
var alertHTML = '<div class="alert alert-danger fade active">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'

View File

@@ -48,7 +48,7 @@ $(function () {
assert.expect(2)
var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
assert.ok($el.hasClass('in'), 'has class "in"')
assert.ok($el.hasClass('active'), 'has class "active"')
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
})
@@ -62,7 +62,7 @@ $(function () {
'</div>',
'<div class="panel-group" id="accordion2">',
'<div class="panel">',
'<div id="collapse2" class="collapse in"/>',
'<div id="collapse2" class="collapse active"/>',
'</div>',
'</div>'
].join('')
@@ -71,15 +71,15 @@ $(function () {
var $el2 = $('#collapse2')
$el1.bootstrapCollapse('show')
assert.ok($el1.hasClass('in'))
assert.ok($el2.hasClass('in'))
assert.ok($el1.hasClass('active'))
assert.ok($el2.hasClass('active'))
})
QUnit.test('should hide a collapsed element', function (assert) {
assert.expect(1)
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
assert.ok(!$el.hasClass('in'), 'does not have class "in"')
assert.ok(!$el.hasClass('active'), 'does not have class "active"')
})
QUnit.test('should not fire shown when show is prevented', function (assert) {
@@ -150,7 +150,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
$('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -185,7 +185,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
$('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -200,7 +200,7 @@ $(function () {
assert.expect(0)
var done = assert.async()
var $test = $('<div id="test1" class="in"/>')
var $test = $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
assert.ok(false)
@@ -244,7 +244,7 @@ $(function () {
assert.expect(1)
var done = assert.async()
$('<div class="collapse in"></div>')
$('<div class="collapse active"></div>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
@@ -267,7 +267,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
$('<div id="body1" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
@@ -301,7 +301,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
$('<div id="body1" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
@@ -344,7 +344,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
$('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -379,7 +379,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
$('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -403,7 +403,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
$('<div id="body1" aria-expanded="true" class="in"/>').appendTo($groups.eq(0))
$('<div id="body1" aria-expanded="true" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
@@ -449,7 +449,7 @@ $(function () {
$target2.trigger('click')
$body2
.toggleClass('in collapsing')
.toggleClass('active collapsing')
.data('bs.collapse')._isTransitioning = 1
$target1.trigger('click')
@@ -466,7 +466,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
$('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'))

View File

@@ -59,7 +59,7 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
@@ -128,10 +128,10 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should add class open to menu if clicked', function (assert) {
QUnit.test('should add class active to menu if clicked', function (assert) {
assert.expect(1)
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
@@ -146,7 +146,7 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
@@ -164,11 +164,11 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should remove "open" class if body is clicked', function (assert) {
QUnit.test('should remove "active" class if body is clicked', function (assert) {
assert.expect(2)
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
@@ -187,12 +187,12 @@ $(function () {
.bootstrapDropdown()
.trigger('click')
assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
$(document.body).trigger('click')
assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class removed')
assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class removed')
})
QUnit.test('should remove "open" class if body is clicked, with multiple dropdowns', function (assert) {
QUnit.test('should remove "active" class if body is clicked, with multiple dropdowns', function (assert) {
assert.expect(7)
var dropdownHTML = '<ul class="nav">'
+ '<li><a href="#menu1">Menu 1</a></li>'
@@ -217,16 +217,16 @@ $(function () {
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
$first.trigger('click')
assert.strictEqual($first.parents('.open').length, 1, '"open" class added on click')
assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
assert.strictEqual($first.parents('.active').length, 1, '"active" class added on click')
assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
$(document.body).trigger('click')
assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
$last.trigger('click')
assert.strictEqual($last.parent('.open').length, 1, '"open" class added on click')
assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
assert.strictEqual($last.parent('.active').length, 1, '"active" class added on click')
assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
$(document.body).trigger('click')
assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
})
QUnit.test('should fire show and hide event', function (assert) {
@@ -411,7 +411,7 @@ $(function () {
$('#textField').trigger('click')
assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
})
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@@ -430,6 +430,6 @@ $(function () {
$('#textArea').trigger('click')
assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
})
})

View File

@@ -229,7 +229,7 @@ $(function () {
$popover.bootstrapPopover('show')
$popover.bootstrapPopover('dispose')
assert.ok(!$popover.hasClass('in'), 'popover is hidden')
assert.ok(!$popover.hasClass('active'), 'popover is hidden')
assert.ok(!$popover.data('popover'), 'popover does not have data')
assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')

View File

@@ -111,7 +111,7 @@ $(function () {
assert
.ok($('.tooltip')
.is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.in'), 'has correct classes applied')
.is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.active'), 'has correct classes applied')
$tooltip.bootstrapTooltip('hide')
@@ -293,7 +293,7 @@ $(function () {
$tooltip.bootstrapTooltip('show')
$tooltip.bootstrapTooltip('dispose')
assert.ok(!$tooltip.hasClass('in'), 'tooltip is hidden')
assert.ok(!$tooltip.hasClass('active'), 'tooltip is hidden')
assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
@@ -322,7 +322,7 @@ $(function () {
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip('toggle')
assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
assert.ok($('.tooltip').is('.fade.active'), 'tooltip is faded active')
})
QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
@@ -333,7 +333,7 @@ $(function () {
.bootstrapTooltip('show')
$('.tooltip').bootstrapTooltip('toggle')
assert.ok($('.tooltip').not('.fade.in'), 'tooltip was faded out')
assert.ok($('.tooltip').not('.fade.active'), 'tooltip was faded out')
})
QUnit.test('should place tooltips inside body when container is body', function (assert) {
@@ -489,11 +489,11 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip is not faded active')
}, 100)
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in')
assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip is faded active')
done()
}, 200)
@@ -509,12 +509,12 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
done()
}, 200)
@@ -530,16 +530,16 @@ $(function () {
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
assert.ok($('.tooltip').is('.fade.active'), '1ms: tooltip faded active')
$tooltip.trigger('mouseout')
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
assert.ok($('.tooltip').is('.fade.active'), '100ms: tooltip still faded active')
$tooltip.trigger('mouseenter')
}, 100)
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip still faded in')
assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip still faded active')
done()
}, 200)
}, 0)
@@ -556,12 +556,12 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
done()
}, 200)
@@ -577,12 +577,12 @@ $(function () {
.bootstrapTooltip({ delay: { show: 150, hide: 0 }})
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.in'), '250ms: tooltip not faded in')
assert.ok(!$('.tooltip').is('.fade.active'), '250ms: tooltip not faded active')
done()
}, 250)
@@ -598,16 +598,16 @@ $(function () {
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
setTimeout(function () {
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.in'), '1ms: tooltip faded in')
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '1ms: tooltip faded active')
$tooltip.trigger('mouseout')
setTimeout(function () {
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.in'), '100ms: tooltip still faded in')
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '100ms: tooltip still faded active')
}, 100)
setTimeout(function () {
assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.in'), '200ms: tooltip removed')
assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.active'), '200ms: tooltip removed')
done()
}, 200)
@@ -713,7 +713,7 @@ $(function () {
assert.ok(obj._hoverState == 'out', 'the tooltip hoverState should be set to "out"')
$('#tt-outer').trigger('mouseenter')
assert.ok(obj._hoverState == 'in', 'the tooltip hoverState should be set to "in"')
assert.ok(obj._hoverState == 'active', 'the tooltip hoverState should be set to "active"')
assert.strictEqual(currentUid, $('#tt-content').text())
})
@@ -775,7 +775,7 @@ $(function () {
var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement())
function showingTooltip() { return $tooltip.hasClass('in') || tooltip._hoverState == 'in' }
function showingTooltip() { return $tooltip.hasClass('active') || tooltip._hoverState == 'active' }
var tests = [
['mouseenter', 'mouseleave'],