diff options
author | Siju Samson <sijusamson@gmail.com> | 2021-02-03 23:03:21 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-03 23:03:21 +0300 |
commit | b376a3d80d3ce7a9106bf42b890167ecc992f912 (patch) | |
tree | 8cd16f05fd2c33a955f9c1298fdbfb9d6237d42f /js/tests | |
parent | 2a9d72133d52af1ca72944f1d19474957b54d618 (diff) |
Fix dropdown keys to open menu (#32750)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'js/tests')
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index bb137efed8..47775678f8 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1626,4 +1626,52 @@ describe('Dropdown', () => { expect(Dropdown.getInstance(div)).toEqual(null) }) }) + + it('should open dropdown when pressing keydown or keyup', done => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>', + ' <button class="dropdown-item" type="button" disabled>Disabled button</button>', + ' <a id="item1" class="dropdown-item" href="#">Another link</a>', + ' </div>', + '</div>' + ].join('') + + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') + const dropdown = fixtureEl.querySelector('.dropdown') + + const keydown = createEvent('keydown') + keydown.key = 'ArrowDown' + + const keyup = createEvent('keyup') + keyup.key = 'ArrowUp' + + const handleArrowDown = () => { + expect(triggerDropdown.classList.contains('show')).toEqual(true) + expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true') + setTimeout(() => { + dropdown.hide() + keydown.key = 'ArrowUp' + triggerDropdown.dispatchEvent(keyup) + }, 20) + } + + const handleArrowUp = () => { + expect(triggerDropdown.classList.contains('show')).toEqual(true) + expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true') + done() + } + + dropdown.addEventListener('shown.bs.dropdown', event => { + if (event.target.key === 'ArrowDown') { + handleArrowDown() + } else { + handleArrowUp() + } + }) + + triggerDropdown.dispatchEvent(keydown) + }) }) |