Add unit test for keyboard navigation

1 files changed, 34 insertions, 0 deletions

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index fc418f521..f5142d8b7 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -450,6 +450,40 @@ $(function () {
 
     $dropdown.trigger($.Event('keydown', { which: 40 }))
     $dropdown.trigger($.Event('keydown', { which: 40 }))
+  })
+
+  QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
+    assert.expect(4)
+    var done = assert.async()
+    var dropdownHTML = '<div class="tabs">'
+        + '<div class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<div class="dropdown-menu">'
+        + '<a id="item1" class="dropdown-item" href="#">A link</a>'
+        + '<a id="item2" class="dropdown-item" href="#">Another link</a>'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    $dropdown
+      .parent('.dropdown')
+      .on('shown.bs.dropdown', function () {
+        assert.ok(true, 'shown was fired')
+        $dropdown.trigger($.Event('keydown', { which: 40 }))
+        assert.ok($(document.activeElement)[0] === $('#item1')[0], 'item1 is focused')
+
+        $(document.activeElement).trigger($.Event('keydown', { which: 40 }))
+        assert.ok($(document.activeElement)[0] === $('#item2')[0], 'item2 is focused')
+
+        $(document.activeElement).trigger($.Event('keydown', { which: 38 }))
+        assert.ok($(document.activeElement)[0] === $('#item1')[0], 'item1 is focused')
+        done()
+      })
+    $dropdown.trigger('click')
 
     assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')
   })