]>
git.ipfire.org Git - ipfire.org.git/blob - src/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/carousel.js
4 QUnit
. module ( 'carousel plugin' )
6 QUnit
. test ( 'should be defined on jQuery object' , function ( assert
) {
8 assert
. ok ($( document
. body
). carousel
, 'carousel method is defined' )
11 QUnit
. module ( 'carousel' , {
12 beforeEach : function () {
13 // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
14 $. fn
. bootstrapCarousel
= $. fn
. carousel
. noConflict ()
16 afterEach : function () {
17 $. fn
. carousel
= $. fn
. bootstrapCarousel
18 delete $. fn
. bootstrapCarousel
22 QUnit
. test ( 'should provide no conflict' , function ( assert
) {
24 assert
. strictEqual ($. fn
. carousel
, undefined , 'carousel was set back to undefined (orig value)' )
27 QUnit
. test ( 'should throw explicit error on undefined method' , function ( assert
) {
30 $ el
. bootstrapCarousel ()
32 $ el
. bootstrapCarousel ( 'noMethod' )
35 assert
. strictEqual ( err
. message
, 'No method named "noMethod"' )
39 QUnit
. test ( 'should return jquery collection containing the element' , function ( assert
) {
42 var $ carousel
= $ el
. bootstrapCarousel ()
43 assert
. ok ($ carousel
instanceof $, 'returns jquery collection' )
44 assert
. strictEqual ($ carousel
[ 0 ], $ el
[ 0 ], 'collection contains element' )
47 QUnit
. test ( 'should type check config options' , function ( assert
) {
51 var expectedMessage
= 'CAROUSEL: Option "interval" provided type "string" but expected type "(number|boolean)".'
57 $( '<div/>' ). bootstrapCarousel ( config
)
62 assert
. ok ( message
=== expectedMessage
, 'correct error message' )
65 keyboard
: document
. createElement ( 'div' )
67 expectedMessage
= 'CAROUSEL: Option "keyboard" provided type "element" but expected type "boolean".'
70 $( '<div/>' ). bootstrapCarousel ( config
)
75 assert
. ok ( message
=== expectedMessage
, 'correct error message' )
79 QUnit
. test ( 'should not fire slid when slide is prevented' , function ( assert
) {
81 var done
= assert
. async ()
82 $( '<div class="carousel"/>' )
83 . on ( 'slide.bs.carousel' , function ( e
) {
85 assert
. ok ( true , 'slide event fired' )
88 . on ( 'slid.bs.carousel' , function () {
89 assert
. ok ( false , 'slid event fired' )
91 . bootstrapCarousel ( 'next' )
94 QUnit
. test ( 'should reset when slide is prevented' , function ( assert
) {
96 var carouselHTML
= '<div id="carousel-example-generic" class="carousel slide">'
97 + '<ol class="carousel-indicators">'
98 + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
99 + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
100 + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
102 + '<div class="carousel-inner">'
103 + '<div class="carousel-item active">'
104 + '<div class="carousel-caption"/>'
106 + '<div class="carousel-item">'
107 + '<div class="carousel-caption"/>'
109 + '<div class="carousel-item">'
110 + '<div class="carousel-caption"/>'
113 + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
114 + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
116 var $ carousel
= $( carouselHTML
)
118 var done
= assert
. async ()
120 . one ( 'slide.bs.carousel' , function ( e
) {
122 setTimeout ( function () {
123 assert
. ok ($ carousel
. find ( '.carousel-item:eq(0)' ). is ( '.active' ), 'first item still active' )
124 assert
. ok ($ carousel
. find ( '.carousel-indicators li:eq(0)' ). is ( '.active' ), 'first indicator still active' )
125 $ carousel
. bootstrapCarousel ( 'next' )
128 . one ( 'slid.bs.carousel' , function () {
129 setTimeout ( function () {
130 assert
. ok (!$ carousel
. find ( '.carousel-item:eq(0)' ). is ( '.active' ), 'first item still active' )
131 assert
. ok (!$ carousel
. find ( '.carousel-indicators li:eq(0)' ). is ( '.active' ), 'first indicator still active' )
132 assert
. ok ($ carousel
. find ( '.carousel-item:eq(1)' ). is ( '.active' ), 'second item active' )
133 assert
. ok ($ carousel
. find ( '.carousel-indicators li:eq(1)' ). is ( '.active' ), 'second indicator active' )
137 . bootstrapCarousel ( 'next' )
140 QUnit
. test ( 'should fire slide event with direction' , function ( assert
) {
142 var carouselHTML
= '<div id="myCarousel" class="carousel slide">'
143 + '<div class="carousel-inner">'
144 + '<div class="carousel-item active">'
146 + '<div class="carousel-caption">'
147 + '<h4>First Thumbnail label</h4>'
148 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
149 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
150 + 'ultricies vehicula ut id elit.</p>'
153 + '<div class="carousel-item">'
155 + '<div class="carousel-caption">'
156 + '<h4>Second Thumbnail label</h4>'
157 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
158 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
159 + 'ultricies vehicula ut id elit.</p>'
162 + '<div class="carousel-item">'
164 + '<div class="carousel-caption">'
165 + '<h4>Third Thumbnail label</h4>'
166 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
167 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
168 + 'ultricies vehicula ut id elit.</p>'
172 + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
173 + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
175 var $ carousel
= $( carouselHTML
)
177 var done
= assert
. async ()
180 . one ( 'slide.bs.carousel' , function ( e
) {
181 assert
. ok ( e
. direction
, 'direction present on next' )
182 assert
. strictEqual ( e
. direction
, 'left' , 'direction is left on next' )
185 . one ( 'slide.bs.carousel' , function ( e
) {
186 assert
. ok ( e
. direction
, 'direction present on prev' )
187 assert
. strictEqual ( e
. direction
, 'right' , 'direction is right on prev' )
190 . bootstrapCarousel ( 'prev' )
192 . bootstrapCarousel ( 'next' )
195 QUnit
. test ( 'should fire slid event with direction' , function ( assert
) {
197 var carouselHTML
= '<div id="myCarousel" class="carousel slide">'
198 + '<div class="carousel-inner">'
199 + '<div class="carousel-item active">'
201 + '<div class="carousel-caption">'
202 + '<h4>First Thumbnail label</h4>'
203 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
204 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
205 + 'ultricies vehicula ut id elit.</p>'
208 + '<div class="carousel-item">'
210 + '<div class="carousel-caption">'
211 + '<h4>Second Thumbnail label</h4>'
212 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
213 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
214 + 'ultricies vehicula ut id elit.</p>'
217 + '<div class="carousel-item">'
219 + '<div class="carousel-caption">'
220 + '<h4>Third Thumbnail label</h4>'
221 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
222 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
223 + 'ultricies vehicula ut id elit.</p>'
227 + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
228 + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
230 var $ carousel
= $( carouselHTML
)
232 var done
= assert
. async ()
235 . one ( 'slid.bs.carousel' , function ( e
) {
236 assert
. ok ( e
. direction
, 'direction present on next' )
237 assert
. strictEqual ( e
. direction
, 'left' , 'direction is left on next' )
240 . one ( 'slid.bs.carousel' , function ( e
) {
241 assert
. ok ( e
. direction
, 'direction present on prev' )
242 assert
. strictEqual ( e
. direction
, 'right' , 'direction is right on prev' )
245 . bootstrapCarousel ( 'prev' )
247 . bootstrapCarousel ( 'next' )
250 QUnit
. test ( 'should fire slide event with relatedTarget' , function ( assert
) {
252 var template
= '<div id="myCarousel" class="carousel slide">'
253 + '<div class="carousel-inner">'
254 + '<div class="carousel-item active">'
256 + '<div class="carousel-caption">'
257 + '<h4>First Thumbnail label</h4>'
258 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
259 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
260 + 'ultricies vehicula ut id elit.</p>'
263 + '<div class="carousel-item">'
265 + '<div class="carousel-caption">'
266 + '<h4>Second Thumbnail label</h4>'
267 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
268 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
269 + 'ultricies vehicula ut id elit.</p>'
272 + '<div class="carousel-item">'
274 + '<div class="carousel-caption">'
275 + '<h4>Third Thumbnail label</h4>'
276 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
277 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
278 + 'ultricies vehicula ut id elit.</p>'
282 + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
283 + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
286 var done
= assert
. async ()
289 . on ( 'slide.bs.carousel' , function ( e
) {
290 assert
. ok ( e
. relatedTarget
, 'relatedTarget present' )
291 assert
. ok ($( e
. relatedTarget
). hasClass ( 'carousel-item' ), 'relatedTarget has class "item"' )
294 . bootstrapCarousel ( 'next' )
297 QUnit
. test ( 'should fire slid event with relatedTarget' , function ( assert
) {
299 var template
= '<div id="myCarousel" class="carousel slide">'
300 + '<div class="carousel-inner">'
301 + '<div class="carousel-item active">'
303 + '<div class="carousel-caption">'
304 + '<h4>First Thumbnail label</h4>'
305 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
306 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
307 + 'ultricies vehicula ut id elit.</p>'
310 + '<div class="carousel-item">'
312 + '<div class="carousel-caption">'
313 + '<h4>Second Thumbnail label</h4>'
314 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
315 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
316 + 'ultricies vehicula ut id elit.</p>'
319 + '<div class="carousel-item">'
321 + '<div class="carousel-caption">'
322 + '<h4>Third Thumbnail label</h4>'
323 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
324 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
325 + 'ultricies vehicula ut id elit.</p>'
329 + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
330 + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
333 var done
= assert
. async ()
336 . on ( 'slid.bs.carousel' , function ( e
) {
337 assert
. ok ( e
. relatedTarget
, 'relatedTarget present' )
338 assert
. ok ($( e
. relatedTarget
). hasClass ( 'carousel-item' ), 'relatedTarget has class "item"' )
341 . bootstrapCarousel ( 'next' )
344 QUnit
. test ( 'should set interval from data attribute' , function ( assert
) {
346 var templateHTML
= '<div id="myCarousel" class="carousel slide">'
347 + '<div class="carousel-inner">'
348 + '<div class="carousel-item active">'
350 + '<div class="carousel-caption">'
351 + '<h4>First Thumbnail label</h4>'
352 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
353 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
354 + 'ultricies vehicula ut id elit.</p>'
357 + '<div class="carousel-item">'
359 + '<div class="carousel-caption">'
360 + '<h4>Second Thumbnail label</h4>'
361 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
362 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
363 + 'ultricies vehicula ut id elit.</p>'
366 + '<div class="carousel-item">'
368 + '<div class="carousel-caption">'
369 + '<h4>Third Thumbnail label</h4>'
370 + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
371 + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
372 + 'ultricies vehicula ut id elit.</p>'
376 + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
377 + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
379 var $ carousel
= $( templateHTML
)
380 $ carousel
. attr ( 'data-interval' , 1814 )
382 $ carousel
. appendTo ( 'body' )
383 $( '[data-slide]' ). first (). trigger ( 'click' )
384 assert
. strictEqual ($ carousel
. data ( 'bs.carousel' ). _config
. interval
, 1814 )
387 $ carousel
. appendTo ( 'body' ). attr ( 'data-modal' , 'foobar' )
388 $( '[data-slide]' ). first (). trigger ( 'click' )
389 assert
. strictEqual ($ carousel
. data ( 'bs.carousel' ). _config
. interval
, 1814 , 'even if there is an data-modal attribute set' )
392 $ carousel
. appendTo ( 'body' )
393 $( '[data-slide]' ). first (). trigger ( 'click' )
394 $ carousel
. attr ( 'data-interval' , 1860 )
395 $( '[data-slide]' ). first (). trigger ( 'click' )
396 assert
. strictEqual ($ carousel
. data ( 'bs.carousel' ). _config
. interval
, 1814 , 'attributes should be read only on initialization' )
399 $ carousel
. attr ( 'data-interval' , false )
400 $ carousel
. appendTo ( 'body' )
401 $ carousel
. bootstrapCarousel ( 1 )
402 assert
. strictEqual ($ carousel
. data ( 'bs.carousel' ). _config
. interval
, false , 'data attribute has higher priority than default options' )
406 QUnit
. test ( 'should skip over non-items when using item indices' , function ( assert
) {
408 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="1814">'
409 + '<div class="carousel-inner">'
410 + '<div class="carousel-item active">'
413 + '<script type="text/x-metamorph" id="thingy"/>'
414 + '<div class="carousel-item">'
417 + '<div class="carousel-item">'
421 var $ template
= $( templateHTML
)
423 $ template
. bootstrapCarousel ()
425 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
427 $ template
. bootstrapCarousel ( 1 )
429 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 1 ], $ template
. find ( '.active' )[ 0 ], 'second item active' )
432 QUnit
. test ( 'should skip over non-items when using next/prev methods' , function ( assert
) {
434 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="1814">'
435 + '<div class="carousel-inner">'
436 + '<div class="carousel-item active">'
439 + '<script type="text/x-metamorph" id="thingy"/>'
440 + '<div class="carousel-item">'
443 + '<div class="carousel-item">'
447 var $ template
= $( templateHTML
)
449 $ template
. bootstrapCarousel ()
451 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
453 $ template
. bootstrapCarousel ( 'next' )
455 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 1 ], $ template
. find ( '.active' )[ 0 ], 'second item active' )
458 QUnit
. test ( 'should go to previous item if left arrow key is pressed' , function ( assert
) {
460 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false">'
461 + '<div class="carousel-inner">'
462 + '<div id="first" class="carousel-item">'
465 + '<div id="second" class="carousel-item active">'
468 + '<div id="third" class="carousel-item">'
473 var $ template
= $( templateHTML
)
475 $ template
. bootstrapCarousel ()
477 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 1 ], $ template
. find ( '.active' )[ 0 ], 'second item active' )
479 $ template
. trigger ($. Event ( 'keydown' , { which
: 37 }))
481 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
484 QUnit
. test ( 'should go to next item if right arrow key is pressed' , function ( assert
) {
486 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false">'
487 + '<div class="carousel-inner">'
488 + '<div id="first" class="carousel-item active">'
491 + '<div id="second" class="carousel-item">'
494 + '<div id="third" class="carousel-item">'
499 var $ template
= $( templateHTML
)
501 $ template
. bootstrapCarousel ()
503 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
505 $ template
. trigger ($. Event ( 'keydown' , { which
: 39 }))
507 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 1 ], $ template
. find ( '.active' )[ 0 ], 'second item active' )
510 QUnit
. test ( 'should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT' , function ( assert
) {
512 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false">'
513 + '<div class="carousel-inner">'
514 + '<div id="first" class="carousel-item active">'
519 var $ template
= $( templateHTML
)
521 $ template
. bootstrapCarousel ()
522 var done
= assert
. async ()
524 var eventArrowDown
= $. Event ( 'keydown' , { which
: 40 })
525 var eventArrowUp
= $. Event ( 'keydown' , { which
: 38 })
527 $ template
. one ( 'keydown' , function ( event
) {
528 assert
. strictEqual ( event
. isDefaultPrevented (), false )
531 $ template
. trigger ( eventArrowDown
)
533 $ template
. one ( 'keydown' , function ( event
) {
534 assert
. strictEqual ( event
. isDefaultPrevented (), false )
538 $ template
. trigger ( eventArrowUp
)
541 QUnit
. test ( 'should support disabling the keyboard navigation' , function ( assert
) {
543 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
544 + '<div class="carousel-inner">'
545 + '<div id="first" class="carousel-item active">'
548 + '<div id="second" class="carousel-item">'
551 + '<div id="third" class="carousel-item">'
556 var $ template
= $( templateHTML
)
558 $ template
. bootstrapCarousel ()
560 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
562 $ template
. trigger ($. Event ( 'keydown' , { which
: 39 }))
564 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after right arrow press' )
566 $ template
. trigger ($. Event ( 'keydown' , { which
: 37 }))
568 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after left arrow press' )
571 QUnit
. test ( 'should ignore keyboard events within <input>s and <textarea>s' , function ( assert
) {
573 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false">'
574 + '<div class="carousel-inner">'
575 + '<div id="first" class="carousel-item active">'
577 + '<input type="text" id="in-put">'
578 + '<textarea id="text-area"></textarea>'
580 + '<div id="second" class="carousel-item">'
583 + '<div id="third" class="carousel-item">'
588 var $ template
= $( templateHTML
)
589 var $ input
= $ template
. find ( '#in-put' )
590 var $ textarea
= $ template
. find ( '#text-area' )
592 assert
. strictEqual ($ input
. length
, 1 , 'found <input>' )
593 assert
. strictEqual ($ textarea
. length
, 1 , 'found <textarea>' )
595 $ template
. bootstrapCarousel ()
597 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item active' )
600 $ input
. trigger ($. Event ( 'keydown' , { which
: 39 }))
601 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after right arrow press in <input>' )
603 $ input
. trigger ($. Event ( 'keydown' , { which
: 37 }))
604 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after left arrow press in <input>' )
607 $ textarea
. trigger ($. Event ( 'keydown' , { which
: 39 }))
608 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after right arrow press in <textarea>' )
610 $ textarea
. trigger ($. Event ( 'keydown' , { which
: 37 }))
611 assert
. strictEqual ($ template
. find ( '.carousel-item' )[ 0 ], $ template
. find ( '.active' )[ 0 ], 'first item still active after left arrow press in <textarea>' )
614 QUnit
. test ( 'should only add mouseenter and mouseleave listeners when not on mobile' , function ( assert
) {
616 var isMobile
= 'ontouchstart' in document
. documentElement
617 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'
618 + '<div class="carousel-inner">'
619 + '<div id="first" class="carousel-item active">'
622 + '<div id="second" class="carousel-item">'
625 + '<div id="third" class="carousel-item">'
630 var $ template
= $( templateHTML
). bootstrapCarousel ()
632 $. each ([ 'mouseover' , 'mouseout' ], function ( i
, type
) {
633 assert
. strictEqual ( type
in $. _data ($ template
[ 0 ], 'events' ), ! isMobile
, 'does' + ( isMobile
? ' not' : '' ) + ' listen for ' + type
+ ' events' )
637 QUnit
. test ( 'should wrap around from end to start when wrap option is true' , function ( assert
) {
639 var carouselHTML
= '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
640 + '<ol class="carousel-indicators">'
641 + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
642 + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
643 + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
645 + '<div class="carousel-inner">'
646 + '<div class="carousel-item active" id="one">'
647 + '<div class="carousel-caption"/>'
649 + '<div class="carousel-item" id="two">'
650 + '<div class="carousel-caption"/>'
652 + '<div class="carousel-item" id="three">'
653 + '<div class="carousel-caption"/>'
656 + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
657 + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
659 var $ carousel
= $( carouselHTML
)
660 var getActiveId = function () { return $ carousel
. find ( '.carousel-item.active' ). attr ( 'id' ) }
662 var done
= assert
. async ()
665 . one ( 'slid.bs.carousel' , function () {
666 assert
. strictEqual ( getActiveId (), 'two' , 'carousel slid from 1st to 2nd slide' )
668 . one ( 'slid.bs.carousel' , function () {
669 assert
. strictEqual ( getActiveId (), 'three' , 'carousel slid from 2nd to 3rd slide' )
671 . one ( 'slid.bs.carousel' , function () {
672 assert
. strictEqual ( getActiveId (), 'one' , 'carousel wrapped around and slid from 3rd to 1st slide' )
675 . bootstrapCarousel ( 'next' )
677 . bootstrapCarousel ( 'next' )
679 . bootstrapCarousel ( 'next' )
682 QUnit
. test ( 'should wrap around from start to end when wrap option is true' , function ( assert
) {
684 var carouselHTML
= '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
685 + '<ol class="carousel-indicators">'
686 + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
687 + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
688 + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
690 + '<div class="carousel-inner">'
691 + '<div class="carousel-item active" id="one">'
692 + '<div class="carousel-caption"/>'
694 + '<div class="carousel-item" id="two">'
695 + '<div class="carousel-caption"/>'
697 + '<div class="carousel-item" id="three">'
698 + '<div class="carousel-caption"/>'
701 + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
702 + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
704 var $ carousel
= $( carouselHTML
)
706 var done
= assert
. async ()
709 . on ( 'slid.bs.carousel' , function () {
710 assert
. strictEqual ($ carousel
. find ( '.carousel-item.active' ). attr ( 'id' ), 'three' , 'carousel wrapped around and slid from 1st to 3rd slide' )
713 . bootstrapCarousel ( 'prev' )
716 QUnit
. test ( 'should stay at the end when the next method is called and wrap is false' , function ( assert
) {
718 var carouselHTML
= '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
719 + '<ol class="carousel-indicators">'
720 + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
721 + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
722 + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
724 + '<div class="carousel-inner">'
725 + '<div class="carousel-item active" id="one">'
726 + '<div class="carousel-caption"/>'
728 + '<div class="carousel-item" id="two">'
729 + '<div class="carousel-caption"/>'
731 + '<div class="carousel-item" id="three">'
732 + '<div class="carousel-caption"/>'
735 + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
736 + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
738 var $ carousel
= $( carouselHTML
)
739 var getActiveId = function () { return $ carousel
. find ( '.carousel-item.active' ). attr ( 'id' ) }
741 var done
= assert
. async ()
744 . one ( 'slid.bs.carousel' , function () {
745 assert
. strictEqual ( getActiveId (), 'two' , 'carousel slid from 1st to 2nd slide' )
747 . one ( 'slid.bs.carousel' , function () {
748 assert
. strictEqual ( getActiveId (), 'three' , 'carousel slid from 2nd to 3rd slide' )
750 . one ( 'slid.bs.carousel' , function () {
751 assert
. ok ( false , 'carousel slid when it should not have slid' )
753 . bootstrapCarousel ( 'next' )
754 assert
. strictEqual ( getActiveId (), 'three' , 'carousel did not wrap around and stayed on 3rd slide' )
757 . bootstrapCarousel ( 'next' )
759 . bootstrapCarousel ( 'next' )
762 QUnit
. test ( 'should stay at the start when the prev method is called and wrap is false' , function ( assert
) {
764 var carouselHTML
= '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
765 + '<ol class="carousel-indicators">'
766 + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
767 + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
768 + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
770 + '<div class="carousel-inner">'
771 + '<div class="carousel-item active" id="one">'
772 + '<div class="carousel-caption"/>'
774 + '<div class="carousel-item" id="two">'
775 + '<div class="carousel-caption"/>'
777 + '<div class="carousel-item" id="three">'
778 + '<div class="carousel-caption"/>'
781 + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
782 + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
784 var $ carousel
= $( carouselHTML
)
787 . on ( 'slid.bs.carousel' , function () {
788 assert
. ok ( false , 'carousel slid when it should not have slid' )
790 . bootstrapCarousel ( 'prev' )
791 assert
. strictEqual ($ carousel
. find ( '.carousel-item.active' ). attr ( 'id' ), 'one' , 'carousel did not wrap around and stayed on 1st slide' )
794 QUnit
. test ( 'should not prevent keydown for inputs and textareas' , function ( assert
) {
796 var templateHTML
= '<div id="myCarousel" class="carousel" data-interval="false">'
797 + '<div class="carousel-inner">'
798 + '<div id="first" class="carousel-item">'
799 + '<input type="text" id="inputText" />'
801 + '<div id="second" class="carousel-item active">'
802 + '<textarea id="txtArea"></textarea>'
806 var $ template
= $( templateHTML
)
807 var done
= assert
. async ()
808 $ template
. appendTo ( '#qunit-fixture' )
809 var $ inputText
= $ template
. find ( '#inputText' )
810 var $ textArea
= $ template
. find ( '#txtArea' )
811 $ template
. bootstrapCarousel ()
813 var eventKeyDown
= $. Event ( 'keydown' , { which
: 65 }) // 65 for "a"
814 $ inputText
. on ( 'keydown' , function ( event
) {
815 assert
. strictEqual ( event
. isDefaultPrevented (), false )
817 $ inputText
. trigger ( eventKeyDown
)
819 $ textArea
. on ( 'keydown' , function ( event
) {
820 assert
. strictEqual ( event
. isDefaultPrevented (), false )
823 $ textArea
. trigger ( eventKeyDown
)