replace js scrollspy test for default behavior

1 files changed, 37 insertions, 17 deletions

diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 90c95d769..a36749f2e 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -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') })
+  })
+
 })