rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

tests: replace 'done' callback with 'Promise' to fix deprecation errors (#35659)

Browse Source 
Reference:

https://jasmine.github.io/tutorials/async

'DEPRECATION: An asynchronous function called its 'done' callback more than once. This is a bug in the spec, beforeAll, beforeEach, afterAll, or afterEach function in question. This will be treated as an error in a future version. See<https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#deprecations-due-to-calling-done-multiple-times> for more information.
This commit is contained in:
GeoSot 2022-01-30 14:30:04 +02:00 committed by GitHub
parent d092817059
commit aa650f0f1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 7154 additions and 6571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/tests/README.md
View File

@ -50,7 +50,8 @@ describe('getInstance', () => {
})
// Asynchronous test
it('should show a tooltip without the animation', done => {
it('should show a tooltip without the animation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
const tooltipEl = fixtureEl.querySelector('a')
@ -63,9 +64,10 @@ it('should show a tooltip without the animation', done => {
expect(tip).not.toBeNull()
expect(tip.classList.contains('fade')).toEqual(false)
done()
resolve()
})
tooltip.show()
})
})
```

18
js/tests/unit/alert.spec.js
View File

@ -63,7 +63,8 @@ describe('Alert', () => {
})
describe('close', () => {
it('should close an alert', done => {
it('should close an alert', () => {
return new Promise(resolve => {
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
fixtureEl.innerHTML = '<div class="alert"></div>'
@ -73,13 +74,15 @@ describe('Alert', () => {
alertEl.addEventListener('closed.bs.alert', () => {
expect(document.querySelectorAll('.alert')).toHaveSize(0)
expect(spy).not.toHaveBeenCalled()
done()
resolve()
})
alert.close()
})
})
it('should close alert with fade class', done => {
it('should close alert with fade class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="alert fade"></div>'
const alertEl = document.querySelector('.alert')
@ -91,13 +94,15 @@ describe('Alert', () => {
alertEl.addEventListener('closed.bs.alert', () => {
expect(document.querySelectorAll('.alert')).toHaveSize(0)
done()
resolve()
})
alert.close()
})
})
it('should not remove alert if close event is prevented', done => {
it('should not remove alert if close event is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="alert"></div>'
const getAlert = () => document.querySelector('.alert')
@ -108,7 +113,7 @@ describe('Alert', () => {
event.preventDefault()
setTimeout(() => {
expect(getAlert()).not.toBeNull()
done()
resolve()
}, 10)
})
@ -119,6 +124,7 @@ describe('Alert', () => {
alert.close()
})
})
})
describe('dispose', () => {
it('should dispose an alert', () => {

142
js/tests/unit/carousel.spec.js
View File

@ -63,7 +63,8 @@ describe('Carousel', () => {
expect(carouselByElement._element).toEqual(carouselEl)
})
it('should go to next item if right arrow key is pressed', done => {
it('should go to next item if right arrow key is pressed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -84,7 +85,7 @@ describe('Carousel', () => {
carouselEl.addEventListener('slid.bs.carousel', () => {
expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))
expect(carousel._keydown).toHaveBeenCalled()
done()
resolve()
})
const keydown = createEvent('keydown')
@ -92,8 +93,10 @@ describe('Carousel', () => {
carouselEl.dispatchEvent(keydown)
})
})
it('should go to previous item if left arrow key is pressed', done => {
it('should go to previous item if left arrow key is pressed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -114,7 +117,7 @@ describe('Carousel', () => {
carouselEl.addEventListener('slid.bs.carousel', () => {
expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item1'))
expect(carousel._keydown).toHaveBeenCalled()
done()
resolve()
})
const keydown = createEvent('keydown')
@ -122,8 +125,10 @@ describe('Carousel', () => {
carouselEl.dispatchEvent(keydown)
})
})
it('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', done => {
it('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -144,7 +149,7 @@ describe('Carousel', () => {
carouselEl.addEventListener('keydown', event => {
expect(carousel._keydown).toHaveBeenCalled()
expect(event.defaultPrevented).toBeFalse()
done()
resolve()
})
const keydown = createEvent('keydown')
@ -152,6 +157,7 @@ describe('Carousel', () => {
carouselEl.dispatchEvent(keydown)
})
})
it('should ignore keyboard events within <input>s and <textarea>s', () => {
fixtureEl.innerHTML = [
@ -222,7 +228,8 @@ describe('Carousel', () => {
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
})
it('should wrap around from end to start when wrap option is true', done => {
it('should wrap around from end to start when wrap option is true', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -254,14 +261,16 @@ describe('Carousel', () => {
// carousel wrapped around and slid from 3rd to 1st slide
expect(activeId).toEqual('one')
expect(event.from + 1).toEqual(3)
done()
resolve()
}
})
carousel.next()
})
})
it('should stay at the start when the prev method is called and wrap is false', done => {
it('should stay at the start when the prev method is called and wrap is false', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -284,9 +293,10 @@ describe('Carousel', () => {
setTimeout(() => {
expect(firstElement).toHaveClass('active')
done()
resolve()
}, 10)
})
})
it('should not add touch event listeners if touch = false', () => {
fixtureEl.innerHTML = '<div></div>'
@ -335,10 +345,11 @@ describe('Carousel', () => {
expect(carousel._addTouchEventListeners).toHaveBeenCalled()
})
it('should allow swiperight and call _slide (prev) with pointer events', done => {
it('should allow swiperight and call _slide (prev) with pointer events', () => {
return new Promise(resolve => {
if (!supportPointerEvent) {
expect().nothing()
done()
resolve()
return
}
@ -371,7 +382,7 @@ describe('Carousel', () => {
expect(event.direction).toEqual('right')
stylesCarousel.remove()
delete document.documentElement.ontouchstart
done()
resolve()
})
Simulator.gestures.swipe(carouselEl, {
@ -379,11 +390,13 @@ describe('Carousel', () => {
deltaY: 0
})
})
})
it('should allow swipeleft and call next with pointer events', done => {
it('should allow swipeleft and call next with pointer events', () => {
return new Promise(resolve => {
if (!supportPointerEvent) {
expect().nothing()
done()
resolve()
return
}
@ -416,7 +429,7 @@ describe('Carousel', () => {
expect(event.direction).toEqual('left')
stylesCarousel.remove()
delete document.documentElement.ontouchstart
done()
resolve()
})
Simulator.gestures.swipe(carouselEl, {
@ -425,8 +438,10 @@ describe('Carousel', () => {
deltaY: 0
})
})
})
it('should allow swiperight and call _slide (prev) with touch events', done => {
it('should allow swiperight and call _slide (prev) with touch events', () => {
return new Promise(resolve => {
Simulator.setType('touch')
clearPointerEvents()
document.documentElement.ontouchstart = noop
@ -456,7 +471,7 @@ describe('Carousel', () => {
expect(event.direction).toEqual('right')
delete document.documentElement.ontouchstart
restorePointerEvents()
done()
resolve()
})
Simulator.gestures.swipe(carouselEl, {
@ -464,8 +479,10 @@ describe('Carousel', () => {
deltaY: 0
})
})
})
it('should allow swipeleft and call _slide (next) with touch events', done => {
it('should allow swipeleft and call _slide (next) with touch events', () => {
return new Promise(resolve => {
Simulator.setType('touch')
clearPointerEvents()
document.documentElement.ontouchstart = noop
@ -495,7 +512,7 @@ describe('Carousel', () => {
expect(event.direction).toEqual('left')
delete document.documentElement.ontouchstart
restorePointerEvents()
done()
resolve()
})
Simulator.gestures.swipe(carouselEl, {
@ -504,8 +521,10 @@ describe('Carousel', () => {
deltaY: 0
})
})
})
it('should not slide when swiping and carousel is sliding', done => {
it('should not slide when swiping and carousel is sliding', () => {
return new Promise(resolve => {
Simulator.setType('touch')
clearPointerEvents()
document.documentElement.ontouchstart = noop
@ -544,11 +563,13 @@ describe('Carousel', () => {
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
delete document.documentElement.ontouchstart
restorePointerEvents()
done()
resolve()
}, 300)
})
})
it('should not allow pinch with touch events', done => {
it('should not allow pinch with touch events', () => {
return new Promise(resolve => {
Simulator.setType('touch')
clearPointerEvents()
document.documentElement.ontouchstart = noop
@ -567,11 +588,13 @@ describe('Carousel', () => {
restorePointerEvents()
delete document.documentElement.ontouchstart
expect(carousel._swipeHelper._deltaX).toEqual(0)
done()
resolve()
})
})
})
it('should call pause method on mouse over with pause equal to hover', done => {
it('should call pause method on mouse over with pause equal to hover', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="carousel"></div>'
const carouselEl = fixtureEl.querySelector('.carousel')
@ -584,11 +607,13 @@ describe('Carousel', () => {
setTimeout(() => {
expect(carousel.pause).toHaveBeenCalled()
done()
resolve()
}, 10)
})
})
it('should call cycle on mouse out with pause equal to hover', done => {
it('should call cycle on mouse out with pause equal to hover', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="carousel"></div>'
const carouselEl = fixtureEl.querySelector('.carousel')
@ -601,10 +626,11 @@ describe('Carousel', () => {
setTimeout(() => {
expect(carousel.cycle).toHaveBeenCalled()
done()
resolve()
}, 10)
})
})
})
describe('next', () => {
it('should not slide if the carousel is sliding', () => {
@ -621,7 +647,8 @@ describe('Carousel', () => {
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
})
it('should not fire slid when slide is prevented', done => {
it('should not fire slid when slide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const carouselEl = fixtureEl.querySelector('div')
@ -631,7 +658,7 @@ describe('Carousel', () => {
const doneTest = () => {
setTimeout(() => {
expect(slidEvent).toBeFalse()
done()
resolve()
}, 20)
}
@ -646,8 +673,10 @@ describe('Carousel', () => {
carousel.next()
})
})
it('should fire slide event with: direction, relatedTarget, from and to', done => {
it('should fire slide event with: direction, relatedTarget, from and to', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -675,14 +704,16 @@ describe('Carousel', () => {
const onSlide2 = event => {
expect(event.direction).toEqual('right')
done()
resolve()
}
carouselEl.addEventListener('slide.bs.carousel', onSlide)
carousel.next()
})
})
it('should fire slid event with: direction, relatedTarget, from and to', done => {
it('should fire slid event with: direction, relatedTarget, from and to', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -710,12 +741,13 @@ describe('Carousel', () => {
const onSlid2 = event => {
expect(event.direction).toEqual('right')
done()
resolve()
}
carouselEl.addEventListener('slid.bs.carousel', onSlid)
carousel.next()
})
})
it('should update the active element to the next item before sliding', () => {
fixtureEl.innerHTML = [
@ -737,7 +769,8 @@ describe('Carousel', () => {
expect(carousel._activeElement).toEqual(secondItemEl)
})
it('should update indicators if present', done => {
it('should update indicators if present', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-indicators">',
@ -763,11 +796,12 @@ describe('Carousel', () => {
expect(firstIndicator.hasAttribute('aria-current')).toBeFalse()
expect(secondIndicator).toHaveClass('active')
expect(secondIndicator.getAttribute('aria-current')).toEqual('true')
done()
resolve()
})
carousel.next()
})
})
it('should call next()/prev() instance methods when clicking the respective direction buttons', () => {
fixtureEl.innerHTML = [
@ -1018,7 +1052,8 @@ describe('Carousel', () => {
})
describe('to', () => {
it('should go directly to the provided index', done => {
it('should go directly to the provided index', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1038,11 +1073,13 @@ describe('Carousel', () => {
carouselEl.addEventListener('slid.bs.carousel', () => {
expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item3'))
done()
resolve()
})
})
})
it('should return to a previous slide if the provided index is lower than the current', done => {
it('should return to a previous slide if the provided index is lower than the current', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1062,7 +1099,8 @@ describe('Carousel', () => {
carouselEl.addEventListener('slid.bs.carousel', () => {
expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))
done()
resolve()
})
})
})
@ -1118,7 +1156,8 @@ describe('Carousel', () => {
expect(carousel.cycle).toHaveBeenCalled()
})
it('should wait before performing to if a slide is sliding', done => {
it('should wait before performing to if a slide is sliding', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1147,7 +1186,8 @@ describe('Carousel', () => {
setTimeout(() => {
expect(carousel.to).toHaveBeenCalledWith(1)
done()
resolve()
})
})
})
})
@ -1421,7 +1461,8 @@ describe('Carousel', () => {
expect(Carousel.getInstance(carouselEl)).not.toBeNull()
})
it('should create carousel and go to the next slide on click (with real button controls)', done => {
it('should create carousel and go to the next slide on click (with real button controls)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1441,11 +1482,13 @@ describe('Carousel', () => {
setTimeout(() => {
expect(item2).toHaveClass('active')
done()
resolve()
}, 10)
})
})
it('should create carousel and go to the next slide on click (using links as controls)', done => {
it('should create carousel and go to the next slide on click (using links as controls)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1465,11 +1508,13 @@ describe('Carousel', () => {
setTimeout(() => {
expect(item2).toHaveClass('active')
done()
resolve()
}, 10)
})
})
it('should create carousel and go to the next slide on click with data-bs-slide-to', done => {
it('should create carousel and go to the next slide on click with data-bs-slide-to', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <div class="carousel-inner">',
@ -1488,9 +1533,10 @@ describe('Carousel', () => {
setTimeout(() => {
expect(item2).toHaveClass('active')
done()
resolve()
}, 10)
})
})
it('should do nothing if no selector on click on arrows', () => {
fixtureEl.innerHTML = [

120
js/tests/unit/collapse.spec.js
View File

@ -134,7 +134,8 @@ describe('Collapse', () => {
expect(collapse.hide).toHaveBeenCalled()
})
it('should find collapse children if they have collapse class too not only data-bs-parent', done => {
it('should find collapse children if they have collapse class too not only data-bs-parent', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="my-collapse">',
' <div class="item">',
@ -161,12 +162,13 @@ describe('Collapse', () => {
collapseEl2.addEventListener('shown.bs.collapse', () => {
expect(collapseEl2).toHaveClass('show')
expect(collapseEl1).not.toHaveClass('show')
done()
resolve()
})
collapseList[1].toggle()
})
})
})
describe('show', () => {
it('should do nothing if is transitioning', () => {
@ -200,7 +202,8 @@ describe('Collapse', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
it('should show a collapsed element', done => {
it('should show a collapsed element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="collapse" style="height: 0px;"></div>'
const collapseEl = fixtureEl.querySelector('div')
@ -214,13 +217,15 @@ describe('Collapse', () => {
collapseEl.addEventListener('shown.bs.collapse', () => {
expect(collapseEl).toHaveClass('show')
expect(collapseEl.style.height).toEqual('')
done()
resolve()
})
collapse.show()
})
})
it('should show a collapsed element on width', done => {
it('should show a collapsed element on width', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="collapse collapse-horizontal" style="width: 0px;"></div>'
const collapseEl = fixtureEl.querySelector('div')
@ -234,13 +239,15 @@ describe('Collapse', () => {
collapseEl.addEventListener('shown.bs.collapse', () => {
expect(collapseEl).toHaveClass('show')
expect(collapseEl.style.width).toEqual('')
done()
resolve()
})
collapse.show()
})
})
it('should collapse only the first collapse', done => {
it('should collapse only the first collapse', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="card" id="accordion1">',
' <div id="collapse1" class="collapse"></div>',
@ -259,13 +266,15 @@ describe('Collapse', () => {
el1.addEventListener('shown.bs.collapse', () => {
expect(el1).toHaveClass('show')
expect(el2).toHaveClass('show')
done()
resolve()
})
collapse.show()
})
})
it('should be able to handle toggling of other children siblings', done => {
it('should be able to handle toggling of other children siblings', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="parentGroup" class="accordion">',
' <div id="parentHeader" class="accordion-header">',
@ -317,13 +326,15 @@ describe('Collapse', () => {
childCollapseEl2.addEventListener('shown.bs.collapse', () => {
expect(childCollapseEl2).toHaveClass('show')
expect(childCollapseEl1).not.toHaveClass('show')
done()
resolve()
})
parentBtn.click()
})
})
it('should not change tab tabpanels descendants on accordion', done => {
it('should not change tab tabpanels descendants on accordion', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="accordion" id="accordionExample">',
' <div class="accordion-item">',
@ -363,7 +374,7 @@ describe('Collapse', () => {
expect(activeTabPane).toHaveClass('show')
times++
if (times === 2) {
done()
resolve()
}
collapse.hide()
@ -371,8 +382,10 @@ describe('Collapse', () => {
collapse.show()
})
})
it('should not fire shown when show is prevented', done => {
it('should not fire shown when show is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="collapse"></div>'
const collapseEl = fixtureEl.querySelector('div')
@ -383,7 +396,7 @@ describe('Collapse', () => {
const expectEnd = () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
}
@ -399,6 +412,7 @@ describe('Collapse', () => {
collapse.show()
})
})
})
describe('hide', () => {
it('should do nothing if is transitioning', () => {
@ -432,7 +446,8 @@ describe('Collapse', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
it('should hide a collapsed element', done => {
it('should hide a collapsed element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="collapse show"></div>'
const collapseEl = fixtureEl.querySelector('div')
@ -443,13 +458,15 @@ describe('Collapse', () => {
collapseEl.addEventListener('hidden.bs.collapse', () => {
expect(collapseEl).not.toHaveClass('show')
expect(collapseEl.style.height).toEqual('')
done()
resolve()
})
collapse.hide()
})
})
it('should not fire hidden when hide is prevented', done => {
it('should not fire hidden when hide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="collapse show"></div>'
const collapseEl = fixtureEl.querySelector('div')
@ -460,7 +477,7 @@ describe('Collapse', () => {
const expectEnd = () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
}
@ -476,6 +493,7 @@ describe('Collapse', () => {
collapse.hide()
})
})
})
describe('dispose', () => {
it('should destroy a collapse', () => {
@ -495,7 +513,8 @@ describe('Collapse', () => {
})
describe('data-api', () => {
it('should prevent url change if click on nested elements', done => {
it('should prevent url change if click on nested elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">',
' <span id="nested"></span>',
@ -512,13 +531,15 @@ describe('Collapse', () => {
expect(event.target.isEqualNode(nestedTriggerEl)).toBeTrue()
expect(event.delegateTarget.isEqualNode(triggerEl)).toBeTrue()
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
resolve()
})
nestedTriggerEl.click()
})
})
it('should show multiple collapsed elements', done => {
it('should show multiple collapsed elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',
'<div id="collapse1" class="collapse multi"></div>',
@ -534,13 +555,15 @@ describe('Collapse', () => {
expect(trigger).not.toHaveClass('collapsed')
expect(collapse1).toHaveClass('show')
expect(collapse1).toHaveClass('show')
done()
resolve()
})
trigger.click()
})
})
it('should hide multiple collapsed elements', done => {
it('should hide multiple collapsed elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a role="button" data-bs-toggle="collapse" href=".multi"></a>',
'<div id="collapse1" class="collapse multi show"></div>',
@ -556,13 +579,15 @@ describe('Collapse', () => {
expect(trigger).toHaveClass('collapsed')
expect(collapse1).not.toHaveClass('show')
expect(collapse1).not.toHaveClass('show')
done()
resolve()
})
trigger.click()
})
})
it('should remove "collapsed" class from target when collapse is shown', done => {
it('should remove "collapsed" class from target when collapse is shown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<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>',
@ -578,13 +603,15 @@ describe('Collapse', () => {
expect(link2.getAttribute('aria-expanded')).toEqual('true')
expect(link1).not.toHaveClass('collapsed')
expect(link2).not.toHaveClass('collapsed')
done()
resolve()
})
link1.click()
})
})
it('should add "collapsed" class to target when collapse is hidden', done => {
it('should add "collapsed" class to target when collapse is hidden', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<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>',
@ -600,13 +627,15 @@ describe('Collapse', () => {
expect(link2.getAttribute('aria-expanded')).toEqual('false')
expect(link1).toHaveClass('collapsed')
expect(link2).toHaveClass('collapsed')
done()
resolve()
})
link1.click()
})
})
it('should allow accordion to use children other than card', done => {
it('should allow accordion to use children other than card', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <div class="item">',
@ -632,7 +661,7 @@ describe('Collapse', () => {
collapseTwo.addEventListener('shown.bs.collapse', () => {
expect(collapseOne).not.toHaveClass('show')
expect(collapseTwo).toHaveClass('show')
done()
resolve()
})
triggerTwo.click()
@ -640,8 +669,10 @@ describe('Collapse', () => {
trigger.click()
})
})
it('should not prevent event for input', done => {
it('should not prevent event for input', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<input type="checkbox" data-bs-toggle="collapse" data-bs-target="#collapsediv1">',
'<div id="collapsediv1"></div>'
@ -653,13 +684,15 @@ describe('Collapse', () => {
collapseEl.addEventListener('shown.bs.collapse', () => {
expect(collapseEl).toHaveClass('show')
expect(target.checked).toBeTrue()
done()
resolve()
})
target.click()
})
})
it('should allow accordion to contain nested elements', done => {
it('should allow accordion to contain nested elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <div class="row">',
@ -701,7 +734,7 @@ describe('Collapse', () => {
expect(collapseTwoEl).toHaveClass('show')
expect(triggerTwoEl).not.toHaveClass('collapsed')
expect(triggerTwoEl.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
triggerTwoEl.click()
@ -709,8 +742,10 @@ describe('Collapse', () => {
triggerEl.click()
})
})
it('should allow accordion to target multiple elements', done => {
it('should allow accordion to target multiple elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <a id="linkTriggerOne" data-bs-toggle="collapse" data-bs-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>',
@ -749,7 +784,7 @@ describe('Collapse', () => {
expect(collapseTwoOne).toHaveClass('show')
expect(collapseTwoTwo).toHaveClass('show')
done()
resolve()
}
collapseOneOne.addEventListener('shown.bs.collapse', () => {
@ -786,8 +821,10 @@ describe('Collapse', () => {
trigger.click()
})
})
it('should collapse accordion children but not nested accordion children', done => {
it('should collapse accordion children but not nested accordion children', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="accordion">',
' <div class="item">',
@ -834,7 +871,7 @@ describe('Collapse', () => {
expect(collapseOne).not.toHaveClass('show')
expect(collapseTwo).toHaveClass('show')
expect(nestedCollapseOne).toHaveClass('show')
done()
resolve()
})
triggerTwo.click()
@ -844,8 +881,10 @@ describe('Collapse', () => {
collapseOne.addEventListener('shown.bs.collapse', handlerCollapseOne)
trigger.click()
})
})
it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => {
it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a id="trigger1" role="button" data-bs-toggle="collapse" href="#test1"></a>',
'<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>',
@ -889,7 +928,7 @@ describe('Collapse', () => {
expect(trigger3).toHaveClass('collapsed')
expect(trigger3.getAttribute('aria-expanded')).toEqual('false')
done()
resolve()
})
trigger1.click()
@ -902,6 +941,7 @@ describe('Collapse', () => {
trigger3.click()
})
})
})
describe('jQueryInterface', () => {
it('should create a collapse', () => {

95
js/tests/unit/dom/event-handler.spec.js
View File

@ -1,5 +1,6 @@
import EventHandler from '../../../src/dom/event-handler'
import { getFixture, clearFixture } from '../../helpers/fixture'
import { clearFixture, getFixture } from '../../helpers/fixture'
import { noop } from '../../../src/util'
describe('EventHandler', () => {
let fixtureEl
@ -18,55 +19,62 @@ describe('EventHandler', () => {
const div = fixtureEl.querySelector('div')
EventHandler.on(div, null, () => {})
EventHandler.on(null, 'click', () => {})
EventHandler.on(div, null, noop)
EventHandler.on(null, 'click', noop)
expect().nothing()
})
it('should add event listener', done => {
it('should add event listener', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
EventHandler.on(div, 'click', () => {
expect().nothing()
done()
resolve()
})
div.click()
})
})
it('should add namespaced event listener', done => {
it('should add namespaced event listener', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
EventHandler.on(div, 'bs.namespace', () => {
expect().nothing()
done()
resolve()
})
EventHandler.trigger(div, 'bs.namespace')
})
})
it('should add native namespaced event listener', done => {
it('should add native namespaced event listener', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
EventHandler.on(div, 'click.namespace', () => {
expect().nothing()
done()
resolve()
})
EventHandler.trigger(div, 'click')
})
})
it('should handle event delegation', done => {
it('should handle event delegation', () => {
return new Promise(resolve => {
EventHandler.on(document, 'click', '.test', () => {
expect().nothing()
done()
resolve()
})
fixtureEl.innerHTML = '<div class="test"></div>'
@ -75,8 +83,10 @@ describe('EventHandler', () => {
div.click()
})
})
it('should handle mouseenter/mouseleave like the native counterpart', done => {
it('should handle mouseenter/mouseleave like the native counterpart', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="outer">',
'<div class="inner">',
@ -109,7 +119,7 @@ describe('EventHandler', () => {
expect(leaveSpy.calls.count()).toEqual(2)
expect(delegateEnterSpy.calls.count()).toEqual(2)
expect(delegateLeaveSpy.calls.count()).toEqual(2)
done()
resolve()
})
const moveMouse = (from, to) => {
@ -144,9 +154,11 @@ describe('EventHandler', () => {
}, 20)
})
})
})
describe('one', () => {
it('should call listener just once', done => {
it('should call listener just once', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
let called = 0
@ -164,11 +176,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(1)
done()
resolve()
}, 20)
})
})
it('should call delegated listener just once', done => {
it('should call delegated listener just once', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
let called = 0
@ -186,22 +200,24 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(1)
done()
resolve()
}, 20)
})
})
})
describe('off', () => {
it('should not remove a listener', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
EventHandler.off(div, null, () => {})
EventHandler.off(null, 'click', () => {})
EventHandler.off(div, null, noop)
EventHandler.off(null, 'click', noop)
expect().nothing()
})
it('should remove a listener', done => {
it('should remove a listener', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -218,11 +234,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(1)
done()
resolve()
}, 20)
})
})
it('should remove all the events', done => {
it('should remove all the events', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -241,11 +259,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(2)
done()
resolve()
}, 20)
})
})
it('should remove all the namespaced listeners if namespace is passed', done => {
it('should remove all the namespaced listeners if namespace is passed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -266,11 +286,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(2)
done()
resolve()
}, 20)
})
})
it('should remove the namespaced listeners', done => {
it('should remove the namespaced listeners', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -293,11 +315,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(calledCallback1).toEqual(1)
expect(calledCallback2).toEqual(1)
done()
resolve()
}, 20)
})
})
it('should remove the all the namespaced listeners for native events', done => {
it('should remove the all the namespaced listeners for native events', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -316,11 +340,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called).toEqual(2)
done()
resolve()
}, 20)
})
})
it('should remove the specified namespaced listeners for native events', done => {
it('should remove the specified namespaced listeners for native events', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -341,11 +367,13 @@ describe('EventHandler', () => {
setTimeout(() => {
expect(called1).toEqual(1)
expect(called2).toEqual(2)
done()
resolve()
}, 20)
})
})
it('should remove a listener registered by .one', done => {
it('should remove a listener registered by .one', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
@ -359,9 +387,10 @@ describe('EventHandler', () => {
EventHandler.trigger(div, 'foobar')
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 20)
})
})
it('should remove the correct delegated event listener', () => {
const element = document.createElement('div')

8
js/tests/unit/dom/manipulator.spec.js
View File

@ -1,5 +1,5 @@
import Manipulator from '../../../src/dom/manipulator'
import { getFixture, clearFixture } from '../../helpers/fixture'
import { clearFixture, getFixture } from '../../helpers/fixture'
describe('Manipulator', () => {
let fixtureEl
@ -134,7 +134,8 @@ describe('Manipulator', () => {
})
})
it('should not change offset when viewport is scrolled', done => {
it('should not change offset when viewport is scrolled', () => {
return new Promise(resolve => {
const top = 500
const left = 1000
const scrollY = 200
@ -165,13 +166,14 @@ describe('Manipulator', () => {
win.removeEventListener('scroll', scrollHandler)
forceScrollBars.remove()
win.scrollTo(0, 0)
done()
resolve()
}
win.addEventListener('scroll', scrollHandler)
win.scrollTo(scrollX, scrollY)
})
})
})
describe('position', () => {
it('should return an object with two properties top and left, both numbers', () => {

348
js/tests/unit/dropdown.spec.js
View File

@ -57,7 +57,8 @@ describe('Dropdown', () => {
expect(dropdownByElement._element).toEqual(btnDropdown)
})
it('should create offset modifier correctly when offset option is a function', done => {
it('should create offset modifier correctly when offset option is a function', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -78,7 +79,7 @@ describe('Dropdown', () => {
reference: state.rects.reference,
placement: state.placement
}, btnDropdown)
done()
resolve()
}
}
})
@ -88,6 +89,7 @@ describe('Dropdown', () => {
dropdown.show()
})
})
it('should create offset modifier correctly when offset option is a string into data attribute', () => {
fixtureEl.innerHTML = [
@ -151,7 +153,8 @@ describe('Dropdown', () => {
})
describe('toggle', () => {
it('should toggle a dropdown', done => {
it('should toggle a dropdown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -167,13 +170,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should destroy old popper references on toggle', done => {
it('should destroy old popper references on toggle', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="first dropdown">',
' <button class="firstBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -203,13 +208,15 @@ describe('Dropdown', () => {
secondDropdownEl.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
expect(dropdown1._popper.destroy).toHaveBeenCalled()
done()
resolve()
}))
dropdown1.toggle()
})
})
it('should toggle a dropdown and add/remove event listener on mobile', done => {
it('should toggle a dropdown and add/remove event listener on mobile', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -241,13 +248,15 @@ describe('Dropdown', () => {
expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
document.documentElement.ontouchstart = defaultValueOnTouchStart
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropdown at the right', done => {
it('should toggle a dropdown at the right', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -263,13 +272,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropup', done => {
it('should toggle a dropup', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropup">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -286,13 +297,15 @@ describe('Dropdown', () => {
dropupEl.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropup at the right', done => {
it('should toggle a dropup at the right', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropup">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -309,13 +322,15 @@ describe('Dropdown', () => {
dropupEl.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropend', done => {
it('should toggle a dropend', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropend">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -332,13 +347,15 @@ describe('Dropdown', () => {
dropendEl.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropstart', done => {
it('should toggle a dropstart', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropstart">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -355,13 +372,15 @@ describe('Dropdown', () => {
dropstartEl.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropdown with parent reference', done => {
it('should toggle a dropdown with parent reference', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -379,13 +398,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropdown with a dom node reference', done => {
it('should toggle a dropdown with a dom node reference', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -403,13 +424,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropdown with a jquery object reference', done => {
it('should toggle a dropdown with a jquery object reference', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -427,13 +450,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
})
dropdown.toggle()
})
})
it('should toggle a dropdown with a valid virtual element reference', done => {
it('should toggle a dropdown with a valid virtual element reference', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle visually-hidden" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -476,7 +501,7 @@ describe('Dropdown', () => {
expect(virtualElement.getBoundingClientRect).toHaveBeenCalled()
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
}
}
})
@ -485,8 +510,10 @@ describe('Dropdown', () => {
dropdown.toggle()
})
})
it('should not toggle a dropdown if the element is disabled', done => {
it('should not toggle a dropdown if the element is disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -507,11 +534,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
})
})
})
it('should not toggle a dropdown if the element contains .disabled', done => {
it('should not toggle a dropdown if the element contains .disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@ -532,11 +561,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
})
})
})
it('should not toggle a dropdown if the menu is shown', done => {
it('should not toggle a dropdown if the menu is shown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -557,11 +588,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
})
})
})
it('should not toggle a dropdown if show event is prevented', done => {
it('should not toggle a dropdown if show event is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -586,13 +619,15 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
})
})
})
})
describe('show', () => {
it('should show a dropdown', done => {
it('should show a dropdown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -607,13 +642,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(btnDropdown).toHaveClass('show')
done()
resolve()
})
dropdown.show()
})
})
it('should not show a dropdown if the element is disabled', done => {
it('should not show a dropdown if the element is disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -634,11 +671,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
it('should not show a dropdown if the element contains .disabled', done => {
it('should not show a dropdown if the element contains .disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@ -659,11 +698,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
it('should not show a dropdown if the menu is shown', done => {
it('should not show a dropdown if the menu is shown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -684,11 +725,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
it('should not show a dropdown if show event is prevented', done => {
it('should not show a dropdown if show event is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -713,13 +756,15 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
})
describe('hide', () => {
it('should hide a dropdown', done => {
it('should hide a dropdown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="true">Dropdown</button>',
@ -736,13 +781,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu).not.toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
done()
resolve()
})
dropdown.hide()
})
})
it('should hide a dropdown and destroy popper', done => {
it('should hide a dropdown and destroy popper', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -762,13 +809,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdown._popper.destroy).toHaveBeenCalled()
done()
resolve()
})
dropdown.show()
})
})
it('should not hide a dropdown if the element is disabled', done => {
it('should not hide a dropdown if the element is disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -790,11 +839,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect(dropdownMenu).toHaveClass('show')
done()
resolve()
}, 10)
})
})
it('should not hide a dropdown if the element contains .disabled', done => {
it('should not hide a dropdown if the element contains .disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@ -816,11 +867,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect(dropdownMenu).toHaveClass('show')
done()
resolve()
}, 10)
})
})
it('should not hide a dropdown if the menu is not shown', done => {
it('should not hide a dropdown if the menu is not shown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -841,11 +894,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
it('should not hide a dropdown if hide event is prevented', done => {
it('should not hide a dropdown if hide event is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -871,11 +926,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect(dropdownMenu).toHaveClass('show')
done()
resolve()
})
})
})
it('should remove event listener on touch-enabled device that was added in show method', done => {
it('should remove event listener on touch-enabled device that was added in show method', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -902,12 +959,13 @@ describe('Dropdown', () => {
expect(EventHandler.off).toHaveBeenCalled()
document.documentElement.ontouchstart = defaultValueOnTouchStart
done()
resolve()
})
dropdown.show()
})
})
})
describe('dispose', () => {
it('should dispose dropdown', () => {
@ -1013,7 +1071,8 @@ describe('Dropdown', () => {
})
describe('data-api', () => {
it('should show and hide a dropdown', done => {
it('should show and hide a dropdown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -1048,13 +1107,15 @@ describe('Dropdown', () => {
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('false')
expect(hideEventTriggered).toBeTrue()
expect(event.relatedTarget).toEqual(btnDropdown)
done()
resolve()
})
btnDropdown.click()
})
})
it('should not use "static" Popper in navbar', done => {
it('should not use "static" Popper in navbar', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
@ -1073,13 +1134,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdown._popper).not.toBeNull()
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
done()
resolve()
})
dropdown.show()
})
})
it('should not collapse the dropdown when clicking a select option nested in the dropdown', done => {
it('should not collapse the dropdown when clicking a select option nested in the dropdown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
@ -1113,14 +1176,16 @@ describe('Dropdown', () => {
setTimeout(() => {
expect(hideSpy).not.toHaveBeenCalled()
done()
resolve()
}, 10)
})
dropdown.show()
})
})
it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', done => {
it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">',
@ -1143,13 +1208,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
done()
resolve()
})
dropdown.show()
})
})
it('should not use Popper if display set to static', done => {
it('should not use Popper if display set to static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
@ -1165,13 +1232,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => {
// Popper adds this attribute when we use it
expect(dropdownMenu.getAttribute('data-popper-placement')).toBeNull()
done()
resolve()
})
btnDropdown.click()
})
})
it('should manage bs attribute `data-bs-popper`="static" when display set to static', done => {
it('should manage bs attribute `data-bs-popper`="static" when display set to static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
@ -1192,13 +1261,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
done()
resolve()
})
dropdown.show()
})
})
it('should remove "show" class if tabbing outside of menu', done => {
it('should remove "show" class if tabbing outside of menu', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1221,13 +1292,15 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('hidden.bs.dropdown', () => {
expect(btnDropdown).not.toHaveClass('show')
done()
resolve()
})
btnDropdown.click()
})
})
it('should remove "show" class if body is clicked, with multiple dropdowns', done => {
it('should remove "show" class if body is clicked, with multiple dropdowns', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <div class="dropdown" id="testmenu">',
@ -1271,13 +1344,15 @@ describe('Dropdown', () => {
triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {
expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)
done()
resolve()
})
triggerDropdownFirst.click()
})
})
it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => {
it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>',
@ -1327,13 +1402,15 @@ describe('Dropdown', () => {
triggerDropdownLast.addEventListener('hidden.bs.dropdown', () => {
expect(fixtureEl.querySelectorAll('.dropdown-menu.show')).toHaveSize(0)
done()
resolve()
})
triggerDropdownFirst.click()
})
})
it('should fire hide and hidden event without a clickEvent if event type is not click', done => {
it('should fire hide and hidden event without a clickEvent if event type is not click', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1351,7 +1428,7 @@ describe('Dropdown', () => {
triggerDropdown.addEventListener('hidden.bs.dropdown', event => {
expect(event.clickEvent).toBeUndefined()
done()
resolve()
})
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
@ -1363,8 +1440,10 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
})
it('should bubble up the events to the parent elements', done => {
it('should bubble up the events to the parent elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1394,13 +1473,15 @@ describe('Dropdown', () => {
expect(showFunction).toHaveBeenCalled()
expect(shownFunction).toHaveBeenCalled()
expect(hideFunction).toHaveBeenCalled()
done()
resolve()
})
dropdown.show()
})
})
it('should ignore keyboard events within <input>s and <textarea>s', done => {
it('should ignore keyboard events within <input>s and <textarea>s', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1429,13 +1510,15 @@ describe('Dropdown', () => {
textarea.dispatchEvent(keydown)
expect(document.activeElement).toEqual(textarea, 'textarea still focused')
done()
resolve()
})
triggerDropdown.click()
})
})
it('should skip disabled element when using keyboard navigation', done => {
it('should skip disabled element when using keyboard navigation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1458,13 +1541,15 @@ describe('Dropdown', () => {
expect(document.activeElement).not.toHaveClass('disabled')
expect(document.activeElement.hasAttribute('disabled')).toBeFalse()
done()
resolve()
})
triggerDropdown.click()
})
})
it('should skip hidden element when using keyboard navigation', done => {
it('should skip hidden element when using keyboard navigation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<style>',
' .d-none {',
@ -1494,13 +1579,15 @@ describe('Dropdown', () => {
expect(document.activeElement.style.display).not.toEqual('none')
expect(document.activeElement.style.visibility).not.toEqual('hidden')
done()
resolve()
})
triggerDropdown.click()
})
})
it('should focus next/previous element when using keyboard navigation', done => {
it('should focus next/previous element when using keyboard navigation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1531,13 +1618,15 @@ describe('Dropdown', () => {
document.activeElement.dispatchEvent(keydownArrowUp)
expect(document.activeElement).toEqual(item1, 'item1 is focused')
done()
resolve()
})
triggerDropdown.click()
})
})
it('should open the dropdown and focus on the last item when using ArrowUp for the first time', done => {
it('should open the dropdown and focus on the last item when using ArrowUp for the first time', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1554,7 +1643,7 @@ describe('Dropdown', () => {
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
setTimeout(() => {
expect(document.activeElement).toEqual(lastItem, 'item2 is focused')
done()
resolve()
})
})
@ -1562,8 +1651,10 @@ describe('Dropdown', () => {
keydown.key = 'ArrowUp'
triggerDropdown.dispatchEvent(keydown)
})
})
it('should open the dropdown and focus on the first item when using ArrowDown for the first time', done => {
it('should open the dropdown and focus on the first item when using ArrowDown for the first time', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1580,7 +1671,7 @@ describe('Dropdown', () => {
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
setTimeout(() => {
expect(document.activeElement).toEqual(firstItem, 'item1 is focused')
done()
resolve()
})
})
@ -1588,8 +1679,10 @@ describe('Dropdown', () => {
keydown.key = 'ArrowDown'
triggerDropdown.dispatchEvent(keydown)
})
})
it('should not close the dropdown if the user clicks on a text field within dropdown-menu', done => {
it('should not close the dropdown if the user clicks on a text field within dropdown-menu', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1604,7 +1697,7 @@ describe('Dropdown', () => {
input.addEventListener('click', () => {
expect(triggerDropdown).toHaveClass('show')
done()
resolve()
})
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
@ -1614,8 +1707,10 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
})
it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', done => {
it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1630,7 +1725,7 @@ describe('Dropdown', () => {
textarea.addEventListener('click', () => {
expect(triggerDropdown).toHaveClass('show')
done()
resolve()
})
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
@ -1640,8 +1735,10 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
})
it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', done => {
it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1656,7 +1753,7 @@ describe('Dropdown', () => {
triggerDropdown.addEventListener('hidden.bs.dropdown', () => {
expect().nothing()
done()
resolve()
})
triggerDropdown.addEventListener('shown.bs.dropdown', () => {
@ -1667,8 +1764,10 @@ describe('Dropdown', () => {
triggerDropdown.click()
})
})
it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => {
it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1716,13 +1815,15 @@ describe('Dropdown', () => {
input.dispatchEvent(keydownEscape)
expect(triggerDropdown).not.toHaveClass('show')
done()
resolve()
})
triggerDropdown.click()
})
})
it('should not open dropdown if escape key was pressed on the toggle', done => {
it('should not open dropdown if escape key was pressed on the toggle', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="tabs">',
' <div class="dropdown">',
@ -1753,11 +1854,13 @@ describe('Dropdown', () => {
setTimeout(() => {
expect(dropdown.toggle).not.toHaveBeenCalled()
expect(triggerDropdown).not.toHaveClass('show')
done()
resolve()
}, 20)
})
})
it('should propagate escape key events if dropdown is closed', done => {
it('should propagate escape key events if dropdown is closed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="parent">',
' <div class="dropdown">',
@ -1777,7 +1880,7 @@ describe('Dropdown', () => {
parent.addEventListener('keydown', parentKeyHandler)
parent.addEventListener('keyup', () => {
expect(parentKeyHandler).toHaveBeenCalled()
done()
resolve()
})
const keydownEscape = createEvent('keydown', { bubbles: true })
@ -1789,8 +1892,10 @@ describe('Dropdown', () => {
toggle.dispatchEvent(keydownEscape)
toggle.dispatchEvent(keyupEscape)
})
})
it('should close dropdown using `escape` button, and return focus to its trigger', done => {
it('should close dropdown using `escape` button, and return focus to its trigger', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -1812,13 +1917,15 @@ describe('Dropdown', () => {
toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
expect(document.activeElement).toEqual(toggle)
done()
resolve()
}))
toggle.click()
})
})
it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="inside">Dropdown toggle</button>',
@ -1843,13 +1950,15 @@ describe('Dropdown', () => {
dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
expect(dropdownToggle).not.toHaveClass('show')
done()
resolve()
}))
dropdownToggle.click()
})
})
it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', done => {
it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown toggle</button>',
@ -1874,13 +1983,15 @@ describe('Dropdown', () => {
dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
expect(dropdownToggle).not.toHaveClass('show')
done()
resolve()
})
dropdownToggle.click()
})
})
it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', done => {
it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="false">Dropdown toggle</button>',
@ -1898,7 +2009,7 @@ describe('Dropdown', () => {
if (shouldTriggerClick) {
document.documentElement.click()
} else {
done()
resolve()
}
expectDropdownToBeOpened(false)
@ -1912,6 +2023,7 @@ describe('Dropdown', () => {
dropdownToggle.click()
})
})
})
describe('jQueryInterface', () => {
it('should create a dropdown', () => {
@ -2030,7 +2142,8 @@ describe('Dropdown', () => {
})
})
it('should open dropdown when pressing keydown or keyup', done => {
it('should open dropdown when pressing keydown or keyup', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="dropdown">',
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@ -2064,7 +2177,7 @@ describe('Dropdown', () => {
const handleArrowUp = () => {
expect(triggerDropdown).toHaveClass('show')
expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
}
dropdown.addEventListener('shown.bs.dropdown', event => {
@ -2077,6 +2190,7 @@ describe('Dropdown', () => {
triggerDropdown.dispatchEvent(keydown)
})
})
it('should allow `data-bs-toggle="dropdown"` click events to bubble up', () => {
fixtureEl.innerHTML = [
@ -2101,7 +2215,8 @@ describe('Dropdown', () => {
expect(delegatedClickListener).toHaveBeenCalled()
})
it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', done => {
it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="container">',
' <div class="dropdown">',
@ -2119,9 +2234,10 @@ describe('Dropdown', () => {
btnDropdown.addEventListener('shown.bs.dropdown', () => setTimeout(() => {
expect(btnDropdown).toHaveClass('show')
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
done()
resolve()
}))
childElement.click()
})
})
})

8
js/tests/unit/jquery.spec.js
View File

@ -12,7 +12,7 @@ import ScrollSpy from '../../src/scrollspy'
import Tab from '../../src/tab'
import Toast from '../../src/toast'
import Tooltip from '../../src/tooltip'
import { getFixture, clearFixture } from '../helpers/fixture'
import { clearFixture, getFixture } from '../helpers/fixture'
describe('jQuery', () => {
let fixtureEl
@ -40,7 +40,8 @@ describe('jQuery', () => {
expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
})
it('should use jQuery event system', done => {
it('should use jQuery event system', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="alert">',
' <button type="button" data-bs-dismiss="alert">x</button>',
@ -50,9 +51,10 @@ describe('jQuery', () => {
$(fixtureEl).find('.alert')
.one('closed.bs.alert', () => {
expect($(fixtureEl).find('.alert')).toHaveSize(0)
done()
resolve()
})
$(fixtureEl).find('button').trigger('click')
})
})
})

222
js/tests/unit/modal.spec.js
View File

@ -56,7 +56,8 @@ describe('Modal', () => {
})
describe('toggle', () => {
it('should call ScrollBarHelper to handle scrollBar on body', done => {
it('should call ScrollBarHelper to handle scrollBar on body', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
@ -71,15 +72,17 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
done()
resolve()
})
modal.toggle()
})
})
})
describe('show', () => {
it('should show a modal', done => {
it('should show a modal', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -95,13 +98,15 @@ describe('Modal', () => {
expect(modalEl.getAttribute('aria-hidden')).toBeNull()
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).not.toBeNull()
done()
resolve()
})
modal.show()
})
})
it('should show a modal without backdrop', done => {
it('should show a modal without backdrop', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -119,13 +124,15 @@ describe('Modal', () => {
expect(modalEl.getAttribute('aria-hidden')).toBeNull()
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeNull()
done()
resolve()
})
modal.show()
})
})
it('should show a modal and append the element', done => {
it('should show a modal and append the element', () => {
return new Promise(resolve => {
const modalEl = document.createElement('div')
const id = 'dynamicModal'
@ -139,11 +146,12 @@ describe('Modal', () => {
const dynamicModal = document.getElementById(id)
expect(dynamicModal).not.toBeNull()
dynamicModal.remove()
done()
resolve()
})
modal.show()
})
})
it('should do nothing if a modal is shown', () => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
@ -173,7 +181,8 @@ describe('Modal', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
it('should not fire shown event when show is prevented', done => {
it('should not fire shown event when show is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -184,7 +193,7 @@ describe('Modal', () => {
const expectedDone = () => {
expect().nothing()
done()
resolve()
}
setTimeout(expectedDone, 10)
@ -196,8 +205,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should be shown after the first call to show() has been prevented while fading is enabled ', done => {
it('should be shown after the first call to show() has been prevented while fading is enabled ', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -218,13 +229,14 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(prevented).toBeTrue()
expect(modal._isAnimated()).toBeTrue()
done()
resolve()
})
modal.show()
})
it('should set is transitioning if fade class is present', done => {
})
it('should set is transitioning if fade class is present', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -238,13 +250,15 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modal._isTransitioning).toBeFalse()
done()
resolve()
})
modal.show()
})
})
it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', done => {
it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog">',
@ -267,13 +281,15 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modal.hide).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should close modal when a click occurred on a data-bs-dismiss="modal" with "bs-target" outside of modal element', done => {
it('should close modal when a click occurred on a data-bs-dismiss="modal" with "bs-target" outside of modal element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button type="button" data-bs-dismiss="modal" data-bs-target="#modal1"></button>',
'<div id="modal1" class="modal fade">',
@ -293,13 +309,15 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modal.hide).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should set .modal\'s scroll top to 0', done => {
it('should set .modal\'s scroll top to 0', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog"></div>',
@ -311,13 +329,15 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.scrollTop).toEqual(0)
done()
resolve()
})
modal.show()
})
})
it('should set modal body scroll top to 0 if modal body do not exists', done => {
it('should set modal body scroll top to 0 if modal body do not exists', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal fade">',
' <div class="modal-dialog">',
@ -332,13 +352,15 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalBody.scrollTop).toEqual(0)
done()
resolve()
})
modal.show()
})
})
it('should not trap focus if focus equal to false', done => {
it('should not trap focus if focus equal to false', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -350,13 +372,15 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modal._focustrap.activate).not.toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should add listener when escape touch is pressed', done => {
it('should add listener when escape touch is pressed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -373,13 +397,15 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modal.hide).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should do nothing when the pressed key is not escape', done => {
it('should do nothing when the pressed key is not escape', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -390,7 +416,7 @@ describe('Modal', () => {
const expectDone = () => {
expect(modal.hide).not.toHaveBeenCalled()
done()
resolve()
}
modalEl.addEventListener('shown.bs.modal', () => {
@ -403,8 +429,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should adjust dialog on resize', done => {
it('should adjust dialog on resize', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -415,7 +443,7 @@ describe('Modal', () => {
const expectDone = () => {
expect(modal._adjustDialog).toHaveBeenCalled()
done()
resolve()
}
modalEl.addEventListener('shown.bs.modal', () => {
@ -427,8 +455,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should not close modal when clicking on modal-content', done => {
it('should not close modal when clicking on modal-content', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal">',
' <div class="modal-dialog">',
@ -443,7 +473,7 @@ describe('Modal', () => {
const shownCallback = () => {
setTimeout(() => {
expect(modal._isShown).toEqual(true)
done()
resolve()
}, 10)
}
@ -459,8 +489,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should not close modal when clicking outside of modal-content if backdrop = false', done => {
it('should not close modal when clicking outside of modal-content if backdrop = false', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -471,7 +503,7 @@ describe('Modal', () => {
const shownCallback = () => {
setTimeout(() => {
expect(modal._isShown).toBeTrue()
done()
resolve()
}, 10)
}
@ -486,8 +518,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
it('should not close modal when clicking outside of modal-content if backdrop = static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -498,7 +532,7 @@ describe('Modal', () => {
const shownCallback = () => {
setTimeout(() => {
expect(modal._isShown).toBeTrue()
done()
resolve()
}, 10)
}
@ -513,8 +547,9 @@ describe('Modal', () => {
modal.show()
})
it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
})
it('should close modal when escape key is pressed with keyboard = true and backdrop is static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -526,7 +561,7 @@ describe('Modal', () => {
const shownCallback = () => {
setTimeout(() => {
expect(modal._isShown).toBeFalse()
done()
resolve()
}, 10)
}
@ -540,8 +575,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should not close modal when escape key is pressed with keyboard = false', done => {
it('should not close modal when escape key is pressed with keyboard = false', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -552,7 +589,7 @@ describe('Modal', () => {
const shownCallback = () => {
setTimeout(() => {
expect(modal._isShown).toBeTrue()
done()
resolve()
}, 10)
}
@ -570,8 +607,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
it('should not overflow when clicking outside of modal-content if backdrop = static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -583,14 +622,16 @@ describe('Modal', () => {
modalEl.click()
setTimeout(() => {
expect(modalEl.clientHeight).toEqual(modalEl.scrollHeight)
done()
resolve()
}, 20)
})
modal.show()
})
})
it('should not queue multiple callbacks when clicking outside of modal-content and backdrop = static', done => {
it('should not queue multiple callbacks when clicking outside of modal-content and backdrop = static', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" style="transition-duration: 50ms;"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -606,14 +647,16 @@ describe('Modal', () => {
setTimeout(() => {
expect(spy).toHaveBeenCalledTimes(1)
done()
resolve()
}, 20)
})
modal.show()
})
})
it('should trap focus', done => {
it('should trap focus', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -623,15 +666,17 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modal._focustrap.activate).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
})
describe('hide', () => {
it('should hide a modal', done => {
it('should hide a modal', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -652,13 +697,15 @@ describe('Modal', () => {
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(backdropSpy).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should close modal when clicking outside of modal-content', done => {
it('should close modal when clicking outside of modal-content', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -674,11 +721,12 @@ describe('Modal', () => {
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
done()
resolve()
})
modal.show()
})
})
it('should do nothing is the modal is not shown', () => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
@ -703,7 +751,8 @@ describe('Modal', () => {
expect().nothing()
})
it('should not hide a modal if hide is prevented', done => {
it('should not hide a modal if hide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -716,7 +765,7 @@ describe('Modal', () => {
const hideCallback = () => {
setTimeout(() => {
expect(modal._isShown).toBeTrue()
done()
resolve()
}, 10)
}
@ -731,8 +780,10 @@ describe('Modal', () => {
modal.show()
})
})
it('should release focus trap', done => {
it('should release focus trap', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
const modalEl = fixtureEl.querySelector('.modal')
@ -745,12 +796,13 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modal._focustrap.deactivate).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
})
describe('dispose', () => {
it('should dispose a modal', () => {
@ -789,7 +841,8 @@ describe('Modal', () => {
})
describe('data-api', () => {
it('should toggle modal', done => {
it('should toggle modal', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@ -813,13 +866,15 @@ describe('Modal', () => {
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
done()
resolve()
})
trigger.click()
})
})
it('should not recreate a new modal', done => {
it('should not recreate a new modal', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@ -833,13 +888,15 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modal.show).toHaveBeenCalled()
done()
resolve()
})
trigger.click()
})
})
it('should prevent default when the trigger is <a> or <area>', done => {
it('should prevent default when the trigger is <a> or <area>', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@ -857,13 +914,15 @@ describe('Modal', () => {
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).not.toBeNull()
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
resolve()
})
trigger.click()
})
})
it('should focus the trigger on hide', done => {
it('should focus the trigger on hide', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@ -883,7 +942,7 @@ describe('Modal', () => {
const hideListener = () => {
setTimeout(() => {
expect(trigger.focus).toHaveBeenCalled()
done()
resolve()
}, 20)
}
@ -893,8 +952,9 @@ describe('Modal', () => {
trigger.click()
})
it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', done => {
})
it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal">',
' <div class="modal-dialog">',
@ -915,13 +975,15 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(Event.prototype.preventDefault).not.toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
})
it('should prevent default when a click occurred on data-bs-dismiss="modal" where tagName is <a> or <area>', done => {
it('should prevent default when a click occurred on data-bs-dismiss="modal" where tagName is <a> or <area>', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="modal">',
' <div class="modal-dialog">',
@ -942,13 +1004,14 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
resolve()
})
modal.show()
})
it('should not focus the trigger if the modal is not visible', done => {
})
it('should not focus the trigger if the modal is not visible', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<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></div>'
@ -968,7 +1031,7 @@ describe('Modal', () => {
const hideListener = () => {
setTimeout(() => {
expect(trigger.focus).not.toHaveBeenCalled()
done()
resolve()
}, 20)
}
@ -978,8 +1041,9 @@ describe('Modal', () => {
trigger.click()
})
it('should not focus the trigger if the modal is not shown', done => {
})
it('should not focus the trigger if the modal is not shown', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
'<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@ -993,7 +1057,7 @@ describe('Modal', () => {
const showListener = () => {
setTimeout(() => {
expect(trigger.focus).not.toHaveBeenCalled()
done()
resolve()
}, 10)
}
@ -1004,8 +1068,10 @@ describe('Modal', () => {
trigger.click()
})
})
it('should call hide first, if another modal is open', done => {
it('should call hide first, if another modal is open', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button data-bs-toggle="modal" data-bs-target="#modal2"></button>',
'<div id="modal1" class="modal fade"><div class="modal-dialog"></div></div>',
@ -1023,12 +1089,12 @@ describe('Modal', () => {
modalEl1.addEventListener('hidden.bs.modal', () => {
expect(Modal.getInstance(modalEl2)).not.toBeNull()
expect(modalEl2).toHaveClass('show')
done()
resolve()
})
modal1.show()
})
})
})
describe('jQueryInterface', () => {
it('should create a modal', () => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

108
js/tests/unit/offcanvas.spec.js
View File

@ -147,7 +147,8 @@ describe('Offcanvas', () => {
})
describe('options', () => {
it('if scroll is enabled, should allow body to scroll while offcanvas is open', done => {
it('if scroll is enabled, should allow body to scroll while offcanvas is open', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
@ -161,12 +162,14 @@ describe('Offcanvas', () => {
})
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', done => {
it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
@ -180,12 +183,14 @@ describe('Offcanvas', () => {
})
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
it('should hide a shown element if user click on backdrop', done => {
it('should hide a shown element if user click on backdrop', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -202,13 +207,15 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
it('should not trap focus if scroll is allowed', done => {
it('should not trap focus if scroll is allowed', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
@ -220,12 +227,13 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
expect(offCanvas._focustrap.activate).not.toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
})
describe('toggle', () => {
it('should call show method if show class is not present', () => {
@ -241,7 +249,8 @@ describe('Offcanvas', () => {
expect(offCanvas.show).toHaveBeenCalled()
})
it('should call hide method if show class is present', done => {
it('should call hide method if show class is present', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
@ -254,15 +263,17 @@ describe('Offcanvas', () => {
offCanvas.toggle()
expect(offCanvas.hide).toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
})
describe('show', () => {
it('should add `showing` class during opening and `show` class on end', done => {
it('should add `showing` class during opening and `show` class on end', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl)
@ -274,12 +285,13 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
expect(offCanvasEl).not.toHaveClass('showing')
expect(offCanvasEl).toHaveClass('show')
done()
resolve()
})
offCanvas.show()
expect(offCanvasEl).toHaveClass('showing')
})
})
it('should do nothing if already shown', () => {
fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
@ -298,7 +310,8 @@ describe('Offcanvas', () => {
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
})
it('should show a hidden element', done => {
it('should show a hidden element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -308,13 +321,15 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
expect(offCanvasEl).toHaveClass('show')
expect(offCanvas._backdrop.show).toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
it('should not fire shown when show is prevented', done => {
it('should not fire shown when show is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -324,7 +339,7 @@ describe('Offcanvas', () => {
const expectEnd = () => {
setTimeout(() => {
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
done()
resolve()
}, 10)
}
@ -339,15 +354,17 @@ describe('Offcanvas', () => {
offCanvas.show()
})
})
it('on window load, should make visible an offcanvas element, if its markup contains class "show"', done => {
it('on window load, should make visible an offcanvas element, if its markup contains class "show"', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
spyOn(Offcanvas.prototype, 'show').and.callThrough()
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
done()
resolve()
})
window.dispatchEvent(createEvent('load'))
@ -356,8 +373,10 @@ describe('Offcanvas', () => {
expect(instance).not.toBeNull()
expect(Offcanvas.prototype.show).toHaveBeenCalled()
})
})
it('should trap focus', done => {
it('should trap focus', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
@ -367,15 +386,17 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
expect(offCanvas._focustrap.activate).toHaveBeenCalled()
done()
resolve()
})
offCanvas.show()
})
})
})
describe('hide', () => {
it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', done => {
it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl)
@ -388,7 +409,7 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(offCanvasEl).not.toHaveClass('hiding')
expect(offCanvasEl).not.toHaveClass('show')
done()
resolve()
})
offCanvas.show()
@ -398,6 +419,7 @@ describe('Offcanvas', () => {
expect(offCanvasEl).toHaveClass('hiding')
})
})
})
it('should do nothing if already shown', () => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
@ -413,7 +435,8 @@ describe('Offcanvas', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
it('should hide a shown element', done => {
it('should hide a shown element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -424,13 +447,15 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(offCanvasEl).not.toHaveClass('show')
expect(offCanvas._backdrop.hide).toHaveBeenCalled()
done()
resolve()
})
offCanvas.hide()
})
})
it('should not fire hidden when hide is prevented', done => {
it('should not fire hidden when hide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -442,7 +467,7 @@ describe('Offcanvas', () => {
const expectEnd = () => {
setTimeout(() => {
expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
done()
resolve()
}, 10)
}
@ -457,8 +482,10 @@ describe('Offcanvas', () => {
offCanvas.hide()
})
})
it('should release focus trap', done => {
it('should release focus trap', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('div')
@ -468,12 +495,13 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
expect(offCanvas._focustrap.deactivate).toHaveBeenCalled()
done()
resolve()
})
offCanvas.hide()
})
})
})
describe('dispose', () => {
it('should dispose an offcanvas', () => {
@ -501,7 +529,8 @@ describe('Offcanvas', () => {
})
describe('data-api', () => {
it('should not prevent event for input', done => {
it('should not prevent event for input', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<input type="checkbox" data-bs-toggle="offcanvas" data-bs-target="#offcanvasdiv1" />',
'<div id="offcanvasdiv1" class="offcanvas"></div>'
@ -513,11 +542,12 @@ describe('Offcanvas', () => {
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
expect(offCanvasEl).toHaveClass('show')
expect(target.checked).toBeTrue()
done()
resolve()
})
target.click()
})
})
it('should not call toggle on disabled elements', () => {
fixtureEl.innerHTML = [
@ -534,7 +564,8 @@ describe('Offcanvas', () => {
expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
})
it('should call hide first, if another offcanvas is open', done => {
it('should call hide first, if another offcanvas is open', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="btn2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2"></button>',
'<div id="offcanvas1" class="offcanvas"></div>',
@ -551,12 +582,14 @@ describe('Offcanvas', () => {
})
offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
done()
resolve()
})
offcanvas1.show()
})
})
it('should focus on trigger element after closing offcanvas', done => {
it('should focus on trigger element after closing offcanvas', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
'<div id="offcanvas" class="offcanvas"></div>'
@ -573,14 +606,16 @@ describe('Offcanvas', () => {
offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
setTimeout(() => {
expect(trigger.focus).toHaveBeenCalled()
done()
resolve()
}, 5)
})
trigger.click()
})
})
it('should not focus on trigger element after closing offcanvas, if it is not visible', done => {
it('should not focus on trigger element after closing offcanvas, if it is not visible', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
'<div id="offcanvas" class="offcanvas"></div>'
@ -599,13 +634,14 @@ describe('Offcanvas', () => {
setTimeout(() => {
expect(isVisible(trigger)).toBeFalse()
expect(trigger.focus).not.toHaveBeenCalled()
done()
resolve()
}, 5)
})
trigger.click()
})
})
})
describe('jQueryInterface', () => {
it('should create an offcanvas', () => {

54
js/tests/unit/popover.spec.js
View File

@ -62,7 +62,8 @@ describe('Popover', () => {
})
describe('show', () => {
it('should show a popover', done => {
it('should show a popover', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -70,13 +71,15 @@ describe('Popover', () => {
popoverEl.addEventListener('shown.bs.popover', () => {
expect(document.querySelector('.popover')).not.toBeNull()
done()
resolve()
})
popover.show()
})
})
it('should set title and content from functions', done => {
it('should set title and content from functions', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -91,13 +94,15 @@ describe('Popover', () => {
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
done()
resolve()
})
popover.show()
})
})
it('should show a popover with just content without having header', done => {
it('should show a popover with just content without having header', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -111,13 +116,15 @@ describe('Popover', () => {
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
done()
resolve()
})
popover.show()
})
})
it('should show a popover with just title without having body', done => {
it('should show a popover with just title without having body', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -131,13 +138,15 @@ describe('Popover', () => {
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
done()
resolve()
})
popover.show()
})
})
it('should show a popover with just title without having body using data-attribute to get config', done => {
it('should show a popover with just title without having body using data-attribute to get config', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -149,13 +158,15 @@ describe('Popover', () => {
expect(popoverDisplayed).not.toBeNull()
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
done()
resolve()
})
popover.show()
})
})
it('should NOT show a popover without `title` and `content`', done => {
it('should NOT show a popover without `title` and `content`', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -165,11 +176,12 @@ describe('Popover', () => {
setTimeout(() => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
expect(document.querySelector('.popover')).toBeNull()
done()
resolve()
})
popover.show()
})
})
it('"setContent" should keep the initial template', () => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
@ -187,7 +199,8 @@ describe('Popover', () => {
expect(tip.querySelector('.popover-body')).not.toBeNull()
})
it('should call setContent once', done => {
it('should call setContent once', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -210,7 +223,7 @@ describe('Popover', () => {
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
expect(spy).toHaveBeenCalledTimes(0)
if (times > 1) {
done()
resolve()
}
times++
@ -218,8 +231,10 @@ describe('Popover', () => {
})
popover.show()
})
})
it('should show a popover with provided custom class', done => {
it('should show a popover with provided custom class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -229,15 +244,17 @@ describe('Popover', () => {
const tip = document.querySelector('.popover')
expect(tip).not.toBeNull()
expect(tip).toHaveClass('custom-class')
done()
resolve()
})
popover.show()
})
})
})
describe('hide', () => {
it('should hide a popover', done => {
it('should hide a popover', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
const popoverEl = fixtureEl.querySelector('a')
@ -249,12 +266,13 @@ describe('Popover', () => {
popoverEl.addEventListener('hidden.bs.popover', () => {
expect(document.querySelector('.popover')).toBeNull()
done()
resolve()
})
popover.show()
})
})
})
describe('jQueryInterface', () => {
it('should create a popover', () => {

56
js/tests/unit/scrollspy.spec.js
View File

@ -1,6 +1,6 @@
import ScrollSpy from '../../src/scrollspy'
import Manipulator from '../../src/dom/manipulator'
import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
describe('ScrollSpy', () => {
let fixtureEl
@ -85,7 +85,8 @@ describe('ScrollSpy', () => {
expect(scrollSpy._targets).toHaveSize(2)
})
it('should only switch "active" class on current target', done => {
it('should only switch "active" class on current target', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="root" class="active" style="display: block">',
' <div class="topbar">',
@ -122,13 +123,15 @@ describe('ScrollSpy', () => {
scrollSpyEl.addEventListener('scroll', () => {
expect(rootEl).toHaveClass('active')
expect(scrollSpy._process).toHaveBeenCalled()
done()
resolve()
})
scrollSpyEl.scrollTop = 350
})
})
it('should only switch "active" class on current target specified w element', done => {
it('should only switch "active" class on current target specified w element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="root" class="active" style="display: block">',
' <div class="topbar">',
@ -165,13 +168,15 @@ describe('ScrollSpy', () => {
scrollSpyEl.addEventListener('scroll', () => {
expect(rootEl).toHaveClass('active')
expect(scrollSpy._process).toHaveBeenCalled()
done()
resolve()
})
scrollSpyEl.scrollTop = 350
})
})
it('should correctly select middle navigation option when large offset is used', done => {
it('should correctly select middle navigation option when large offset is used', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="header" style="height: 500px;"></div>',
'<nav id="navigation" class="navbar">',
@ -201,13 +206,15 @@ describe('ScrollSpy', () => {
expect(fixtureEl.querySelector('#two-link')).toHaveClass('active')
expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active')
expect(scrollSpy._process).toHaveBeenCalled()
done()
resolve()
})
contentEl.scrollTop = 550
})
})
it('should add the active class to the correct element', done => {
it('should add the active class to the correct element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar">',
' <ul class="nav">',
@ -241,13 +248,15 @@ describe('ScrollSpy', () => {
contentEl,
scrollSpy,
spy,
cb: () => done()
cb: resolve
})
}
})
})
})
it('should add the active class to the correct element (nav markup)', done => {
it('should add the active class to the correct element (nav markup)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar">',
' <nav class="nav">',
@ -281,13 +290,15 @@ describe('ScrollSpy', () => {
contentEl,
scrollSpy,
spy,
cb: () => done()
cb: resolve
})
}
})
})
})
it('should add the active class to the correct element (list-group markup)', done => {
it('should add the active class to the correct element (list-group markup)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar">',
' <div class="list-group">',
@ -321,13 +332,15 @@ describe('ScrollSpy', () => {
contentEl,
scrollSpy,
spy,
cb: () => done()
cb: resolve
})
}
})
})
})
it('should clear selection if above the first section', done => {
it('should clear selection if above the first section', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="header" style="height: 500px;"></div>',
'<nav id="navigation" class="navbar">',
@ -367,14 +380,16 @@ describe('ScrollSpy', () => {
contentEl.scrollTop = 0
} else {
expect(active).toBeNull()
done()
resolve()
}
})
contentEl.scrollTop = 201
})
})
it('should not clear selection if above the first section and first section is at the top', done => {
it('should not clear selection if above the first section and first section is at the top', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div id="header" style="height: 500px;"></div>',
'<nav id="navigation" class="navbar">',
@ -416,14 +431,16 @@ describe('ScrollSpy', () => {
} else {
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
expect(active.getAttribute('id')).toEqual('one-link')
done()
resolve()
}
})
contentEl.scrollTop = startOfSectionTwo
})
})
it('should correctly select navigation element on backward scrolling when each target section height is 100%', done => {
it('should correctly select navigation element on backward scrolling when each target section height is 100%', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="navbar">',
' <ul class="nav">',
@ -488,7 +505,7 @@ describe('ScrollSpy', () => {
scrollSpy,
spy,
contentEl,
cb: done
cb: resolve
})
}
})
@ -499,6 +516,7 @@ describe('ScrollSpy', () => {
}
})
})
})
it('should allow passed in option offset method: offset', () => {
fixtureEl.innerHTML = [

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

@ -1,5 +1,5 @@
import Tab from '../../src/tab'
import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture'
import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
describe('Tab', () => {
let fixtureEl
@ -39,7 +39,8 @@ describe('Tab', () => {
})
describe('show', () => {
it('should activate element by tab id (using buttons, the preferred semantic way)', done => {
it('should activate element by tab id (using buttons, the preferred semantic way)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
@ -57,13 +58,15 @@ describe('Tab', () => {
profileTriggerEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
done()
resolve()
})
tab.show()
})
})
it('should activate element by tab id (using links for tabs - not ideal, but still supported)', done => {
it('should activate element by tab id (using links for tabs - not ideal, but still supported)', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><a href="#home" role="tab">Home</a></li>',
@ -81,13 +84,15 @@ describe('Tab', () => {
profileTriggerEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
done()
resolve()
})
tab.show()
})
})
it('should activate element by tab id in ordered list', done => {
it('should activate element by tab id in ordered list', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ol class="nav nav-pills">',
' <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
@ -104,13 +109,15 @@ describe('Tab', () => {
profileTriggerEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
done()
resolve()
})
tab.show()
})
})
it('should activate element by tab id in nav list', done => {
it('should activate element by tab id in nav list', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="nav">',
' <button type="button" data-bs-target="#home" role="tab">Home</button>',
@ -127,13 +134,15 @@ describe('Tab', () => {
profileTriggerEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
done()
resolve()
})
tab.show()
})
})
it('should activate element by tab id in list group', done => {
it('should activate element by tab id in list group', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="list-group" role="tablist">',
' <button type="button" data-bs-target="#home" role="tab">Home</button>',
@ -150,13 +159,15 @@ describe('Tab', () => {
profileTriggerEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
done()
resolve()
})
tab.show()
})
})
it('should not fire shown when show is prevented', done => {
it('should not fire shown when show is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div class="nav"></div>'
const navEl = fixtureEl.querySelector('div')
@ -164,7 +175,7 @@ describe('Tab', () => {
const expectDone = () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 30)
}
@ -179,8 +190,10 @@ describe('Tab', () => {
tab.show()
})
})
it('should not fire shown when tab is already active', done => {
it('should not fire shown when tab is already active', () => {
return new Promise(resolve => {
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>',
@ -202,11 +215,13 @@ describe('Tab', () => {
tab.show()
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 30)
})
})
it('show and shown events should reference correct relatedTarget', done => {
it('show and shown events should reference correct relatedTarget', () => {
return new Promise(resolve => {
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>',
@ -229,13 +244,15 @@ describe('Tab', () => {
expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false')
done()
resolve()
})
secondTab.show()
})
})
it('should fire hide and hidden events', done => {
it('should fire hide and hidden events', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
@ -260,13 +277,15 @@ describe('Tab', () => {
triggerList[0].addEventListener('hidden.bs.tab', ev => {
expect(hideCalled).toBeTrue()
expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
done()
resolve()
})
firstTab.show()
})
})
it('should not fire hidden when hide is prevented', done => {
it('should not fire hidden when hide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
@ -280,7 +299,7 @@ describe('Tab', () => {
const expectDone = () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 30)
}
@ -299,8 +318,10 @@ describe('Tab', () => {
firstTab.show()
})
})
it('should handle removed tabs', done => {
it('should handle removed tabs', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
@ -332,7 +353,7 @@ describe('Tab', () => {
secondNavEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelectorAll('.nav-tab')).toHaveSize(2)
done()
resolve()
})
btnCloseEl.addEventListener('click', () => {
@ -349,6 +370,7 @@ describe('Tab', () => {
btnCloseEl.click()
})
})
})
describe('dispose', () => {
it('should dispose a tab', () => {
@ -464,7 +486,8 @@ describe('Tab', () => {
})
describe('data-api', () => {
it('should create dynamically a tab', done => {
it('should create dynamically a tab', () => {
return new Promise(resolve => {
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>',
@ -481,11 +504,12 @@ describe('Tab', () => {
secondTabTrigger.addEventListener('shown.bs.tab', () => {
expect(secondTabTrigger).toHaveClass('active')
expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
done()
resolve()
})
secondTabTrigger.click()
})
})
it('selected tab should deactivate previous selected link in dropdown', () => {
fixtureEl.innerHTML = [
@ -567,7 +591,8 @@ describe('Tab', () => {
expect(fixtureEl.querySelector('.nav-link')).not.toHaveClass('active')
})
it('should handle nested tabs', done => {
it('should handle nested tabs', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<nav class="nav nav-tabs" role="tablist">',
' <button type="button" id="tab1" data-bs-target="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</button>',
@ -596,7 +621,7 @@ describe('Tab', () => {
tabNested2El.addEventListener('shown.bs.tab', () => {
expect(xTab1El).toHaveClass('active')
done()
resolve()
})
tab1El.addEventListener('shown.bs.tab', () => {
@ -606,8 +631,10 @@ describe('Tab', () => {
tab1El.click()
})
})
it('should not remove fade class if no active pane is present', done => {
it('should not remove fade class if no active pane is present', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation"><button type="button" id="tab-home" data-bs-target="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</button></li>',
@ -635,7 +662,7 @@ describe('Tab', () => {
expect(tabHomeEl).toHaveClass('fade')
expect(tabHomeEl).toHaveClass('show')
done()
resolve()
})
triggerTabHomeEl.click()
@ -643,8 +670,10 @@ describe('Tab', () => {
triggerTabProfileEl.click()
})
})
it('should not add show class to tab panes if there is no `.fade` class', done => {
it('should not add show class to tab panes if there is no `.fade` class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
@ -664,13 +693,15 @@ describe('Tab', () => {
secondNavEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelectorAll('.show')).toHaveSize(0)
done()
resolve()
})
secondNavEl.click()
})
})
it('should add show class to tab panes if there is a `.fade` class', done => {
it('should add show class to tab panes if there is a `.fade` class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item" role="presentation">',
@ -690,13 +721,15 @@ describe('Tab', () => {
secondNavEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelectorAll('.show')).toHaveSize(1)
done()
resolve()
})
secondNavEl.click()
})
})
it('should prevent default when the trigger is <a> or <area>', done => {
it('should prevent default when the trigger is <a> or <area>', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav" role="tablist">',
' <li><a type="button" href="#test" class="active" role="tab" data-bs-toggle="tab">Home</a></li>',
@ -710,13 +743,15 @@ describe('Tab', () => {
tabEl.addEventListener('shown.bs.tab', () => {
expect(tabEl).toHaveClass('active')
expect(Event.prototype.preventDefault).toHaveBeenCalled()
done()
resolve()
})
tabEl.click()
})
})
it('should not fire shown when tab has disabled attribute', done => {
it('should not fire shown when tab has disabled attribute', () => {
return new Promise(resolve => {
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>',
@ -736,11 +771,13 @@ describe('Tab', () => {
triggerDisabled.click()
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 30)
})
})
it('should not fire shown when tab has disabled class', done => {
it('should not fire shown when tab has disabled class', () => {
return new Promise(resolve => {
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>',
@ -761,8 +798,9 @@ describe('Tab', () => {
triggerDisabled.click()
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 30)
})
})
})
})

86
js/tests/unit/toast.spec.js
View File

@ -1,5 +1,5 @@
import Toast from '../../src/toast'
import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
describe('Toast', () => {
let fixtureEl
@ -36,7 +36,8 @@ describe('Toast', () => {
expect(toastByElement._element).toEqual(toastEl)
})
it('should allow to config in js', done => {
it('should allow to config in js', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast">',
' <div class="toast-body">',
@ -52,13 +53,15 @@ describe('Toast', () => {
toastEl.addEventListener('shown.bs.toast', () => {
expect(toastEl).toHaveClass('show')
done()
resolve()
})
toast.show()
})
})
it('should close toast when close element with data-bs-dismiss attribute is set', done => {
it('should close toast when close element with data-bs-dismiss attribute is set', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
@ -78,12 +81,13 @@ describe('Toast', () => {
toastEl.addEventListener('hidden.bs.toast', () => {
expect(toastEl).not.toHaveClass('show')
done()
resolve()
})
toast.show()
})
})
})
describe('Default', () => {
it('should expose default setting to allow to override them', () => {
@ -111,7 +115,8 @@ describe('Toast', () => {
})
describe('show', () => {
it('should auto hide', done => {
it('should auto hide', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1">',
' <div class="toast-body">',
@ -125,13 +130,15 @@ describe('Toast', () => {
toastEl.addEventListener('hidden.bs.toast', () => {
expect(toastEl).not.toHaveClass('show')
done()
resolve()
})
toast.show()
})
})
it('should not add fade class', done => {
it('should not add fade class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
@ -145,13 +152,15 @@ describe('Toast', () => {
toastEl.addEventListener('shown.bs.toast', () => {
expect(toastEl).not.toHaveClass('fade')
done()
resolve()
})
toast.show()
})
})
it('should not trigger shown if show is prevented', done => {
it('should not trigger shown if show is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
@ -166,7 +175,7 @@ describe('Toast', () => {
const assertDone = () => {
setTimeout(() => {
expect(toastEl).not.toHaveClass('show')
done()
resolve()
}, 20)
}
@ -181,8 +190,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should clear timeout if toast is shown again before it is hidden', done => {
it('should clear timeout if toast is shown again before it is hidden', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast">',
' <div class="toast-body">',
@ -199,7 +210,7 @@ describe('Toast', () => {
toastEl.addEventListener('shown.bs.toast', () => {
expect(toast._clearTimeout).toHaveBeenCalled()
expect(toast._timeout).toBeNull()
done()
resolve()
})
toast.show()
}, toast._config.delay / 2)
@ -208,8 +219,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should clear timeout if toast is interacted with mouse', done => {
it('should clear timeout if toast is interacted with mouse', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast">',
' <div class="toast-body">',
@ -228,7 +241,7 @@ describe('Toast', () => {
toastEl.addEventListener('mouseover', () => {
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
expect(toast._timeout).toBeNull()
done()
resolve()
})
const mouseOverEvent = createEvent('mouseover')
@ -237,8 +250,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should clear timeout if toast is interacted with keyboard', done => {
it('should clear timeout if toast is interacted with keyboard', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="outside-focusable">outside focusable</button>',
'<div class="toast">',
@ -259,7 +274,7 @@ describe('Toast', () => {
toastEl.addEventListener('focusin', () => {
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
expect(toast._timeout).toBeNull()
done()
resolve()
})
const insideFocusable = toastEl.querySelector('button')
@ -268,8 +283,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should still auto hide after being interacted with mouse and keyboard', done => {
it('should still auto hide after being interacted with mouse and keyboard', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="outside-focusable">outside focusable</button>',
'<div class="toast">',
@ -301,7 +318,7 @@ describe('Toast', () => {
toastEl.addEventListener('focusout', () => {
expect(toast._timeout).not.toBeNull()
done()
resolve()
})
const mouseOverEvent = createEvent('mouseover')
@ -310,8 +327,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should not auto hide if focus leaves but mouse pointer remains inside', done => {
it('should not auto hide if focus leaves but mouse pointer remains inside', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="outside-focusable">outside focusable</button>',
'<div class="toast">',
@ -338,7 +357,7 @@ describe('Toast', () => {
toastEl.addEventListener('focusout', () => {
expect(toast._timeout).toBeNull()
done()
resolve()
})
const mouseOverEvent = createEvent('mouseover')
@ -347,8 +366,10 @@ describe('Toast', () => {
toast.show()
})
})
it('should not auto hide if mouse pointer leaves but focus remains inside', done => {
it('should not auto hide if mouse pointer leaves but focus remains inside', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<button id="outside-focusable">outside focusable</button>',
'<div class="toast">',
@ -375,7 +396,7 @@ describe('Toast', () => {
toastEl.addEventListener('mouseout', () => {
expect(toast._timeout).toBeNull()
done()
resolve()
})
const mouseOverEvent = createEvent('mouseover')
@ -385,9 +406,11 @@ describe('Toast', () => {
toast.show()
})
})
})
describe('hide', () => {
it('should allow to hide toast manually', done => {
it('should allow to hide toast manually', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
' <div class="toast-body">',
@ -405,11 +428,12 @@ describe('Toast', () => {
toastEl.addEventListener('hidden.bs.toast', () => {
expect(toastEl).not.toHaveClass('show')
done()
resolve()
})
toast.show()
})
})
it('should do nothing when we call hide on a non shown toast', () => {
fixtureEl.innerHTML = '<div></div>'
@ -424,7 +448,8 @@ describe('Toast', () => {
expect(toastEl.classList.contains).toHaveBeenCalled()
})
it('should not trigger hidden if hide is prevented', done => {
it('should not trigger hidden if hide is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
' <div class="toast-body">',
@ -439,7 +464,7 @@ describe('Toast', () => {
const assertDone = () => {
setTimeout(() => {
expect(toastEl).toHaveClass('show')
done()
resolve()
}, 20)
}
@ -459,6 +484,7 @@ describe('Toast', () => {
toast.show()
})
})
})
describe('dispose', () => {
it('should allow to destroy toast', () => {
@ -475,7 +501,8 @@ describe('Toast', () => {
expect(Toast.getInstance(toastEl)).toBeNull()
})
it('should allow to destroy toast and hide it before that', done => {
it('should allow to destroy toast and hide it before that', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
' <div class="toast-body">',
@ -495,7 +522,7 @@ describe('Toast', () => {
expect(Toast.getInstance(toastEl)).toBeNull()
expect(toastEl).not.toHaveClass('show')
done()
resolve()
}
toastEl.addEventListener('shown.bs.toast', () => {
@ -505,6 +532,7 @@ describe('Toast', () => {
toast.show()
})
})
})
describe('jQueryInterface', () => {
it('should create a toast', () => {

240
js/tests/unit/tooltip.spec.js
View File

@ -94,7 +94,8 @@ describe('Tooltip', () => {
expect(tooltip._config.content).toEqual('7')
})
it('should enable selector delegation', done => {
it('should enable selector delegation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const containerEl = fixtureEl.querySelector('div')
@ -110,13 +111,15 @@ describe('Tooltip', () => {
tooltipInContainerEl.addEventListener('shown.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).not.toBeNull()
tooltipContainer.dispose()
done()
resolve()
})
tooltipInContainerEl.click()
})
})
it('should create offset modifier when offset is passed as a function', done => {
it('should create offset modifier when offset is passed as a function', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Offset from function">'
const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
@ -130,7 +133,7 @@ describe('Tooltip', () => {
reference: state.rects.reference,
placement: state.placement
}, tooltipEl)
done()
resolve()
}
}
})
@ -141,6 +144,7 @@ describe('Tooltip', () => {
tooltip.show()
})
})
it('should create offset modifier when offset option is passed in data attribute', () => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-offset="10,20" title="Another tooltip">'
@ -192,7 +196,8 @@ describe('Tooltip', () => {
})
describe('enable', () => {
it('should enable a tooltip', done => {
it('should enable a tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -202,15 +207,17 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
})
tooltip.show()
})
})
})
describe('disable', () => {
it('should disable tooltip', done => {
it('should disable tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -226,10 +233,11 @@ describe('Tooltip', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
})
describe('toggleEnabled', () => {
it('should toggle enabled', () => {
@ -247,7 +255,8 @@ describe('Tooltip', () => {
})
describe('toggle', () => {
it('should do nothing if disabled', done => {
it('should do nothing if disabled', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -263,11 +272,13 @@ describe('Tooltip', () => {
setTimeout(() => {
expect().nothing()
done()
resolve()
}, 10)
})
})
it('should show a tooltip', done => {
it('should show a tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -275,13 +286,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
})
tooltip.toggle()
})
})
it('should call toggle and show the tooltip when trigger is "click"', done => {
it('should call toggle and show the tooltip when trigger is "click"', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -293,13 +306,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(tooltip.toggle).toHaveBeenCalled()
done()
resolve()
})
tooltipEl.click()
})
})
it('should hide a tooltip', done => {
it('should hide a tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -311,13 +326,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('hidden.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).toBeNull()
done()
resolve()
})
tooltip.toggle()
})
})
it('should call toggle and hide the tooltip when trigger is "click"', done => {
it('should call toggle and hide the tooltip when trigger is "click"', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -333,12 +350,13 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('hidden.bs.tooltip', () => {
expect(tooltip.toggle).toHaveBeenCalled()
done()
resolve()
})
tooltipEl.click()
})
})
})
describe('dispose', () => {
it('should destroy a tooltip', () => {
@ -367,7 +385,8 @@ describe('Tooltip', () => {
expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)
})
it('should destroy a tooltip after it is shown and hidden', done => {
it('should destroy a tooltip after it is shown and hidden', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -380,13 +399,15 @@ describe('Tooltip', () => {
tooltip.dispose()
expect(tooltip.tip).toBeNull()
expect(Tooltip.getInstance(tooltipEl)).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should destroy a tooltip and remove it from the dom', done => {
it('should destroy a tooltip and remove it from the dom', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -398,15 +419,17 @@ describe('Tooltip', () => {
tooltip.dispose()
expect(document.querySelector('.tooltip')).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
})
describe('show', () => {
it('should show a tooltip', done => {
it('should show a tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -418,13 +441,15 @@ describe('Tooltip', () => {
expect(tooltipShown).not.toBeNull()
expect(tooltipEl.getAttribute('aria-describedby')).toEqual(tooltipShown.getAttribute('id'))
expect(tooltipShown.getAttribute('id')).toContain('tooltip')
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip when hovering a child element', done => {
it('should show a tooltip when hovering a child element', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" rel="tooltip" title="Another tooltip">',
' <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">',
@ -443,11 +468,13 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(tooltip.show).toHaveBeenCalled()
done()
resolve()
}, 0)
})
})
it('should show a tooltip on mobile', done => {
it('should show a tooltip on mobile', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -460,13 +487,15 @@ describe('Tooltip', () => {
expect(document.querySelector('.tooltip')).not.toBeNull()
expect(EventHandler.on).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
document.documentElement.ontouchstart = undefined
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip relative to placement option', done => {
it('should show a tooltip relative to placement option', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -481,13 +510,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')
done()
resolve()
})
tooltip.show()
})
})
it('should not error when trying to show a tooltip that has been removed from the dom', done => {
it('should not error when trying to show a tooltip that has been removed from the dom', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -503,7 +534,7 @@ describe('Tooltip', () => {
tooltipShown = document.querySelector('.tooltip')
expect(tooltipShown).not.toBeNull()
done()
resolve()
})
tooltip.show()
@ -513,8 +544,10 @@ describe('Tooltip', () => {
tooltip.show()
})
})
it('should show a tooltip with a dom element container', done => {
it('should show a tooltip with a dom element container', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -524,13 +557,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip with a jquery element container', done => {
it('should show a tooltip with a jquery element container', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -543,13 +578,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip with a selector in container', done => {
it('should show a tooltip with a selector in container', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -559,13 +596,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip with placement as a function', done => {
it('should show a tooltip with placement as a function', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const spy = jasmine.createSpy('placement').and.returnValue('top')
@ -577,13 +616,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).not.toBeNull()
expect(spy).toHaveBeenCalled()
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip without the animation', done => {
it('should show a tooltip without the animation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -596,11 +637,12 @@ describe('Tooltip', () => {
expect(tip).not.toBeNull()
expect(tip).not.toHaveClass('fade')
done()
resolve()
})
tooltip.show()
})
})
it('should throw an error the element is not visible', () => {
fixtureEl.innerHTML = '<a href="#" style="display: none" rel="tooltip" title="Another tooltip">'
@ -615,7 +657,8 @@ describe('Tooltip', () => {
}
})
it('should not show a tooltip if show.bs.tooltip is prevented', done => {
it('should not show a tooltip if show.bs.tooltip is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -624,7 +667,7 @@ describe('Tooltip', () => {
const expectedDone = () => {
setTimeout(() => {
expect(document.querySelector('.tooltip')).toBeNull()
done()
resolve()
}, 10)
}
@ -639,8 +682,10 @@ describe('Tooltip', () => {
tooltip.show()
})
})
it('should show tooltip if leave event hasn\'t occurred before delay expires', done => {
it('should show tooltip if leave event hasn\'t occurred before delay expires', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -656,13 +701,15 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(tooltip.show).toHaveBeenCalled()
done()
resolve()
}, 200)
tooltipEl.dispatchEvent(createEvent('mouseover'))
})
})
it('should not show tooltip if leave event occurs before delay expires', done => {
it('should not show tooltip if leave event occurs before delay expires', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -680,13 +727,15 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(tooltip.show).toHaveBeenCalled()
expect(document.querySelectorAll('.tooltip')).toHaveSize(0)
done()
resolve()
}, 200)
tooltipEl.dispatchEvent(createEvent('mouseover'))
})
})
it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', done => {
it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -709,14 +758,16 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(tooltip._getTipElement()).toHaveClass('show')
expect(document.querySelectorAll('.tooltip')).toHaveSize(1)
done()
resolve()
}, 200)
}, 10)
tooltipEl.dispatchEvent(createEvent('mouseover'))
})
})
it('should not hide tooltip if leave event occurs and interaction remains inside trigger', done => {
it('should not hide tooltip if leave event occurs and interaction remains inside trigger', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" rel="tooltip" title="Another tooltip">',
'<b>Trigger</b>',
@ -741,13 +792,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('mouseout', () => {
expect(tooltip.hide).not.toHaveBeenCalled()
done()
resolve()
})
tooltipEl.dispatchEvent(createEvent('mouseover'))
})
})
it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => {
it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', () => {
return new Promise(resolve => {
// Style this tooltip to give it plenty of room for popper to do what it wants
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-placement="top" style="position:fixed;left:50%;top:50%;">Trigger</a>'
@ -772,14 +825,16 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(tooltip._popper).not.toBeNull()
expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
done()
resolve()
}, 200)
}, 10)
tooltipEl.dispatchEvent(createEvent('mouseover'))
})
})
it('should only trigger inserted event if a new tooltip element was created', done => {
it('should only trigger inserted event if a new tooltip element was created', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -803,14 +858,16 @@ describe('Tooltip', () => {
setTimeout(() => {
expect(insertedFunc).toHaveBeenCalledTimes(1)
done()
resolve()
}, 200)
}, 0)
tooltip.show()
})
})
it('should show a tooltip with custom class provided in data attributes', done => {
it('should show a tooltip with custom class provided in data attributes', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class">'
const tooltipEl = fixtureEl.querySelector('a')
@ -820,13 +877,15 @@ describe('Tooltip', () => {
const tip = document.querySelector('.tooltip')
expect(tip).not.toBeNull()
expect(tip).toHaveClass('custom-class')
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip with custom class provided as a string in config', done => {
it('should show a tooltip with custom class provided as a string in config', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -839,13 +898,15 @@ describe('Tooltip', () => {
expect(tip).not.toBeNull()
expect(tip).toHaveClass('custom-class')
expect(tip).toHaveClass('custom-class-2')
done()
resolve()
})
tooltip.show()
})
})
it('should show a tooltip with custom class provided as a function in config', done => {
it('should show a tooltip with custom class provided as a function in config', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
@ -859,13 +920,15 @@ describe('Tooltip', () => {
expect(tip).not.toBeNull()
expect(spy).toHaveBeenCalled()
expect(tip).toHaveClass('custom-class')
done()
resolve()
})
tooltip.show()
})
})
it('should remove `title` attribute if exists', done => {
it('should remove `title` attribute if exists', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
const tooltipEl = fixtureEl.querySelector('a')
@ -873,14 +936,16 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('shown.bs.tooltip', () => {
expect(tooltipEl.getAttribute('title')).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
})
describe('hide', () => {
it('should hide a tooltip', done => {
it('should hide a tooltip', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -890,13 +955,15 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('hidden.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).toBeNull()
expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should hide a tooltip on mobile', done => {
it('should hide a tooltip on mobile', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -912,13 +979,15 @@ describe('Tooltip', () => {
expect(document.querySelector('.tooltip')).toBeNull()
expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
document.documentElement.ontouchstart = undefined
done()
resolve()
})
tooltip.show()
})
})
it('should hide a tooltip without animation', done => {
it('should hide a tooltip without animation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -930,19 +999,21 @@ describe('Tooltip', () => {
tooltipEl.addEventListener('hidden.bs.tooltip', () => {
expect(document.querySelector('.tooltip')).toBeNull()
expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
it('should not hide a tooltip if hide event is prevented', done => {
it('should not hide a tooltip if hide event is prevented', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const assertDone = () => {
setTimeout(() => {
expect(document.querySelector('.tooltip')).not.toBeNull()
done()
resolve()
}, 20)
}
@ -962,6 +1033,7 @@ describe('Tooltip', () => {
tooltip.show()
})
})
it('should not throw error running hide if popper hasn\'t been shown', () => {
fixtureEl.innerHTML = '<div></div>'
@ -979,7 +1051,8 @@ describe('Tooltip', () => {
})
describe('update', () => {
it('should call popper update', done => {
it('should call popper update', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
const tooltipEl = fixtureEl.querySelector('a')
@ -991,11 +1064,12 @@ describe('Tooltip', () => {
tooltip.update()
expect(tooltip._popper.update).toHaveBeenCalled()
done()
resolve()
})
tooltip.show()
})
})
it('should do nothing if the tooltip is not shown', () => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
@ -1272,7 +1346,8 @@ describe('Tooltip', () => {
})
describe('aria-label', () => {
it('should add the aria-label attribute for referencing original title', done => {
it('should add the aria-label attribute for referencing original title', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
const tooltipEl = fixtureEl.querySelector('a')
@ -1283,13 +1358,15 @@ describe('Tooltip', () => {
expect(tooltipShown).not.toBeNull()
expect(tooltipEl.getAttribute('aria-label')).toEqual('Another tooltip')
done()
resolve()
})
tooltip.show()
})
})
it('should not add the aria-label attribute if the attribute already exists', done => {
it('should not add the aria-label attribute if the attribute already exists', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" aria-label="Different label" title="Another tooltip"></a>'
const tooltipEl = fixtureEl.querySelector('a')
@ -1300,13 +1377,15 @@ describe('Tooltip', () => {
expect(tooltipShown).not.toBeNull()
expect(tooltipEl.getAttribute('aria-label')).toEqual('Different label')
done()
resolve()
})
tooltip.show()
})
})
it('should not add the aria-label attribute if the element has text content', done => {
it('should not add the aria-label attribute if the element has text content', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">text content</a>'
const tooltipEl = fixtureEl.querySelector('a')
@ -1317,12 +1396,13 @@ describe('Tooltip', () => {
expect(tooltipShown).not.toBeNull()
expect(tooltipEl.getAttribute('aria-label')).toBeNull()
done()
resolve()
})
tooltip.show()
})
})
})
describe('getOrCreateInstance', () => {
it('should return tooltip instance', () => {

90
js/tests/unit/util/backdrop.spec.js
View File

@ -23,7 +23,8 @@ describe('Backdrop', () => {
})
describe('show', () => {
it('should append the backdrop html once on show and include the "show" class if it is "shown"', done => {
it('should append the backdrop html once on show and include the "show" class if it is "shown"', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
isAnimated: false
@ -39,11 +40,13 @@ describe('Backdrop', () => {
expect(el).toHaveClass(CLASS_NAME_SHOW)
}
done()
resolve()
})
})
})
it('should not append the backdrop html if it is not "shown"', done => {
it('should not append the backdrop html if it is not "shown"', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true
@ -53,11 +56,13 @@ describe('Backdrop', () => {
expect(getElements()).toHaveSize(0)
instance.show(() => {
expect(getElements()).toHaveSize(0)
done()
resolve()
})
})
})
it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', done => {
it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true
@ -72,13 +77,15 @@ describe('Backdrop', () => {
expect(el).toHaveClass(CLASS_NAME_FADE)
}
done()
resolve()
})
})
})
})
describe('hide', () => {
it('should remove the backdrop html', done => {
it('should remove the backdrop html', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true
@ -91,12 +98,14 @@ describe('Backdrop', () => {
expect(getElements()).toHaveSize(1)
instance.hide(() => {
expect(getElements()).toHaveSize(0)
done()
resolve()
})
})
})
})
it('should remove the "show" class', done => {
it('should remove the "show" class', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true
@ -106,11 +115,13 @@ describe('Backdrop', () => {
instance.show()
instance.hide(() => {
expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
done()
resolve()
})
})
})
it('should not try to remove Node on remove method if it is not "shown"', done => {
it('should not try to remove Node on remove method if it is not "shown"', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true
@ -125,12 +136,14 @@ describe('Backdrop', () => {
expect(getElements()).toHaveSize(0)
expect(spy).not.toHaveBeenCalled()
expect(instance._isAppended).toBeFalse()
done()
resolve()
})
})
})
})
it('should not error if the backdrop no longer has a parent', done => {
it('should not error if the backdrop no longer has a parent', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div id="wrapper"></div>'
const wrapper = fixtureEl.querySelector('#wrapper')
@ -146,14 +159,16 @@ describe('Backdrop', () => {
wrapper.remove()
instance.hide(() => {
expect(getElements()).toHaveSize(0)
done()
resolve()
})
})
})
})
})
describe('click callback', () => {
it('should execute callback on click', done => {
it('should execute callback on click', () => {
return new Promise(resolve => {
const spy = jasmine.createSpy('spy')
const instance = new Backdrop({
@ -164,7 +179,7 @@ describe('Backdrop', () => {
const endTest = () => {
setTimeout(() => {
expect(spy).toHaveBeenCalled()
done()
resolve()
}, 10)
}
@ -177,7 +192,8 @@ describe('Backdrop', () => {
})
describe('animation callbacks', () => {
it('should show and hide backdrop after counting transition duration if it is animated', done => {
it('should show and hide backdrop after counting transition duration if it is animated', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true
@ -187,7 +203,7 @@ describe('Backdrop', () => {
const execDone = () => {
setTimeout(() => {
expect(spy2).toHaveBeenCalledTimes(2)
done()
resolve()
}, 10)
}
@ -198,8 +214,10 @@ describe('Backdrop', () => {
})
expect(spy2).not.toHaveBeenCalled()
})
})
it('should show and hide backdrop without a delay if it is not animated', done => {
it('should show and hide backdrop without a delay if it is not animated', () => {
return new Promise(resolve => {
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
const instance = new Backdrop({
isVisible: true,
@ -213,11 +231,13 @@ describe('Backdrop', () => {
setTimeout(() => {
expect(spy2).toHaveBeenCalled()
expect(spy).not.toHaveBeenCalled()
done()
resolve()
}, 10)
})
})
it('should not call delay callbacks if it is not "shown"', done => {
it('should not call delay callbacks if it is not "shown"', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true
@ -227,25 +247,29 @@ describe('Backdrop', () => {
instance.show()
instance.hide(() => {
expect(spy).not.toHaveBeenCalled()
done()
resolve()
})
})
})
})
describe('Config', () => {
describe('rootElement initialization', () => {
it('should be appended on "document.body" by default', done => {
it('should be appended on "document.body" by default', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true
})
const getElement = () => document.querySelector(CLASS_BACKDROP)
instance.show(() => {
expect(getElement().parentElement).toEqual(document.body)
done()
resolve()
})
})
})
it('should find the rootElement if passed as a string', done => {
it('should find the rootElement if passed as a string', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
rootElement: 'body'
@ -253,11 +277,13 @@ describe('Backdrop', () => {
const getElement = () => document.querySelector(CLASS_BACKDROP)
instance.show(() => {
expect(getElement().parentElement).toEqual(document.body)
done()
resolve()
})
})
})
it('should be appended on any element given by the proper config', done => {
it('should be appended on any element given by the proper config', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div id="wrapper"></div>'
const wrapper = fixtureEl.querySelector('#wrapper')
@ -268,13 +294,15 @@ describe('Backdrop', () => {
const getElement = () => document.querySelector(CLASS_BACKDROP)
instance.show(() => {
expect(getElement().parentElement).toEqual(wrapper)
done()
resolve()
})
})
})
})
describe('ClassName', () => {
it('should allow configuring className', done => {
it('should allow configuring className', () => {
return new Promise(resolve => {
const instance = new Backdrop({
isVisible: true,
className: 'foo'
@ -283,7 +311,9 @@ describe('Backdrop', () => {
instance.show(() => {
expect(getElement()).toEqual(instance._getElement())
instance.dispose()
done()
resolve()
})
})
})
})
})

26
js/tests/unit/util/focustrap.spec.js
View File

@ -1,7 +1,7 @@
import FocusTrap from '../../../src/util/focustrap'
import EventHandler from '../../../src/dom/event-handler'
import SelectorEngine from '../../../src/dom/selector-engine'
import { clearFixture, getFixture, createEvent } from '../../helpers/fixture'
import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
describe('FocusTrap', () => {
let fixtureEl
@ -41,7 +41,8 @@ describe('FocusTrap', () => {
expect(trapElement.focus).not.toHaveBeenCalled()
})
it('should force focus inside focus trap if it can', done => {
it('should force focus inside focus trap if it can', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" id="outside">outside</a>',
'<div id="focustrap" tabindex="-1">',
@ -58,7 +59,7 @@ describe('FocusTrap', () => {
const focusInListener = () => {
expect(inside.focus).toHaveBeenCalled()
document.removeEventListener('focusin', focusInListener)
done()
resolve()
}
spyOn(inside, 'focus')
@ -73,8 +74,10 @@ describe('FocusTrap', () => {
document.dispatchEvent(focusInEvent)
})
})
it('should wrap focus around forward on tab', done => {
it('should wrap focus around forward on tab', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" id="outside">outside</a>',
'<div id="focustrap" tabindex="-1">',
@ -99,7 +102,7 @@ describe('FocusTrap', () => {
const focusInListener = () => {
expect(first.focus).toHaveBeenCalled()
first.removeEventListener('focusin', focusInListener)
done()
resolve()
}
first.addEventListener('focusin', focusInListener)
@ -110,8 +113,10 @@ describe('FocusTrap', () => {
document.dispatchEvent(keydown)
outside.focus()
})
})
it('should wrap focus around backwards on shift-tab', done => {
it('should wrap focus around backwards on shift-tab', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" id="outside">outside</a>',
'<div id="focustrap" tabindex="-1">',
@ -136,7 +141,7 @@ describe('FocusTrap', () => {
const focusInListener = () => {
expect(last.focus).toHaveBeenCalled()
last.removeEventListener('focusin', focusInListener)
done()
resolve()
}
last.addEventListener('focusin', focusInListener)
@ -148,8 +153,10 @@ describe('FocusTrap', () => {
document.dispatchEvent(keydown)
outside.focus()
})
})
it('should force focus on itself if there is no focusable content', done => {
it('should force focus on itself if there is no focusable content', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<a href="#" id="outside">outside</a>',
'<div id="focustrap" tabindex="-1"></div>'
@ -162,7 +169,7 @@ describe('FocusTrap', () => {
const focusInListener = () => {
expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
document.removeEventListener('focusin', focusInListener)
done()
resolve()
}
spyOn(focustrap._config.trapElement, 'focus')
@ -177,6 +184,7 @@ describe('FocusTrap', () => {
document.dispatchEvent(focusInEvent)
})
})
})
describe('deactivate', () => {
it('should flag itself as no longer active', () => {

37
js/tests/unit/util/index.spec.js
View File

@ -1,5 +1,6 @@
import * as Util from '../../../src/util/index'
import { clearFixture, getFixture } from '../../helpers/fixture'
import { noop } from '../../../src/util/index'
describe('Util', () => {
let fixtureEl
@ -154,7 +155,8 @@ describe('Util', () => {
})
describe('triggerTransitionEnd', () => {
it('should trigger transitionend event', done => {
it('should trigger transitionend event', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '<div></div>'
const el = fixtureEl.querySelector('div')
@ -162,12 +164,13 @@ describe('Util', () => {
el.addEventListener('transitionend', () => {
expect(spy).toHaveBeenCalled()
done()
resolve()
})
Util.triggerTransitionEnd(el)
})
})
})
describe('isElement', () => {
it('should detect if the parameter is an element or not and return Boolean', () => {
@ -611,9 +614,9 @@ describe('Util', () => {
})
it('should define a plugin on the jQuery instance', () => {
const pluginMock = function () {}
const pluginMock = Util.noop
pluginMock.NAME = 'test'
pluginMock.jQueryInterface = function () {}
pluginMock.jQueryInterface = Util.noop
Util.defineJQueryPlugin(pluginMock)
expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
@ -658,7 +661,8 @@ describe('Util', () => {
expect(callbackSpy).toHaveBeenCalled()
})
it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', done => {
it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', () => {
return new Promise(resolve => {
const el = document.createElement('div')
const callbackSpy = jasmine.createSpy('callback spy')
@ -671,11 +675,13 @@ describe('Util', () => {
setTimeout(() => {
expect(callbackSpy).toHaveBeenCalled()
done()
resolve()
}, 70)
})
})
it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', done => {
it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', () => {
return new Promise(resolve => {
const el = document.createElement('div')
const callbackSpy = jasmine.createSpy('callback spy')
@ -692,11 +698,13 @@ describe('Util', () => {
setTimeout(() => {
expect(callbackSpy).toHaveBeenCalledTimes(1)
done()
resolve()
}, 70)
})
})
it('should not trigger a transitionend event if another transitionend event had already happened', done => {
it('should not trigger a transitionend event if another transitionend event had already happened', () => {
return new Promise(resolve => {
const el = document.createElement('div')
spyOn(window, 'getComputedStyle').and.returnValue({
@ -704,7 +712,7 @@ describe('Util', () => {
transitionDelay: '0s'
})
Util.executeAfterTransition(() => {}, el)
Util.executeAfterTransition(noop, el)
// simulate a event dispatched by the browser
el.dispatchEvent(new TransitionEvent('transitionend'))
@ -714,11 +722,13 @@ describe('Util', () => {
setTimeout(() => {
// setTimeout should not have triggered another transitionend event.
expect(dispatchSpy).not.toHaveBeenCalled()
done()
resolve()
}, 70)
})
})
it('should ignore transitionend events from nested elements', done => {
it('should ignore transitionend events from nested elements', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="outer">',
' <div class="nested"></div>',
@ -746,10 +756,11 @@ describe('Util', () => {
setTimeout(() => {
expect(callbackSpy).toHaveBeenCalled()
done()
resolve()
}, 70)
})
})
})
describe('getNextActiveElement', () => {
it('should return first element if active not exists or not given and shouldGetNext is either true, or false with cycling being disabled', () => {

9
js/tests/unit/util/scrollbar.spec.js
View File

@ -101,7 +101,7 @@ describe('ScrollBar', () => {
})
describe('hide - reset', () => {
it('should adjust the inline padding of fixed elements which are full-width', done => {
it('should adjust the inline padding of fixed elements which are full-width', () => {
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%">',
' <div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
@ -134,10 +134,9 @@ describe('ScrollBar', () => {
expect(getPaddingAttr(fixedEl2)).toBeNull()
expect(currentPadding).toEqual(originalPadding)
expect(currentPadding2).toEqual(originalPadding2)
done()
})
it('should remove padding & margin if not existed before adjustment', done => {
it('should remove padding & margin if not existed before adjustment', () => {
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%">',
' <div class="fixed" id="fixed" style="width: 100vw;"></div>',
@ -155,10 +154,9 @@ describe('ScrollBar', () => {
expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
done()
})
it('should adjust the inline margin and padding of sticky elements', done => {
it('should adjust the inline margin and padding of sticky elements', () => {
fixtureEl.innerHTML = [
'<div style="height: 110vh">',
' <div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
@ -184,7 +182,6 @@ describe('ScrollBar', () => {
expect(getMarginX(stickyTopEl)).toEqual(originalMargin)
expect(getPaddingAttr(stickyTopEl)).toBeNull()
expect(getPaddingX(stickyTopEl)).toEqual(originalPadding)
done()
})
it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {

34
js/tests/unit/util/swipe.spec.js
View File

@ -78,7 +78,8 @@ describe('Swipe', () => {
})
describe('Config', () => {
it('Test leftCallback', done => {
it('Test leftCallback', () => {
return new Promise(resolve => {
const spyRight = jasmine.createSpy('spy')
clearPointerEvents()
defineDocumentElementOntouchstart()
@ -87,7 +88,7 @@ describe('Swipe', () => {
leftCallback: () => {
expect(spyRight).not.toHaveBeenCalled()
restorePointerEvents()
done()
resolve()
},
rightCallback: spyRight
})
@ -97,8 +98,10 @@ describe('Swipe', () => {
deltaX: -300
})
})
})
it('Test rightCallback', done => {
it('Test rightCallback', () => {
return new Promise(resolve => {
const spyLeft = jasmine.createSpy('spy')
clearPointerEvents()
defineDocumentElementOntouchstart()
@ -107,7 +110,7 @@ describe('Swipe', () => {
rightCallback: () => {
expect(spyLeft).not.toHaveBeenCalled()
restorePointerEvents()
done()
resolve()
},
leftCallback: spyLeft
})
@ -117,8 +120,10 @@ describe('Swipe', () => {
deltaX: 300
})
})
})
it('Test endCallback', done => {
it('Test endCallback', () => {
return new Promise(resolve => {
clearPointerEvents()
defineDocumentElementOntouchstart()
let isFirstTime = true
@ -131,7 +136,7 @@ describe('Swipe', () => {
expect().nothing()
restorePointerEvents()
done()
resolve()
}
// eslint-disable-next-line no-new
@ -149,6 +154,7 @@ describe('Swipe', () => {
})
})
})
})
describe('Functionality on PointerEvents', () => {
it('should not allow pinch with touch events', () => {
@ -170,10 +176,11 @@ describe('Swipe', () => {
expect(swipe._handleSwipe).not.toHaveBeenCalled()
})
it('should allow swipeRight and call "rightCallback" with pointer events', done => {
it('should allow swipeRight and call "rightCallback" with pointer events', () => {
return new Promise(resolve => {
if (!supportPointerEvent) {
expect().nothing()
done()
resolve()
return
}
@ -186,17 +193,19 @@ describe('Swipe', () => {
rightCallback: () => {
deleteDocumentElementOntouchstart()
expect().nothing()
done()
resolve()
}
})
mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
})
})
it('should allow swipeLeft and call "leftCallback" with pointer events', done => {
it('should allow swipeLeft and call "leftCallback" with pointer events', () => {
return new Promise(resolve => {
if (!supportPointerEvent) {
expect().nothing()
done()
resolve()
return
}
@ -209,7 +218,7 @@ describe('Swipe', () => {
leftCallback: () => {
expect().nothing()
deleteDocumentElementOntouchstart()
done()
resolve()
}
})
@ -219,6 +228,7 @@ describe('Swipe', () => {
}, 'pointer')
})
})
})
describe('Dispose', () => {
it('should call EventHandler.off', () => {