POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/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 return jquery collection containing the element', function (assert) {
  28     assert.expect(2)
  29     var $el = $('<div/>')
  30     var $carousel = $el.bootstrapCarousel()
  31     assert.ok($carousel instanceof $, 'returns jquery collection')
  32     assert.strictEqual($carousel[0], $el[0], 'collection contains element')
  33   })
  34
  35   QUnit.test('should not fire slid when slide is prevented', function (assert) {
  36     assert.expect(1)
  37     var done = assert.async()
  38     $('<div class="carousel"/>')
  39       .on('slide.bs.carousel', function (e) {
  40         e.preventDefault()
  41         assert.ok(true, 'slide event fired')
  42         done()
  43       })
  44       .on('slid.bs.carousel', function () {
  45         assert.ok(false, 'slid event fired')
  46       })
  47       .bootstrapCarousel('next')
  48   })
  49
  50   QUnit.test('should reset when slide is prevented', function (assert) {
  51     assert.expect(6)
  52     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">'
  53         + '<ol class="carousel-indicators">'
  54         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
  55         + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
  56         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
  57         + '</ol>'
  58         + '<div class="carousel-inner">'
  59         + '<div class="item active">'
  60         + '<div class="carousel-caption"/>'
  61         + '</div>'
  62         + '<div class="item">'
  63         + '<div class="carousel-caption"/>'
  64         + '</div>'
  65         + '<div class="item">'
  66         + '<div class="carousel-caption"/>'
  67         + '</div>'
  68         + '</div>'
  69         + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
  70         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
  71         + '</div>'
  72     var $carousel = $(carouselHTML)
  73
  74     var done = assert.async()
  75     $carousel
  76       .one('slide.bs.carousel', function (e) {
  77         e.preventDefault()
  78         setTimeout(function () {
  79           assert.ok($carousel.find('.item:eq(0)').is('.active'), 'first item still active')
  80           assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
  81           $carousel.bootstrapCarousel('next')
  82         }, 0)
  83       })
  84       .one('slid.bs.carousel', function () {
  85         setTimeout(function () {
  86           assert.ok(!$carousel.find('.item:eq(0)').is('.active'), 'first item still active')
  87           assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
  88           assert.ok($carousel.find('.item:eq(1)').is('.active'), 'second item active')
  89           assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
  90           done()
  91         }, 0)
  92       })
  93       .bootstrapCarousel('next')
  94   })
  95
  96   QUnit.test('should fire slide event with direction', function (assert) {
  97     assert.expect(4)
  98     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
  99         + '<div class="carousel-inner">'
 100         + '<div class="item active">'
 101         + '<img alt="">'
 102         + '<div class="carousel-caption">'
 103         + '<h4>First Thumbnail label</h4>'
 104         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 105         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 106         + 'ultricies vehicula ut id elit.</p>'
 107         + '</div>'
 108         + '</div>'
 109         + '<div class="item">'
 110         + '<img alt="">'
 111         + '<div class="carousel-caption">'
 112         + '<h4>Second Thumbnail label</h4>'
 113         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 114         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 115         + 'ultricies vehicula ut id elit.</p>'
 116         + '</div>'
 117         + '</div>'
 118         + '<div class="item">'
 119         + '<img alt="">'
 120         + '<div class="carousel-caption">'
 121         + '<h4>Third Thumbnail label</h4>'
 122         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 123         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 124         + 'ultricies vehicula ut id elit.</p>'
 125         + '</div>'
 126         + '</div>'
 127         + '</div>'
 128         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 129         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 130         + '</div>'
 131     var $carousel = $(carouselHTML)
 132
 133     var done = assert.async()
 134
 135     $carousel
 136       .one('slide.bs.carousel', function (e) {
 137         assert.ok(e.direction, 'direction present on next')
 138         assert.strictEqual(e.direction, 'left', 'direction is left on next')
 139
 140         $carousel
 141           .one('slide.bs.carousel', function (e) {
 142             assert.ok(e.direction, 'direction present on prev')
 143             assert.strictEqual(e.direction, 'right', 'direction is right on prev')
 144             done()
 145           })
 146           .bootstrapCarousel('prev')
 147       })
 148       .bootstrapCarousel('next')
 149   })
 150
 151   QUnit.test('should fire slid event with direction', function (assert) {
 152     assert.expect(4)
 153     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
 154         + '<div class="carousel-inner">'
 155         + '<div class="item active">'
 156         + '<img alt="">'
 157         + '<div class="carousel-caption">'
 158         + '<h4>First Thumbnail label</h4>'
 159         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 160         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 161         + 'ultricies vehicula ut id elit.</p>'
 162         + '</div>'
 163         + '</div>'
 164         + '<div class="item">'
 165         + '<img alt="">'
 166         + '<div class="carousel-caption">'
 167         + '<h4>Second Thumbnail label</h4>'
 168         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 169         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 170         + 'ultricies vehicula ut id elit.</p>'
 171         + '</div>'
 172         + '</div>'
 173         + '<div class="item">'
 174         + '<img alt="">'
 175         + '<div class="carousel-caption">'
 176         + '<h4>Third Thumbnail label</h4>'
 177         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 178         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 179         + 'ultricies vehicula ut id elit.</p>'
 180         + '</div>'
 181         + '</div>'
 182         + '</div>'
 183         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 184         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 185         + '</div>'
 186     var $carousel = $(carouselHTML)
 187
 188     var done = assert.async()
 189
 190     $carousel
 191       .one('slid.bs.carousel', function (e) {
 192         assert.ok(e.direction, 'direction present on next')
 193         assert.strictEqual(e.direction, 'left', 'direction is left on next')
 194
 195         $carousel
 196           .one('slid.bs.carousel', function (e) {
 197             assert.ok(e.direction, 'direction present on prev')
 198             assert.strictEqual(e.direction, 'right', 'direction is right on prev')
 199             done()
 200           })
 201           .bootstrapCarousel('prev')
 202       })
 203       .bootstrapCarousel('next')
 204   })
 205
 206   QUnit.test('should fire slide event with relatedTarget', function (assert) {
 207     assert.expect(2)
 208     var template = '<div id="myCarousel" class="carousel slide">'
 209         + '<div class="carousel-inner">'
 210         + '<div class="item active">'
 211         + '<img alt="">'
 212         + '<div class="carousel-caption">'
 213         + '<h4>First Thumbnail label</h4>'
 214         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 215         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 216         + 'ultricies vehicula ut id elit.</p>'
 217         + '</div>'
 218         + '</div>'
 219         + '<div class="item">'
 220         + '<img alt="">'
 221         + '<div class="carousel-caption">'
 222         + '<h4>Second Thumbnail label</h4>'
 223         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 224         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 225         + 'ultricies vehicula ut id elit.</p>'
 226         + '</div>'
 227         + '</div>'
 228         + '<div class="item">'
 229         + '<img alt="">'
 230         + '<div class="carousel-caption">'
 231         + '<h4>Third Thumbnail label</h4>'
 232         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 233         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 234         + 'ultricies vehicula ut id elit.</p>'
 235         + '</div>'
 236         + '</div>'
 237         + '</div>'
 238         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 239         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 240         + '</div>'
 241
 242     var done = assert.async()
 243
 244     $(template)
 245       .on('slide.bs.carousel', function (e) {
 246         assert.ok(e.relatedTarget, 'relatedTarget present')
 247         assert.ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
 248         done()
 249       })
 250       .bootstrapCarousel('next')
 251   })
 252
 253   QUnit.test('should fire slid event with relatedTarget', function (assert) {
 254     assert.expect(2)
 255     var template = '<div id="myCarousel" class="carousel slide">'
 256         + '<div class="carousel-inner">'
 257         + '<div class="item active">'
 258         + '<img alt="">'
 259         + '<div class="carousel-caption">'
 260         + '<h4>First Thumbnail label</h4>'
 261         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 262         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 263         + 'ultricies vehicula ut id elit.</p>'
 264         + '</div>'
 265         + '</div>'
 266         + '<div class="item">'
 267         + '<img alt="">'
 268         + '<div class="carousel-caption">'
 269         + '<h4>Second Thumbnail label</h4>'
 270         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 271         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 272         + 'ultricies vehicula ut id elit.</p>'
 273         + '</div>'
 274         + '</div>'
 275         + '<div class="item">'
 276         + '<img alt="">'
 277         + '<div class="carousel-caption">'
 278         + '<h4>Third Thumbnail label</h4>'
 279         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 280         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 281         + 'ultricies vehicula ut id elit.</p>'
 282         + '</div>'
 283         + '</div>'
 284         + '</div>'
 285         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 286         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 287         + '</div>'
 288
 289     var done = assert.async()
 290
 291     $(template)
 292       .on('slid.bs.carousel', function (e) {
 293         assert.ok(e.relatedTarget, 'relatedTarget present')
 294         assert.ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
 295         done()
 296       })
 297       .bootstrapCarousel('next')
 298   })
 299
 300   QUnit.test('should set interval from data attribute', function (assert) {
 301     assert.expect(4)
 302     var templateHTML = '<div id="myCarousel" class="carousel slide">'
 303         + '<div class="carousel-inner">'
 304         + '<div class="item active">'
 305         + '<img alt="">'
 306         + '<div class="carousel-caption">'
 307         + '<h4>First Thumbnail label</h4>'
 308         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 309         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 310         + 'ultricies vehicula ut id elit.</p>'
 311         + '</div>'
 312         + '</div>'
 313         + '<div class="item">'
 314         + '<img alt="">'
 315         + '<div class="carousel-caption">'
 316         + '<h4>Second Thumbnail label</h4>'
 317         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 318         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 319         + 'ultricies vehicula ut id elit.</p>'
 320         + '</div>'
 321         + '</div>'
 322         + '<div class="item">'
 323         + '<img alt="">'
 324         + '<div class="carousel-caption">'
 325         + '<h4>Third Thumbnail label</h4>'
 326         + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec '
 327         + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh '
 328         + 'ultricies vehicula ut id elit.</p>'
 329         + '</div>'
 330         + '</div>'
 331         + '</div>'
 332         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
 333         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
 334         + '</div>'
 335     var $carousel = $(templateHTML)
 336     $carousel.attr('data-interval', 1814)
 337
 338     $carousel.appendTo('body')
 339     $('[data-slide]').first().trigger('click')
 340     assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814)
 341     $carousel.remove()
 342
 343     $carousel.appendTo('body').attr('data-modal', 'foobar')
 344     $('[data-slide]').first().trigger('click')
 345     assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814, 'even if there is an data-modal attribute set')
 346     $carousel.remove()
 347
 348     $carousel.appendTo('body')
 349     $('[data-slide]').first().trigger('click')
 350     $carousel.attr('data-interval', 1860)
 351     $('[data-slide]').first().trigger('click')
 352     assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814, 'attributes should be read only on initialization')
 353     $carousel.remove()
 354
 355     $carousel.attr('data-interval', false)
 356     $carousel.appendTo('body')
 357     $carousel.bootstrapCarousel(1)
 358     assert.strictEqual($carousel.data('bs.carousel').options.interval, false, 'data attribute has higher priority than default options')
 359     $carousel.remove()
 360   })
 361
 362   QUnit.test('should skip over non-items when using item indices', function (assert) {
 363     assert.expect(2)
 364     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
 365         + '<div class="carousel-inner">'
 366         + '<div class="item active">'
 367         + '<img alt="">'
 368         + '</div>'
 369         + '<script type="text/x-metamorph" id="thingy"/>'
 370         + '<div class="item">'
 371         + '<img alt="">'
 372         + '</div>'
 373         + '<div class="item">'
 374         + '</div>'
 375         + '</div>'
 376         + '</div>'
 377     var $template = $(templateHTML)
 378
 379     $template.bootstrapCarousel()
 380
 381     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 382
 383     $template.bootstrapCarousel(1)
 384
 385     assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
 386   })
 387
 388   QUnit.test('should skip over non-items when using next/prev methods', function (assert) {
 389     assert.expect(2)
 390     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
 391         + '<div class="carousel-inner">'
 392         + '<div class="item active">'
 393         + '<img alt="">'
 394         + '</div>'
 395         + '<script type="text/x-metamorph" id="thingy"/>'
 396         + '<div class="item">'
 397         + '<img alt="">'
 398         + '</div>'
 399         + '<div class="item">'
 400         + '</div>'
 401         + '</div>'
 402         + '</div>'
 403     var $template = $(templateHTML)
 404
 405     $template.bootstrapCarousel()
 406
 407     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 408
 409     $template.bootstrapCarousel('next')
 410
 411     assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
 412   })
 413
 414   QUnit.test('should go to previous item if left arrow key is pressed', function (assert) {
 415     assert.expect(2)
 416     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 417         + '<div class="carousel-inner">'
 418         + '<div id="first" class="item">'
 419         + '<img alt="">'
 420         + '</div>'
 421         + '<div id="second" class="item active">'
 422         + '<img alt="">'
 423         + '</div>'
 424         + '<div id="third" class="item">'
 425         + '<img alt="">'
 426         + '</div>'
 427         + '</div>'
 428         + '</div>'
 429     var $template = $(templateHTML)
 430
 431     $template.bootstrapCarousel()
 432
 433     assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
 434
 435     $template.trigger($.Event('keydown', { which: 37 }))
 436
 437     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 438   })
 439
 440   QUnit.test('should go to next item if right arrow key is pressed', function (assert) {
 441     assert.expect(2)
 442     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 443         + '<div class="carousel-inner">'
 444         + '<div id="first" class="item active">'
 445         + '<img alt="">'
 446         + '</div>'
 447         + '<div id="second" class="item">'
 448         + '<img alt="">'
 449         + '</div>'
 450         + '<div id="third" class="item">'
 451         + '<img alt="">'
 452         + '</div>'
 453         + '</div>'
 454         + '</div>'
 455     var $template = $(templateHTML)
 456
 457     $template.bootstrapCarousel()
 458
 459     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 460
 461     $template.trigger($.Event('keydown', { which: 39 }))
 462
 463     assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
 464   })
 465
 466   QUnit.test('should support disabling the keyboard navigation', function (assert) {
 467     assert.expect(3)
 468     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
 469         + '<div class="carousel-inner">'
 470         + '<div id="first" class="item active">'
 471         + '<img alt="">'
 472         + '</div>'
 473         + '<div id="second" class="item">'
 474         + '<img alt="">'
 475         + '</div>'
 476         + '<div id="third" class="item">'
 477         + '<img alt="">'
 478         + '</div>'
 479         + '</div>'
 480         + '</div>'
 481     var $template = $(templateHTML)
 482
 483     $template.bootstrapCarousel()
 484
 485     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 486
 487     $template.trigger($.Event('keydown', { which: 39 }))
 488
 489     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
 490
 491     $template.trigger($.Event('keydown', { which: 37 }))
 492
 493     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
 494   })
 495
 496   QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
 497     assert.expect(7)
 498     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
 499         + '<div class="carousel-inner">'
 500         + '<div id="first" class="item active">'
 501         + '<img alt="">'
 502         + '<input type="text" id="in-put">'
 503         + '<textarea id="text-area"></textarea>'
 504         + '</div>'
 505         + '<div id="second" class="item">'
 506         + '<img alt="">'
 507         + '</div>'
 508         + '<div id="third" class="item">'
 509         + '<img alt="">'
 510         + '</div>'
 511         + '</div>'
 512         + '</div>'
 513     var $template = $(templateHTML)
 514     var $input = $template.find('#in-put')
 515     var $textarea = $template.find('#text-area')
 516
 517     assert.strictEqual($input.length, 1, 'found <input>')
 518     assert.strictEqual($textarea.length, 1, 'found <textarea>')
 519
 520     $template.bootstrapCarousel()
 521
 522     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 523
 524
 525     $input.trigger($.Event('keydown', { which: 39 }))
 526     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
 527
 528     $input.trigger($.Event('keydown', { which: 37 }))
 529     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
 530
 531
 532     $textarea.trigger($.Event('keydown', { which: 39 }))
 533     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
 534
 535     $textarea.trigger($.Event('keydown', { which: 37 }))
 536     assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
 537   })
 538
 539   QUnit.test('should only add mouseenter and mouseleave listeners when not on mobile', function (assert) {
 540     assert.expect(2)
 541     var isMobile     = 'ontouchstart' in document.documentElement
 542     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'
 543         + '<div class="carousel-inner">'
 544         + '<div id="first" class="item active">'
 545         + '<img alt="">'
 546         + '</div>'
 547         + '<div id="second" class="item">'
 548         + '<img alt="">'
 549         + '</div>'
 550         + '<div id="third" class="item">'
 551         + '<img alt="">'
 552         + '</div>'
 553         + '</div>'
 554         + '</div>'
 555     var $template = $(templateHTML).bootstrapCarousel()
 556
 557     $.each(['mouseover', 'mouseout'], function (i, type) {
 558       assert.strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
 559     })
 560   })
 561
 562   QUnit.test('should wrap around from end to start when wrap option is true', function (assert) {
 563     assert.expect(3)
 564     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
 565         + '<ol class="carousel-indicators">'
 566         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
 567         + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
 568         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
 569         + '</ol>'
 570         + '<div class="carousel-inner">'
 571         + '<div class="item active" id="one">'
 572         + '<div class="carousel-caption"/>'
 573         + '</div>'
 574         + '<div class="item" id="two">'
 575         + '<div class="carousel-caption"/>'
 576         + '</div>'
 577         + '<div class="item" id="three">'
 578         + '<div class="carousel-caption"/>'
 579         + '</div>'
 580         + '</div>'
 581         + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
 582         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
 583         + '</div>'
 584     var $carousel = $(carouselHTML)
 585     var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
 586
 587     var done = assert.async()
 588
 589     $carousel
 590       .one('slid.bs.carousel', function () {
 591         assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
 592         $carousel
 593           .one('slid.bs.carousel', function () {
 594             assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
 595             $carousel
 596               .one('slid.bs.carousel', function () {
 597                 assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
 598                 done()
 599               })
 600               .bootstrapCarousel('next')
 601           })
 602           .bootstrapCarousel('next')
 603       })
 604       .bootstrapCarousel('next')
 605   })
 606
 607   QUnit.test('should wrap around from start to end when wrap option is true', function (assert) {
 608     assert.expect(1)
 609     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
 610         + '<ol class="carousel-indicators">'
 611         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
 612         + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
 613         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
 614         + '</ol>'
 615         + '<div class="carousel-inner">'
 616         + '<div class="item active" id="one">'
 617         + '<div class="carousel-caption"/>'
 618         + '</div>'
 619         + '<div class="item" id="two">'
 620         + '<div class="carousel-caption"/>'
 621         + '</div>'
 622         + '<div class="item" id="three">'
 623         + '<div class="carousel-caption"/>'
 624         + '</div>'
 625         + '</div>'
 626         + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
 627         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
 628         + '</div>'
 629     var $carousel = $(carouselHTML)
 630
 631     var done = assert.async()
 632
 633     $carousel
 634       .on('slid.bs.carousel', function () {
 635         assert.strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
 636         done()
 637       })
 638       .bootstrapCarousel('prev')
 639   })
 640
 641   QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) {
 642     assert.expect(3)
 643     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
 644         + '<ol class="carousel-indicators">'
 645         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
 646         + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
 647         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
 648         + '</ol>'
 649         + '<div class="carousel-inner">'
 650         + '<div class="item active" id="one">'
 651         + '<div class="carousel-caption"/>'
 652         + '</div>'
 653         + '<div class="item" id="two">'
 654         + '<div class="carousel-caption"/>'
 655         + '</div>'
 656         + '<div class="item" id="three">'
 657         + '<div class="carousel-caption"/>'
 658         + '</div>'
 659         + '</div>'
 660         + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
 661         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
 662         + '</div>'
 663     var $carousel = $(carouselHTML)
 664     var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
 665
 666     var done = assert.async()
 667
 668     $carousel
 669       .one('slid.bs.carousel', function () {
 670         assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
 671         $carousel
 672           .one('slid.bs.carousel', function () {
 673             assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
 674             $carousel
 675               .one('slid.bs.carousel', function () {
 676                 assert.ok(false, 'carousel slid when it should not have slid')
 677               })
 678               .bootstrapCarousel('next')
 679             assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
 680             done()
 681           })
 682           .bootstrapCarousel('next')
 683       })
 684       .bootstrapCarousel('next')
 685   })
 686
 687   QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) {
 688     assert.expect(1)
 689     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
 690         + '<ol class="carousel-indicators">'
 691         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
 692         + '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
 693         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
 694         + '</ol>'
 695         + '<div class="carousel-inner">'
 696         + '<div class="item active" id="one">'
 697         + '<div class="carousel-caption"/>'
 698         + '</div>'
 699         + '<div class="item" id="two">'
 700         + '<div class="carousel-caption"/>'
 701         + '</div>'
 702         + '<div class="item" id="three">'
 703         + '<div class="carousel-caption"/>'
 704         + '</div>'
 705         + '</div>'
 706         + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
 707         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
 708         + '</div>'
 709     var $carousel = $(carouselHTML)
 710
 711     $carousel
 712       .on('slid.bs.carousel', function () {
 713         assert.ok(false, 'carousel slid when it should not have slid')
 714       })
 715       .bootstrapCarousel('prev')
 716     assert.strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
 717   })
 718 })