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

Comply to the new rules.

Browse Source
This commit is contained in:
XhmikosR
2017-12-16 14:00:38 +02:00
parent 6d336502c7
commit 80d0943b95
32 changed files with 1798 additions and 1760 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
js/tests/unit/alert.js
View File

@@ -34,10 +34,10 @@ $(function () {
QUnit.test('should fade element out on clicking .close', function (assert) {
assert.expect(1)
var alertHTML = '<div class="alert alert-danger fade show">'
+ '<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>'
var alertHTML = '<div class="alert alert-danger fade show">' +
'<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>'
var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture'))
@@ -48,10 +48,10 @@ $(function () {
QUnit.test('should remove element when clicking .close', function (assert) {
assert.expect(2)
var alertHTML = '<div class="alert alert-danger fade show">'
+ '<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>'
var alertHTML = '<div class="alert alert-danger fade show">' +
'<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>'
var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
@@ -75,5 +75,4 @@ $(function () {
})
.bootstrapAlert('close')
})
})

53
js/tests/unit/button.js
View File

@@ -87,11 +87,11 @@ $(function () {
assert.expect(1)
var done = assert.async()
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+ '<label class="btn btn-primary">'
+ '<input type="radio" id="radio" autocomplete="off">Radio'
+ '</label>'
+ '</div>'
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary">' +
'<input type="radio" id="radio" autocomplete="off">Radio' +
'</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
$group.find('input').on('change', function (e) {
@@ -105,17 +105,17 @@ $(function () {
QUnit.test('should check for closest matching toggle', function (assert) {
assert.expect(12)
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+ '<label class="btn btn-primary active">'
+ '<input type="radio" name="options" id="option1" checked="true"> Option 1'
+ '</label>'
+ '<label class="btn btn-primary">'
+ '<input type="radio" name="options" id="option2"> Option 2'
+ '</label>'
+ '<label class="btn btn-primary">'
+ '<input type="radio" name="options" id="option3"> Option 3'
+ '</label>'
+ '</div>'
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' +
'<input type="radio" name="options" id="option1" checked="true"> Option 1' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option2"> Option 2' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option3"> Option 3' +
'</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn1 = $group.children().eq(0)
@@ -131,7 +131,7 @@ $(function () {
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
$btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
$btn2.find('input').trigger('click') // Clicking an already checked radio should not un-check it
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
@@ -140,10 +140,10 @@ $(function () {
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
assert.expect(2)
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+ '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>'
+ '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>'
+ '</div>'
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>' +
'<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn1 = $group.children().eq(0)
@@ -158,11 +158,11 @@ $(function () {
QUnit.test('should handle disabled attribute on non-button elements', function (assert) {
assert.expect(2)
var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>'
+ '<label class="btn btn-danger disabled" aria-disabled="true" disabled>'
+ '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>'
+ '</label>'
+ '</div>'
var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' +
'<label class="btn btn-danger disabled" aria-disabled="true" disabled>' +
'<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' +
'</label>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn = $group.children().eq(0)
@@ -172,5 +172,4 @@ $(function () {
assert.ok($btn.is(':not(.active)'), 'button did not become active')
assert.ok(!$input.is(':checked'), 'checkbox did not get checked')
})
})

898
js/tests/unit/carousel.js
View File

File diff suppressed because it is too large Load Diff

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

@@ -30,8 +30,7 @@ $(function () {
$el.bootstrapCollapse()
try {
$el.bootstrapCollapse('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -52,7 +51,6 @@ $(function () {
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
})
QUnit.test('should show multiple collapsed elements', function (assert) {
assert.expect(4)
var done = assert.async()
@@ -279,11 +277,11 @@ $(function () {
assert.expect(3)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<div class="card"/>' +
'<div class="card"/>' +
'<div class="card"/>' +
'</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0))
@@ -313,11 +311,11 @@ $(function () {
assert.expect(3)
var done = assert.async()
var accordionHTML = '<div class="accordion">'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '</div>'
var accordionHTML = '<div class="accordion">' +
'<div class="card"/>' +
'<div class="card"/>' +
'<div class="card"/>' +
'</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
@@ -415,11 +413,11 @@ $(function () {
assert.expect(3)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<div class="card"/>' +
'<div class="card"/>' +
'<div class="card"/>' +
'</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" aria-expanded="true" href="#body1"/>').appendTo($groups.eq(0))
@@ -449,10 +447,10 @@ $(function () {
assert.expect(1)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<div class="card"/>'
+ '<div class="card"/>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<div class="card"/>' +
'<div class="card"/>' +
'</div>'
var showFired = false
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
@@ -514,16 +512,16 @@ $(function () {
QUnit.test('should allow accordion to use children other than card', function (assert) {
assert.expect(4)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<div class="item">'
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>'
+ '</div>'
+ '<div class="item">'
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>'
+ '</div>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<div class="item">' +
'<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
'<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' +
'</div>' +
'<div class="item">' +
'<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
'<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' +
'</div>' +
'</div>'
$(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger')
@@ -546,22 +544,22 @@ $(function () {
QUnit.test('should allow accordion to contain nested elements', function (assert) {
assert.expect(4)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<div class="row">'
+ '<div class="col-lg-6">'
+ '<div class="item">'
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>'
+ '</div>'
+ '</div>'
+ '<div class="col-lg-6">'
+ '<div class="item">'
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<div class="row">' +
'<div class="col-lg-6">' +
'<div class="item">' +
'<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
'<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' +
'</div>' +
'</div>' +
'<div class="col-lg-6">' +
'<div class="item">' +
'<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
'<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
$(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger')
@@ -584,14 +582,14 @@ $(function () {
QUnit.test('should allow accordion to target multiple elements', function (assert) {
assert.expect(8)
var done = assert.async()
var accordionHTML = '<div id="accordion">'
+ '<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>'
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>'
+ '<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>'
+ '<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>'
+ '<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>'
+ '<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>'
+ '</div>'
var accordionHTML = '<div id="accordion">' +
'<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>' +
'<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>' +
'<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' +
'<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' +
'<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' +
'<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' +
'</div>'
$(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTriggerOne')
@@ -659,24 +657,24 @@ $(function () {
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
assert.expect(9)
var done = assert.async()
$('<div id="accordion">'
+ '<div class="item">'
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+ '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
+ '<div id="nestedAccordion">'
+ '<div class="item">'
+ '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>'
+ '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="item">'
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+ '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
+ '</div>'
+ '</div>').appendTo('#qunit-fixture')
$('<div id="accordion">' +
'<div class="item">' +
'<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
'<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' +
'<div id="nestedAccordion">' +
'<div class="item">' +
'<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' +
'<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="item">' +
'<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
'<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' +
'</div>' +
'</div>').appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger')
var $triggerTwo = $('#linkTriggerTwo')
var $nestedTrigger = $('#nestedLinkTrigger')
@@ -684,7 +682,6 @@ $(function () {
var $collapseTwo = $('#collapseTwo')
var $nestedCollapseOne = $('#nestedCollapseOne')
$collapseOne.one('shown.bs.collapse', function () {
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
@@ -828,8 +825,7 @@ $(function () {
parent: $('.my-collapse')
})
assert.ok(true, 'collapse correctly created')
}
catch (e) {
} catch (err) {
assert.ok(false, 'collapse not created')
}
})
@@ -850,8 +846,7 @@ $(function () {
parent: $('.my-collapse')[0]
})
assert.ok(true, 'collapse correctly created')
}
catch (e) {
} catch (err) {
assert.ok(false, 'collapse not created')
}
})

796
js/tests/unit/dropdown.js
View File

File diff suppressed because it is too large Load Diff

19
js/tests/unit/modal.js
View File

@@ -47,8 +47,7 @@ $(function () {
$el.bootstrapModal()
try {
$el.bootstrapModal('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -213,7 +212,9 @@ $(function () {
.on('shown.bs.modal', function () {
assert.ok($('#modal-test').length, 'modal inserted into dom')
assert.ok($('#modal-test').is(':visible'), 'modal visible')
$div.trigger($.Event('keydown', { which: 27 }))
$div.trigger($.Event('keydown', {
which: 27
}))
setTimeout(function () {
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
@@ -233,7 +234,9 @@ $(function () {
.on('shown.bs.modal', function () {
assert.ok($('#modal-test').length, 'modal inserted into dom')
assert.ok($('#modal-test').is(':visible'), 'modal visible')
$div.trigger($.Event('keyup', { which: 27 }))
$div.trigger($.Event('keyup', {
which: 27
}))
setTimeout(function () {
assert.ok($div.is(':visible'), 'modal still visible')
@@ -289,7 +292,7 @@ $(function () {
$('#close').trigger('click')
})
.one('hidden.bs.modal', function () {
// after one open-close cycle
// After one open-close cycle
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
$(this)
.one('shown.bs.modal', function () {
@@ -416,8 +419,8 @@ $(function () {
var originalPadding = $body.css('padding-right')
// Hide scrollbars to prevent the body overflowing
$body.css('overflow', 'hidden') // real scrollbar (for in-browser testing)
$('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS)
$body.css('overflow', 'hidden') // Real scrollbar (for in-browser testing)
$('html').css('padding-right', '0px') // Simulated scrollbar (for PhantomJS)
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
@@ -425,7 +428,7 @@ $(function () {
assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
$(this).bootstrapModal('hide')
// restore scrollbars
// Restore scrollbars
$body.css('overflow', 'auto')
$('html').css('padding-right', '16px')
done()

18
js/tests/unit/popover.js
View File

@@ -31,8 +31,7 @@ $(function () {
$el.bootstrapPopover()
try {
$el.bootstrapPopover('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -109,7 +108,11 @@ $(function () {
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
var $popover = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapPopover({ html: true, title: title, content: content })
.bootstrapPopover({
html: true,
title: title,
content: content
})
$popover.bootstrapPopover('show')
@@ -127,7 +130,10 @@ $(function () {
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
var $popover = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapPopover({ title: title, content: content })
.bootstrapPopover({
title: title,
content: content
})
$popover.bootstrapPopover('show')
@@ -138,7 +144,6 @@ $(function () {
assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
})
QUnit.test('should not duplicate HTML object', function (assert) {
assert.expect(6)
var $div = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻')
@@ -331,8 +336,7 @@ $(function () {
try {
$('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'Please use show on visible elements')
done()
}

572
js/tests/unit/scrollspy.js
View File

@@ -30,8 +30,7 @@ $(function () {
$el.bootstrapScrollspy()
try {
$el.bootstrapScrollspy('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -48,38 +47,40 @@ $(function () {
assert.expect(1)
var done = assert.async()
var sectionHTML = '<div id="root" class="active">'
+ '<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container" id="ss-target">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>'
+ '<li class="nav-item"><a href="#detail">Detail</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
+ '<div style="height: 200px;">'
+ '<h4 id="masthead">Overview</h4>'
+ '<p style="height: 200px">'
+ 'Ad leggings keytar, brunch id art party dolor labore.'
+ '</p>'
+ '</div>'
+ '<div style="height: 200px;">'
+ '<h4 id="detail">Detail</h4>'
+ '<p style="height: 200px">'
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
+ '</p>'
+ '</div>'
+ '</div>'
+ '</div>'
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container" id="ss-target">' +
'<ul class="nav">' +
'<li class="nav-item"><a href="#masthead">Overview</a></li>' +
'<li class="nav-item"><a href="#detail">Detail</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>' +
'<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
'<div style="height: 200px;">' +
'<h4 id="masthead">Overview</h4>' +
'<p style="height: 200px">' +
'Ad leggings keytar, brunch id art party dolor labore.' +
'</p>' +
'</div>' +
'<div style="height: 200px;">' +
'<h4 id="detail">Detail</h4>' +
'<p style="height: 200px">' +
'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
'</p>' +
'</div>' +
'</div>' +
'</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section
.show()
.find('#scrollspy-example')
.bootstrapScrollspy({ target: '#ss-target' })
.bootstrapScrollspy({
target: '#ss-target'
})
$scrollspy.one('scroll', function () {
assert.ok($section.hasClass('active'), '"active" class still on root node')
@@ -93,38 +94,40 @@ $(function () {
assert.expect(1)
var done = assert.async()
var sectionHTML = '<div id="root" class="active">'
+ '<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container" id="ss-target">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>'
+ '<li class="nav-item"><a href="#detail">Detail</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
+ '<div style="height: 200px;">'
+ '<h4 id="masthead">Overview</h4>'
+ '<p style="height: 200px">'
+ 'Ad leggings keytar, brunch id art party dolor labore.'
+ '</p>'
+ '</div>'
+ '<div style="height: 200px;">'
+ '<h4 id="detail">Detail</h4>'
+ '<p style="height: 200px">'
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
+ '</p>'
+ '</div>'
+ '</div>'
+ '</div>'
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container" id="ss-target">' +
'<ul class="nav">' +
'<li class="nav-item"><a href="#masthead">Overview</a></li>' +
'<li class="nav-item"><a href="#detail">Detail</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>' +
'<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
'<div style="height: 200px;">' +
'<h4 id="masthead">Overview</h4>' +
'<p style="height: 200px">' +
'Ad leggings keytar, brunch id art party dolor labore.' +
'</p>' +
'</div>' +
'<div style="height: 200px;">' +
'<h4 id="detail">Detail</h4>' +
'<p style="height: 200px">' +
'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
'</p>' +
'</div>' +
'</div>' +
'</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section
.show()
.find('#scrollspy-example')
.bootstrapScrollspy({ target: document.getElementById('#ss-target') })
.bootstrapScrollspy({
target: document.getElementById('#ss-target')
})
$scrollspy.one('scroll', function () {
assert.ok($section.hasClass('active'), '"active" class still on root node')
@@ -138,25 +141,28 @@ $(function () {
assert.expect(3)
var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="navbar-nav">'
+ '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
+ '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>'
+ '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
+ '<div id="content" style="height: 200px; overflow-y: auto;">'
+ '<div id="one" style="height: 500px;"></div>'
+ '<div id="two" style="height: 300px;"></div>'
+ '<div id="three" style="height: 10px;"></div>'
+ '</div>'
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="navbar-nav">' +
'<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>' +
'<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>' +
'<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>' +
'<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="one" style="height: 500px;"></div>' +
'<div id="two" style="height: 300px;"></div>' +
'<div id="three" style="height: 10px;"></div>' +
'</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section
.show()
.filter('#content')
$scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
$scrollspy.bootstrapScrollspy({
target: '#navigation',
offset: $scrollspy.position().top
})
$scrollspy.one('scroll', function () {
assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
@@ -171,22 +177,25 @@ $(function () {
QUnit.test('should add the active class to the correct element', function (assert) {
assert.expect(2)
var navbarHtml =
'<nav class="navbar">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
+ '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</nav>'
'<nav class="navbar">' +
'<ul class="nav">' +
'<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' +
'<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' +
'</ul>' +
'</nav>'
var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">'
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
'<div class="content" style="overflow: auto; height: 50px">' +
'<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
.bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) {
@@ -201,29 +210,36 @@ $(function () {
}
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
.then(function () { done() })
.then(function () {
return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
})
QUnit.test('should add the active class to the correct element (nav markup)', function (assert) {
assert.expect(2)
var navbarHtml =
'<nav class="navbar">'
+ '<nav class="nav">'
+ '<a class="nav-link" id="a-1" href="#div-1">div 1</a>'
+ '<a class="nav-link" id="a-2" href="#div-2">div 2</a>'
+ '</nav>'
+ '</nav>'
'<nav class="navbar">' +
'<nav class="nav">' +
'<a class="nav-link" id="a-1" href="#div-1">div 1</a>' +
'<a class="nav-link" id="a-2" href="#div-2">div 2</a>' +
'</nav>' +
'</nav>'
var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">'
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
'<div class="content" style="overflow: auto; height: 50px">' +
'<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
.bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) {
@@ -238,29 +254,36 @@ $(function () {
}
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
.then(function () { done() })
.then(function () {
return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
})
QUnit.test('should add the active class to the correct element (list-group markup)', function (assert) {
assert.expect(2)
var navbarHtml =
'<nav class="navbar">'
+ '<div class="list-group">'
+ '<a class="list-group-item" id="a-1" href="#div-1">div 1</a>'
+ '<a class="list-group-item" id="a-2" href="#div-2">div 2</a>'
+ '</div>'
+ '</nav>'
'<nav class="navbar">' +
'<div class="list-group">' +
'<a class="list-group-item" id="a-1" href="#div-1">div 1</a>' +
'<a class="list-group-item" id="a-2" href="#div-2">div 2</a>' +
'</div>' +
'</nav>'
var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">'
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
'<div class="content" style="overflow: auto; height: 50px">' +
'<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
.bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) {
@@ -275,38 +298,47 @@ $(function () {
}
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
.then(function () { done() })
.then(function () {
return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
})
QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
assert.expect(6)
var times = 0
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
+ '</nav>'
var navbarHtml = '<nav id="navigation" class="navbar">' +
'<ul class="nav">' +
'<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' +
'<ul class="nav">' +
'<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' +
'</ul>' +
'</li>' +
'</ul>' +
'</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+ '<div id="div-1" style="padding: 0; margin: 0">'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
+ '</div>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
'<div id="div-1" style="padding: 0; margin: 0">' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
.bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() {
if (++times > 3) { return done() }
if (++times > 3) {
return done()
}
$content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@@ -324,29 +356,34 @@ $(function () {
assert.expect(6)
var times = 0
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<nav class="nav">'
+ '<a id="a-1" class="nav-link" href="#div-1">div 1</a>'
+ '<nav class="nav">'
+ '<a id="a-2" class="nav-link" href="#div-2">div 2</a>'
+ '</nav>'
+ '</nav>'
+ '</nav>'
var navbarHtml = '<nav id="navigation" class="navbar">' +
'<nav class="nav">' +
'<a id="a-1" class="nav-link" href="#div-1">div 1</a>' +
'<nav class="nav">' +
'<a id="a-2" class="nav-link" href="#div-2">div 2</a>' +
'</nav>' +
'</nav>' +
'</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+ '<div id="div-1" style="padding: 0; margin: 0">'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
+ '</div>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
'<div id="div-1" style="padding: 0; margin: 0">' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
.bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() {
if (++times > 3) { return done() }
if (++times > 3) {
return done()
}
$content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@@ -360,34 +397,38 @@ $(function () {
testActiveElements()
})
QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) {
assert.expect(6)
var times = 0
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</ul>'
+ '</nav>'
var navbarHtml = '<nav id="navigation" class="navbar">' +
'<ul class="nav">' +
'<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>' +
'<ul class="nav">' +
'<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' +
'</ul>' +
'</ul>' +
'</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+ '<div id="div-1" style="padding: 0; margin: 0">'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
+ '</div>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
'<div id="div-1" style="padding: 0; margin: 0">' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
.bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() {
if (++times > 3) { return done() }
if (++times > 3) {
return done()
}
$content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@@ -405,29 +446,34 @@ $(function () {
assert.expect(6)
var times = 0
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<div class="list-group">'
+ '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>'
+ '<div class="list-group">'
+ '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>'
+ '</div>'
+ '</div>'
+ '</nav>'
var navbarHtml = '<nav id="navigation" class="navbar">' +
'<div class="list-group">' +
'<a id="a-1" class="list-group-item" href="#div-1">div 1</a>' +
'<div class="list-group">' +
'<a id="a-2" class="list-group-item" href="#div-2">div 2</a>' +
'</div>' +
'</div>' +
'</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+ '<div id="div-1" style="padding: 0; margin: 0">'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
+ '</div>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
'<div id="div-1" style="padding: 0; margin: 0">' +
'<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
'</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
.bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() {
if (++times > 3) { return done() }
if (++times > 3) {
return done()
}
$content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@@ -445,23 +491,23 @@ $(function () {
assert.expect(3)
var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="navbar-nav">'
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>'
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>'
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="navbar-nav">' +
'<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' +
'<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' +
'<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>'
$(sectionHTML).appendTo('#qunit-fixture')
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
+ '<div id="spacer" style="height: 100px;"/>'
+ '<div id="one" style="height: 100px;"/>'
+ '<div id="two" style="height: 100px;"/>'
+ '<div id="three" style="height: 100px;"/>'
+ '<div id="spacer" style="height: 100px;"/>'
+ '</div>'
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="spacer" style="height: 100px;"/>' +
'<div id="one" style="height: 100px;"/>' +
'<div id="two" style="height: 100px;"/>' +
'<div id="three" style="height: 100px;"/>' +
'<div id="spacer" style="height: 100px;"/>' +
'</div>'
var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
$scrollspy
@@ -486,25 +532,25 @@ $(function () {
assert.expect(4)
var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="navbar-nav">'
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>'
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>'
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="navbar-nav">' +
'<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' +
'<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' +
'<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>'
$(sectionHTML).appendTo('#qunit-fixture')
var negativeHeight = -10
var startOfSectionTwo = 101
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
+ '<div id="one" style="height: 100px;"/>'
+ '<div id="two" style="height: 100px;"/>'
+ '<div id="three" style="height: 100px;"/>'
+ '<div id="spacer" style="height: 100px;"/>'
+ '</div>'
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="one" style="height: 100px;"/>' +
'<div id="two" style="height: 100px;"/>' +
'<div id="three" style="height: 100px;"/>' +
'<div id="spacer" style="height: 100px;"/>' +
'</div>'
var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
$scrollspy
@@ -529,28 +575,31 @@ $(function () {
QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) {
assert.expect(5)
var navbarHtml =
'<nav class="navbar">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
+ '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
+ '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
+ '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
+ '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
+ '</ul>'
+ '</nav>'
'<nav class="navbar">' +
'<ul class="nav">' +
'<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' +
'<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' +
'<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' +
'<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' +
'<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' +
'</ul>' +
'</nav>'
var contentHtml =
'<div class="content" style="position: relative; overflow: auto; height: 100px">'
+ '<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>'
+ '<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>'
+ '<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>'
+ '<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>'
+ '</div>'
'<div class="content" style="position: relative; overflow: auto; height: 100px">' +
'<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>' +
'<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>' +
'<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>' +
'<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>' +
'<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>' +
'</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
.bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var testElementIsActiveAfterScroll = function (element, target) {
var deferred = $.Deferred()
@@ -565,11 +614,21 @@ $(function () {
var done = assert.async()
$.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5'))
.then(function () { return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') })
.then(function () { return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3') })
.then(function () { return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2') })
.then(function () { return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1') })
.then(function () { done() })
.then(function () {
return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4')
})
.then(function () {
return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3')
})
.then(function () {
return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2')
})
.then(function () {
return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1')
})
.then(function () {
done()
})
})
QUnit.test('should allow passed in option offset method: offset', function (assert) {
@@ -577,29 +636,32 @@ $(function () {
var testOffsetMethod = function (type) {
var $navbar = $(
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>'
+ '</ul>'
+ '</nav>'
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' +
'<ul class="nav">' +
'<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>' +
'<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>' +
'<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>' +
'</ul>' +
'</nav>'
)
var $content = $(
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="offset"' : '') + ' style="position: relative; overflow: auto; height: 100px">'
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>'
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>'
+ '</div>'
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="offset"' : '') + ' style="position: relative; overflow: auto; height: 100px">' +
'<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' +
'<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' +
'<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' +
'</div>'
)
$navbar.appendTo('#qunit-fixture')
$content.appendTo('#qunit-fixture')
if (type === 'js') {
$content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'offset' })
}
else if (type === 'data') {
$content.bootstrapScrollspy({
target: '.navbar',
offset: 0,
method: 'offset'
})
} else if (type === 'data') {
$(window).trigger('load')
}
@@ -621,27 +683,34 @@ $(function () {
var testOffsetMethod = function (type) {
var $navbar = $(
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
+ '<ul class="nav">'
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>'
+ '</ul>'
+ '</nav>'
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' +
'<ul class="nav">' +
'<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>' +
'<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>' +
'<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>' +
'</ul>' +
'</nav>'
)
var $content = $(
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="position"' : '') + ' style="position: relative; overflow: auto; height: 100px">'
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>'
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>'
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>'
+ '</div>'
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="position"' : '') + ' style="position: relative; overflow: auto; height: 100px">' +
'<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' +
'<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' +
'<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' +
'</div>'
)
$navbar.appendTo('#qunit-fixture')
$content.appendTo('#qunit-fixture')
if (type === 'js') { $content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'position' }) }
else if (type === 'data') { $(window).trigger('load') }
if (type === 'js') {
$content.bootstrapScrollspy({
target: '.navbar',
offset: 0,
method: 'position'
})
} else if (type === 'data') {
$(window).trigger('load')
}
var $target = $('#div-' + type + 'm-2')
var scrollspy = $content.data('bs.scrollspy')
@@ -655,5 +724,4 @@ $(function () {
testOffsetMethod('js')
testOffsetMethod('data')
})
})

270
js/tests/unit/tab.js
View File

@@ -30,8 +30,7 @@ $(function () {
$el.bootstrapTab()
try {
$el.bootstrapTab('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -46,10 +45,10 @@ $(function () {
QUnit.test('should activate element by tab id', function (assert) {
assert.expect(2)
var tabsHTML = '<ul class="nav">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
@@ -62,10 +61,10 @@ $(function () {
QUnit.test('should activate element by tab id', function (assert) {
assert.expect(2)
var pillsHTML = '<ul class="nav nav-pills">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
var pillsHTML = '<ul class="nav nav-pills">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
@@ -78,10 +77,10 @@ $(function () {
QUnit.test('should activate element by tab id in ordered list', function (assert) {
assert.expect(2)
var pillsHTML = '<ol class="nav nav-pills">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ol>'
var pillsHTML = '<ol class="nav nav-pills">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ol>'
$('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
@@ -142,14 +141,14 @@ $(function () {
QUnit.test('should not fire shown when tab is already active', function (assert) {
assert.expect(0)
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+ '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>'
+ '</ul>'
+ '<div class="tab-content">'
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+ '</div>'
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
'<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
'<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' +
'</ul>' +
'<div class="tab-content">' +
'<div class="tab-pane active" id="home" role="tabpanel"></div>' +
'<div class="tab-pane" id="profile" role="tabpanel"></div>' +
'</div>'
$(tabsHTML)
.find('a.active')
@@ -161,14 +160,14 @@ $(function () {
QUnit.test('should not fire shown when tab is disabled', function (assert) {
assert.expect(0)
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+ '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>'
+ '</ul>'
+ '<div class="tab-content">'
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+ '</div>'
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
'<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
'<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>' +
'</ul>' +
'<div class="tab-content">' +
'<div class="tab-pane active" id="home" role="tabpanel"></div>' +
'<div class="tab-pane" id="profile" role="tabpanel"></div>' +
'</div>'
$(tabsHTML)
.find('a.disabled')
@@ -183,116 +182,116 @@ $(function () {
var done = assert.async()
var dropHTML =
'<ul class="drop nav">'
+ ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+ ' <ul class="dropdown-menu nav">'
+ ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+ ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+ ' </ul>'
+ ' </li>'
+ '</ul>'
'<ul class="drop nav">' +
' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
' <ul class="dropdown-menu nav">' +
' <li><a href="#1-1" data-toggle="tab">1-1</a></li>' +
' <li><a href="#1-2" data-toggle="tab">1-2</a></li>' +
' </ul>' +
' </li>' +
'</ul>'
$(dropHTML)
.find('ul > li:first-child a')
.bootstrapTab('show')
.bootstrapTab('show')
.end()
.find('ul > li:last-child a')
.on('show.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
})
.on('shown.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
done()
})
.bootstrapTab('show')
.on('show.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
})
.on('shown.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
done()
})
.bootstrapTab('show')
})
QUnit.test('should fire hide and hidden events', function (assert) {
assert.expect(2)
var done = assert.async()
var tabsHTML = '<ul class="nav">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$(tabsHTML)
.find('li:first-child a')
.on('hide.bs.tab', function () {
assert.ok(true, 'hide event fired')
})
.bootstrapTab('show')
.on('hide.bs.tab', function () {
assert.ok(true, 'hide event fired')
})
.bootstrapTab('show')
.end()
.find('li:last-child a')
.bootstrapTab('show')
.bootstrapTab('show')
$(tabsHTML)
.find('li:first-child a')
.on('hidden.bs.tab', function () {
assert.ok(true, 'hidden event fired')
done()
})
.bootstrapTab('show')
.on('hidden.bs.tab', function () {
assert.ok(true, 'hidden event fired')
done()
})
.bootstrapTab('show')
.end()
.find('li:last-child a')
.bootstrapTab('show')
.bootstrapTab('show')
})
QUnit.test('should not fire hidden when hide is prevented', function (assert) {
assert.expect(1)
var done = assert.async()
var tabsHTML = '<ul class="nav">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$(tabsHTML)
.find('li:first-child a')
.on('hide.bs.tab', function (e) {
e.preventDefault()
assert.ok(true, 'hide event fired')
done()
})
.on('hidden.bs.tab', function () {
assert.ok(false, 'hidden event fired')
})
.bootstrapTab('show')
.on('hide.bs.tab', function (e) {
e.preventDefault()
assert.ok(true, 'hide event fired')
done()
})
.on('hidden.bs.tab', function () {
assert.ok(false, 'hidden event fired')
})
.bootstrapTab('show')
.end()
.find('li:last-child a')
.bootstrapTab('show')
.bootstrapTab('show')
})
QUnit.test('hide and hidden events contain correct relatedTarget', function (assert) {
assert.expect(2)
var done = assert.async()
var tabsHTML = '<ul class="nav">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
$(tabsHTML)
.find('li:first-child a')
.on('hide.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
})
.on('hidden.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
done()
})
.bootstrapTab('show')
.on('hide.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
})
.on('hidden.bs.tab', function (e) {
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
done()
})
.bootstrapTab('show')
.end()
.find('li:last-child a')
.bootstrapTab('show')
.bootstrapTab('show')
})
QUnit.test('selected tab should have aria-selected', function (assert) {
assert.expect(8)
var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>'
+ '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav nav-tabs">' +
'<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' +
'<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' +
'</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first-child a').bootstrapTab('show')
@@ -314,10 +313,10 @@ $(function () {
QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
assert.expect(2)
var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>'
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+ '</ul>'
var tabsHTML = '<ul class="nav nav-tabs">' +
'<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' +
'<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
'</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:last-child a').trigger('click')
@@ -327,16 +326,16 @@ $(function () {
QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
assert.expect(3)
var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>'
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+ '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>'
+ '<div class="dropdown-menu">'
+ '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>'
+ '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>'
+ '</div>'
+ '</li>'
+ '</ul>'
var tabsHTML = '<ul class="nav nav-tabs">' +
'<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' +
'<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
'<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' +
'<div class="dropdown-menu">' +
'<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' +
'<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' +
'</div>' +
'</li>' +
'</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first-child a').trigger('click')
@@ -349,25 +348,25 @@ $(function () {
assert.expect(2)
var done = assert.async()
var tabsHTML =
'<nav class="nav nav-tabs" role="tablist">'
+ ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>'
+ ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>'
+ ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>'
+ '</nav>'
+ '<div class="tab-content">'
+ ' <div class="tab-pane" id="x-tab1" role="tabpanel">'
+ ' <nav class="nav nav-tabs" role="tablist">'
+ ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>'
+ ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>'
+ ' </nav>'
+ ' <div class="tab-content">'
+ ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>'
+ ' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>'
+ ' </div>'
+ ' </div>'
+ ' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>'
+ ' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>'
+ '</div>'
'<nav class="nav nav-tabs" role="tablist">' +
' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
'</nav>' +
'<div class="tab-content">' +
' <div class="tab-pane" id="x-tab1" role="tabpanel">' +
' <nav class="nav nav-tabs" role="tablist">' +
' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' +
' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' +
' </nav>' +
' <div class="tab-content">' +
' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' +
' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>' +
' </div>' +
' </div>' +
' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>' +
' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>' +
'</div>'
$(tabsHTML).appendTo('#qunit-fixture')
@@ -380,21 +379,20 @@ $(function () {
assert.ok($('#x-tab1').hasClass('active'))
$('#tabNested2').trigger($.Event('click'))
})
.trigger($.Event('click'))
.trigger($.Event('click'))
})
QUnit.test('should not remove fade class if no active pane is present', function (assert) {
assert.expect(6)
var done = assert.async()
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+ '<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>'
+ '<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>'
+ '</ul>'
+ '<div class="tab-content">'
+ '<div class="tab-pane fade" id="home" role="tabpanel"></div>'
+ '<div class="tab-pane fade" id="profile" role="tabpanel"></div>'
+ '</div>'
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
'<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' +
'<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' +
'</ul>' +
'<div class="tab-content">' +
'<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
'<div class="tab-pane fade" id="profile" role="tabpanel"></div>' +
'</div>'
$(tabsHTML).appendTo('#qunit-fixture')
$('#tab-profile')

156
js/tests/unit/tooltip.js
View File

@@ -31,8 +31,7 @@ $(function () {
$el.bootstrapTooltip()
try {
$el.bootstrapTooltip('noMethod')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"')
}
})
@@ -105,13 +104,15 @@ $(function () {
assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ placement: 'bottom' })
.bootstrapTooltip({
placement: 'bottom'
})
$tooltip.bootstrapTooltip('show')
assert
.ok($('.tooltip')
.is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied')
.is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied')
$tooltip.bootstrapTooltip('hide')
@@ -122,7 +123,9 @@ $(function () {
assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true })
.bootstrapTooltip({
html: true
})
$tooltip.bootstrapTooltip('show')
assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted')
@@ -136,7 +139,9 @@ $(function () {
var title = document.createTextNode('<3 writing tests')
var $tooltip = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ title: title })
.bootstrapTooltip({
title: title
})
$tooltip.bootstrapTooltip('show')
@@ -150,7 +155,10 @@ $(function () {
var title = document.createTextNode('<3 writing tests')
var $tooltip = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true, title: title })
.bootstrapTooltip({
html: true,
title: title
})
$tooltip.bootstrapTooltip('show')
@@ -159,12 +167,13 @@ $(function () {
assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied')
})
QUnit.test('should respect custom classes', function (assert) {
assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
.bootstrapTooltip({
template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'
})
$tooltip.bootstrapTooltip('show')
assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present')
@@ -191,8 +200,7 @@ $(function () {
try {
$('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show')
}
catch (err) {
} catch (err) {
assert.strictEqual(err.message, 'Please use show on visible elements')
done()
}
@@ -297,7 +305,7 @@ $(function () {
assert.expect(7)
var $tooltip = $('<div/>')
.bootstrapTooltip()
.on('click.foo', function () {})
.on('click.foo', function () {}) // eslint-disable-line no-empty-function
assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data')
assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
@@ -332,7 +340,9 @@ $(function () {
assert.expect(1)
$('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip({
trigger: 'manual'
})
.bootstrapTooltip('toggle')
assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active')
@@ -342,7 +352,9 @@ $(function () {
assert.expect(1)
$('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip({
trigger: 'manual'
})
.bootstrapTooltip('show')
$('.tooltip').bootstrapTooltip('toggle')
@@ -353,7 +365,9 @@ $(function () {
assert.expect(3)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ container: 'body' })
.bootstrapTooltip({
container: 'body'
})
.bootstrapTooltip('show')
assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body')
@@ -366,10 +380,10 @@ $(function () {
QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
assert.expect(2)
var done = assert.async()
var styles = '<style>'
+ '.bs-tooltip-right { white-space: nowrap; }'
+ '.bs-tooltip-right .tooltip-inner { max-width: none; }'
+ '</style>'
var styles = '<style>' +
'.bs-tooltip-right { white-space: nowrap; }' +
'.bs-tooltip-right .tooltip-inner { max-width: none; }' +
'</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
@@ -440,7 +454,9 @@ $(function () {
.one('show.bs.tooltip', function () {
$(this).remove()
})
.bootstrapTooltip({ placement: 'top' })
.bootstrapTooltip({
placement: 'top'
})
try {
$tooltip.bootstrapTooltip('show')
@@ -456,11 +472,11 @@ $(function () {
assert.expect(1)
var done = assert.async()
var containerHTML = '<div id="test">'
+ '<p style="margin-top: 200px">'
+ '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
+ '</p>'
+ '</div>'
var containerHTML = '<div id="test">' +
'<p style="margin-top: 200px">' +
'<a href="#" title="very very very very very very very long tooltip">Hover me</a>' +
'</p>' +
'</div>'
var $container = $(containerHTML)
.css({
@@ -484,8 +500,7 @@ $(function () {
var $tooltip = $($(this).data('bs.tooltip').tip)
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top))
}
else {
} else {
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
}
done()
@@ -499,7 +514,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
.bootstrapTooltip({
delay: 150
})
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active')
@@ -519,7 +536,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
.bootstrapTooltip({
delay: 150
})
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@@ -540,7 +559,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 } })
.bootstrapTooltip({
delay: {
show: 0,
hide: 150
}
})
setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
@@ -566,7 +590,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 })
.bootstrapTooltip({
delay: 150
})
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@@ -587,7 +613,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 150, hide: 0 } })
.bootstrapTooltip({
delay: {
show: 150,
hide: 0
}
})
setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@@ -608,7 +639,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 } })
.bootstrapTooltip({
delay: {
show: 0,
hide: 150
}
})
setTimeout(function () {
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
@@ -623,7 +659,6 @@ $(function () {
assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
done()
}, 200)
}, 0)
$tooltip.trigger('mouseenter')
@@ -643,7 +678,10 @@ $(function () {
html: true,
animation: false,
trigger: 'hover',
delay: { show: 0, hide: 500 },
delay: {
show: 0,
hide: 500
},
container: $tooltip,
title: titleHtml
})
@@ -671,7 +709,10 @@ $(function () {
html: true,
animation: false,
trigger: 'hover',
delay: { show: 0, hide: 500 },
delay: {
show: 0,
hide: 500
},
title: titleHtml
})
@@ -708,28 +749,33 @@ $(function () {
assert.expect(41)
var $el = $('<button>Trigger</button>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'click hover focus', animation: false })
.bootstrapTooltip({
trigger: 'click hover focus',
animation: false
})
var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement())
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
function showingTooltip() {
return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
}
var tests = [
['mouseenter', 'mouseleave'],
['mouseenter', 'mouseleave'],
['focusin', 'focusout'],
['focusin', 'focusout'],
['click', 'click'],
['click', 'click'],
['mouseenter', 'focusin', 'focusout', 'mouseleave'],
['mouseenter', 'focusin', 'mouseleave', 'focusout'],
['mouseenter', 'focusin', 'focusout', 'mouseleave'],
['mouseenter', 'focusin', 'mouseleave', 'focusout'],
['focusin', 'mouseenter', 'mouseleave', 'focusout'],
['focusin', 'mouseenter', 'focusout', 'mouseleave'],
['focusin', 'mouseenter', 'mouseleave', 'focusout'],
['focusin', 'mouseenter', 'focusout', 'mouseleave'],
['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
]
assert.ok(!showingTooltip())
@@ -746,12 +792,17 @@ $(function () {
assert.expect(3)
var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'click hover focus', animation: false })
.bootstrapTooltip({
trigger: 'click hover focus',
animation: false
})
var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement())
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
function showingTooltip() {
return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
}
$el.trigger('click')
assert.ok(showingTooltip(), 'tooltip is faded in')
@@ -778,7 +829,9 @@ $(function () {
$(templateHTML).appendTo('#qunit-fixture')
$('#tooltipTest')
.bootstrapTooltip({ trigger: 'manuel' })
.bootstrapTooltip({
trigger: 'manuel'
})
.on('shown.bs.tooltip', function () {
$('#modal-test').modal('hide')
})
@@ -839,7 +892,6 @@ $(function () {
done()
})
$trigger.bootstrapTooltip('disable')
$trigger.trigger($.Event('click'))
setTimeout(function () {

14
js/tests/unit/util.js
View File

@@ -9,16 +9,16 @@ $(function () {
var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body')
// not found element
// Not found element
var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
// should escape ID and find the correct element
// Should escape ID and find the correct element
var $el3 = $('<div data-target="#collapse:Example"></div>').appendTo($('#qunit-fixture'))
$('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
// if $.escapeSelector doesn't exist in older jQuery versions (< 3)
// If $.escapeSelector doesn't exist in older jQuery versions (< 3)
var tmpEscapeSelector = $.escapeSelector
delete $.escapeSelector
assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined')
@@ -30,8 +30,8 @@ $(function () {
assert.expect(1)
var namePlugin = 'collapse'
var defaultType = {
toggle : 'boolean',
parent : '(string|element)'
toggle: 'boolean',
parent: '(string|element)'
}
var config = {
toggle: true,
@@ -40,8 +40,8 @@ $(function () {
try {
Util.typeCheckConfig(namePlugin, config, defaultType)
} catch (e) {
assert.strictEqual(e.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
} catch (err) {
assert.strictEqual(err.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
}
})