ok($topbar.find('.active', true))
})
- test('should only switch active class on current target', function () {
+ asyncTest('should only switch active class on current target', function () {
+ expect(1);
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
.find('#scrollspy-example')
.bootstrapScrollspy({target: '#ss-target'})
+ $scrollSpy.on('scroll.bs.scrollspy', function () {
+ ok($section.hasClass('active'), 'Active class still on root node')
+ start()
+ })
$scrollSpy.scrollTop(350);
- ok($section.hasClass('active'), 'Active class still on root node')
+ })
+
+ asyncTest('middle navigation option correctly selected when large offset is used', function () {
+ expect(3);
+ var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
+ '<nav id="navigation" class="navbar">' +
+ '<ul class="nav navbar-nav">' +
+ '<li class="active"><a id="one-link" href="#one">One</a></li>' +
+ '<li><a id="two-link" href="#two">Two</a></li>' +
+ '<li><a 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>',
+ $section = $(sectionHTML).appendTo('#qunit-fixture'),
+ $scrollSpy = $section
+ .show()
+ .filter('#content')
+ $scrollSpy.bootstrapScrollspy({target: '#navigation', offset: $scrollSpy.position().top})
+
+ $scrollSpy.on('scroll.bs.scrollspy', function () {
+ ok(!$section.find('#one-link').parent().hasClass('active'), 'Active class removed from first section')
+ ok($section.find('#two-link').parent().hasClass('active'), 'Active class on middle section')
+ ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section')
+ start()
+ })
+ $scrollSpy.scrollTop(550);
})
})