123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533 |
- import Carousel from '../../src/carousel'
- import EventHandler from '../../src/dom/event-handler'
- import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
- import * as util from '../../src/util'
- describe('Carousel', () => {
- const { Simulator, PointerEvent } = window
- const originWinPointerEvent = PointerEvent
- const supportPointerEvent = Boolean(PointerEvent)
- const cssStyleCarousel = '.carousel.pointer-event { touch-action: none; }'
- const stylesCarousel = document.createElement('style')
- stylesCarousel.type = 'text/css'
- stylesCarousel.appendChild(document.createTextNode(cssStyleCarousel))
- const clearPointerEvents = () => {
- window.PointerEvent = null
- }
- const restorePointerEvents = () => {
- window.PointerEvent = originWinPointerEvent
- }
- let fixtureEl
- beforeAll(() => {
- fixtureEl = getFixture()
- })
- afterEach(() => {
- clearFixture()
- })
- describe('VERSION', () => {
- it('should return plugin version', () => {
- expect(Carousel.VERSION).toEqual(jasmine.any(String))
- })
- })
- describe('Default', () => {
- it('should return plugin default config', () => {
- expect(Carousel.Default).toEqual(jasmine.any(Object))
- })
- })
- describe('DATA_KEY', () => {
- it('should return plugin data key', () => {
- expect(Carousel.DATA_KEY).toEqual('bs.carousel')
- })
- })
- describe('constructor', () => {
- it('should take care of element either passed as a CSS selector or DOM element', () => {
- fixtureEl.innerHTML = '<div id="myCarousel" class="carousel slide"></div>'
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carouselBySelector = new Carousel('#myCarousel')
- const carouselByElement = new Carousel(carouselEl)
- expect(carouselBySelector._element).toEqual(carouselEl)
- expect(carouselByElement._element).toEqual(carouselEl)
- })
- it('should go to next item if right arrow key is pressed', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {
- keyboard: true
- })
- spyOn(carousel, '_keydown').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', () => {
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))
- expect(carousel._keydown).toHaveBeenCalled()
- done()
- })
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowRight'
- carouselEl.dispatchEvent(keydown)
- })
- it('should go to previous item if left arrow key is pressed', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div id="item1" class="carousel-item">item 1</div>',
- ' <div class="carousel-item active">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {
- keyboard: true
- })
- spyOn(carousel, '_keydown').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', () => {
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item1'))
- expect(carousel._keydown).toHaveBeenCalled()
- done()
- })
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowLeft'
- carouselEl.dispatchEvent(keydown)
- })
- it('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {
- keyboard: true
- })
- spyOn(carousel, '_keydown').and.callThrough()
- carouselEl.addEventListener('keydown', event => {
- expect(carousel._keydown).toHaveBeenCalled()
- expect(event.defaultPrevented).toEqual(false)
- done()
- })
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
- carouselEl.dispatchEvent(keydown)
- })
- it('should ignore keyboard events within <input>s and <textarea>s', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">',
- ' <input type="text">',
- ' <textarea></textarea>',
- ' </div>',
- ' <div class="carousel-item"></div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const input = fixtureEl.querySelector('input')
- const textarea = fixtureEl.querySelector('textarea')
- const carousel = new Carousel(carouselEl, {
- keyboard: true
- })
- const spyKeydown = spyOn(carousel, '_keydown').and.callThrough()
- const spySlide = spyOn(carousel, '_slide')
- const keydown = createEvent('keydown', { bubbles: true, cancelable: true })
- keydown.key = 'ArrowRight'
- Object.defineProperty(keydown, 'target', {
- value: input,
- writable: true,
- configurable: true
- })
- input.dispatchEvent(keydown)
- expect(spyKeydown).toHaveBeenCalled()
- expect(spySlide).not.toHaveBeenCalled()
- spyKeydown.calls.reset()
- spySlide.calls.reset()
- Object.defineProperty(keydown, 'target', {
- value: textarea
- })
- textarea.dispatchEvent(keydown)
- expect(spyKeydown).toHaveBeenCalled()
- expect(spySlide).not.toHaveBeenCalled()
- })
- it('should not slide if arrow key is pressed and carousel is sliding', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_triggerSlideEvent')
- carousel._isSliding = true;
- ['ArrowLeft', 'ArrowRight'].forEach(key => {
- const keydown = createEvent('keydown')
- keydown.key = key
- carouselEl.dispatchEvent(keydown)
- })
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
- })
- it('should wrap around from end to start when wrap option is true', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div id="one" class="carousel-item active"></div>',
- ' <div id="two" class="carousel-item"></div>',
- ' <div id="three" class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, { wrap: true })
- const getActiveId = () => {
- return carouselEl.querySelector('.carousel-item.active').getAttribute('id')
- }
- carouselEl.addEventListener('slid.bs.carousel', e => {
- const activeId = getActiveId()
- if (activeId === 'two') {
- carousel.next()
- return
- }
- if (activeId === 'three') {
- carousel.next()
- return
- }
- if (activeId === 'one') {
-
- expect(activeId).toEqual('one')
- expect(e.from + 1).toEqual(3)
- done()
- }
- })
- carousel.next()
- })
- it('should stay at the start when the prev method is called and wrap is false', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div id="one" class="carousel-item active"></div>',
- ' <div id="two" class="carousel-item"></div>',
- ' <div id="three" class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const firstElement = fixtureEl.querySelector('#one')
- const carousel = new Carousel(carouselEl, { wrap: false })
- carouselEl.addEventListener('slid.bs.carousel', () => {
- throw new Error('carousel slid when it should not have slid')
- })
- carousel.prev()
- setTimeout(() => {
- expect(firstElement.classList.contains('active')).toEqual(true)
- done()
- }, 10)
- })
- it('should not add touch event listeners if touch = false', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- spyOn(Carousel.prototype, '_addTouchEventListeners')
- const carousel = new Carousel(carouselEl, {
- touch: false
- })
- expect(carousel._addTouchEventListeners).not.toHaveBeenCalled()
- })
- it('should not add touch event listeners if touch supported = false', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl)
- EventHandler.off(carouselEl, '.bs-carousel')
- carousel._touchSupported = false
- spyOn(carousel, '_addTouchEventListeners')
- carousel._addEventListeners()
- expect(carousel._addTouchEventListeners).not.toHaveBeenCalled()
- })
- it('should add touch event listeners by default', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- spyOn(Carousel.prototype, '_addTouchEventListeners')
-
-
- document.documentElement.ontouchstart = () => {}
- const carousel = new Carousel(carouselEl)
- expect(carousel._addTouchEventListeners).toHaveBeenCalled()
- })
- it('should allow swiperight and call _slide (prev) with pointer events', done => {
- if (!supportPointerEvent) {
- expect().nothing()
- done()
- return
- }
- document.documentElement.ontouchstart = () => {}
- document.head.appendChild(stylesCarousel)
- Simulator.setType('pointer')
- fixtureEl.innerHTML = [
- '<div class="carousel" data-bs-interval="false">',
- ' <div class="carousel-inner">',
- ' <div id="item" class="carousel-item">',
- ' <img alt="">',
- ' </div>',
- ' <div class="carousel-item active">',
- ' <img alt="">',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const item = fixtureEl.querySelector('#item')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, '_slide').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', event => {
- expect(item.classList.contains('active')).toEqual(true)
- expect(carousel._slide).toHaveBeenCalledWith('right')
- expect(event.direction).toEqual('right')
- document.head.removeChild(stylesCarousel)
- delete document.documentElement.ontouchstart
- done()
- })
- Simulator.gestures.swipe(carouselEl, {
- deltaX: 300,
- deltaY: 0
- })
- })
- it('should allow swipeleft and call next with pointer events', done => {
- if (!supportPointerEvent) {
- expect().nothing()
- done()
- return
- }
- document.documentElement.ontouchstart = () => {}
- document.head.appendChild(stylesCarousel)
- Simulator.setType('pointer')
- fixtureEl.innerHTML = [
- '<div class="carousel" data-bs-interval="false">',
- ' <div class="carousel-inner">',
- ' <div id="item" class="carousel-item active">',
- ' <img alt="">',
- ' </div>',
- ' <div class="carousel-item">',
- ' <img alt="">',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const item = fixtureEl.querySelector('#item')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, '_slide').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', event => {
- expect(item.classList.contains('active')).toEqual(false)
- expect(carousel._slide).toHaveBeenCalledWith('left')
- expect(event.direction).toEqual('left')
- document.head.removeChild(stylesCarousel)
- delete document.documentElement.ontouchstart
- done()
- })
- Simulator.gestures.swipe(carouselEl, {
- pos: [300, 10],
- deltaX: -300,
- deltaY: 0
- })
- })
- it('should allow swiperight and call _slide (prev) with touch events', done => {
- Simulator.setType('touch')
- clearPointerEvents()
- document.documentElement.ontouchstart = () => {}
- fixtureEl.innerHTML = [
- '<div class="carousel" data-bs-interval="false">',
- ' <div class="carousel-inner">',
- ' <div id="item" class="carousel-item">',
- ' <img alt="">',
- ' </div>',
- ' <div class="carousel-item active">',
- ' <img alt="">',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const item = fixtureEl.querySelector('#item')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, '_slide').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', event => {
- expect(item.classList.contains('active')).toEqual(true)
- expect(carousel._slide).toHaveBeenCalledWith('right')
- expect(event.direction).toEqual('right')
- delete document.documentElement.ontouchstart
- restorePointerEvents()
- done()
- })
- Simulator.gestures.swipe(carouselEl, {
- deltaX: 300,
- deltaY: 0
- })
- })
- it('should allow swipeleft and call _slide (next) with touch events', done => {
- Simulator.setType('touch')
- clearPointerEvents()
- document.documentElement.ontouchstart = () => {}
- fixtureEl.innerHTML = [
- '<div class="carousel" data-bs-interval="false">',
- ' <div class="carousel-inner">',
- ' <div id="item" class="carousel-item active">',
- ' <img alt="">',
- ' </div>',
- ' <div class="carousel-item">',
- ' <img alt="">',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const item = fixtureEl.querySelector('#item')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, '_slide').and.callThrough()
- carouselEl.addEventListener('slid.bs.carousel', event => {
- expect(item.classList.contains('active')).toEqual(false)
- expect(carousel._slide).toHaveBeenCalledWith('left')
- expect(event.direction).toEqual('left')
- delete document.documentElement.ontouchstart
- restorePointerEvents()
- done()
- })
- Simulator.gestures.swipe(carouselEl, {
- pos: [300, 10],
- deltaX: -300,
- deltaY: 0
- })
- })
- it('should not slide when swiping and carousel is sliding', done => {
- Simulator.setType('touch')
- clearPointerEvents()
- document.documentElement.ontouchstart = () => {}
- fixtureEl.innerHTML = [
- '<div class="carousel" data-bs-interval="false">',
- ' <div class="carousel-inner">',
- ' <div id="item" class="carousel-item active">',
- ' <img alt="">',
- ' </div>',
- ' <div class="carousel-item">',
- ' <img alt="">',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const carousel = new Carousel(carouselEl)
- carousel._isSliding = true
- spyOn(carousel, '_triggerSlideEvent')
- Simulator.gestures.swipe(carouselEl, {
- deltaX: 300,
- deltaY: 0
- })
- Simulator.gestures.swipe(carouselEl, {
- pos: [300, 10],
- deltaX: -300,
- deltaY: 0
- })
- setTimeout(() => {
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
- delete document.documentElement.ontouchstart
- restorePointerEvents()
- done()
- }, 300)
- })
- it('should not allow pinch with touch events', done => {
- Simulator.setType('touch')
- clearPointerEvents()
- document.documentElement.ontouchstart = () => {}
- fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>'
- const carouselEl = fixtureEl.querySelector('.carousel')
- const carousel = new Carousel(carouselEl)
- Simulator.gestures.swipe(carouselEl, {
- pos: [300, 10],
- deltaX: -300,
- deltaY: 0,
- touches: 2
- }, () => {
- restorePointerEvents()
- delete document.documentElement.ontouchstart
- expect(carousel.touchDeltaX).toEqual(0)
- done()
- })
- })
- it('should call pause method on mouse over with pause equal to hover', done => {
- fixtureEl.innerHTML = '<div class="carousel"></div>'
- const carouselEl = fixtureEl.querySelector('.carousel')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'pause')
- const mouseOverEvent = createEvent('mouseover')
- carouselEl.dispatchEvent(mouseOverEvent)
- setTimeout(() => {
- expect(carousel.pause).toHaveBeenCalled()
- done()
- }, 10)
- })
- it('should call cycle on mouse out with pause equal to hover', done => {
- fixtureEl.innerHTML = '<div class="carousel"></div>'
- const carouselEl = fixtureEl.querySelector('.carousel')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'cycle')
- const mouseOutEvent = createEvent('mouseout')
- carouselEl.dispatchEvent(mouseOutEvent)
- setTimeout(() => {
- expect(carousel.cycle).toHaveBeenCalled()
- done()
- }, 10)
- })
- })
- describe('next', () => {
- it('should not slide if the carousel is sliding', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_triggerSlideEvent')
- carousel._isSliding = true
- carousel.next()
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
- })
- it('should not fire slid when slide is prevented', done => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl, {})
- let slidEvent = false
- const doneTest = () => {
- setTimeout(() => {
- expect(slidEvent).toEqual(false)
- done()
- }, 20)
- }
- carouselEl.addEventListener('slide.bs.carousel', e => {
- e.preventDefault()
- doneTest()
- })
- carouselEl.addEventListener('slid.bs.carousel', () => {
- slidEvent = true
- })
- carousel.next()
- })
- it('should fire slide event with: direction, relatedTarget, from and to', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- const onSlide = e => {
- expect(e.direction).toEqual('left')
- expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
- expect(e.from).toEqual(0)
- expect(e.to).toEqual(1)
- carouselEl.removeEventListener('slide.bs.carousel', onSlide)
- carouselEl.addEventListener('slide.bs.carousel', onSlide2)
- carousel.prev()
- }
- const onSlide2 = e => {
- expect(e.direction).toEqual('right')
- done()
- }
- carouselEl.addEventListener('slide.bs.carousel', onSlide)
- carousel.next()
- })
- it('should fire slid event with: direction, relatedTarget, from and to', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- const onSlid = e => {
- expect(e.direction).toEqual('left')
- expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true)
- expect(e.from).toEqual(0)
- expect(e.to).toEqual(1)
- carouselEl.removeEventListener('slid.bs.carousel', onSlid)
- carouselEl.addEventListener('slid.bs.carousel', onSlid2)
- carousel.prev()
- }
- const onSlid2 = e => {
- expect(e.direction).toEqual('right')
- done()
- }
- carouselEl.addEventListener('slid.bs.carousel', onSlid)
- carousel.next()
- })
- it('should update the active element to the next item before sliding', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="secondItem" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const secondItemEl = fixtureEl.querySelector('#secondItem')
- const carousel = new Carousel(carouselEl)
- carousel.next()
- expect(carousel._activeElement).toEqual(secondItemEl)
- })
- it('should update indicators if present', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-indicators">',
- ' <button type="button" id="firstIndicator" data-bs-target="myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>',
- ' <button type="button" id="secondIndicator" data-bs-target="myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>',
- ' <button type="button" data-bs-target="myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>',
- ' </div>',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item" data-bs-interval="7">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const firstIndicator = fixtureEl.querySelector('#firstIndicator')
- const secondIndicator = fixtureEl.querySelector('#secondIndicator')
- const carousel = new Carousel(carouselEl)
- carouselEl.addEventListener('slid.bs.carousel', () => {
- expect(firstIndicator.classList.contains('active')).toEqual(false)
- expect(firstIndicator.hasAttribute('aria-current')).toEqual(false)
- expect(secondIndicator.classList.contains('active')).toEqual(true)
- expect(secondIndicator.getAttribute('aria-current')).toEqual('true')
- done()
- })
- carousel.next()
- })
- it('should call next()/prev() instance methods when clicking the respective direction buttons', () => {
- fixtureEl.innerHTML = [
- '<div id="carousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev"></button>',
- ' <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next"></button>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#carousel')
- const prevBtnEl = fixtureEl.querySelector('.carousel-control-prev')
- const nextBtnEl = fixtureEl.querySelector('.carousel-control-next')
- const carousel = new Carousel(carouselEl)
- const nextSpy = spyOn(carousel, 'next')
- const prevSpy = spyOn(carousel, 'prev')
- nextBtnEl.click()
- prevBtnEl.click()
- expect(nextSpy).toHaveBeenCalled()
- expect(prevSpy).toHaveBeenCalled()
- })
- })
- describe('nextWhenVisible', () => {
- it('should not call next when the page is not visible', () => {
- fixtureEl.innerHTML = [
- '<div style="display: none;">',
- ' <div class="carousel" data-bs-interval="false"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('.carousel')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'next')
- carousel.nextWhenVisible()
- expect(carousel.next).not.toHaveBeenCalled()
- })
- })
- describe('prev', () => {
- it('should not slide if the carousel is sliding', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_triggerSlideEvent')
- carousel._isSliding = true
- carousel.prev()
- expect(carousel._triggerSlideEvent).not.toHaveBeenCalled()
- })
- })
- describe('pause', () => {
- it('should call cycle if the carousel have carousel-item-next and carousel-item-prev class', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item carousel-item-next">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'cycle')
- spyOn(window, 'clearInterval')
- carousel.pause()
- expect(carousel.cycle).toHaveBeenCalledWith(true)
- expect(window.clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toEqual(true)
- })
- it('should not call cycle if nothing is in transition', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- spyOn(carousel, 'cycle')
- spyOn(window, 'clearInterval')
- carousel.pause()
- expect(carousel.cycle).not.toHaveBeenCalled()
- expect(window.clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toEqual(true)
- })
- it('should not set is paused at true if an event is passed', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- const event = createEvent('mouseenter')
- spyOn(window, 'clearInterval')
- carousel.pause(event)
- expect(window.clearInterval).toHaveBeenCalled()
- expect(carousel._isPaused).toEqual(false)
- })
- })
- describe('cycle', () => {
- it('should set an interval', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- spyOn(window, 'setInterval').and.callThrough()
- carousel.cycle()
- expect(window.setInterval).toHaveBeenCalled()
- })
- it('should not set interval if the carousel is paused', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].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()
- })
- it('should clear interval if there is one', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div class="carousel-control-prev"></div>',
- ' <div class="carousel-control-next"></div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl)
- carousel._interval = setInterval(() => {}, 10)
- spyOn(window, 'setInterval').and.callThrough()
- spyOn(window, 'clearInterval').and.callThrough()
- carousel.cycle()
- expect(window.setInterval).toHaveBeenCalled()
- expect(window.clearInterval).toHaveBeenCalled()
- })
- it('should get interval from data attribute on the active item element', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active" data-bs-interval="7">item 1</div>',
- ' <div id="secondItem" class="carousel-item" data-bs-interval="9385">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const secondItemEl = fixtureEl.querySelector('#secondItem')
- const carousel = new Carousel(carouselEl, {
- interval: 1814
- })
- expect(carousel._config.interval).toEqual(1814)
- carousel.cycle()
- expect(carousel._config.interval).toEqual(7)
- carousel._activeElement = secondItemEl
- carousel.cycle()
- expect(carousel._config.interval).toEqual(9385)
- })
- })
- describe('to', () => {
- it('should go directly to the provided index', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div id="item1" class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div id="item3" class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item1'))
- carousel.to(2)
- carouselEl.addEventListener('slid.bs.carousel', () => {
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item3'))
- done()
- })
- })
- it('should return to a previous slide if the provided index is lower than the current', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div id="item3" class="carousel-item active">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item3'))
- carousel.to(1)
- carouselEl.addEventListener('slid.bs.carousel', () => {
- expect(fixtureEl.querySelector('.active')).toEqual(fixtureEl.querySelector('#item2'))
- done()
- })
- })
- it('should do nothing if a wrong index is provided', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item" data-bs-interval="7">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- const spy = spyOn(carousel, '_slide')
- carousel.to(25)
- expect(spy).not.toHaveBeenCalled()
- spy.calls.reset()
- carousel.to(-5)
- expect(spy).not.toHaveBeenCalled()
- })
- it('should call pause and cycle is the provided is the same compare to the current one', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item" data-bs-interval="7">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- spyOn(carousel, '_slide')
- spyOn(carousel, 'pause')
- spyOn(carousel, 'cycle')
- carousel.to(0)
- expect(carousel._slide).not.toHaveBeenCalled()
- expect(carousel.pause).toHaveBeenCalled()
- expect(carousel.cycle).toHaveBeenCalled()
- })
- it('should wait before performing to if a slide is sliding', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item" data-bs-interval="7">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const carousel = new Carousel(carouselEl, {})
- spyOn(EventHandler, 'one').and.callThrough()
- spyOn(carousel, '_slide')
- carousel._isSliding = true
- carousel.to(1)
- expect(carousel._slide).not.toHaveBeenCalled()
- expect(EventHandler.one).toHaveBeenCalled()
- spyOn(carousel, 'to')
- EventHandler.trigger(carouselEl, 'slid.bs.carousel')
- setTimeout(() => {
- expect(carousel.to).toHaveBeenCalledWith(1)
- done()
- })
- })
- })
- describe('rtl function', () => {
- it('"_directionToOrder" and "_orderToDirection" must return the right results', () => {
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- 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')
- })
- it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => {
- document.documentElement.dir = 'rtl'
- fixtureEl.innerHTML = '<div></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const carousel = new Carousel(carouselEl, {})
- expect(util.isRTL()).toEqual(true, 'rtl has to be true')
- 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')
- document.documentElement.dir = 'ltl'
- })
- it('"_slide" has to call _directionToOrder and "_orderToDirection"', () => {
- fixtureEl.innerHTML = '<div></div>'
- 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')
- carousel._slide('right')
- expect(spy).toHaveBeenCalledWith('right')
- expect(spy2).toHaveBeenCalledWith('prev')
- })
- it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => {
- document.documentElement.dir = 'rtl'
- fixtureEl.innerHTML = '<div></div>'
- 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('prev')
- carousel._slide('right')
- expect(spy).toHaveBeenCalledWith('right')
- expect(spy2).toHaveBeenCalledWith('next')
- document.documentElement.dir = 'ltl'
- })
- })
- describe('dispose', () => {
- it('should destroy a carousel', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item" data-bs-interval="7">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- '</div>'
- ].join('')
- const carouselEl = fixtureEl.querySelector('#myCarousel')
- const addEventSpy = spyOn(carouselEl, 'addEventListener').and.callThrough()
- const removeEventSpy = spyOn(carouselEl, 'removeEventListener').and.callThrough()
-
-
- document.documentElement.ontouchstart = () => {}
- const carousel = new Carousel(carouselEl)
- const expectedArgs = [
- ['keydown', jasmine.any(Function), jasmine.any(Boolean)],
- ['mouseover', jasmine.any(Function), jasmine.any(Boolean)],
- ['mouseout', jasmine.any(Function), jasmine.any(Boolean)],
- ...(carousel._pointerEvent ?
- [
- ['pointerdown', jasmine.any(Function), jasmine.any(Boolean)],
- ['pointerup', jasmine.any(Function), jasmine.any(Boolean)]
- ] :
- [
- ['touchstart', jasmine.any(Function), jasmine.any(Boolean)],
- ['touchmove', jasmine.any(Function), jasmine.any(Boolean)],
- ['touchend', jasmine.any(Function), jasmine.any(Boolean)]
- ])
- ]
- expect(addEventSpy.calls.allArgs()).toEqual(expectedArgs)
- carousel.dispose()
- expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)
- delete document.documentElement.ontouchstart
- })
- })
- describe('getInstance', () => {
- it('should return carousel instance', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const carousel = new Carousel(div)
- expect(Carousel.getInstance(div)).toEqual(carousel)
- expect(Carousel.getInstance(div)).toBeInstanceOf(Carousel)
- })
- it('should return null when there is no carousel instance', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- expect(Carousel.getInstance(div)).toEqual(null)
- })
- })
- describe('getOrCreateInstance', () => {
- it('should return carousel instance', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const carousel = new Carousel(div)
- expect(Carousel.getOrCreateInstance(div)).toEqual(carousel)
- expect(Carousel.getInstance(div)).toEqual(Carousel.getOrCreateInstance(div, {}))
- expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel)
- })
- it('should return new instance when there is no carousel instance', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- expect(Carousel.getInstance(div)).toEqual(null)
- expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel)
- })
- it('should return new instance when there is no carousel instance with given configuration', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- expect(Carousel.getInstance(div)).toEqual(null)
- const carousel = Carousel.getOrCreateInstance(div, {
- interval: 1
- })
- expect(carousel).toBeInstanceOf(Carousel)
- expect(carousel._config.interval).toEqual(1)
- })
- it('should return the instance when exists without given configuration', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const carousel = new Carousel(div, {
- interval: 1
- })
- expect(Carousel.getInstance(div)).toEqual(carousel)
- const carousel2 = Carousel.getOrCreateInstance(div, {
- interval: 2
- })
- expect(carousel).toBeInstanceOf(Carousel)
- expect(carousel2).toEqual(carousel)
- expect(carousel2._config.interval).toEqual(1)
- })
- })
- describe('jQueryInterface', () => {
- it('should create a carousel', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- jQueryMock.fn.carousel = Carousel.jQueryInterface
- jQueryMock.elements = [div]
- jQueryMock.fn.carousel.call(jQueryMock)
- expect(Carousel.getInstance(div)).not.toBeNull()
- })
- it('should not re create a carousel', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const carousel = new Carousel(div)
- jQueryMock.fn.carousel = Carousel.jQueryInterface
- jQueryMock.elements = [div]
- jQueryMock.fn.carousel.call(jQueryMock)
- expect(Carousel.getInstance(div)).toEqual(carousel)
- })
- it('should call to if the config is a number', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const carousel = new Carousel(div)
- const slideTo = 2
- spyOn(carousel, 'to')
- jQueryMock.fn.carousel = Carousel.jQueryInterface
- jQueryMock.elements = [div]
- jQueryMock.fn.carousel.call(jQueryMock, slideTo)
- expect(carousel.to).toHaveBeenCalledWith(slideTo)
- })
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
- jQueryMock.fn.carousel = Carousel.jQueryInterface
- jQueryMock.elements = [div]
- expect(() => {
- jQueryMock.fn.carousel.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
- })
- })
- describe('data-api', () => {
- it('should init carousels with data-bs-ride="carousel" on load', () => {
- fixtureEl.innerHTML = '<div data-bs-ride="carousel"></div>'
- const carouselEl = fixtureEl.querySelector('div')
- const loadEvent = createEvent('load')
- window.dispatchEvent(loadEvent)
- expect(Carousel.getInstance(carouselEl)).not.toBeNull()
- })
- it('should create carousel and go to the next slide on click (with real button controls)', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
- ' <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
- '</div>'
- ].join('')
- const next = fixtureEl.querySelector('#next')
- const item2 = fixtureEl.querySelector('#item2')
- next.click()
- setTimeout(() => {
- expect(item2.classList.contains('active')).toEqual(true)
- done()
- }, 10)
- })
- it('should create carousel and go to the next slide on click (using links as controls)', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"></button>',
- ' <a id="next" class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"></div>',
- '</div>'
- ].join('')
- const next = fixtureEl.querySelector('#next')
- const item2 = fixtureEl.querySelector('#item2')
- next.click()
- setTimeout(() => {
- expect(item2.classList.contains('active')).toEqual(true)
- done()
- }, 10)
- })
- it('should create carousel and go to the next slide on click with data-bs-slide-to', done => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <div id="next" data-bs-target="#myCarousel" data-bs-slide-to="1"></div>',
- '</div>'
- ].join('')
- const next = fixtureEl.querySelector('#next')
- const item2 = fixtureEl.querySelector('#item2')
- next.click()
- setTimeout(() => {
- expect(item2.classList.contains('active')).toEqual(true)
- done()
- }, 10)
- })
- it('should do nothing if no selector on click on arrows', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="carousel slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></button>',
- ' <button id="next" class="carousel-control-next" type="button" data-bs-slide="next"></button>',
- '</div>'
- ].join('')
- const next = fixtureEl.querySelector('#next')
- next.click()
- expect().nothing()
- })
- it('should do nothing if no carousel class on click on arrows', () => {
- fixtureEl.innerHTML = [
- '<div id="myCarousel" class="slide">',
- ' <div class="carousel-inner">',
- ' <div class="carousel-item active">item 1</div>',
- ' <div id="item2" class="carousel-item">item 2</div>',
- ' <div class="carousel-item">item 3</div>',
- ' </div>',
- ' <button class="carousel-control-prev" data-bs-target="#myCarousel" type="button" data-bs-slide="prev"></div>',
- ' <button id="next" class="carousel-control-next" data-bs-target="#myCarousel" type="button" data-bs-slide="next"></div>',
- '</div>'
- ].join('')
- const next = fixtureEl.querySelector('#next')
- next.click()
- expect().nothing()
- })
- })
- })
|