Merge branch 'twbs/v4-dev' into dropdown-keyboard

1 files changed, 87 insertions, 1 deletions

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 2e0143293..62eece896 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -1,5 +1,5 @@
 $(function () {
-  'use strict';
+  'use strict'
 
   QUnit.module('tabs plugin')
 
@@ -76,6 +76,22 @@ $(function () {
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
+  QUnit.test('should activate element by tab id in ordered list', function (assert) {
+    assert.expect(2)
+    var pillsHTML = '<ol class="pills">'
+        + '<li><a href="#home">Home</a></li>'
+        + '<li><a href="#profile">Profile</a></li>'
+        + '</ol>'
+
+    $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
+
+    $(pillsHTML).find('li:last a').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
+
+    $(pillsHTML).find('li:first a').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()
@@ -92,6 +108,44 @@ $(function () {
       .bootstrapTab('show')
   })
 
+  QUnit.test('should not fire shown when tab is already active', function (assert) {
+    assert.expect(0)
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+      + '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+      + '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>'
+      + '</ul>'
+      + '<div class="tab-content">'
+      + '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+      + '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+      + '</div>'
+
+    $(tabsHTML)
+      .find('a.active')
+      .on('shown.bs.tab', function () {
+        assert.ok(true, 'shown event fired')
+      })
+      .bootstrapTab('show')
+  })
+
+  QUnit.test('should not fire shown when tab is disabled', function (assert) {
+    assert.expect(0)
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+      + '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+      + '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>'
+      + '</ul>'
+      + '<div class="tab-content">'
+      + '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+      + '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+      + '</div>'
+
+    $(tabsHTML)
+      .find('a.disabled')
+      .on('shown.bs.tab', function () {
+        assert.ok(true, 'shown event fired')
+      })
+      .bootstrapTab('show')
+  })
+
   QUnit.test('show and shown events should reference correct relatedTarget', function (assert) {
     assert.expect(2)
     var done = assert.async()
@@ -225,4 +279,36 @@ $(function () {
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
   })
 
+  QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
+    assert.expect(2)
+    var tabsHTML = '<ul class="nav nav-tabs">'
+        + '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>'
+        + '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+        + '</ul>'
+    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
+
+    $tabs.find('li:last a').trigger('click')
+    assert.notOk($tabs.find('li:first a').hasClass('active'))
+    assert.ok($tabs.find('li:last a').hasClass('active'))
+  })
+
+  QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
+    assert.expect(3)
+    var tabsHTML = '<ul class="nav nav-tabs">'
+        + '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>'
+        + '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+        + '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>'
+        + '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>'
+        + '</div>'
+        + '</li>'
+        + '</ul>'
+    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
+
+    $tabs.find('li:first > a').trigger('click')
+    assert.ok($tabs.find('li:first a').hasClass('active'))
+    assert.notOk($tabs.find('li:last > a').hasClass('active'))
+    assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
+  })
 })