From bf39bb3ac3d2aef4687b3cd4762015d5f218e2bc Mon Sep 17 00:00:00 2001
From: Starsam80 <samraskauskas@gmail.com>
Date: Thu, 27 Oct 2016 16:13:17 -0600
Subject: Rename `.active` to `.show`

---
 js/src/alert.js               |  8 ++++----
 js/src/collapse.js            | 16 ++++++++--------
 js/src/dropdown.js            | 12 ++++++------
 js/src/modal.js               | 10 +++++-----
 js/src/popover.js             |  6 +++---
 js/src/tooltip.js             | 28 ++++++++++++++--------------
 js/tests/unit/alert.js        |  6 +++---
 js/tests/unit/collapse.js     | 32 ++++++++++++++++----------------
 js/tests/unit/dropdown.js     | 34 +++++++++++++++++-----------------
 js/tests/unit/popover.js      |  2 +-
 js/tests/unit/tooltip.js      | 40 ++++++++++++++++++++--------------------
 js/tests/visual/alert.html    |  6 +++---
 js/tests/visual/collapse.html |  2 +-
 js/tests/visual/modal.html    |  2 +-
 14 files changed, 102 insertions(+), 102 deletions(-)

(limited to 'js')

diff --git a/js/src/alert.js b/js/src/alert.js
index 8e5524950..884a5dec8 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -36,9 +36,9 @@ const Alert = (($) => {
   }
 
   const ClassName = {
-    ALERT  : 'alert',
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    ALERT : 'alert',
+    FADE  : 'fade',
+    SHOW  : 'show'
   }
 
 
@@ -108,7 +108,7 @@ const Alert = (($) => {
     }
 
     _removeElement(element) {
-      $(element).removeClass(ClassName.ACTIVE)
+      $(element).removeClass(ClassName.SHOW)
 
       if (!Util.supportsTransitionEnd() ||
           !$(element).hasClass(ClassName.FADE)) {
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 1e4730ff7..ad8815993 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -44,7 +44,7 @@ const Collapse = (($) => {
   }
 
   const ClassName = {
-    ACTIVE     : 'active',
+    SHOW       : 'show',
     COLLAPSE   : 'collapse',
     COLLAPSING : 'collapsing',
     COLLAPSED  : 'collapsed'
@@ -56,7 +56,7 @@ const Collapse = (($) => {
   }
 
   const Selector = {
-    ACTIVES     : '.card > .active, .card > .collapsing',
+    ACTIVES     : '.card > .show, .card > .collapsing',
     DATA_TOGGLE : '[data-toggle="collapse"]'
   }
 
@@ -104,7 +104,7 @@ const Collapse = (($) => {
     // public
 
     toggle() {
-      if ($(this._element).hasClass(ClassName.ACTIVE)) {
+      if ($(this._element).hasClass(ClassName.SHOW)) {
         this.hide()
       } else {
         this.show()
@@ -116,7 +116,7 @@ const Collapse = (($) => {
         throw new Error('Collapse is transitioning')
       }
 
-      if ($(this._element).hasClass(ClassName.ACTIVE)) {
+      if ($(this._element).hasClass(ClassName.SHOW)) {
         return
       }
 
@@ -171,7 +171,7 @@ const Collapse = (($) => {
         $(this._element)
           .removeClass(ClassName.COLLAPSING)
           .addClass(ClassName.COLLAPSE)
-          .addClass(ClassName.ACTIVE)
+          .addClass(ClassName.SHOW)
 
         this._element.style[dimension] = ''
 
@@ -200,7 +200,7 @@ const Collapse = (($) => {
         throw new Error('Collapse is transitioning')
       }
 
-      if (!$(this._element).hasClass(ClassName.ACTIVE)) {
+      if (!$(this._element).hasClass(ClassName.SHOW)) {
         return
       }
 
@@ -221,7 +221,7 @@ const Collapse = (($) => {
       $(this._element)
         .addClass(ClassName.COLLAPSING)
         .removeClass(ClassName.COLLAPSE)
-        .removeClass(ClassName.ACTIVE)
+        .removeClass(ClassName.SHOW)
 
       this._element.setAttribute('aria-expanded', false)
 
@@ -299,7 +299,7 @@ const Collapse = (($) => {
 
     _addAriaAndCollapsedClass(element, triggerArray) {
       if (element) {
-        const isOpen = $(element).hasClass(ClassName.ACTIVE)
+        const isOpen = $(element).hasClass(ClassName.SHOW)
         element.setAttribute('aria-expanded', isOpen)
 
         if (triggerArray.length) {
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 8b2164aa9..97bba1c76 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -41,7 +41,7 @@ const Dropdown = (($) => {
   const ClassName = {
     BACKDROP : 'dropdown-backdrop',
     DISABLED : 'disabled',
-    ACTIVE   : 'active'
+    SHOW     : 'show'
   }
 
   const Selector = {
@@ -86,7 +86,7 @@ const Dropdown = (($) => {
       }
 
       const parent   = Dropdown._getParentFromElement(this)
-      const isActive = $(parent).hasClass(ClassName.ACTIVE)
+      const isActive = $(parent).hasClass(ClassName.SHOW)
 
       Dropdown._clearMenus()
 
@@ -118,7 +118,7 @@ const Dropdown = (($) => {
       this.focus()
       this.setAttribute('aria-expanded', true)
 
-      $(parent).toggleClass(ClassName.ACTIVE)
+      $(parent).toggleClass(ClassName.SHOW)
       $(parent).trigger($.Event(Event.SHOWN, relatedTarget))
 
       return false
@@ -176,7 +176,7 @@ const Dropdown = (($) => {
           relatedTarget : toggles[i]
         }
 
-        if (!$(parent).hasClass(ClassName.ACTIVE)) {
+        if (!$(parent).hasClass(ClassName.SHOW)) {
           continue
         }
 
@@ -195,7 +195,7 @@ const Dropdown = (($) => {
         toggles[i].setAttribute('aria-expanded', 'false')
 
         $(parent)
-          .removeClass(ClassName.ACTIVE)
+          .removeClass(ClassName.SHOW)
           .trigger($.Event(Event.HIDDEN, relatedTarget))
       }
     }
@@ -225,7 +225,7 @@ const Dropdown = (($) => {
       }
 
       const parent   = Dropdown._getParentFromElement(this)
-      const isActive = $(parent).hasClass(ClassName.ACTIVE)
+      const isActive = $(parent).hasClass(ClassName.SHOW)
 
       if (!isActive && event.which !== ESCAPE_KEYCODE ||
            isActive && event.which === ESCAPE_KEYCODE) {
diff --git a/js/src/modal.js b/js/src/modal.js
index 70bb68e42..94abd19f4 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -60,7 +60,7 @@ const Modal = (($) => {
     BACKDROP           : 'modal-backdrop',
     OPEN               : 'modal-open',
     FADE               : 'fade',
-    ACTIVE             : 'active'
+    SHOW               : 'show'
   }
 
   const Selector = {
@@ -185,7 +185,7 @@ const Modal = (($) => {
 
       $(document).off(Event.FOCUSIN)
 
-      $(this._element).removeClass(ClassName.ACTIVE)
+      $(this._element).removeClass(ClassName.SHOW)
 
       $(this._element).off(Event.CLICK_DISMISS)
       $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
@@ -242,7 +242,7 @@ const Modal = (($) => {
         Util.reflow(this._element)
       }
 
-      $(this._element).addClass(ClassName.ACTIVE)
+      $(this._element).addClass(ClassName.SHOW)
 
       if (this._config.focus) {
         this._enforceFocus()
@@ -356,7 +356,7 @@ const Modal = (($) => {
           Util.reflow(this._backdrop)
         }
 
-        $(this._backdrop).addClass(ClassName.ACTIVE)
+        $(this._backdrop).addClass(ClassName.SHOW)
 
         if (!callback) {
           return
@@ -372,7 +372,7 @@ const Modal = (($) => {
           .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
 
       } else if (!this._isShown && this._backdrop) {
-        $(this._backdrop).removeClass(ClassName.ACTIVE)
+        $(this._backdrop).removeClass(ClassName.SHOW)
 
         const callbackRemove = () => {
           this._removeBackdrop()
diff --git a/js/src/popover.js b/js/src/popover.js
index a08ed4de9..33bc9e48c 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -37,8 +37,8 @@ const Popover = (($) => {
   })
 
   const ClassName = {
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    FADE : 'fade',
+    SHOW : 'show'
   }
 
   const Selector = {
@@ -117,7 +117,7 @@ const Popover = (($) => {
       this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
       this.setElementContent($tip.find(Selector.CONTENT), this._getContent())
 
-      $tip.removeClass(`${ClassName.FADE} ${ClassName.ACTIVE}`)
+      $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
 
       this.cleanupTether()
     }
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index dc291a72c..3fa5ecab4 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -72,8 +72,8 @@ const Tooltip = (($) => {
   }
 
   const HoverState = {
-    ACTIVE : 'active',
-    OUT    : 'out'
+    SHOW : 'show',
+    OUT  : 'out'
   }
 
   const Event = {
@@ -90,8 +90,8 @@ const Tooltip = (($) => {
   }
 
   const ClassName = {
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    FADE : 'fade',
+    SHOW : 'show'
   }
 
   const Selector = {
@@ -208,7 +208,7 @@ const Tooltip = (($) => {
 
       } else {
 
-        if ($(this.getTipElement()).hasClass(ClassName.ACTIVE)) {
+        if ($(this.getTipElement()).hasClass(ClassName.SHOW)) {
           this._leave(null, this)
           return
         }
@@ -303,7 +303,7 @@ const Tooltip = (($) => {
         Util.reflow(tip)
         this._tether.position()
 
-        $(tip).addClass(ClassName.ACTIVE)
+        $(tip).addClass(ClassName.SHOW)
 
         const complete = () => {
           const prevHoverState = this._hoverState
@@ -336,7 +336,7 @@ const Tooltip = (($) => {
         throw new Error('Tooltip is transitioning')
       }
       const complete  = () => {
-        if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) {
+        if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
           tip.parentNode.removeChild(tip)
         }
 
@@ -356,7 +356,7 @@ const Tooltip = (($) => {
         return
       }
 
-      $(tip).removeClass(ClassName.ACTIVE)
+      $(tip).removeClass(ClassName.SHOW)
 
       if (Util.supportsTransitionEnd() &&
           $(this.tip).hasClass(ClassName.FADE)) {
@@ -388,7 +388,7 @@ const Tooltip = (($) => {
 
       this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
 
-      $tip.removeClass(`${ClassName.FADE} ${ClassName.ACTIVE}`)
+      $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
 
       this.cleanupTether()
     }
@@ -513,15 +513,15 @@ const Tooltip = (($) => {
         ] = true
       }
 
-      if ($(context.getTipElement()).hasClass(ClassName.ACTIVE) ||
-         context._hoverState === HoverState.ACTIVE) {
-        context._hoverState = HoverState.ACTIVE
+      if ($(context.getTipElement()).hasClass(ClassName.SHOW) ||
+         context._hoverState === HoverState.SHOW) {
+        context._hoverState = HoverState.SHOW
         return
       }
 
       clearTimeout(context._timeout)
 
-      context._hoverState = HoverState.ACTIVE
+      context._hoverState = HoverState.SHOW
 
       if (!context.config.delay || !context.config.delay.show) {
         context.show()
@@ -529,7 +529,7 @@ const Tooltip = (($) => {
       }
 
       context._timeout = setTimeout(() => {
-        if (context._hoverState === HoverState.ACTIVE) {
+        if (context._hoverState === HoverState.SHOW) {
           context.show()
         }
       }, context.config.delay.show)
diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js
index 9548c3318..e078082c3 100644
--- a/js/tests/unit/alert.js
+++ b/js/tests/unit/alert.js
@@ -34,7 +34,7 @@ $(function () {
 
   QUnit.test('should fade element out on clicking .close', function (assert) {
     assert.expect(1)
-    var alertHTML = '<div class="alert alert-danger fade active">'
+    var alertHTML = '<div class="alert alert-danger fade show">'
         + '<a class="close" href="#" data-dismiss="alert">×</a>'
         + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
         + '</div>'
@@ -43,12 +43,12 @@ $(function () {
 
     $alert.find('.close').trigger('click')
 
-    assert.strictEqual($alert.hasClass('active'), false, 'remove .active class on .close click')
+    assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
   })
 
   QUnit.test('should remove element when clicking .close', function (assert) {
     assert.expect(2)
-    var alertHTML = '<div class="alert alert-danger fade active">'
+    var alertHTML = '<div class="alert alert-danger fade show">'
         + '<a class="close" href="#" data-dismiss="alert">×</a>'
         + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
         + '</div>'
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 7db69e2cf..713930433 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -48,7 +48,7 @@ $(function () {
     assert.expect(2)
     var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
 
-    assert.ok($el.hasClass('active'), 'has class "active"')
+    assert.ok($el.hasClass('show'), 'has class "show"')
     assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
   })
 
@@ -62,7 +62,7 @@ $(function () {
       '</div>',
       '<div class="panel-group" id="accordion2">',
       '<div class="panel">',
-      '<div id="collapse2" class="collapse active"/>',
+      '<div id="collapse2" class="collapse show"/>',
       '</div>',
       '</div>'
     ].join('')
@@ -71,15 +71,15 @@ $(function () {
     var $el2 = $('#collapse2')
     $el1.bootstrapCollapse('show')
 
-    assert.ok($el1.hasClass('active'))
-    assert.ok($el2.hasClass('active'))
+    assert.ok($el1.hasClass('show'))
+    assert.ok($el2.hasClass('show'))
   })
 
   QUnit.test('should hide a collapsed element', function (assert) {
     assert.expect(1)
     var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
 
-    assert.ok(!$el.hasClass('active'), 'does not have class "active"')
+    assert.ok(!$el.hasClass('show'), 'does not have class "show"')
   })
 
   QUnit.test('should not fire shown when show is prevented', function (assert) {
@@ -150,7 +150,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -185,7 +185,7 @@ $(function () {
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
     var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -200,7 +200,7 @@ $(function () {
     assert.expect(0)
     var done = assert.async()
 
-    var $test = $('<div id="test1" class="active"/>')
+    var $test = $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hide.bs.collapse', function () {
         assert.ok(false)
@@ -244,7 +244,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    $('<div class="collapse active"></div>')
+    $('<div class="collapse show"></div>')
       .appendTo('#qunit-fixture')
       .on('hide.bs.collapse', function () {
         assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
@@ -267,7 +267,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
@@ -301,7 +301,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
 
@@ -344,7 +344,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -379,7 +379,7 @@ $(function () {
     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
     var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -403,7 +403,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" aria-expanded="true" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" aria-expanded="true" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
 
@@ -449,7 +449,7 @@ $(function () {
     $target2.trigger('click')
 
     $body2
-      .toggleClass('active collapsing')
+      .toggleClass('show collapsing')
       .data('bs.collapse')._isTransitioning = 1
 
     $target1.trigger('click')
@@ -466,7 +466,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'))
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 7e8ecae4e..53455c2a6 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -59,7 +59,7 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
   QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
@@ -128,10 +128,10 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
-  QUnit.test('should add class active to menu if clicked', function (assert) {
+  QUnit.test('should add class show to menu if clicked', function (assert) {
     assert.expect(1)
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
@@ -146,7 +146,7 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
   QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
@@ -164,11 +164,11 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
 
-  QUnit.test('should remove "active" class if body is clicked', function (assert) {
+  QUnit.test('should remove "show" class if body is clicked', function (assert) {
     assert.expect(2)
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
@@ -187,12 +187,12 @@ $(function () {
       .bootstrapDropdown()
       .trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
     $(document.body).trigger('click')
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class removed')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
   })
 
-  QUnit.test('should remove "active" class if body is clicked, with multiple dropdowns', function (assert) {
+  QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
     assert.expect(7)
     var dropdownHTML = '<ul class="nav">'
         + '<li><a href="#menu1">Menu 1</a></li>'
@@ -217,16 +217,16 @@ $(function () {
     assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
 
     $first.trigger('click')
-    assert.strictEqual($first.parents('.active').length, 1, '"active" class added on click')
-    assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
+    assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
     $(document.body).trigger('click')
-    assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
 
     $last.trigger('click')
-    assert.strictEqual($last.parent('.active').length, 1, '"active" class added on click')
-    assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
+    assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
     $(document.body).trigger('click')
-    assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
   })
 
   QUnit.test('should fire show and hide event', function (assert) {
@@ -411,7 +411,7 @@ $(function () {
 
     $('#textField').trigger('click')
 
-    assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
+    assert.ok($dropdown.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@@ -430,6 +430,6 @@ $(function () {
 
     $('#textArea').trigger('click')
 
-    assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
+    assert.ok($dropdown.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')
   })
 })
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 4667d9e9a..5452def58 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -229,7 +229,7 @@ $(function () {
     $popover.bootstrapPopover('show')
     $popover.bootstrapPopover('dispose')
 
-    assert.ok(!$popover.hasClass('active'), 'popover is hidden')
+    assert.ok(!$popover.hasClass('show'), 'popover is hidden')
     assert.ok(!$popover.data('popover'), 'popover does not have data')
     assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
     assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index ea95118a4..1e59f0958 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -111,7 +111,7 @@ $(function () {
 
     assert
       .ok($('.tooltip')
-      .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.active'), 'has correct classes applied')
+      .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.show'), 'has correct classes applied')
 
     $tooltip.bootstrapTooltip('hide')
 
@@ -306,7 +306,7 @@ $(function () {
     $tooltip.bootstrapTooltip('show')
     $tooltip.bootstrapTooltip('dispose')
 
-    assert.ok(!$tooltip.hasClass('active'), 'tooltip is hidden')
+    assert.ok(!$tooltip.hasClass('show'), 'tooltip is hidden')
     assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
     assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
     assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
@@ -335,7 +335,7 @@ $(function () {
       .bootstrapTooltip({ trigger: 'manual' })
       .bootstrapTooltip('toggle')
 
-    assert.ok($('.tooltip').is('.fade.active'), 'tooltip is faded active')
+    assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active')
   })
 
   QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
@@ -346,7 +346,7 @@ $(function () {
       .bootstrapTooltip('show')
 
     $('.tooltip').bootstrapTooltip('toggle')
-    assert.ok($('.tooltip').not('.fade.active'), 'tooltip was faded out')
+    assert.ok($('.tooltip').not('.fade.show'), 'tooltip was faded out')
   })
 
   QUnit.test('should place tooltips inside body when container is body', function (assert) {
@@ -502,11 +502,11 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip is not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active')
     }, 100)
 
     setTimeout(function () {
-      assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip is faded active')
+      assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip is faded active')
       done()
     }, 200)
 
@@ -522,12 +522,12 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
       done()
     }, 200)
 
@@ -543,16 +543,16 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 0, hide: 150 } })
 
     setTimeout(function () {
-      assert.ok($('.tooltip').is('.fade.active'), '1ms: tooltip faded active')
+      assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        assert.ok($('.tooltip').is('.fade.active'), '100ms: tooltip still faded active')
+        assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
         $tooltip.trigger('mouseenter')
       }, 100)
 
       setTimeout(function () {
-        assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip still faded active')
+        assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip still faded active')
         done()
       }, 200)
     }, 0)
@@ -569,12 +569,12 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
       done()
     }, 200)
 
@@ -590,12 +590,12 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 150, hide: 0 } })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '250ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '250ms: tooltip not faded active')
       done()
     }, 250)
 
@@ -611,16 +611,16 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 0, hide: 150 } })
 
     setTimeout(function () {
-      assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '1ms: tooltip faded active')
+      assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
 
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '100ms: tooltip still faded active')
+        assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '100ms: tooltip still faded active')
       }, 100)
 
       setTimeout(function () {
-        assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.active'), '200ms: tooltip removed')
+        assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
         done()
       }, 200)
 
@@ -726,7 +726,7 @@ $(function () {
     assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"')
 
     $('#tt-outer').trigger('mouseenter')
-    assert.ok(obj._hoverState === 'active', 'the tooltip hoverState should be set to "active"')
+    assert.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
 
     assert.strictEqual(currentUid, $('#tt-content').text())
   })
@@ -788,7 +788,7 @@ $(function () {
     var tooltip = $el.data('bs.tooltip')
     var $tooltip = $(tooltip.getTipElement())
 
-    function showingTooltip() { return $tooltip.hasClass('active') || tooltip._hoverState === 'active' }
+    function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
 
     var tests = [
         ['mouseenter', 'mouseleave'],
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 4b003efd8..f99c2d242 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -11,14 +11,14 @@
     <div class="container">
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-warning alert-dismissible fade active" role="alert">
+      <div class="alert alert-warning alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+      <div class="alert alert-danger alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -31,7 +31,7 @@
         </p>
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+      <div class="alert alert-danger alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 973d3c5ee..47ac06fd2 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -21,7 +21,7 @@
             </h5>
           </div>
 
-          <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+          <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
             <div class="card-block">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 69d392350..361bf6b87 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -65,7 +65,7 @@
                     </h5>
                   </div>
 
-                  <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+                  <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                     <div class="card-block">
                       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                     </div>
-- 
cgit v1.2.3