diff options
author | Casey Holzer <caseyh@snapappointments.com> | 2021-01-06 04:07:43 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2021-03-23 16:56:28 +0300 |
commit | 16bc47da3c5296ee7d39b112831d557732fdda95 (patch) | |
tree | e645a45448fe31009e2e3c4fba6b5c494107d40c /js/tests/unit/dropdown.spec.js | |
parent | 9667438c1e8544b829b08c68d4ce1f36305297c8 (diff) |
Allow data-toggle="dropdown" and form click events to bubble
* remove stopPropagation from button click event
* test for delegated click events
* ensure button children can open menu
* test to ensure clicking button opens the menu
* check current element and parents
* allow dropdown form click events to bubble
Diffstat (limited to 'js/tests/unit/dropdown.spec.js')
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 51 |
1 files changed, 49 insertions, 2 deletions
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index d6fdaca5ef..ad51d487bf 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1020,13 +1020,13 @@ describe('Dropdown', () => { showEventTriggered = true }) - btnDropdown.addEventListener('shown.bs.dropdown', e => { + btnDropdown.addEventListener('shown.bs.dropdown', e => setTimeout(() => { expect(btnDropdown.classList.contains('show')).toEqual(true) expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true') expect(showEventTriggered).toEqual(true) expect(e.relatedTarget).toEqual(btnDropdown) document.body.click() - }) + })) btnDropdown.addEventListener('hide.bs.dropdown', () => { hideEventTriggered = true @@ -1783,4 +1783,51 @@ describe('Dropdown', () => { triggerDropdown.dispatchEvent(keydown) }) + + it('should allow `data-bs-toggle="dropdown"` click events to bubble up', () => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Secondary link</a>', + ' </div>', + '</div>' + ].join('') + + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') + const clickListener = jasmine.createSpy('clickListener') + const delegatedClickListener = jasmine.createSpy('delegatedClickListener') + + btnDropdown.addEventListener('click', clickListener) + document.addEventListener('click', delegatedClickListener) + + btnDropdown.click() + + expect(clickListener).toHaveBeenCalled() + expect(delegatedClickListener).toHaveBeenCalled() + }) + + it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', done => { + fixtureEl.innerHTML = [ + '<div class="container">', + ' <div class="dropdown">', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"><span id="childElement">Dropdown</span></button>', + ' <div class="dropdown-menu">', + ' <a class="dropdown-item" href="#subMenu">Sub menu</a>', + ' </div>', + ' </div>', + '</div>' + ].join('') + + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') + const childElement = fixtureEl.querySelector('#childElement') + + btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => { + expect(btnDropdown.classList.contains('show')).toEqual(true) + expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true') + done() + })) + + childElement.click() + }) }) |