diff options
Diffstat (limited to 'js/tests/unit/dropdown.spec.js')
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 56ac4ff494..ea7ddace30 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1458,6 +1458,67 @@ describe('Dropdown', () => { }) }) + it('should be able to identify clicked dropdown, even with multiple dropdowns in the same tag', () => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>', + ' <div id="menu1" class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Dropdown item</a>', + ' </div>', + ' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>', + ' <div id="menu2" class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Dropdown item</a>', + ' </div>', + '</div>' + ].join('') + + const dropdownToggle1 = fixtureEl.querySelector('#dropdown1') + const dropdownToggle2 = fixtureEl.querySelector('#dropdown2') + const dropdownMenu1 = fixtureEl.querySelector('#menu1') + const dropdownMenu2 = fixtureEl.querySelector('#menu2') + const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough() + + dropdownToggle1.click() + expect(spy).toHaveBeenCalledWith(dropdownToggle1) + + dropdownToggle2.click() + expect(spy).toHaveBeenCalledWith(dropdownToggle2) + + dropdownMenu1.click() + expect(spy).toHaveBeenCalledWith(dropdownToggle1) + + dropdownMenu2.click() + expect(spy).toHaveBeenCalledWith(dropdownToggle2) + }) + + it('should be able to show the proper menu, even with multiple dropdowns in the same tag', () => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>', + ' <div id="menu1" class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Dropdown item</a>', + ' </div>', + ' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>', + ' <div id="menu2" class="dropdown-menu">', + ' <a class="dropdown-item" href="#">Dropdown item</a>', + ' </div>', + '</div>' + ].join('') + + const dropdownToggle1 = fixtureEl.querySelector('#dropdown1') + const dropdownToggle2 = fixtureEl.querySelector('#dropdown2') + const dropdownMenu1 = fixtureEl.querySelector('#menu1') + const dropdownMenu2 = fixtureEl.querySelector('#menu2') + + dropdownToggle1.click() + expect(dropdownMenu1).toHaveClass('show') + expect(dropdownMenu2).not.toHaveClass('show') + + dropdownToggle2.click() + expect(dropdownMenu1).not.toHaveClass('show') + expect(dropdownMenu2).toHaveClass('show') + }) + it('should fire hide and hidden event without a clickEvent if event type is not click', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ |