Merge pull request #13853 from hnrch02/unit-tests-cleanup

Major unit tests cleanup

diff --cc js/tests/unit/scrollspy.js
index d960ba71a9e670b606210f4337460717b7cd6b33,3eefac85d273c5da834d128599008ca45c1e28cf..084e6fe6ee312c3c008e70489305a71ed2ce767d
--- 1/js/tests/unit/scrollspy.js
--- 2/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@@ -78,77 -81,44 +81,81 @@@ $(function () 
          .find('#scrollspy-example')
          .bootstrapScrollspy({ target: '#ss-target' })
  
-     $scrollSpy.on('scroll.bs.scrollspy', function () {
-       ok($section.hasClass('active'), 'Active class still on root node')
+     $scrollspy.on('scroll.bs.scrollspy', function () {
+       ok($section.hasClass('active'), '"active" class still on root node')
        start()
      })
-     $scrollSpy.scrollTop(350);
+ 
+     $scrollspy.scrollTop(350)
    })
  
-   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>'
+   test('middle navigation option correctly selected when large offset is used', function () {
+     stop()
+ 
+     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>'
      var $section = $(sectionHTML).appendTo('#qunit-fixture')
-     var $scrollSpy = $section
+     var $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')
+     $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);
+ 
+     $scrollspy.scrollTop(550)
    })
 +
 +  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') })
 +  })
 +
  })