mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-26 23:04:32 +02:00
Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)
This commit is contained in:
Pierre Vanduynslager
committed by
Johann-S
Johann-S
parent
5142de7e59
commit
91b62941af
@@ -205,6 +205,80 @@ $(function () {
|
||||
.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>'
|
||||
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>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var done = assert.async()
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
|
||||
.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>'
|
||||
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>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var done = assert.async()
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
|
||||
.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
|
||||
@@ -212,7 +286,7 @@ $(function () {
|
||||
var navbarHtml = '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
|
||||
+ '<ul>'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</li>'
|
||||
@@ -246,6 +320,86 @@ $(function () {
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements (nav markup)', function (assert) {
|
||||
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 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' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements (list-group markup)', function (assert) {
|
||||
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 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' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should clear selection if above the first section', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
@@ -46,7 +46,7 @@ $(function () {
|
||||
|
||||
QUnit.test('should activate element by tab id', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="tabs">'
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
@@ -62,7 +62,7 @@ $(function () {
|
||||
|
||||
QUnit.test('should activate element by tab id', function (assert) {
|
||||
assert.expect(2)
|
||||
var pillsHTML = '<ul class="pills">'
|
||||
var pillsHTML = '<ul class="nav nav-pills">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
@@ -78,7 +78,7 @@ $(function () {
|
||||
|
||||
QUnit.test('should activate element by tab id in ordered list', function (assert) {
|
||||
assert.expect(2)
|
||||
var pillsHTML = '<ol class="pills">'
|
||||
var pillsHTML = '<ol class="nav nav-pills">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ol>'
|
||||
@@ -108,19 +108,19 @@ $(function () {
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id in list-group', function (assert) {
|
||||
QUnit.test('should activate element by tab id in list group', function (assert) {
|
||||
assert.expect(2)
|
||||
var ulHTML = '<ul class="list-group">' +
|
||||
'<li class="list-group-item"><a href="#home">Home</a></li>' +
|
||||
'<li class="list-group-item"><a href="#profile">Profile</a></li>' +
|
||||
'</ul>'
|
||||
var tabsHTML = '<div class="list-group">' +
|
||||
'<a href="#home">Home</a>' +
|
||||
'<a href="#profile">Profile</a>' +
|
||||
'</div>'
|
||||
|
||||
$('<ul><li id="home"></li><li id="profile"></div></li>').appendTo('#qunit-fixture')
|
||||
$('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
|
||||
|
||||
$(ulHTML).find('li:last a').bootstrapTab('show')
|
||||
$(tabsHTML).find('a:last').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(ulHTML).find('li:first a').bootstrapTab('show')
|
||||
$(tabsHTML).find('a:first').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
@@ -128,7 +128,7 @@ $(function () {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="tab"/>')
|
||||
$('<div class="nav"/>')
|
||||
.on('show.bs.tab', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'show event fired')
|
||||
@@ -182,7 +182,7 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var dropHTML = '<ul class="drop">'
|
||||
var dropHTML = '<ul class="drop nav">'
|
||||
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
|
||||
+ '<ul class="dropdown-menu">'
|
||||
+ '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
|
||||
@@ -210,7 +210,7 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="tabs">'
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
@@ -241,7 +241,7 @@ $(function () {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="tabs">'
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
@@ -266,7 +266,7 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="tabs">'
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
Reference in New Issue
Block a user