',
'
![]()
',
@@ -546,7 +596,7 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl)
carousel._isSliding = true
- spyOn(carousel, '_triggerSlideEvent')
+ const spy = spyOn(EventHandler, 'trigger')
Simulator.gestures.swipe(carouselEl, {
deltaX: 300,
@@ -560,7 +610,7 @@ describe('Carousel', () => {
})
setTimeout(() => {
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
delete document.documentElement.ontouchstart
restorePointerEvents()
resolve()
@@ -574,7 +624,7 @@ describe('Carousel', () => {
clearPointerEvents()
document.documentElement.ontouchstart = noop
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const carouselEl = fixtureEl.querySelector('.carousel')
const carousel = new Carousel(carouselEl)
@@ -600,32 +650,34 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('.carousel')
const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'pause')
+ const spy = spyOn(carousel, 'pause')
const mouseOverEvent = createEvent('mouseover')
carouselEl.dispatchEvent(mouseOverEvent)
setTimeout(() => {
- expect(carousel.pause).toHaveBeenCalled()
+ expect(spy).toHaveBeenCalled()
resolve()
}, 10)
})
})
- it('should call cycle on mouse out with pause equal to hover', () => {
+ it('should call `maybeEnableCycle` on mouse out with pause equal to hover', () => {
return new Promise(resolve => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const carouselEl = fixtureEl.querySelector('.carousel')
const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'cycle')
+ const spyEnable = spyOn(carousel, '_maybeEnableCycle').and.callThrough()
+ const spyCycle = spyOn(carousel, 'cycle')
const mouseOutEvent = createEvent('mouseout')
carouselEl.dispatchEvent(mouseOutEvent)
setTimeout(() => {
- expect(carousel.cycle).toHaveBeenCalled()
+ expect(spyEnable).toHaveBeenCalled()
+ expect(spyCycle).toHaveBeenCalled()
resolve()
}, 10)
})
@@ -639,12 +691,12 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_triggerSlideEvent')
+ const spy = spyOn(EventHandler, 'trigger')
carousel._isSliding = true
carousel.next()
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
it('should not fire slid when slide is prevented', () => {
@@ -769,6 +821,28 @@ describe('Carousel', () => {
expect(carousel._activeElement).toEqual(secondItemEl)
})
+ it('should continue cycling if it was already', () => {
+ fixtureEl.innerHTML = [
+ '
',
+ '
',
+ '
item 1
',
+ '
item 2
',
+ '
',
+ '
'
+ ].join('')
+
+ const carouselEl = fixtureEl.querySelector('#myCarousel')
+ const carousel = new Carousel(carouselEl)
+ const spy = spyOn(carousel, 'cycle')
+
+ carousel.next()
+ expect(spy).not.toHaveBeenCalled()
+
+ carousel.cycle()
+ carousel.next()
+ expect(spy).toHaveBeenCalledTimes(1)
+ })
+
it('should update indicators if present', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
@@ -823,12 +897,14 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl)
const nextSpy = spyOn(carousel, 'next')
const prevSpy = spyOn(carousel, 'prev')
+ const spyEnable = spyOn(carousel, '_maybeEnableCycle')
nextBtnEl.click()
prevBtnEl.click()
expect(nextSpy).toHaveBeenCalled()
expect(prevSpy).toHaveBeenCalled()
+ expect(spyEnable).toHaveBeenCalled()
})
})
@@ -836,18 +912,18 @@ describe('Carousel', () => {
it('should not call next when the page is not visible', () => {
fixtureEl.innerHTML = [
'
'
].join('')
const carouselEl = fixtureEl.querySelector('.carousel')
const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'next')
+ const spy = spyOn(carousel, 'next')
carousel.nextWhenVisible()
- expect(carousel.next).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
})
@@ -858,91 +934,42 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_triggerSlideEvent')
+ const spy = spyOn(EventHandler, 'trigger')
carousel._isSliding = true
carousel.prev()
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
})
describe('pause', () => {
- it('should call cycle if the carousel have carousel-item-next and carousel-item-prev class', () => {
- fixtureEl.innerHTML = [
- '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
- '
',
- '
'
- ].join('')
-
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
-
- spyOn(carousel, 'cycle')
- spyOn(carousel, '_clearInterval')
-
- carousel.pause()
-
- expect(carousel.cycle).toHaveBeenCalledWith(true)
- expect(carousel._clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toBeTrue()
- })
-
- it('should not call cycle if nothing is in transition', () => {
- fixtureEl.innerHTML = [
- '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
- '
',
- '
'
- ].join('')
-
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
-
- spyOn(carousel, 'cycle')
- spyOn(carousel, '_clearInterval')
-
- carousel.pause()
-
- expect(carousel.cycle).not.toHaveBeenCalled()
- expect(carousel._clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toBeTrue()
- })
-
- it('should not set is paused at true if an event is passed', () => {
- fixtureEl.innerHTML = [
- '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
- '
',
- '
'
- ].join('')
-
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- const event = createEvent('mouseenter')
+ it('should trigger transitionend if the carousel have carousel-item-next or carousel-item-prev class, cause is sliding', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
',
+ '
',
+ '
item 1
',
+ '
item 2
',
+ '
item 3
',
+ '
',
+ '
',
+ '
',
+ '
'
+ ].join('')
- spyOn(carousel, '_clearInterval')
+ const carouselEl = fixtureEl.querySelector('#myCarousel')
+ const carousel = new Carousel(carouselEl)
+ const spy = spyOn(carousel, '_clearInterval')
- carousel.pause(event)
+ carouselEl.addEventListener('transitionend', () => {
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ })
- expect(carousel._clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toBeFalse()
+ carousel._slide('next')
+ carousel.pause()
+ })
})
})
@@ -963,35 +990,11 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('#myCarousel')
const carousel = new Carousel(carouselEl)
- spyOn(window, 'setInterval').and.callThrough()
+ const spy = spyOn(window, 'setInterval').and.callThrough()
carousel.cycle()
- expect(window.setInterval).toHaveBeenCalled()
- })
-
- it('should not set interval if the carousel is paused', () => {
- fixtureEl.innerHTML = [
- '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
- '
',
- '
'
- ].join('')
-
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
-
- spyOn(window, 'setInterval').and.callThrough()
-
- carousel._isPaused = true
- carousel.cycle(true)
-
- expect(window.setInterval).not.toHaveBeenCalled()
+ expect(spy).toHaveBeenCalled()
})
it('should clear interval if there is one', () => {
@@ -1012,13 +1015,13 @@ describe('Carousel', () => {
carousel._interval = setInterval(noop, 10)
- spyOn(window, 'setInterval').and.callThrough()
- spyOn(window, 'clearInterval').and.callThrough()
+ const spySet = spyOn(window, 'setInterval').and.callThrough()
+ const spyClear = spyOn(window, 'clearInterval').and.callThrough()
carousel.cycle()
- expect(window.setInterval).toHaveBeenCalled()
- expect(window.clearInterval).toHaveBeenCalled()
+ expect(spySet).toHaveBeenCalled()
+ expect(spyClear).toHaveBeenCalled()
})
it('should get interval from data attribute on the active item element', () => {
@@ -1131,7 +1134,7 @@ describe('Carousel', () => {
expect(spy).not.toHaveBeenCalled()
})
- it('should call pause and cycle is the provided is the same compare to the current one', () => {
+ it('should not continue if the provided is the same compare to the current one', () => {
fixtureEl.innerHTML = [
'
',
'
',
@@ -1145,15 +1148,11 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('#myCarousel')
const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_slide')
- spyOn(carousel, 'pause')
- spyOn(carousel, 'cycle')
+ const spy = spyOn(carousel, '_slide')
carousel.to(0)
- expect(carousel._slide).not.toHaveBeenCalled()
- expect(carousel.pause).toHaveBeenCalled()
- expect(carousel.cycle).toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
it('should wait before performing to if a slide is sliding', () => {
@@ -1171,21 +1170,21 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('#myCarousel')
const carousel = new Carousel(carouselEl, {})
- spyOn(EventHandler, 'one').and.callThrough()
- spyOn(carousel, '_slide')
+ const spyOne = spyOn(EventHandler, 'one').and.callThrough()
+ const spySlide = spyOn(carousel, '_slide')
carousel._isSliding = true
carousel.to(1)
- expect(carousel._slide).not.toHaveBeenCalled()
- expect(EventHandler.one).toHaveBeenCalled()
+ expect(spySlide).not.toHaveBeenCalled()
+ expect(spyOne).toHaveBeenCalled()
- spyOn(carousel, 'to')
+ const spyTo = spyOn(carousel, 'to')
EventHandler.trigger(carouselEl, 'slid.bs.carousel')
setTimeout(() => {
- expect(carousel.to).toHaveBeenCalledWith(1)
+ expect(spyTo).toHaveBeenCalledWith(1)
resolve()
})
})
@@ -1200,9 +1199,7 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl, {})
expect(carousel._directionToOrder('left')).toEqual('next')
- expect(carousel._directionToOrder('prev')).toEqual('prev')
expect(carousel._directionToOrder('right')).toEqual('prev')
- expect(carousel._directionToOrder('next')).toEqual('next')
expect(carousel._orderToDirection('next')).toEqual('left')
expect(carousel._orderToDirection('prev')).toEqual('right')
@@ -1217,9 +1214,7 @@ describe('Carousel', () => {
expect(isRTL()).toBeTrue()
expect(carousel._directionToOrder('left')).toEqual('prev')
- expect(carousel._directionToOrder('prev')).toEqual('prev')
expect(carousel._directionToOrder('right')).toEqual('next')
- expect(carousel._directionToOrder('next')).toEqual('next')
expect(carousel._orderToDirection('next')).toEqual('right')
expect(carousel._orderToDirection('prev')).toEqual('left')
@@ -1231,16 +1226,14 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {})
- const spy = spyOn(carousel, '_directionToOrder').and.callThrough()
- const spy2 = spyOn(carousel, '_orderToDirection').and.callThrough()
- carousel._slide('left')
- expect(spy).toHaveBeenCalledWith('left')
- expect(spy2).toHaveBeenCalledWith('next')
+ const spy = spyOn(carousel, '_orderToDirection').and.callThrough()
+
+ carousel._slide(carousel._directionToOrder('left'))
+ expect(spy).toHaveBeenCalledWith('next')
- carousel._slide('right')
- expect(spy).toHaveBeenCalledWith('right')
- expect(spy2).toHaveBeenCalledWith('prev')
+ carousel._slide(carousel._directionToOrder('right'))
+ expect(spy).toHaveBeenCalledWith('prev')
})
it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
@@ -1249,16 +1242,13 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {})
- const spy = spyOn(carousel, '_directionToOrder').and.callThrough()
- const spy2 = spyOn(carousel, '_orderToDirection').and.callThrough()
+ const spy = spyOn(carousel, '_orderToDirection').and.callThrough()
- carousel._slide('left')
- expect(spy).toHaveBeenCalledWith('left')
- expect(spy2).toHaveBeenCalledWith('prev')
+ carousel._slide(carousel._directionToOrder('left'))
+ expect(spy).toHaveBeenCalledWith('prev')
- carousel._slide('right')
- expect(spy).toHaveBeenCalledWith('right')
- expect(spy2).toHaveBeenCalledWith('next')
+ carousel._slide(carousel._directionToOrder('right'))
+ expect(spy).toHaveBeenCalledWith('next')
document.documentElement.dir = 'ltl'
})
@@ -1424,14 +1414,14 @@ describe('Carousel', () => {
const carousel = new Carousel(div)
const slideTo = 2
- spyOn(carousel, 'to')
+ const spy = spyOn(carousel, 'to')
jQueryMock.fn.carousel = Carousel.jQueryInterface
jQueryMock.elements = [div]
jQueryMock.fn.carousel.call(jQueryMock, slideTo)
- expect(carousel.to).toHaveBeenCalledWith(slideTo)
+ expect(spy).toHaveBeenCalledWith(slideTo)
})
it('should throw error on undefined method', () => {
@@ -1457,8 +1447,8 @@ describe('Carousel', () => {
const loadEvent = createEvent('load')
window.dispatchEvent(loadEvent)
-
- expect(Carousel.getInstance(carouselEl)).not.toBeNull()
+ const carousel = Carousel.getInstance(carouselEl)
+ expect(carousel._interval).not.toBeNull()
})
it('should create carousel and go to the next slide on click (with real button controls)', () => {
@@ -1516,7 +1506,7 @@ describe('Carousel', () => {
it('should create carousel and go to the next slide on click with data-bs-slide-to', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
- '
',
+ '
',
'
',
'
item 1
',
'
item 2
',
@@ -1533,6 +1523,7 @@ describe('Carousel', () => {
setTimeout(() => {
expect(item2).toHaveClass('active')
+ expect(Carousel.getInstance('#myCarousel')._interval).not.toBeNull()
resolve()
}, 10)
})
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index e2d2864905ed..58c5367526b9 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -1,6 +1,6 @@
-import Collapse from '../../src/collapse'
-import EventHandler from '../../src/dom/event-handler'
-import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
+import Collapse from '../../src/collapse.js'
+import EventHandler from '../../src/dom/event-handler.js'
+import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'
describe('Collapse', () => {
let fixtureEl
@@ -112,11 +112,11 @@ describe('Collapse', () => {
const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl)
- spyOn(collapse, 'show')
+ const spy = spyOn(collapse, 'show')
collapse.toggle()
- expect(collapse.show).toHaveBeenCalled()
+ expect(spy).toHaveBeenCalled()
})
it('should call hide method if show class is present', () => {
@@ -127,11 +127,11 @@ describe('Collapse', () => {
toggle: false
})
- spyOn(collapse, 'hide')
+ const spy = spyOn(collapse, 'hide')
collapse.toggle()
- expect(collapse.hide).toHaveBeenCalled()
+ expect(spy).toHaveBeenCalled()
})
it('should find collapse children if they have collapse class too not only data-bs-parent', () => {
@@ -174,7 +174,7 @@ describe('Collapse', () => {
it('should do nothing if is transitioning', () => {
fixtureEl.innerHTML = '
'
- spyOn(EventHandler, 'trigger')
+ const spy = spyOn(EventHandler, 'trigger')
const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
@@ -184,13 +184,13 @@ describe('Collapse', () => {
collapse._isTransitioning = true
collapse.show()
- expect(EventHandler.trigger).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
it('should do nothing if already shown', () => {
fixtureEl.innerHTML = '
'
- spyOn(EventHandler, 'trigger')
+ const spy = spyOn(EventHandler, 'trigger')
const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
@@ -199,7 +199,7 @@ describe('Collapse', () => {
collapse.show()
- expect(EventHandler.trigger).not.toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
})
it('should show a collapsed element', () => {
@@ -277,25 +277,25 @@ describe('Collapse', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'
',
- '