rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

Clean scrollspy unit tests up

Browse Source
This commit is contained in:
Heinrich Fenkart 2014-06-18 21:34:43 +02:00
parent 56b8d5fe6e
commit 05ba1e491e
1 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,16 +19,18 @@ $(function () {
}) })
test('should provide no conflict', function () { test('should provide no conflict', function () {
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)') strictEqual($.fn.scrollspy, undefined, 'scrollspy was set back to undefined (org value)')
}) })
test('should return element', function () { test('should return jquery collection containing the element', function () {
ok($(document.body).bootstrapScrollspy()[0] == document.body, 'document.body returned') var $el = $('<div/>')
var $scrollspy = $el.bootstrapScrollspy()
ok($scrollspy instanceof $, 'returns jquery collection')
strictEqual($scrollspy[0], $el[0], 'collection contains element')
}) })
test('should switch active class on scroll', function () { // FIXME
var sectionHTML = '<div id="masthead"></div>' test('should switch "active" class on scroll', function () {
$(sectionHTML).append('#qunit-fixture')
var topbarHTML = '<div class="topbar">' + var topbarHTML = '<div class="topbar">' +
'<div class="topbar-inner">' + '<div class="topbar-inner">' +
'<div class="container">' + '<div class="container">' +
@ -40,12 +42,12 @@ $(function () {
'</div>' '</div>'
var $topbar = $(topbarHTML).bootstrapScrollspy() var $topbar = $(topbarHTML).bootstrapScrollspy()
$(sectionHTML).append('#qunit-fixture')
ok($topbar.find('.active', true)) ok($topbar.find('.active', true))
}) })
asyncTest('should only switch active class on current target', function () { test('should only switch "active" class on current target', function () {
expect(1); stop()
var sectionHTML = '<div id="root" class="active">' + var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' + '<div class="topbar">' +
'<div class="topbar-inner">' + '<div class="topbar-inner">' +
@ -73,20 +75,23 @@ $(function () {
'</div>' + '</div>' +
'</div>' '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture') var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section
var $scrollspy = $section
.show() .show()
.find('#scrollspy-example') .find('#scrollspy-example')
.bootstrapScrollspy({ target: '#ss-target' }) .bootstrapScrollspy({ target: '#ss-target' })
$scrollSpy.on('scroll.bs.scrollspy', function () { $scrollspy.on('scroll.bs.scrollspy', function () {
ok($section.hasClass('active'), 'Active class still on root node') ok($section.hasClass('active'), '"active" class still on root node')
start() start()
}) })
$scrollSpy.scrollTop(350);
$scrollspy.scrollTop(350)
}) })
asyncTest('middle navigation option correctly selected when large offset is used', function () { test('middle navigation option correctly selected when large offset is used', function () {
expect(3); stop()
var sectionHTML = '<div id="header" style="height: 500px;"></div>' + var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' + '<nav id="navigation" class="navbar">' +
'<ul class="nav navbar-nav">' + '<ul class="nav navbar-nav">' +
@ -101,17 +106,19 @@ $(function () {
'<div id="three" style="height: 10px;"></div>' + '<div id="three" style="height: 10px;"></div>' +
'</div>' '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture') var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section var $scrollspy = $section
.show() .show()
.filter('#content') .filter('#content')
$scrollSpy.bootstrapScrollspy({ target: '#navigation', offset: $scrollSpy.position().top })
$scrollSpy.on('scroll.bs.scrollspy', function () { $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
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') $scrollspy.on('scroll.bs.scrollspy', function () {
ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section') 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() start()
}) })
$scrollSpy.scrollTop(550);
$scrollspy.scrollTop(550)
}) })
}) })