replace js scrollspy test for default behavior

This commit is contained in:
breaddevil 2014-05-04 11:24:31 +02:00
parent 04028cf6fe
commit 7627b24c1e

View File

@ -25,23 +25,6 @@ $(function () {
ok($(document.body).bootstrapScrollspy()[0] == document.body, 'document.body returned')
})
test('should switch active class on scroll', function () {
var sectionHTML = '<div id="masthead"></div>',
topbarHTML = '<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container">' +
'<h3><a href="#">Bootstrap</a></h3>' +
'<li><a href="#masthead">Overview</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>',
$topbar = $(topbarHTML).bootstrapScrollspy()
$(sectionHTML).append('#qunit-fixture')
ok($topbar.find('.active', true))
})
test('should only switch active class on current target', function () {
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
@ -78,4 +61,41 @@ $(function () {
$scrollSpy.scrollTop(350);
ok($section.hasClass('active'), 'Active class still on root node')
})
test('should add the active class to the correct element', function () {
var navbarHtml =
'<div class="navbar">' +
'<ul class="nav">' +
'<li id="li-1"><a href="#div-1">div 1</a></li>' +
'<li id="li-2"><a href="#div-2">div 2</a></li>' +
'</ul>' +
'</div>'
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 testElementIsActiveAfterScroll = function (element, target) {
var deferred = $.Deferred()
var scrollHeight = $content.scrollTop() + $(target).position().top
stop()
$content.one('scroll', function () {
ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
start()
deferred.resolve()
})
$content.scrollTop(scrollHeight)
return deferred.promise()
}
$.when(testElementIsActiveAfterScroll('#li-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#li-2', '#div-2') })
})
})