mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Add bs in data attributes

Browse Source 
- Add `bs` in data APIs everywhere
- Update unit tests
This commit is contained in:
Rohit Sharma
2020-07-22 22:33:11 +03:00
committed by XhmikosR
parent fe961c192d
commit 418f17ee2b
76 changed files with 827 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/tests/unit/alert.spec.js
+2 -2
View File
@@ -23,7 +23,7 @@ describe('Alert', () => {
it('should close an alert without instantiating it manually', () => {
fixtureEl.innerHTML = [
'<div class="alert">',
' <button type="button" data-dismiss="alert">x</button>',
' <button type="button" data-bs-dismiss="alert">x</button>',
'</div>'
].join('')
@@ -36,7 +36,7 @@ describe('Alert', () => {
it('should close an alert without instantiating it manually with the parent selector', () => {
fixtureEl.innerHTML = [
'<div class="alert">',
' <button type="button" data-target=".alert" data-dismiss="alert">x</button>',
' <button type="button" data-bs-target=".alert" data-bs-dismiss="alert">x</button>',
'</div>'
].join('')
js/tests/unit/button.spec.js
+7 -7
View File
@@ -27,8 +27,8 @@ describe('Button', () => {
describe('data-api', () => {
it('should toggle active class on click', () => {
fixtureEl.innerHTML = [
'<button class="btn" data-toggle="button">btn</button>',
'<button class="btn testParent" data-toggle="button"><div class="test"></div></button>'
'<button class="btn" data-bs-toggle="button">btn</button>',
'<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>'
].join('')
const btn = fixtureEl.querySelector('.btn')
@@ -53,7 +53,7 @@ describe('Button', () => {
describe('toggle', () => {
it('should toggle aria-pressed', () => {
fixtureEl.innerHTML = '<button class="btn" data-toggle="button" aria-pressed="false"></button>'
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>'
const btnEl = fixtureEl.querySelector('.btn')
const button = new Button(btnEl)
@@ -70,7 +70,7 @@ describe('Button', () => {
describe('dispose', () => {
it('should dispose a button', () => {
fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
const btnEl = fixtureEl.querySelector('.btn')
const button = new Button(btnEl)
@@ -85,7 +85,7 @@ describe('Button', () => {
describe('jQueryInterface', () => {
it('should handle config passed and toggle existing button', () => {
fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
const btnEl = fixtureEl.querySelector('.btn')
const button = new Button(btnEl)
@@ -101,7 +101,7 @@ describe('Button', () => {
})
it('should create new button instance and call toggle', () => {
fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
const btnEl = fixtureEl.querySelector('.btn')
@@ -115,7 +115,7 @@ describe('Button', () => {
})
it('should just create a button instance without calling toggle', () => {
fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
const btnEl = fixtureEl.querySelector('.btn')
js/tests/unit/carousel.spec.js
+26 -26
View File
@@ -313,7 +313,7 @@ describe('Carousel', () => {
Simulator.setType('pointer')
fixtureEl.innerHTML = [
'<div class="carousel" data-interval="false">',
'<div class="carousel" data-bs-interval="false">',
' <div class="carousel-inner">',
' <div id="item" class="carousel-item">',
' <img alt="">',
@@ -357,7 +357,7 @@ describe('Carousel', () => {
Simulator.setType('pointer')
fixtureEl.innerHTML = [
'<div class="carousel" data-interval="false">',
'<div class="carousel" data-bs-interval="false">',
' <div class="carousel-inner">',
' <div id="item" class="carousel-item active">',
' <img alt="">',
@@ -396,7 +396,7 @@ describe('Carousel', () => {
document.documentElement.ontouchstart = () => {}
fixtureEl.innerHTML = [
'<div class="carousel" data-interval="false">',
'<div class="carousel" data-bs-interval="false">',
' <div class="carousel-inner">',
' <div id="item" class="carousel-item">',
' <img alt="">',
@@ -434,7 +434,7 @@ describe('Carousel', () => {
document.documentElement.ontouchstart = () => {}
fixtureEl.innerHTML = [
'<div class="carousel" data-interval="false">',
'<div class="carousel" data-bs-interval="false">',
' <div class="carousel-inner">',
' <div id="item" class="carousel-item active">',
' <img alt="">',
@@ -472,7 +472,7 @@ describe('Carousel', () => {
clearPointerEvents()
document.documentElement.ontouchstart = () => {}
fixtureEl.innerHTML = '<div class="carousel" data-interval="false"></div>'
fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>'
const carouselEl = fixtureEl.querySelector('.carousel')
const carousel = new Carousel(carouselEl)
@@ -660,13 +660,13 @@ describe('Carousel', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <ol class="carousel-indicators">',
' <li data-target="#myCarousel" data-slide-to="0" class="active"></li>',
' <li id="secondIndicator" data-target="#myCarousel" data-slide-to="1"></li>',
' <li data-target="#myCarousel" data-slide-to="2"></li>',
' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>',
' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>',
' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>',
' </ol>',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -689,7 +689,7 @@ describe('Carousel', () => {
it('should not call next when the page is not visible', () => {
fixtureEl.innerHTML = [
'<div style="display: none;">',
' <div class="carousel" data-interval="false"></div>',
' <div class="carousel" data-bs-interval="false"></div>',
'</div>'
].join('')
@@ -878,8 +878,8 @@ describe('Carousel', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active" data-interval="7">item 1</div>',
' <div id="secondItem" class="carousel-item" data-interval="9385">item 2</div>',
' <div class="carousel-item active" data-bs-interval="7">item 1</div>',
' <div id="secondItem" class="carousel-item" data-bs-interval="9385">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -958,7 +958,7 @@ describe('Carousel', () => {
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -985,7 +985,7 @@ describe('Carousel', () => {
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -1010,7 +1010,7 @@ describe('Carousel', () => {
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -1045,7 +1045,7 @@ describe('Carousel', () => {
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-interval="7">item 2</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
'</div>'
@@ -1125,8 +1125,8 @@ describe('Carousel', () => {
})
describe('data-api', () => {
it('should init carousels with data-ride="carousel" on load', () => {
fixtureEl.innerHTML = '<div data-ride="carousel"></div>'
it('should init carousels with data-bs-ride="carousel" on load', () => {
fixtureEl.innerHTML = '<div data-bs-ride="carousel"></div>'
const carouselEl = fixtureEl.querySelector('div')
const loadEvent = createEvent('load')
@@ -1144,8 +1144,8 @@ describe('Carousel', () => {
' <div id="item2" class="carousel-item">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
'</div>'
].join('')
@@ -1160,7 +1160,7 @@ describe('Carousel', () => {
}, 10)
})
it('should create carousel and go to the next slide on click with data-slide-to', done => {
it('should create carousel and go to the next slide on click with data-bs-slide-to', done => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@@ -1168,7 +1168,7 @@ describe('Carousel', () => {
' <div id="item2" class="carousel-item">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
' <div id="next" data-target="#myCarousel" data-slide-to="1"></div>',
' <div id="next" data-bs-target="#myCarousel" data-bs-slide-to="1"></div>',
'</div>'
].join('')
@@ -1191,8 +1191,8 @@ describe('Carousel', () => {
' <div class="carousel-item">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
' <div id="next" class="carousel-control-next" role="button" data-slide="next"></div>',
' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
' <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>',
'</div>'
].join('')
@@ -1211,8 +1211,8 @@ describe('Carousel', () => {
' <div id="item2" class="carousel-item">item 2</div>',
' <div class="carousel-item">item 3</div>',
' </div>',
' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
'</div>'
].join('')
js/tests/unit/collapse.spec.js
+36 -36
View File
@@ -32,7 +32,7 @@ describe('Collapse', () => {
fixtureEl.innerHTML = [
'<div class="my-collapse">',
' <div class="item">',
' <a data-toggle="collapse" href="#">Toggle item</a>',
' <a data-bs-toggle="collapse" href="#">Toggle item</a>',
' <div class="collapse">Lorem ipsum</div>',
' </div>',
'</div>'
@@ -55,7 +55,7 @@ describe('Collapse', () => {
fixtureEl.innerHTML = [
'<div class="my-collapse">',
' <div class="item">',
' <a data-toggle="collapse" href="#">Toggle item</a>',
' <a data-bs-toggle="collapse" href="#">Toggle item</a>',
' <div class="collapse">Lorem ipsum</div>',
' </div>',
'</div>'
@@ -74,7 +74,7 @@ describe('Collapse', () => {
fixtureEl.innerHTML = [
'<div class="my-collapse">',
' <div class="item">',
' <a data-toggle="collapse" href="#">Toggle item</a>',
' <a data-bs-toggle="collapse" href="#">Toggle item</a>',
' <div class="collapse">Lorem ipsum</div>',
' </div>',
'</div>'
@@ -120,15 +120,15 @@ describe('Collapse', () => {
expect(collapse.hide).toHaveBeenCalled()
})
it('should find collapse children if they have collapse class too not only data-parent', done => {
it('should find collapse children if they have collapse class too not only data-bs-parent', done => {
fixtureEl.innerHTML = [
'<div class="my-collapse">',
' <div class="item">',
' <a data-toggle="collapse" href="#">Toggle item 1</a>',
' <a data-bs-toggle="collapse" href="#">Toggle item 1</a>',
' <div id="collapse1" class="collapse show">Lorem ipsum 1</div>',
' </div>',
' <div class="item">',
' <a id="triggerCollapse2" data-toggle="collapse" href="#">Toggle item 2</a>',
' <a id="triggerCollapse2" data-bs-toggle="collapse" href="#">Toggle item 2</a>',
' <div id="collapse2" class="collapse">Lorem ipsum 2</div>',
' </div>',
'</div>'
@@ -376,7 +376,7 @@ describe('Collapse', () => {
describe('data-api', () => {
it('should show multiple collapsed elements', done => {
fixtureEl.innerHTML = [
'<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
'<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',
'<div id="collapse1" class="collapse multi"></div>',
'<div id="collapse2" class="collapse multi"></div>'
].join('')
@@ -398,7 +398,7 @@ describe('Collapse', () => {
it('should hide multiple collapsed elements', done => {
fixtureEl.innerHTML = [
'<a role="button" data-toggle="collapse" href=".multi"></a>',
'<a role="button" data-bs-toggle="collapse" href=".multi"></a>',
'<div id="collapse1" class="collapse multi show"></div>',
'<div id="collapse2" class="collapse multi show"></div>'
].join('')
@@ -420,8 +420,8 @@ describe('Collapse', () => {
it('should remove "collapsed" class from target when collapse is shown', done => {
fixtureEl.innerHTML = [
'<a id="link1" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
'<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
'<a id="link1" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>',
'<a id="link2" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>',
'<div id="test1"></div>'
].join('')
@@ -442,8 +442,8 @@ describe('Collapse', () => {
it('should add "collapsed" class to target when collapse is hidden', done => {
fixtureEl.innerHTML = [
'<a id="link1" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
'<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
'<a id="link1" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>',
'<a id="link2" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>',
'<div id="test1" class="show"></div>'
].join('')
@@ -466,12 +466,12 @@ describe('Collapse', () => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <div class="item">',
' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
' </div>',
' <div class="item">',
' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
' </div>',
'</div>'
].join('')
@@ -499,7 +499,7 @@ describe('Collapse', () => {
it('should not prevent event for input', done => {
fixtureEl.innerHTML = [
'<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1">',
'<input type="checkbox" data-bs-toggle="collapse" data-bs-target="#collapsediv1">',
'<div id="collapsediv1"></div>'
].join('')
@@ -521,14 +521,14 @@ describe('Collapse', () => {
' <div class="row">',
' <div class="col-lg-6">',
' <div class="item">',
' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
' </div>',
' </div>',
' <div class="col-lg-6">',
' <div class="item">',
' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
' </div>',
' </div>',
' </div>',
@@ -569,12 +569,12 @@ describe('Collapse', () => {
it('should allow accordion to target multiple elements', done => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>',
' <a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>',
' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>',
' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>',
' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>',
' <a id="linkTriggerOne" data-bs-toggle="collapse" data-bs-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>',
' <a id="linkTriggerTwo" data-bs-toggle="collapse" data-bs-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>',
' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>',
' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>',
' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>',
'</div>'
].join('')
@@ -647,19 +647,19 @@ describe('Collapse', () => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <div class="item">',
' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
' <div id="nestedAccordion">',
' <div class="item">',
' <a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
' <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
' <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
' </div>',
' </div>',
' </div>',
' </div>',
' <div class="item">',
' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
' </div>',
'</div>'
].join('')
@@ -703,9 +703,9 @@ describe('Collapse', () => {
it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => {
fixtureEl.innerHTML = [
'<a id="trigger1" role="button" data-toggle="collapse" href="#test1"></a>',
'<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>',
'<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>',
'<a id="trigger1" role="button" data-bs-toggle="collapse" href="#test1"></a>',
'<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>',
'<a id="trigger3" role="button" data-bs-toggle="collapse" href=".multi"></a>',
'<div id="test1" class="multi"></div>',
'<div id="test2" class="multi"></div>'
].join('')
js/tests/unit/dom/manipulator.spec.js
+20 -4
View File
@@ -60,14 +60,30 @@ describe('Manipulator', () => {
expect().nothing()
})
it('should get all data attributes', () => {
fixtureEl.innerHTML = '<div data-test="js" data-test2="js2" ></div>'
it('should get all data attributes, without bs prefixed as well', () => {
fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value"></div>'
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttributes(div)).toEqual({
test: 'js',
test2: 'js2'
bsToggle: 'tabs',
bsTarget: '#element',
another: 'value',
toggle: 'tabs',
target: '#element'
})
})
it('should remove just prefixed bs keyword from the attributes and override original attribute with bs prefixed', () => {
fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-toggle="override" data-target-bs="#element" data-in-bs-out="in-between"></div>'
const div = fixtureEl.querySelector('div')
expect(Manipulator.getDataAttributes(div)).toEqual({
bsToggle: 'tabs',
targetBs: '#element',
inBsOut: 'in-between',
toggle: 'tabs'
})
})
})
js/tests/unit/dropdown.spec.js
+106 -106
View File
@@ -39,7 +39,7 @@ describe('Dropdown', () => {
it('should create offset modifier correctly when offset option is a function', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@@ -47,7 +47,7 @@ describe('Dropdown', () => {
].join('')
const getOffset = offsets => offsets
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown, {
offset: getOffset
})
@@ -61,7 +61,7 @@ describe('Dropdown', () => {
it('should create offset modifier correctly when offset option is not a function', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@@ -69,7 +69,7 @@ describe('Dropdown', () => {
].join('')
const myOffset = 7
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown, {
offset: myOffset
})
@@ -80,7 +80,7 @@ describe('Dropdown', () => {
expect(offset.fn).toBeUndefined()
})
it('should add a listener on trigger which do not have data-toggle="dropdown"', () => {
it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn">Dropdown</button>',
@@ -103,14 +103,14 @@ describe('Dropdown', () => {
it('should allow to pass config to popper.js with `popperConfig`', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown, {
popperConfig: {
placement: 'left'
@@ -127,14 +127,14 @@ describe('Dropdown', () => {
it('should toggle a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -150,13 +150,13 @@ describe('Dropdown', () => {
it('should destroy old popper references on toggle', done => {
fixtureEl.innerHTML = [
'<div class="first dropdown">',
' <button class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="firstBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>',
'<div class="second dropdown">',
' <button class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="secondBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@@ -187,7 +187,7 @@ describe('Dropdown', () => {
it('should toggle a dropdown and add/remove event listener on mobile', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@@ -195,7 +195,7 @@ describe('Dropdown', () => {
].join('')
const defaultValueOnTouchStart = document.documentElement.ontouchstart
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -226,14 +226,14 @@ describe('Dropdown', () => {
it('should toggle a dropdown at the right', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu dropdown-menu-right">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -249,14 +249,14 @@ describe('Dropdown', () => {
it('should toggle a dropup', done => {
fixtureEl.innerHTML = [
'<div class="dropup">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropupEl = fixtureEl.querySelector('.dropup')
const dropdown = new Dropdown(btnDropdown)
@@ -272,14 +272,14 @@ describe('Dropdown', () => {
it('should toggle a dropup at the right', done => {
fixtureEl.innerHTML = [
'<div class="dropup">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu dropdown-menu-right">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropupEl = fixtureEl.querySelector('.dropup')
const dropdown = new Dropdown(btnDropdown)
@@ -295,14 +295,14 @@ describe('Dropdown', () => {
it('should toggle a dropright', done => {
fixtureEl.innerHTML = [
'<div class="dropright">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const droprightEl = fixtureEl.querySelector('.dropright')
const dropdown = new Dropdown(btnDropdown)
@@ -318,14 +318,14 @@ describe('Dropdown', () => {
it('should toggle a dropleft', done => {
fixtureEl.innerHTML = [
'<div class="dropleft">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropleftEl = fixtureEl.querySelector('.dropleft')
const dropdown = new Dropdown(btnDropdown)
@@ -341,14 +341,14 @@ describe('Dropdown', () => {
it('should toggle a dropdown with parent reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown, {
reference: 'parent'
@@ -366,14 +366,14 @@ describe('Dropdown', () => {
it('should toggle a dropdown with a dom node reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown, {
reference: fixtureEl
@@ -391,14 +391,14 @@ describe('Dropdown', () => {
it('should toggle a dropdown with a jquery object reference', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown, {
reference: { 0: fixtureEl, jquery: 'jQuery' }
@@ -416,14 +416,14 @@ describe('Dropdown', () => {
it('should not toggle a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button disabled 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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -442,14 +442,14 @@ describe('Dropdown', () => {
it('should not toggle a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle disabled" 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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -468,14 +468,14 @@ describe('Dropdown', () => {
it('should not toggle a dropdown if the menu is shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -494,14 +494,14 @@ describe('Dropdown', () => {
it('should not toggle a dropdown if show event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -526,14 +526,14 @@ describe('Dropdown', () => {
it('should show a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -548,14 +548,14 @@ describe('Dropdown', () => {
it('should not show a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button disabled 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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -574,14 +574,14 @@ describe('Dropdown', () => {
it('should not show a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle disabled" 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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -600,14 +600,14 @@ describe('Dropdown', () => {
it('should not show a dropdown if the menu is shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -626,14 +626,14 @@ describe('Dropdown', () => {
it('should not show a dropdown if show event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -658,14 +658,14 @@ describe('Dropdown', () => {
it('should hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
@@ -681,14 +681,14 @@ describe('Dropdown', () => {
it('should hide a dropdown and destroy popper', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -708,14 +708,14 @@ describe('Dropdown', () => {
it('should not hide a dropdown if the element is disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
@@ -735,14 +735,14 @@ describe('Dropdown', () => {
it('should not hide a dropdown if the element contains .disabled', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
@@ -762,14 +762,14 @@ describe('Dropdown', () => {
it('should not hide a dropdown if the menu is not shown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdown = new Dropdown(btnDropdown)
@@ -788,14 +788,14 @@ describe('Dropdown', () => {
it('should not hide a dropdown if hide event is prevented', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu show">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
const dropdown = new Dropdown(btnDropdown)
@@ -821,14 +821,14 @@ describe('Dropdown', () => {
it('should dispose dropdown', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown)
expect(dropdown._popper).toBeNull()
@@ -844,14 +844,14 @@ describe('Dropdown', () => {
it('should dispose dropdown with popper.js', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown)
dropdown.toggle()
@@ -875,14 +875,14 @@ describe('Dropdown', () => {
it('should call popper.js and detect navbar on update', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown)
dropdown.toggle()
@@ -901,14 +901,14 @@ describe('Dropdown', () => {
it('should just detect navbar on update', () => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(btnDropdown)
spyOn(dropdown, '_detectNavbar')
@@ -924,14 +924,14 @@ describe('Dropdown', () => {
it('should not add class position-static to dropdown if boundary not set', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -945,14 +945,14 @@ describe('Dropdown', () => {
it('should add class position-static to dropdown if boundary not scrollParent', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -966,14 +966,14 @@ describe('Dropdown', () => {
it('should show and hide a dropdown', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
let showEventTriggered = false
let hideEventTriggered = false
@@ -1009,7 +1009,7 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
@@ -1017,7 +1017,7 @@ describe('Dropdown', () => {
'</nav>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
@@ -1032,14 +1032,14 @@ describe('Dropdown', () => {
it('should not use popper.js if display set to static', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' </div>',
'</div>'
].join('')
const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
@@ -1055,14 +1055,14 @@ describe('Dropdown', () => {
it('should remove "show" class if tabbing outside of menu', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <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-toggle="dropdown"]')
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownEl = fixtureEl.querySelector('.dropdown')
dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -1086,7 +1086,7 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <div class="dropdown" id="testmenu">',
' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
' <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' </div>',
@@ -1094,14 +1094,14 @@ describe('Dropdown', () => {
'</div>',
'<div class="btn-group">',
' <button class="btn">Actions</button>',
' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Action 1</a>',
' </div>',
'</div>'
].join('')
const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]')
const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]')
expect(triggerDropdownList.length).toEqual(2)
@@ -1138,21 +1138,21 @@ describe('Dropdown', () => {
it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
' <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' </div>',
'</div>',
'<div class="btn-group">',
' <button class="btn">Actions</button>',
' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Action 1</a>',
' </div>',
'</div>'
].join('')
const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]')
const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]')
expect(triggerDropdownList.length).toEqual(2)
@@ -1197,14 +1197,14 @@ describe('Dropdown', () => {
it('should fire hide and hidden event without a clickEvent if event type is not click', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' </div>',
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('hide.bs.dropdown', e => {
@@ -1229,7 +1229,7 @@ describe('Dropdown', () => {
it('should ignore keyboard events within <input>s and <textarea>s', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' <input type="text">',
@@ -1238,7 +1238,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const input = fixtureEl.querySelector('input')
const textarea = fixtureEl.querySelector('textarea')
@@ -1265,7 +1265,7 @@ describe('Dropdown', () => {
it('should skip disabled element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
' <button class="dropdown-item" type="button" disabled>Disabled button</button>',
@@ -1274,7 +1274,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('shown.bs.dropdown', () => {
@@ -1300,7 +1300,7 @@ describe('Dropdown', () => {
' }',
'</style>',
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
' <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
@@ -1310,7 +1310,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('shown.bs.dropdown', () => {
@@ -1332,7 +1332,7 @@ describe('Dropdown', () => {
it('should focus next/previous element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a id="item1" class="dropdown-item" href="#">A link</a>',
' <a id="item2" class="dropdown-item" href="#">Another link</a>',
@@ -1340,7 +1340,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const item1 = fixtureEl.querySelector('#item1')
const item2 = fixtureEl.querySelector('#item2')
@@ -1370,7 +1370,7 @@ describe('Dropdown', () => {
it('should focus on the first element when using ArrowUp for the first time', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a id="item1" class="dropdown-item" href="#">A link</a>',
' <a id="item2" class="dropdown-item" href="#">Another link</a>',
@@ -1378,7 +1378,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const item1 = fixtureEl.querySelector('#item1')
@@ -1398,14 +1398,14 @@ describe('Dropdown', () => {
it('should not close the dropdown if the user clicks on a text field', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <input type="text">',
' </div>',
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const input = fixtureEl.querySelector('input')
@@ -1425,14 +1425,14 @@ describe('Dropdown', () => {
it('should not close the dropdown if the user clicks on a textarea', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <textarea></textarea>',
' </div>',
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const textarea = fixtureEl.querySelector('textarea')
@@ -1452,7 +1452,7 @@ describe('Dropdown', () => {
it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#sub1">Submenu 1</a>',
' <input type="text">',
@@ -1461,7 +1461,7 @@ describe('Dropdown', () => {
'</div>'
].join('')
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const input = fixtureEl.querySelector('input')
const textarea = fixtureEl.querySelector('textarea')
@@ -1527,7 +1527,7 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = [
'<div class="tabs">',
' <div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#">Secondary link</a>',
' <a class="dropdown-item" href="#">Something else here</a>',
@@ -1538,9 +1538,9 @@ describe('Dropdown', () => {
'</div>'
]
const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdown = new Dropdown(triggerDropdown)
const button = fixtureEl.querySelector('button[data-toggle="dropdown"]')
const button = fixtureEl.querySelector('button[data-bs-toggle="dropdown"]')
spyOn(dropdown, 'toggle')
js/tests/unit/jquery.spec.js
+1 -1
View File
@@ -42,7 +42,7 @@ describe('jQuery', () => {
it('should use jQuery event system', done => {
fixtureEl.innerHTML = [
'<div class="alert">',
' <button type="button" data-dismiss="alert">x</button>',
' <button type="button" data-bs-dismiss="alert">x</button>',
'</div>'
].join('')
js/tests/unit/modal.spec.js
+27 -27
View File
@@ -29,7 +29,7 @@ describe('Modal', () => {
document.body.classList.remove('modal-open')
document.body.removeAttribute('style')
document.body.removeAttribute('data-padding-right')
document.body.removeAttribute('data-bs-padding-right')
document.querySelectorAll('.modal-backdrop')
.forEach(backdrop => {
@@ -67,12 +67,12 @@ describe('Modal', () => {
document.body.style.paddingRight = originalPadding
modalEl.addEventListener('shown.bs.modal', () => {
expect(document.body.getAttribute('data-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-padding-right')
expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
expect(document.body.getAttribute('data-padding-right')).toBeNull()
expect(document.body.getAttribute('data-bs-padding-right')).toBeNull()
expect().nothing()
done()
})
@@ -95,7 +95,7 @@ describe('Modal', () => {
const expectedPadding = originalPadding + modal._getScrollbarWidth()
const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
expect(fixedEl.getAttribute('data-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-padding-right')
expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
modal.toggle()
})
@@ -103,7 +103,7 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
expect(fixedEl.getAttribute('data-padding-right')).toEqual(null, 'data-padding-right should be cleared after closing')
expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
done()
})
@@ -126,7 +126,7 @@ describe('Modal', () => {
const expectedMargin = originalMargin - modal._getScrollbarWidth()
const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.getAttribute('data-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-margin-right')
expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
modal.toggle()
})
@@ -134,7 +134,7 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing')
expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
done()
})
@@ -355,19 +355,19 @@ describe('Modal', () => {
modal.show()
})
it('should close modal when a click occurred on data-dismiss="modal"', done => {
it('should close modal when a click occurred on data-bs-dismiss="modal"', done => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog">',
' <div class="modal-header">',
' <button type="button" data-dismiss="modal"></button>',
' <button type="button" data-bs-dismiss="modal"></button>',
' </div>',
' </div>',
'</div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]')
const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')
const modal = new Modal(modalEl)
spyOn(modal, 'hide').and.callThrough()
@@ -542,7 +542,7 @@ describe('Modal', () => {
})
it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" ><div class="modal-dialog"></div>'
fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" ><div class="modal-dialog"></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -569,7 +569,7 @@ describe('Modal', () => {
})
it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog"></div>'
fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog"></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -596,7 +596,7 @@ describe('Modal', () => {
})
it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"></div>'
fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -627,7 +627,7 @@ describe('Modal', () => {
})
it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -873,12 +873,12 @@ describe('Modal', () => {
describe('data-api', () => {
it('should open modal', done => {
fixtureEl.innerHTML = [
'<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
'<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
@@ -894,13 +894,13 @@ describe('Modal', () => {
it('should not recreate a new modal', done => {
fixtureEl.innerHTML = [
'<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
'<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
spyOn(modal, 'show').and.callThrough()
@@ -914,12 +914,12 @@ describe('Modal', () => {
it('should prevent default when the trigger is <a> or <area>', done => {
fixtureEl.innerHTML = [
'<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
spyOn(Event.prototype, 'preventDefault').and.callThrough()
@@ -938,12 +938,12 @@ describe('Modal', () => {
it('should focus the trigger on hide', done => {
fixtureEl.innerHTML = [
'<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -969,12 +969,12 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not visible', done => {
fixtureEl.innerHTML = [
'<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>',
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal" style="display: none;"></a>',
'<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -1000,12 +1000,12 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not shown', done => {
fixtureEl.innerHTML = [
'<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -1086,7 +1086,7 @@ describe('Modal', () => {
})
it('should should not call show method', () => {
fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog"></div>'
fixtureEl.innerHTML = '<div class="modal" data-bs-show="false"><div class="modal-dialog"></div>'
const div = fixtureEl.querySelector('div')
js/tests/unit/popover.spec.js
+9 -9
View File
@@ -64,7 +64,7 @@ describe('Popover', () => {
describe('show', () => {
it('should show a popover', done => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -120,7 +120,7 @@ describe('Popover', () => {
describe('hide', () => {
it('should hide a popover', done => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -140,7 +140,7 @@ describe('Popover', () => {
describe('jQueryInterface', () => {
it('should create a popover', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@@ -168,7 +168,7 @@ describe('Popover', () => {
})
it('should not re create a popover', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -182,7 +182,7 @@ describe('Popover', () => {
})
it('should throw error on undefined method', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const action = 'undefinedMethod'
@@ -198,7 +198,7 @@ describe('Popover', () => {
})
it('should should call show method', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -214,7 +214,7 @@ describe('Popover', () => {
})
it('should do nothing if dipose is called when a popover do not exist', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@@ -231,7 +231,7 @@ describe('Popover', () => {
describe('getInstance', () => {
it('should return popover instance', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -240,7 +240,7 @@ describe('Popover', () => {
})
it('should return null when there is no popover instance', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
js/tests/unit/scrollspy.spec.js
+1 -1
View File
@@ -641,7 +641,7 @@ describe('ScrollSpy', () => {
describe('event handler', () => {
it('should create scrollspy on window load event', () => {
fixtureEl.innerHTML = '<div data-spy="scroll"></div>'
fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>'
const scrollSpyEl = fixtureEl.querySelector('div')
js/tests/unit/tab.spec.js
+20 -20
View File
@@ -282,17 +282,17 @@ describe('Tab', () => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">',
' <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">',
' <button class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">',
' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">',
' <button class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">',
' <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">',
' <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
' </a>',
' </li>',
@@ -425,7 +425,7 @@ describe('Tab', () => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
' <li class="nav-item" role="presentation"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
' <li class="nav-item" role="presentation"><a id="triggerProfile" data-bs-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -447,13 +447,13 @@ describe('Tab', () => {
it('selected tab should deactivate previous selected link in dropdown', () => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs">',
' <li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>',
' <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>',
' <li class="nav-item"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
' <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
' <li class="nav-item dropdown">',
' <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>',
' <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">Dropdown</a>',
' <div class="dropdown-menu">',
' <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>',
' <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>',
' <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
' <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a>',
' </div>',
' </li>',
'</ul>'
@@ -470,15 +470,15 @@ describe('Tab', () => {
it('should handle nested tabs', done => {
fixtureEl.innerHTML = [
'<nav class="nav nav-tabs" role="tablist">',
' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
' <a id="tab1" href="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
' <a href="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
' <a href="#x-tab3" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
'</nav>',
'<div class="tab-content">',
' <div class="tab-pane" id="x-tab1" role="tabpanel">',
' <nav class="nav nav-tabs" role="tablist">',
' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
' <a href="#nested-tab1" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
' </nav>',
' <div class="tab-content">',
' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>',
@@ -510,8 +510,8 @@ describe('Tab', () => {
it('should not remove fade class if no active pane is present', done => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>',
' <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</a></li>',
' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-bs-toggle="tab" role="tab">Profile</a></li>',
'</ul>',
'<div class="tab-content">',
' <div class="tab-pane fade" id="home" role="tabpanel"></div>',
@@ -548,10 +548,10 @@ describe('Tab', () => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
' </li>',
'</ul>',
'<div class="tab-content">',
@@ -574,10 +574,10 @@ describe('Tab', () => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item" role="presentation">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
' </li>',
'</ul>',
'<div class="tab-content">',
js/tests/unit/toast.spec.js
+11 -11
View File
@@ -43,10 +43,10 @@ describe('Toast', () => {
toast.show()
})
it('should close toast when close element with data-dismiss attribute is set', done => {
it('should close toast when close element with data-bs-dismiss attribute is set', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1" data-autohide="false" data-animation="false">',
' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
' close',
' </button>',
'</div>'
@@ -79,8 +79,8 @@ describe('Toast', () => {
Toast.Default.delay = defaultDelay
fixtureEl.innerHTML = [
'<div class="toast" data-autohide="false" data-animation="false">',
' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
'<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
' close',
' </button>',
'</div>'
@@ -102,7 +102,7 @@ describe('Toast', () => {
describe('show', () => {
it('should auto hide', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1">',
'<div class="toast" data-bs-delay="1">',
' <div class="toast-body">',
' a simple toast',
' </div>',
@@ -122,7 +122,7 @@ describe('Toast', () => {
it('should not add fade class', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1" data-animation="false">',
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
' a simple toast',
' </div>',
@@ -142,7 +142,7 @@ describe('Toast', () => {
it('should not trigger shown if show is prevented', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1" data-animation="false">',
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
' a simple toast',
' </div>',
@@ -202,7 +202,7 @@ describe('Toast', () => {
describe('hide', () => {
it('should allow to hide toast manually', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1" data-autohide="false">',
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
' <div class="toast-body">',
' a simple toast',
' </div>',
@@ -239,7 +239,7 @@ describe('Toast', () => {
it('should not trigger hidden if hide is prevented', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="1" data-animation="false">',
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
' a simple toast',
' </div>',
@@ -289,7 +289,7 @@ describe('Toast', () => {
it('should allow to destroy toast and hide it before that', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-delay="0" data-autohide="false">',
'<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
' <div class="toast-body">',
' a simple toast',
' </div>',
js/tests/unit/tooltip.spec.js
+1 -1
View File
@@ -64,7 +64,7 @@ describe('Tooltip', () => {
describe('constructor', () => {
it('should not take care of disallowed data attributes', () => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-sanitize="false" title="Another tooltip">'
fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl)
js/tests/unit/util/index.spec.js
+11 -11
View File
@@ -24,9 +24,9 @@ describe('Util', () => {
})
describe('getSelectorFromElement', () => {
it('should get selector from data-target', () => {
it('should get selector from data-bs-target', () => {
fixtureEl.innerHTML = [
'<div id="test" data-target=".target"></div>',
'<div id="test" data-bs-target=".target"></div>',
'<div class="target"></div>'
].join('')
@@ -35,7 +35,7 @@ describe('Util', () => {
expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
})
it('should get selector from href if no data-target set', () => {
it('should get selector from href if no data-bs-target set', () => {
fixtureEl.innerHTML = [
'<a id="test" href=".target"></a>',
'<div class="target"></div>'
@@ -46,9 +46,9 @@ describe('Util', () => {
expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
})
it('should get selector from href if data-target equal to #', () => {
it('should get selector from href if data-bs-target equal to #', () => {
fixtureEl.innerHTML = [
'<a id="test" data-target="#" href=".target"></a>',
'<a id="test" data-bs-target="#" href=".target"></a>',
'<div class="target"></div>'
].join('')
@@ -75,9 +75,9 @@ describe('Util', () => {
})
describe('getElementFromSelector', () => {
it('should get element from data-target', () => {
it('should get element from data-bs-target', () => {
fixtureEl.innerHTML = [
'<div id="test" data-target=".target"></div>',
'<div id="test" data-bs-target=".target"></div>',
'<div class="target"></div>'
].join('')
@@ -86,7 +86,7 @@ describe('Util', () => {
expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
})
it('should get element from href if no data-target set', () => {
it('should get element from href if no data-bs-target set', () => {
fixtureEl.innerHTML = [
'<a id="test" href=".target"></a>',
'<div class="target"></div>'
@@ -380,13 +380,13 @@ describe('Util', () => {
expect(Util.getjQuery()).toEqual(fakejQuery)
})
it('should not return jQuery object when present if data-no-jquery', () => {
document.body.setAttribute('data-no-jquery', '')
it('should not return jQuery object when present if data-bs-no-jquery', () => {
document.body.setAttribute('data-bs-no-jquery', '')
expect(window.jQuery).toEqual(fakejQuery)
expect(Util.getjQuery()).toEqual(null)
document.body.removeAttribute('data-no-jquery')
document.body.removeAttribute('data-bs-no-jquery')
})
it('should not return jQuery if not present', () => {