mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +02:00
Code Issues Releases Wiki Activity

Tab.js: Fixes on click handling (#33586)

Browse Source 
* use prevent default only if triggered by anchor
* disable auto-initialization if trigger is disabled
This commit is contained in:
GeoSot
2021-04-20 08:26:58 +03:00
committed by GitHub
parent b59b75bc55
commit 0bbe45cd97
2 changed files with 77 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
js/tests/unit/tab.spec.js
View File

@@ -198,58 +198,6 @@ describe('Tab', () => {
}, 30)
})
it('should not fire shown when tab has disabled attribute', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
' <div class="tab-pane" id="profile" role="tabpanel"></div>',
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('button[disabled]')
const tab = new Tab(triggerDisabled)
triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})
tab.show()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})
it('should not fire shown when tab has disabled class', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab" aria-selected="true">Home</a></li>',
' <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
' <div class="tab-pane" id="profile" role="tabpanel"></div>',
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('a.disabled')
const tab = new Tab(triggerDisabled)
triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})
tab.show()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})
it('show and shown events should reference correct relatedTarget', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
@@ -695,5 +643,74 @@ describe('Tab', () => {
secondNavEl.click()
})
it('should prevent default when the trigger is <a> or <area>', done => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><a type="button" href="#test" class="active" role="tab" data-bs-toggle="tab">Home</a></li>',
' <li><a type="button" href="#test2" role="tab" data-bs-toggle="tab">Home</a></li>',
'</ul>'
].join('')
const tabEl = fixtureEl.querySelector('[href="#test2"]')
spyOn(Event.prototype, 'preventDefault').and.callThrough()
tabEl.addEventListener('shown.bs.tab', () => {
expect(tabEl.classList.contains('active')).toEqual(true)
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
})
tabEl.click()
})
it('should not fire shown when tab has disabled attribute', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
' <li class="nav-item" role="presentation"><button type="button" data-bs-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
' <div class="tab-pane" id="profile" role="tabpanel"></div>',
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('button[disabled]')
triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})
triggerDisabled.click()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})
it('should not fire shown when tab has disabled class', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab" aria-selected="true">Home</a></li>',
' <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
' <div class="tab-pane" id="profile" role="tabpanel"></div>',
'</div>'
].join('')
const triggerDisabled = fixtureEl.querySelector('a.disabled')
triggerDisabled.addEventListener('shown.bs.tab', () => {
throw new Error('should not trigger shown event')
})
triggerDisabled.click()
setTimeout(() => {
expect().nothing()
done()
}, 30)
})
})
})