Merge branch 'v4-dev' into dropdown-keyboard

7 files changed, 444 insertions, 61 deletions

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index dbdea921a..00b438bb2 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -341,6 +341,49 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
+  QUnit.test('should fire slid and slide events with from and to', function (assert) {
+    assert.expect(4)
+    var template = '<div id="myCarousel" class="carousel slide">'
+        + '<div class="carousel-inner">'
+        + '<div class="carousel-item active">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>First Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '<div class="carousel-item">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>Second Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '<div class="carousel-item">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>Third Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
+        + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
+        + '</div>'
+
+    var done = assert.async()
+    $(template)
+      .on('slid.bs.carousel', function (e) {
+        assert.ok(e.from !== undefined, 'from present')
+        assert.ok(e.to !== undefined, 'to present')
+        $(this).off()
+        done()
+      })
+      .on('slide.bs.carousel', function (e) {
+        assert.ok(e.from !== undefined, 'from present')
+        assert.ok(e.to !== undefined, 'to present')
+        $(this).off('slide.bs.carousel')
+      })
+      .bootstrapCarousel('next')
+  })
+
   QUnit.test('should set interval from data attribute', function (assert) {
     assert.expect(4)
     var templateHTML = '<div id="myCarousel" class="carousel slide">'
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 713930433..e7083f56d 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -265,17 +265,17 @@ $(function () {
         + '</div>'
     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 
-    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" />').appendTo($groups.eq(1))
 
-    $('<div id="body2"/>').appendTo($groups.eq(1))
+    $('<div id="body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
-    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" />').appendTo($groups.eq(2))
 
-    $('<div id="body3"/>')
+    $('<div id="body3" data-parent="#accordion"/>')
       .appendTo($groups.eq(2))
       .on('shown.bs.collapse', function () {
         assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
@@ -299,17 +299,17 @@ $(function () {
         + '</div>'
     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 
-    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show" data-parent=".accordion"/>').appendTo($groups.eq(0))
 
-    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2"/>').appendTo($groups.eq(1))
 
-    $('<div id="body2"/>').appendTo($groups.eq(1))
+    $('<div id="body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
 
-    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3"/>').appendTo($groups.eq(2))
 
-    $('<div id="body3"/>')
+    $('<div id="body3" data-parent=".accordion"/>')
       .appendTo($groups.eq(2))
       .on('shown.bs.collapse', function () {
         assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
@@ -401,17 +401,17 @@ $(function () {
         + '</div>'
     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 
-    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" aria-expanded="true" class="show"/>').appendTo($groups.eq(0))
+    $('<div id="body1" aria-expanded="true" class="show" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
+    var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" class="collapsed" aria-expanded="false" />').appendTo($groups.eq(1))
 
-    $('<div id="body2" aria-expanded="false"/>').appendTo($groups.eq(1))
+    $('<div id="body2" aria-expanded="false" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
-    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3"/>').appendTo($groups.eq(2))
 
-    $('<div id="body3" aria-expanded="false"/>')
+    $('<div id="body3" aria-expanded="false" data-parent="#accordion"/>')
       .appendTo($groups.eq(2))
       .on('shown.bs.collapse', function () {
         assert.strictEqual($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
@@ -435,16 +435,16 @@ $(function () {
     var showFired = false
     var $groups   = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 
-    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="collapse"/>')
+    $('<div id="body1" class="collapse" data-parent="#accordion"/>')
       .appendTo($groups.eq(0))
       .on('show.bs.collapse', function () {
         showFired = true
       })
 
-    var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
-    var $body2   = $('<div id="body2" class="collapse"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a role="button" data-toggle="collapse" href="#body2"/>').appendTo($groups.eq(1))
+    var $body2   = $('<div id="body2" class="collapse" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
     $target2.trigger('click')
 
@@ -490,4 +490,44 @@ $(function () {
       .bootstrapCollapse('show')
   })
 
+  QUnit.test('should allow accordion to use children other than card', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var accordionHTML = '<div id="accordion" data-children=".item">'
+        + '<div class="item">'
+        + '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+        + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>'
+        + '</div>'
+        + '<div class="item">'
+        + '<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+        + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
+        + '</div>'
+        + '</div>'
+
+    $(accordionHTML).appendTo('#qunit-fixture')
+    var $target = $('#linkTrigger')
+    $('#collapseOne').on('shown.bs.collapse', function () {
+      assert.ok($(this).hasClass('show'))
+      assert.ok(!$('#collapseTwo').hasClass('show'))
+      done()
+    })
+    $target.trigger($.Event('click'))
+  })
+
+  QUnit.test('should not prevent event for input', function (assert) {
+    assert.expect(3)
+    var done = assert.async()
+    var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
+
+    $('<div id="collapsediv1"/>')
+      .appendTo('#qunit-fixture')
+      .on('shown.bs.collapse', function () {
+        assert.ok($(this).hasClass('show'))
+        assert.ok($target.attr('aria-expanded') === 'true')
+        assert.ok($target.prop('checked'))
+        done()
+      })
+
+    $target.trigger($.Event('click'))
+  })
 })
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 84492cec2..fc6c4f38c 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -9,6 +9,19 @@ $(function () {
   })
 
   QUnit.module('modal', {
+    before: function () {
+      // Enable the scrollbar measurer
+      $('<style type="text/css"> .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } </style>').appendTo('head')
+      // Function to calculate the scrollbar width which is then compared to the padding or margin changes
+      $.fn.getScrollbarWidth = function () {
+        var scrollDiv = document.createElement('div')
+        scrollDiv.className = 'modal-scrollbar-measure'
+        document.body.appendChild(scrollDiv)
+        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
+        document.body.removeChild(scrollDiv)
+        return scrollbarWidth
+      }
+    },
     beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
       $.fn.bootstrapModal = $.fn.modal.noConflict()
@@ -336,81 +349,147 @@ $(function () {
     $toggleBtn.trigger('click')
   })
 
-  QUnit.test('should restore inline body padding after closing', function (assert) {
+  QUnit.test('should adjust the inline body padding when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()
-    var originalBodyPad = 0
     var $body = $(document.body)
-
-    $body.css('padding-right', originalBodyPad)
+    var originalPadding = $body.css('padding-right')
 
     $('<div id="modal-test"/>')
       .on('hidden.bs.modal', function () {
-        var currentBodyPad = parseInt($body.css('padding-right'), 10)
-        assert.notStrictEqual($body.attr('style'), '', 'body has non-empty style attribute')
-        assert.strictEqual(currentBodyPad, originalBodyPad, 'original body padding was not changed')
+        var currentPadding = $body.css('padding-right')
+        assert.strictEqual(currentPadding, originalPadding, 'body padding should be reset after closing')
         $body.removeAttr('style')
         done()
       })
       .on('shown.bs.modal', function () {
+        var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px'
+        var currentPadding = $body.css('padding-right')
+        assert.strictEqual(currentPadding, expectedPadding, 'body padding should be adjusted while opening')
         $(this).bootstrapModal('hide')
       })
       .bootstrapModal('show')
   })
 
-  QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
-    assert.expect(1)
+  QUnit.test('should store the original body padding in data-padding-right before showing', function (assert) {
+    assert.expect(2)
     var done = assert.async()
     var $body = $(document.body)
-    var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
+    var originalPadding = '0px'
+    $body.css('padding-right', originalPadding)
 
     $('<div id="modal-test"/>')
       .on('hidden.bs.modal', function () {
-        assert.ok(!$body.attr('style'), 'body does not have inline padding set')
-        $style.remove()
+        assert.strictEqual($body.data('padding-right'), undefined, 'data-padding-right should be cleared after closing')
+        $body.removeAttr('style')
         done()
       })
       .on('shown.bs.modal', function () {
+        assert.strictEqual($body.data('padding-right'), originalPadding, 'original body padding should be stored in data-padding-right')
         $(this).bootstrapModal('hide')
       })
       .bootstrapModal('show')
   })
 
-  QUnit.test('should have a paddingRight when the modal is taller than the viewport', function (assert) {
+  QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()
-    $('<div class="fixed-top fixed-bottom sticky-top is-fixed">@Johann-S</div>').appendTo('#qunit-fixture')
-    $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px')
+    var $element = $('<div class="fixed-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = $element.css('padding-right')
 
     $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        var currentPadding = $element.css('padding-right')
+        assert.strictEqual(currentPadding, originalPadding, 'fixed element padding should be reset after closing')
+        $element.remove()
+        done()
+      })
       .on('shown.bs.modal', function () {
-        var paddingRight = parseInt($(document.body).css('padding-right'), 10)
-        assert.strictEqual(isNaN(paddingRight), false)
-        assert.strictEqual(paddingRight !== 0, true)
-        $(document.body).css('padding-right', '') // Because test case "should ignore other inline styles when trying to restore body padding after closing" fail if not
+        var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px'
+        var currentPadding = $element.css('padding-right')
+        assert.strictEqual(currentPadding, expectedPadding, 'fixed element padding should be adjusted while opening')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should store the original padding of fixed elements in data-padding-right before showing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="fixed-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = '0px'
+    $element.css('padding-right', originalPadding)
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual($element.data('padding-right'), undefined, 'data-padding-right should be cleared after closing')
+        $element.remove()
         done()
       })
+      .on('shown.bs.modal', function () {
+        assert.strictEqual($element.data('padding-right'), originalPadding, 'original fixed element padding should be stored in data-padding-right')
+        $(this).bootstrapModal('hide')
+      })
       .bootstrapModal('show')
   })
 
-  QUnit.test('should remove padding-right on modal after closing', function (assert) {
-    assert.expect(3)
+  QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
+    var originalMargin = $element.css('margin-right')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        var currentMargin = $element.css('margin-right')
+        assert.strictEqual(currentMargin, originalMargin, 'navbar-toggler margin should be reset after closing')
+        $element.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        var expectedMargin = parseFloat(originalMargin) + $(this).getScrollbarWidth() + 'px'
+        var currentMargin = $element.css('margin-right')
+        assert.strictEqual(currentMargin, expectedMargin, 'navbar-toggler margin should be adjusted while opening')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should store the original margin of the navbar-toggler in data-margin-right before showing', function (assert) {
+    assert.expect(2)
     var done = assert.async()
-    $('<div class="fixed-top fixed-bottom is-fixed sticky-top">@Johann-S</div>').appendTo('#qunit-fixture')
-    $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px')
+    var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
+    var originalMargin = '0px'
+    $element.css('margin-right', originalMargin)
 
     $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual($element.data('margin-right'), undefined, 'data-margin-right should be cleared after closing')
+        $element.remove()
+        done()
+      })
       .on('shown.bs.modal', function () {
-        var paddingRight = parseInt($(document.body).css('padding-right'), 10)
-        assert.strictEqual(isNaN(paddingRight), false)
-        assert.strictEqual(paddingRight !== 0, true)
+        assert.strictEqual($element.data('margin-right'), originalMargin, 'original navbar-toggler margin should be stored in data-margin-right')
         $(this).bootstrapModal('hide')
       })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $body = $(document.body)
+    var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
+
+    $('<div id="modal-test"/>')
       .on('hidden.bs.modal', function () {
-        var paddingRight = parseInt($(document.body).css('padding-right'), 10)
-        assert.strictEqual(paddingRight, 0)
+        assert.ok(!$body.attr('style'), 'body does not have inline padding set')
+        $style.remove()
         done()
       })
+      .on('shown.bs.modal', function () {
+        $(this).bootstrapModal('hide')
+      })
       .bootstrapModal('show')
   })
 
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 64c8c556a..eaa9fa0c0 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -364,4 +364,22 @@ $(function () {
       })
       .modal('show')
   })
+
+  QUnit.test('should convert number to string without error for content and title', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $popover = $('<a href="#">@mdo</a>')
+      .appendTo('#qunit-fixture')
+      .bootstrapPopover({
+        title: 5,
+        content: 7
+      })
+      .on('shown.bs.popover', function () {
+        assert.strictEqual($('.popover .popover-title').text(), '5')
+        assert.strictEqual($('.popover .popover-content').text(), '7')
+        done()
+      })
+
+    $popover.bootstrapPopover('show')
+  })
 })
diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 877ec67a2..ed84cc794 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -26,7 +26,7 @@ $(function () {
 
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
-    var $el = $('<div/>')
+    var $el = $('<div/>').appendTo('#qunit-fixture')
     $el.bootstrapScrollspy()
     try {
       $el.bootstrapScrollspy('noMethod')
@@ -38,7 +38,7 @@ $(function () {
 
   QUnit.test('should return jquery collection containing the element', function (assert) {
     assert.expect(2)
-    var $el = $('<div/>')
+    var $el = $('<div/>').appendTo('#qunit-fixture')
     var $scrollspy = $el.bootstrapScrollspy()
     assert.ok($scrollspy instanceof $, 'returns jquery collection')
     assert.strictEqual($scrollspy[0], $el[0], 'collection contains element')
@@ -205,6 +205,80 @@ $(function () {
       .then(function () { done() })
   })
 
+  QUnit.test('should add the active class to the correct element (nav markup)', function (assert) {
+    assert.expect(2)
+    var navbarHtml =
+        '<nav class="navbar">'
+      + '<nav class="nav">'
+      + '<a class="nav-link" id="a-1" href="#div-1">div 1</a>'
+      + '<a class="nav-link" id="a-2" href="#div-2">div 2</a>'
+      + '</nav>'
+      + '</nav>'
+    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 done = assert.async()
+    var testElementIsActiveAfterScroll = function (element, target) {
+      var deferred = $.Deferred()
+      var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
+      $content.one('scroll', function () {
+        assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
+        deferred.resolve()
+      })
+      $content.scrollTop(scrollHeight)
+      return deferred.promise()
+    }
+
+    $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
+      .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
+      .then(function () { done() })
+  })
+
+  QUnit.test('should add the active class to the correct element (list-group markup)', function (assert) {
+    assert.expect(2)
+    var navbarHtml =
+        '<nav class="navbar">'
+      + '<div class="list-group">'
+      + '<a class="list-group-item" id="a-1" href="#div-1">div 1</a>'
+      + '<a class="list-group-item" id="a-2" href="#div-2">div 2</a>'
+      + '</div>'
+      + '</nav>'
+    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 done = assert.async()
+    var testElementIsActiveAfterScroll = function (element, target) {
+      var deferred = $.Deferred()
+      var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
+      $content.one('scroll', function () {
+        assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
+        deferred.resolve()
+      })
+      $content.scrollTop(scrollHeight)
+      return deferred.promise()
+    }
+
+    $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
+      .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
+      .then(function () { done() })
+  })
+
   QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
     assert.expect(6)
     var times = 0
@@ -212,7 +286,7 @@ $(function () {
     var navbarHtml = '<nav id="navigation" class="navbar">'
       + '<ul class="nav">'
       + '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
-      + '<ul>'
+      + '<ul class="nav">'
       + '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</li>'
@@ -246,6 +320,86 @@ $(function () {
     testActiveElements()
   })
 
+  QUnit.test('should add the active class correctly when there are nested elements (nav markup)', function (assert) {
+    assert.expect(6)
+    var times = 0
+    var done = assert.async()
+    var navbarHtml = '<nav id="navigation" class="navbar">'
+      + '<nav class="nav">'
+      + '<a id="a-1" class="nav-link" href="#div-1">div 1</a>'
+      + '<nav class="nav">'
+      + '<a id="a-2" class="nav-link" href="#div-2">div 2</a>'
+      + '</nav>'
+      + '</nav>'
+      + '</nav>'
+
+    var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+      + '<div id="div-1" style="padding: 0; margin: 0">'
+      + '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+      + '</div>'
+      + '</div>'
+
+    $(navbarHtml).appendTo('#qunit-fixture')
+
+    var $content = $(contentHtml)
+      .appendTo('#qunit-fixture')
+      .bootstrapScrollspy({ offset: 0, target: '#navigation' })
+
+    function testActiveElements() {
+      if (++times > 3) { return done() }
+
+      $content.one('scroll', function () {
+        assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
+        assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
+        testActiveElements()
+      })
+
+      $content.scrollTop($content.scrollTop() + 10)
+    }
+
+    testActiveElements()
+  })
+
+  QUnit.test('should add the active class correctly when there are nested elements (list-group markup)', function (assert) {
+    assert.expect(6)
+    var times = 0
+    var done = assert.async()
+    var navbarHtml = '<nav id="navigation" class="navbar">'
+      + '<div class="list-group">'
+      + '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>'
+      + '<div class="list-group">'
+      + '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>'
+      + '</div>'
+      + '</div>'
+      + '</nav>'
+
+    var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+      + '<div id="div-1" style="padding: 0; margin: 0">'
+      + '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+      + '</div>'
+      + '</div>'
+
+    $(navbarHtml).appendTo('#qunit-fixture')
+
+    var $content = $(contentHtml)
+      .appendTo('#qunit-fixture')
+      .bootstrapScrollspy({ offset: 0, target: '#navigation' })
+
+    function testActiveElements() {
+      if (++times > 3) { return done() }
+
+      $content.one('scroll', function () {
+        assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
+        assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
+        testActiveElements()
+      })
+
+      $content.scrollTop($content.scrollTop() + 10)
+    }
+
+    testActiveElements()
+  })
+
   QUnit.test('should clear selection if above the first section', function (assert) {
     assert.expect(3)
     var done = assert.async()
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 734648e9e..1e2b66c04 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -46,7 +46,7 @@ $(function () {
 
   QUnit.test('should activate element by tab id', function (assert) {
     assert.expect(2)
-    var tabsHTML = '<ul class="tabs">'
+    var tabsHTML = '<ul class="nav">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ul>'
@@ -62,7 +62,7 @@ $(function () {
 
   QUnit.test('should activate element by tab id', function (assert) {
     assert.expect(2)
-    var pillsHTML = '<ul class="pills">'
+    var pillsHTML = '<ul class="nav nav-pills">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ul>'
@@ -78,7 +78,7 @@ $(function () {
 
   QUnit.test('should activate element by tab id in ordered list', function (assert) {
     assert.expect(2)
-    var pillsHTML = '<ol class="pills">'
+    var pillsHTML = '<ol class="nav nav-pills">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ol>'
@@ -108,11 +108,27 @@ $(function () {
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
+  QUnit.test('should activate element by tab id in list group', function (assert) {
+    assert.expect(2)
+    var tabsHTML =  '<div class="list-group">' +
+                      '<a href="#home">Home</a>' +
+                      '<a href="#profile">Profile</a>' +
+                    '</div>'
+
+    $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
+
+    $(tabsHTML).find('a:last').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
+
+    $(tabsHTML).find('a:first').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
+  })
+
   QUnit.test('should not fire shown when show is prevented', function (assert) {
     assert.expect(1)
     var done = assert.async()
 
-    $('<div class="tab"/>')
+    $('<div class="nav"/>')
       .on('show.bs.tab', function (e) {
         e.preventDefault()
         assert.ok(true, 'show event fired')
@@ -166,7 +182,7 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var dropHTML = '<ul class="drop">'
+    var dropHTML = '<ul class="drop nav">'
         + '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
         + '<ul class="dropdown-menu">'
         + '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
@@ -194,7 +210,7 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="tabs">'
+    var tabsHTML = '<ul class="nav">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ul>'
@@ -225,7 +241,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="tabs">'
+    var tabsHTML = '<ul class="nav">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ul>'
@@ -250,7 +266,7 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var tabsHTML = '<ul class="tabs">'
+    var tabsHTML = '<ul class="nav">'
         + '<li><a href="#home">Home</a></li>'
         + '<li><a href="#profile">Profile</a></li>'
         + '</ul>'
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index e1aec5551..8cb1a6fdf 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -869,4 +869,37 @@ $(function () {
       })
       .modal('show')
   })
+
+  QUnit.test('should reset tip classes when hidden event triggered', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip('show')
+      .on('hidden.bs.tooltip', function () {
+        var tooltip = $el.data('bs.tooltip')
+        var $tooltip = $(tooltip.getTipElement())
+        assert.ok($tooltip.hasClass('tooltip'))
+        assert.ok($tooltip.hasClass('fade'))
+        done()
+      })
+
+    $el.bootstrapTooltip('hide')
+  })
+
+  QUnit.test('should convert number in title to string', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $el = $('<a href="#" rel="tooltip" title="7"/>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip('show')
+      .on('shown.bs.tooltip', function () {
+        var tooltip = $el.data('bs.tooltip')
+        var $tooltip = $(tooltip.getTipElement())
+        assert.strictEqual($tooltip.children().text(), '7')
+        done()
+      })
+
+    $el.bootstrapTooltip('show')
+  })
 })