diff options
Diffstat (limited to 'js/tests/unit/tab.spec.js')
-rw-r--r-- | js/tests/unit/tab.spec.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 4b8fb62de6..e6225b23db 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -548,6 +548,72 @@ describe('Tab', () => { expect(Event.prototype.stopPropagation).toHaveBeenCalledTimes(2) expect(Event.prototype.preventDefault).toHaveBeenCalledTimes(2) }) + + it('if keydown event is right arrow and next element is disabled', () => { + fixtureEl.innerHTML = [ + '<div class="nav">', + ' <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>', + ' <span id="tab2" class="nav-link" data-bs-toggle="tab" disabled></span>', + ' <span id="tab3" class="nav-link disabled" data-bs-toggle="tab"></span>', + ' <span id="tab4" class="nav-link" data-bs-toggle="tab"></span>', + '</div>' + ].join('') + + const tabEl = fixtureEl.querySelector('#tab1') + const tabEl2 = fixtureEl.querySelector('#tab2') + const tabEl3 = fixtureEl.querySelector('#tab3') + const tabEl4 = fixtureEl.querySelector('#tab4') + const tab = new Tab(tabEl) + const tab2 = new Tab(tabEl2) + const tab3 = new Tab(tabEl3) + const tab4 = new Tab(tabEl4) + spyOn(tab, 'show').and.callThrough() + spyOn(tab2, 'show').and.callThrough() + spyOn(tab3, 'show').and.callThrough() + spyOn(tab4, 'show').and.callThrough() + + const keydown = createEvent('keydown') + keydown.key = 'ArrowRight' + + tabEl.dispatchEvent(keydown) + expect(tab.show).not.toHaveBeenCalled() + expect(tab2.show).not.toHaveBeenCalled() + expect(tab3.show).not.toHaveBeenCalled() + expect(tab4.show).toHaveBeenCalledTimes(1) + }) + + it('if keydown event is left arrow and next element is disabled', () => { + fixtureEl.innerHTML = [ + '<div class="nav">', + ' <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>', + ' <span id="tab2" class="nav-link" data-bs-toggle="tab" disabled></span>', + ' <span id="tab3" class="nav-link disabled" data-bs-toggle="tab"></span>', + ' <span id="tab4" class="nav-link" data-bs-toggle="tab"></span>', + '</div>' + ].join('') + + const tabEl = fixtureEl.querySelector('#tab1') + const tabEl2 = fixtureEl.querySelector('#tab2') + const tabEl3 = fixtureEl.querySelector('#tab3') + const tabEl4 = fixtureEl.querySelector('#tab4') + const tab = new Tab(tabEl) + const tab2 = new Tab(tabEl2) + const tab3 = new Tab(tabEl3) + const tab4 = new Tab(tabEl4) + spyOn(tab, 'show').and.callThrough() + spyOn(tab2, 'show').and.callThrough() + spyOn(tab3, 'show').and.callThrough() + spyOn(tab4, 'show').and.callThrough() + + const keydown = createEvent('keydown') + keydown.key = 'ArrowLeft' + + tabEl4.dispatchEvent(keydown) + expect(tab4.show).not.toHaveBeenCalled() + expect(tab3.show).not.toHaveBeenCalled() + expect(tab2.show).not.toHaveBeenCalled() + expect(tab.show).toHaveBeenCalledTimes(1) + }) }) describe('jQueryInterface', () => { |