diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-08-06 07:58:36 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-08-06 07:58:36 +0000 |
commit | 548342184e2173d6f39aba2462196ff8b397db8f (patch) | |
tree | 995bd2844c5f4e453bdd21d27ff0417af1c910c5 /js/tests | |
parent | Adding upstream version 5.3.0+dfsg. (diff) | |
download | bootstrap-html-upstream/5.3.1+dfsg.tar.xz bootstrap-html-upstream/5.3.1+dfsg.zip |
Adding upstream version 5.3.1+dfsg.upstream/5.3.1+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'js/tests')
-rw-r--r-- | js/tests/unit/tab.spec.js | 112 | ||||
-rw-r--r-- | js/tests/visual/tab.html | 4 |
2 files changed, 114 insertions, 2 deletions
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 84690fc..007addd 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -630,6 +630,58 @@ describe('Tab', () => { expect(spyPrevent).toHaveBeenCalledTimes(2) }) + it('if keydown event is Home, handle it', () => { + 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"></span>', + ' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>', + '</div>' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab3 = new Tab(tabEl3) + tab3.show() + + const spyShown = jasmine.createSpy() + tabEl1.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'Home' + + tabEl3.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + + it('if keydown event is End, handle it', () => { + 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"></span>', + ' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>', + '</div>' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab1 = new Tab(tabEl1) + tab1.show() + + const spyShown = jasmine.createSpy() + tabEl3.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'End' + + tabEl1.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + it('if keydown event is right arrow and next element is disabled', () => { fixtureEl.innerHTML = [ '<div class="nav">', @@ -711,6 +763,66 @@ describe('Tab', () => { expect(spyFocus2).not.toHaveBeenCalled() expect(spyFocus1).toHaveBeenCalledTimes(1) }) + + it('if keydown event is Home and first element is disabled', () => { + fixtureEl.innerHTML = [ + '<div class="nav">', + ' <span id="tab1" class="nav-link disabled" data-bs-toggle="tab" disabled></span>', + ' <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>', + ' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>', + '</div>' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl2 = fixtureEl.querySelector('#tab2') + const tabEl3 = fixtureEl.querySelector('#tab3') + const tab3 = new Tab(tabEl3) + + tab3.show() + + const spyShown1 = jasmine.createSpy() + const spyShown2 = jasmine.createSpy() + tabEl1.addEventListener('shown.bs.tab', spyShown1) + tabEl2.addEventListener('shown.bs.tab', spyShown2) + + const keydown = createEvent('keydown') + keydown.key = 'Home' + + tabEl3.dispatchEvent(keydown) + + expect(spyShown1).not.toHaveBeenCalled() + expect(spyShown2).toHaveBeenCalled() + }) + + it('if keydown event is End and last 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"></span>', + ' <span id="tab3" class="nav-link" data-bs-toggle="tab" disabled></span>', + '</div>' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl2 = fixtureEl.querySelector('#tab2') + const tabEl3 = fixtureEl.querySelector('#tab3') + const tab1 = new Tab(tabEl1) + + tab1.show() + + const spyShown2 = jasmine.createSpy() + const spyShown3 = jasmine.createSpy() + tabEl2.addEventListener('shown.bs.tab', spyShown2) + tabEl3.addEventListener('shown.bs.tab', spyShown3) + + const keydown = createEvent('keydown') + keydown.key = 'End' + + tabEl1.dispatchEvent(keydown) + + expect(spyShown3).not.toHaveBeenCalled() + expect(spyShown2).toHaveBeenCalled() + }) }) describe('jQueryInterface', () => { diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index 4cbc86c..a424175 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -161,12 +161,12 @@ <h4>Tabs with nav and using links (with fade)</h4> <nav> - <div class="nav nav-pills" id="nav-tab" role="tablist"> + <div class="nav nav-pills" id="nav-tab" role="tablist"> <a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a> - <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a> + <a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a> </div> </nav> |