static/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/carousel.js

   1 $(function () {
   2   'use strict'
   3
   4   QUnit.module('carousel plugin')
   5
   6   QUnit.test('should be defined on jQuery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).carousel, 'carousel method is defined')
   9   })
  10
  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()
  15     },
  16     afterEach: function () {
  17       $.fn.carousel = $.fn.bootstrapCarousel
  18       delete $.fn.bootstrapCarousel
  19     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
  25   })
  26
  27   QUnit.test('should throw explicit error on undefined method', function (assert) {
  28     assert.expect(1)
  29     var $el = $('<div/>')
  30     $el.bootstrapCarousel()
  31     try {
  32       $el.bootstrapCarousel('noMethod')
  33     }
  34     catch (err) {
  35       assert.strictEqual(err.message, 'No method named "noMethod"')
  36     }
  37   })
  38
  39   QUnit.test('should return jquery collection containing the element', function (assert) {
  40     assert.expect(2)
  41     var $el = $('<div/>')
  42     var $carousel = $el.bootstrapCarousel()
  43     assert.ok($carousel instanceof $, 'returns jquery collection')
  44     assert.strictEqual($carousel[0], $el[0], 'collection contains element')
  45   })
  46
  47   QUnit.test('should type check config options', function (assert) {
  48     assert.expect(2)
  49
  50     var message
  51     var expectedMessage = 'CAROUSEL: Option "interval" provided type "string" but expected type "(number|boolean)".'
  52     var config = {
  53       interval: 'fat sux'
  54     }
  55
  56     try {
  57       $('<div/>').bootstrapCarousel(config)
  58     } catch (e) {
  59       message = e.message
  60     }
  61
  62     assert.ok(message === expectedMessage, 'correct error message')
  63
  64     config = {
  65       keyboard: document.createElement('div')
  66     }
  67     expectedMessage = 'CAROUSEL: Option "keyboard" provided type "element" but expected type "boolean".'
  68
  69     try {
  70       $('<div/>').bootstrapCarousel(config)
  71     } catch (e) {
  72       message = e.message
  73     }
  74
  75     assert.ok(message === expectedMessage, 'correct error message')
  76   })
  77
  78
  79   QUnit.test('should not fire slid when slide is prevented', function (assert) {
  80     assert.expect(1)
  81     var done = assert.async()
  82     $('<div class="carousel"/>')
  83       .on('slide.bs.carousel', function (e) {
  84         e.preventDefault()
  85         assert.ok(true, 'slide event fired')
  86         done()
  87       })
  88       .on('slid.bs.carousel', function () {
  89         assert.ok(false, 'slid event fired')
  90       })
  91       .bootstrapCarousel('next')
  92   })
  93
  94   QUnit.test('should reset when slide is prevented', function (assert) {
  95     assert.expect(6)
  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"/>'
 101         + '</ol>'
 102         + '<div class="carousel-inner">'
 103         + '<div class="carousel-item active">'
 104         + '<div class="carousel-caption"/>'
 105         + '</div>'
 106         + '<div class="carousel-item">'
 107         + '<div class="carousel-caption"/>'
 108         + '</div>'
 109         + '<div class="carousel-item">'
 110         + '<div class="carousel-caption"/>'
 111         + '</div>'
 112         + '</div>'
 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"/>'
 115         + '</div>'
 116     var $carousel = $(carouselHTML)
 117
 118     var done = assert.async()
 119     $carousel
 120       .one('slide.bs.carousel', function (e) {
 121         e.preventDefault()
 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')
 126         }, 0)
 127       })
 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')
 134           done()
 135         }, 0)
 136       })
 137       .bootstrapCarousel('next')
 138   })
 139
 140   QUnit.test('should fire slide event with direction', function (assert) {
 141     assert.expect(4)
 142     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
 143         + '<div class="carousel-inner">'
 144         + '<div class="carousel-item active">'
 145         + '<img alt="">'
 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>'
 151         + '</div>'
 152         + '</div>'
 153         + '<div class="carousel-item">'
 154         + '<img alt="">'
 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>'
 160         + '</div>'
 161         + '</div>'
 162         + '<div class="carousel-item">'
 163         + '<img alt="">'
 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>'
 169         + '</div>'
 170         + '</div>'
 171         + '</div>'
 172         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 173         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 174         + '</div>'
 175     var $carousel = $(carouselHTML)
 176
 177     var done = assert.async()
 178
 179     $carousel
 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')
 183
 184         $carousel
 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')
 188             done()
 189           })
 190           .bootstrapCarousel('prev')
 191       })
 192       .bootstrapCarousel('next')
 193   })
 194
 195   QUnit.test('should fire slid event with direction', function (assert) {
 196     assert.expect(4)
 197     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
 198         + '<div class="carousel-inner">'
 199         + '<div class="carousel-item active">'
 200         + '<img alt="">'
 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>'
 206         + '</div>'
 207         + '</div>'
 208         + '<div class="carousel-item">'
 209         + '<img alt="">'
 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>'
 215         + '</div>'
 216         + '</div>'
 217         + '<div class="carousel-item">'
 218         + '<img alt="">'
 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>'
 224         + '</div>'
 225         + '</div>'
 226         + '</div>'
 227         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 228         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 229         + '</div>'
 230     var $carousel = $(carouselHTML)
 231
 232     var done = assert.async()
 233
 234     $carousel
 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')
 238
 239         $carousel
 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')
 243             done()
 244           })
 245           .bootstrapCarousel('prev')
 246       })
 247       .bootstrapCarousel('next')
 248   })
 249
 250   QUnit.test('should fire slide event with relatedTarget', function (assert) {
 251     assert.expect(2)
 252     var template = '<div id="myCarousel" class="carousel slide">'
 253         + '<div class="carousel-inner">'
 254         + '<div class="carousel-item active">'
 255         + '<img alt="">'
 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>'
 261         + '</div>'
 262         + '</div>'
 263         + '<div class="carousel-item">'
 264         + '<img alt="">'
 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>'
 270         + '</div>'
 271         + '</div>'
 272         + '<div class="carousel-item">'
 273         + '<img alt="">'
 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>'
 279         + '</div>'
 280         + '</div>'
 281         + '</div>'
 282         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 283         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 284         + '</div>'
 285
 286     var done = assert.async()
 287
 288     $(template)
 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"')
 292         done()
 293       })
 294       .bootstrapCarousel('next')
 295   })
 296
 297   QUnit.test('should fire slid event with relatedTarget', function (assert) {
 298     assert.expect(2)
 299     var template = '<div id="myCarousel" class="carousel slide">'
 300         + '<div class="carousel-inner">'
 301         + '<div class="carousel-item active">'
 302         + '<img alt="">'
 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>'
 308         + '</div>'
 309         + '</div>'
 310         + '<div class="carousel-item">'
 311         + '<img alt="">'
 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>'
 317         + '</div>'
 318         + '</div>'
 319         + '<div class="carousel-item">'
 320         + '<img alt="">'
 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>'
 326         + '</div>'
 327         + '</div>'
 328         + '</div>'
 329         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 330         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 331         + '</div>'
 332
 333     var done = assert.async()
 334
 335     $(template)
 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"')
 339         done()
 340       })
 341       .bootstrapCarousel('next')
 342   })
 343
 344   QUnit.test('should set interval from data attribute', function (assert) {
 345     assert.expect(4)
 346     var templateHTML = '<div id="myCarousel" class="carousel slide">'
 347         + '<div class="carousel-inner">'
 348         + '<div class="carousel-item active">'
 349         + '<img alt="">'
 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>'
 355         + '</div>'
 356         + '</div>'
 357         + '<div class="carousel-item">'
 358         + '<img alt="">'
 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>'
 364         + '</div>'
 365         + '</div>'
 366         + '<div class="carousel-item">'
 367         + '<img alt="">'
 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>'
 373         + '</div>'
 374         + '</div>'
 375         + '</div>'
 376         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 377         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 378         + '</div>'
 379     var $carousel = $(templateHTML)
 380     $carousel.attr('data-interval', 1814)
 381
 382     $carousel.appendTo('body')
 383     $('[data-slide]').first().trigger('click')
 384     assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814)
 385     $carousel.remove()
 386
 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')
 390     $carousel.remove()
 391
 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')
 397     $carousel.remove()
 398
 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')
 403     $carousel.remove()
 404   })
 405
 406   QUnit.test('should skip over non-items when using item indices', function (assert) {
 407     assert.expect(2)
 408     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
 409         + '<div class="carousel-inner">'
 410         + '<div class="carousel-item active">'
 411         + '<img alt="">'
 412         + '</div>'
 413         + '<script type="text/x-metamorph" id="thingy"/>'
 414         + '<div class="carousel-item">'
 415         + '<img alt="">'
 416         + '</div>'
 417         + '<div class="carousel-item">'
 418         + '</div>'
 419         + '</div>'
 420         + '</div>'
 421     var $template = $(templateHTML)
 422
 423     $template.bootstrapCarousel()
 424
 425     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 426
 427     $template.bootstrapCarousel(1)
 428
 429     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 430   })
 431
 432   QUnit.test('should skip over non-items when using next/prev methods', function (assert) {
 433     assert.expect(2)
 434     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
 435         + '<div class="carousel-inner">'
 436         + '<div class="carousel-item active">'
 437         + '<img alt="">'
 438         + '</div>'
 439         + '<script type="text/x-metamorph" id="thingy"/>'
 440         + '<div class="carousel-item">'
 441         + '<img alt="">'
 442         + '</div>'
 443         + '<div class="carousel-item">'
 444         + '</div>'
 445         + '</div>'
 446         + '</div>'
 447     var $template = $(templateHTML)
 448
 449     $template.bootstrapCarousel()
 450
 451     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 452
 453     $template.bootstrapCarousel('next')
 454
 455     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 456   })
 457
 458   QUnit.test('should go to previous item if left arrow key is pressed', function (assert) {
 459     assert.expect(2)
 460     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 461         + '<div class="carousel-inner">'
 462         + '<div id="first" class="carousel-item">'
 463         + '<img alt="">'
 464         + '</div>'
 465         + '<div id="second" class="carousel-item active">'
 466         + '<img alt="">'
 467         + '</div>'
 468         + '<div id="third" class="carousel-item">'
 469         + '<img alt="">'
 470         + '</div>'
 471         + '</div>'
 472         + '</div>'
 473     var $template = $(templateHTML)
 474
 475     $template.bootstrapCarousel()
 476
 477     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 478
 479     $template.trigger($.Event('keydown', { which: 37 }))
 480
 481     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 482   })
 483
 484   QUnit.test('should go to next item if right arrow key is pressed', function (assert) {
 485     assert.expect(2)
 486     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 487         + '<div class="carousel-inner">'
 488         + '<div id="first" class="carousel-item active">'
 489         + '<img alt="">'
 490         + '</div>'
 491         + '<div id="second" class="carousel-item">'
 492         + '<img alt="">'
 493         + '</div>'
 494         + '<div id="third" class="carousel-item">'
 495         + '<img alt="">'
 496         + '</div>'
 497         + '</div>'
 498         + '</div>'
 499     var $template = $(templateHTML)
 500
 501     $template.bootstrapCarousel()
 502
 503     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 504
 505     $template.trigger($.Event('keydown', { which: 39 }))
 506
 507     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 508   })
 509
 510   QUnit.test('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', function (assert) {
 511     assert.expect(2)
 512     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 513         + '<div class="carousel-inner">'
 514         + '<div id="first" class="carousel-item active">'
 515         + '<img alt="">'
 516         + '</div>'
 517         + '</div>'
 518         + '</div>'
 519     var $template = $(templateHTML)
 520
 521     $template.bootstrapCarousel()
 522     var done = assert.async()
 523
 524     var eventArrowDown = $.Event('keydown', { which: 40 })
 525     var eventArrowUp   = $.Event('keydown', { which: 38 })
 526
 527     $template.one('keydown', function (event) {
 528       assert.strictEqual(event.isDefaultPrevented(), false)
 529     })
 530
 531     $template.trigger(eventArrowDown)
 532
 533     $template.one('keydown', function (event) {
 534       assert.strictEqual(event.isDefaultPrevented(), false)
 535       done()
 536     })
 537
 538     $template.trigger(eventArrowUp)
 539   })
 540
 541   QUnit.test('should support disabling the keyboard navigation', function (assert) {
 542     assert.expect(3)
 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">'
 546         + '<img alt="">'
 547         + '</div>'
 548         + '<div id="second" class="carousel-item">'
 549         + '<img alt="">'
 550         + '</div>'
 551         + '<div id="third" class="carousel-item">'
 552         + '<img alt="">'
 553         + '</div>'
 554         + '</div>'
 555         + '</div>'
 556     var $template = $(templateHTML)
 557
 558     $template.bootstrapCarousel()
 559
 560     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 561
 562     $template.trigger($.Event('keydown', { which: 39 }))
 563
 564     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
 565
 566     $template.trigger($.Event('keydown', { which: 37 }))
 567
 568     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
 569   })
 570
 571   QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
 572     assert.expect(7)
 573     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 574         + '<div class="carousel-inner">'
 575         + '<div id="first" class="carousel-item active">'
 576         + '<img alt="">'
 577         + '<input type="text" id="in-put">'
 578         + '<textarea id="text-area"></textarea>'
 579         + '</div>'
 580         + '<div id="second" class="carousel-item">'
 581         + '<img alt="">'
 582         + '</div>'
 583         + '<div id="third" class="carousel-item">'
 584         + '<img alt="">'
 585         + '</div>'
 586         + '</div>'
 587         + '</div>'
 588     var $template = $(templateHTML)
 589     var $input = $template.find('#in-put')
 590     var $textarea = $template.find('#text-area')
 591
 592     assert.strictEqual($input.length, 1, 'found <input>')
 593     assert.strictEqual($textarea.length, 1, 'found <textarea>')
 594
 595     $template.bootstrapCarousel()
 596
 597     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 598
 599
 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>')
 602
 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>')
 605
 606
 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>')
 609
 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>')
 612   })
 613
 614   QUnit.test('should only add mouseenter and mouseleave listeners when not on mobile', function (assert) {
 615     assert.expect(2)
 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">'
 620         + '<img alt="">'
 621         + '</div>'
 622         + '<div id="second" class="carousel-item">'
 623         + '<img alt="">'
 624         + '</div>'
 625         + '<div id="third" class="carousel-item">'
 626         + '<img alt="">'
 627         + '</div>'
 628         + '</div>'
 629         + '</div>'
 630     var $template = $(templateHTML).bootstrapCarousel()
 631
 632     $.each(['mouseover', 'mouseout'], function (i, type) {
 633       assert.strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
 634     })
 635   })
 636
 637   QUnit.test('should wrap around from end to start when wrap option is true', function (assert) {
 638     assert.expect(3)
 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"/>'
 644         + '</ol>'
 645         + '<div class="carousel-inner">'
 646         + '<div class="carousel-item active" id="one">'
 647         + '<div class="carousel-caption"/>'
 648         + '</div>'
 649         + '<div class="carousel-item" id="two">'
 650         + '<div class="carousel-caption"/>'
 651         + '</div>'
 652         + '<div class="carousel-item" id="three">'
 653         + '<div class="carousel-caption"/>'
 654         + '</div>'
 655         + '</div>'
 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"/>'
 658         + '</div>'
 659     var $carousel = $(carouselHTML)
 660     var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
 661
 662     var done = assert.async()
 663
 664     $carousel
 665       .one('slid.bs.carousel', function () {
 666         assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
 667         $carousel
 668           .one('slid.bs.carousel', function () {
 669             assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
 670             $carousel
 671               .one('slid.bs.carousel', function () {
 672                 assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
 673                 done()
 674               })
 675               .bootstrapCarousel('next')
 676           })
 677           .bootstrapCarousel('next')
 678       })
 679       .bootstrapCarousel('next')
 680   })
 681
 682   QUnit.test('should wrap around from start to end when wrap option is true', function (assert) {
 683     assert.expect(1)
 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"/>'
 689         + '</ol>'
 690         + '<div class="carousel-inner">'
 691         + '<div class="carousel-item active" id="one">'
 692         + '<div class="carousel-caption"/>'
 693         + '</div>'
 694         + '<div class="carousel-item" id="two">'
 695         + '<div class="carousel-caption"/>'
 696         + '</div>'
 697         + '<div class="carousel-item" id="three">'
 698         + '<div class="carousel-caption"/>'
 699         + '</div>'
 700         + '</div>'
 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"/>'
 703         + '</div>'
 704     var $carousel = $(carouselHTML)
 705
 706     var done = assert.async()
 707
 708     $carousel
 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')
 711         done()
 712       })
 713       .bootstrapCarousel('prev')
 714   })
 715
 716   QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) {
 717     assert.expect(3)
 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"/>'
 723         + '</ol>'
 724         + '<div class="carousel-inner">'
 725         + '<div class="carousel-item active" id="one">'
 726         + '<div class="carousel-caption"/>'
 727         + '</div>'
 728         + '<div class="carousel-item" id="two">'
 729         + '<div class="carousel-caption"/>'
 730         + '</div>'
 731         + '<div class="carousel-item" id="three">'
 732         + '<div class="carousel-caption"/>'
 733         + '</div>'
 734         + '</div>'
 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"/>'
 737         + '</div>'
 738     var $carousel = $(carouselHTML)
 739     var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
 740
 741     var done = assert.async()
 742
 743     $carousel
 744       .one('slid.bs.carousel', function () {
 745         assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
 746         $carousel
 747           .one('slid.bs.carousel', function () {
 748             assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
 749             $carousel
 750               .one('slid.bs.carousel', function () {
 751                 assert.ok(false, 'carousel slid when it should not have slid')
 752               })
 753               .bootstrapCarousel('next')
 754             assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
 755             done()
 756           })
 757           .bootstrapCarousel('next')
 758       })
 759       .bootstrapCarousel('next')
 760   })
 761
 762   QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) {
 763     assert.expect(1)
 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"/>'
 769         + '</ol>'
 770         + '<div class="carousel-inner">'
 771         + '<div class="carousel-item active" id="one">'
 772         + '<div class="carousel-caption"/>'
 773         + '</div>'
 774         + '<div class="carousel-item" id="two">'
 775         + '<div class="carousel-caption"/>'
 776         + '</div>'
 777         + '<div class="carousel-item" id="three">'
 778         + '<div class="carousel-caption"/>'
 779         + '</div>'
 780         + '</div>'
 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"/>'
 783         + '</div>'
 784     var $carousel = $(carouselHTML)
 785
 786     $carousel
 787       .on('slid.bs.carousel', function () {
 788         assert.ok(false, 'carousel slid when it should not have slid')
 789       })
 790       .bootstrapCarousel('prev')
 791     assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
 792   })
 793
 794   QUnit.test('should not prevent keydown for inputs and textareas', function (assert) {
 795     assert.expect(2)
 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" />'
 800           + '</div>'
 801           + '<div id="second" class="carousel-item active">'
 802             + '<textarea id="txtArea"></textarea>'
 803           + '</div>'
 804         + '</div>'
 805         + '</div>'
 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()
 812
 813     var eventKeyDown = $.Event('keydown', { which: 65 }) // 65 for "a"
 814     $inputText.on('keydown', function (event) {
 815       assert.strictEqual(event.isDefaultPrevented(), false)
 816     })
 817     $inputText.trigger(eventKeyDown)
 818
 819     $textArea.on('keydown', function (event) {
 820       assert.strictEqual(event.isDefaultPrevented(), false)
 821       done()
 822     })
 823     $textArea.trigger(eventKeyDown)
 824   })
 825 })