carousel.js 48.03 KiB
$(function () {
  'use strict'
  window.Carousel = typeof bootstrap !== 'undefined' ? bootstrap.Carousel : Carousel
  var originWinPointerEvent = window.PointerEvent
  window.MSPointerEvent = null
  var supportPointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent)
  function clearPointerEvents() {
    window.PointerEvent = null
  function restorePointerEvents() {
    window.PointerEvent = originWinPointerEvent
  var stylesCarousel = [
    '<style>',
    '  .carousel.pointer-event { -ms-touch-action: none; touch-action: none; }',
    '</style>'
  ].join('')
  QUnit.module('carousel plugin')
  QUnit.test('should be defined on jQuery object', function (assert) {
    assert.expect(1)
    assert.ok($(document.body).carousel, 'carousel method is defined')
  QUnit.module('carousel', {
    beforeEach: function () {
      // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
      $.fn.bootstrapCarousel = $.fn.carousel.noConflict()
    afterEach: function () {
      $('.carousel').bootstrapCarousel('dispose')
      $.fn.carousel = $.fn.bootstrapCarousel
      delete $.fn.bootstrapCarousel
      $('#qunit-fixture').html('')
  QUnit.test('should provide no conflict', function (assert) {
    assert.expect(1)
    assert.strictEqual(typeof $.fn.carousel, 'undefined', 'carousel was set back to undefined (orig value)')
  QUnit.test('should return version', function (assert) {
    assert.expect(1)
    assert.strictEqual(typeof Carousel.VERSION, 'string')
  QUnit.test('should return default parameters', function (assert) {
    assert.expect(1)
    var defaultConfig = Carousel.Default
    assert.strictEqual(defaultConfig.touch, true)
  QUnit.test('should throw explicit error on undefined method', function (assert) {
    assert.expect(1)
    var $el = $('<div/>')
    $el.bootstrapCarousel()
    try {
      $el.bootstrapCarousel('noMethod')
    } catch (err) {
      assert.strictEqual(err.message, 'No method named "noMethod"')
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} }) QUnit.test('should return jquery collection containing the element', function (assert) { assert.expect(2) var $el = $('<div/>') var $carousel = $el.bootstrapCarousel() assert.ok($carousel instanceof $, 'returns jquery collection') assert.strictEqual($carousel[0], $el[0], 'collection contains element') }) QUnit.test('should type check config options', function (assert) { assert.expect(2) var message var expectedMessage = 'CAROUSEL: Option "interval" provided type "string" but expected type "(number|boolean)".' var config = { interval: 'fat sux' } try { $('<div/>').bootstrapCarousel(config) } catch (err) { message = err.message } assert.ok(message === expectedMessage, 'correct error message') config = { keyboard: document.createElement('div') } expectedMessage = 'CAROUSEL: Option "keyboard" provided type "element" but expected type "boolean".' try { $('<div/>').bootstrapCarousel(config) } catch (err) { message = err.message } assert.ok(message === expectedMessage, 'correct error message') }) QUnit.test('should not fire slid when slide is prevented', function (assert) { assert.expect(1) var done = assert.async() var $carousel = $('<div class="carousel"/>') $carousel.appendTo('#qunit-fixture') EventHandler.on($carousel[0], 'slide.bs.carousel', function (e) { e.preventDefault() assert.ok(true, 'slide event fired') done() }) EventHandler.on($carousel[0], 'slid.bs.carousel', function () { assert.ok(false, 'slid event fired') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should reset when slide is prevented', function (assert) { assert.expect(6) var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">' + '<ol class="carousel-indicators">' + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '</ol>' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<div class="carousel-caption"/>' +
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
'</div>' + '<div class="carousel-item">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item">' + '<div class="carousel-caption"/>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var done = assert.async() EventHandler .one($carousel[0], 'slide.bs.carousel', function (e) { e.preventDefault() setTimeout(function () { assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active') assert.ok($carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active') $carousel.bootstrapCarousel('next') }, 0) }) EventHandler .one($carousel[0], 'slid.bs.carousel', function () { setTimeout(function () { assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active') assert.ok(!$carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active') assert.ok($carousel.find('.carousel-item:nth-child(2)').is('.active'), 'second item active') assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active') done() }, 0) }) $carousel.bootstrapCarousel('next') }) QUnit.test('should fire slide event with direction', function (assert) { assert.expect(4) var carouselHTML = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' +
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
'</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var done = assert.async() EventHandler .one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on next') assert.strictEqual(e.direction, 'left', 'direction is left on next') EventHandler .one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on prev') assert.strictEqual(e.direction, 'right', 'direction is right on prev') done() }) $carousel.bootstrapCarousel('prev') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should fire slid event with direction', function (assert) { assert.expect(4) var carouselHTML = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var done = assert.async() EventHandler .one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on next') assert.strictEqual(e.direction, 'left', 'direction is left on next')
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
EventHandler .one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(e.direction, 'direction present on prev') assert.strictEqual(e.direction, 'right', 'direction is right on prev') done() }) $carousel.bootstrapCarousel('prev') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should fire slide event with relatedTarget', function (assert) { assert.expect(2) var template = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var done = assert.async() var $carousel = $(template) $carousel.appendTo('#qunit-fixture') EventHandler .one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(e.relatedTarget, 'relatedTarget present') assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"') done() }) $carousel.bootstrapCarousel('next') }) QUnit.test('should fire slid event with relatedTarget', function (assert) { assert.expect(2) var template = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' +
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var done = assert.async() var $carousel = $(template) $carousel.appendTo('#qunit-fixture') EventHandler .one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(e.relatedTarget, 'relatedTarget present') assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"') done() }) $carousel.bootstrapCarousel('next') }) QUnit.test('should fire slid and slide events with from and to', function (assert) { assert.expect(4) var template = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var done = assert.async() var $carousel = $(template)
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
EventHandler .one($carousel[0], 'slid.bs.carousel', function (e) { assert.ok(typeof e.from !== 'undefined', 'from present') assert.ok(typeof e.to !== 'undefined', 'to present') done() }) EventHandler .one($carousel[0], 'slide.bs.carousel', function (e) { assert.ok(typeof e.from !== 'undefined', 'from present') assert.ok(typeof e.to !== 'undefined', 'to present') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should set interval from data attribute', function (assert) { assert.expect(4) var templateHTML = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var $carousel = $(templateHTML) $carousel.attr('data-interval', 1814) $carousel.appendTo('body') EventHandler.trigger($('[data-slide]').first()[0], 'click') assert.strictEqual(Data.getData($carousel[0], 'bs.carousel')._config.interval, 1814) $carousel.remove() $carousel.appendTo('body').attr('data-modal', 'foobar') EventHandler.trigger($('[data-slide]').first()[0], 'click') assert.strictEqual(Data.getData($carousel[0], 'bs.carousel')._config.interval, 1814, 'even if there is an data-modal attribute set') $carousel.remove() $carousel.appendTo('body') EventHandler.trigger($('[data-slide]').first()[0], 'click') $carousel.attr('data-interval', 1860) EventHandler.trigger($('[data-slide]').first()[0], 'click') assert.strictEqual(Data.getData($carousel[0], 'bs.carousel')._config.interval, 1814, 'attributes should be read only on initialization')
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
$carousel.bootstrapCarousel('dispose') $carousel.remove() $carousel.attr('data-interval', false) $carousel.appendTo('body') $carousel.bootstrapCarousel(1) assert.strictEqual(Data.getData($carousel[0], 'bs.carousel')._config.interval, false, 'data attribute has higher priority than default options') $carousel.remove() }) QUnit.test('should set interval from data attribute on individual carousel-item', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel slide" data-interval="1814">' + '<div class="carousel-inner">' + '<div class="carousel-item active" data-interval="2814">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>First Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item" data-interval="3814">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Second Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '<div class="carousel-item">' + '<img alt="">' + '<div class="carousel-caption">' + '<h4>Third Thumbnail label</h4>' + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + 'ultricies vehicula ut id elit.</p>' + '</div>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + '</div>' var $carousel = $(templateHTML) $carousel.appendTo('body') $carousel.bootstrapCarousel(1) assert.strictEqual($carousel.data('bs.carousel')._config.interval, 3814) $carousel.remove() $carousel.appendTo('body') $carousel.bootstrapCarousel(2) assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'reverts to default interval if no data-interval is set') $carousel.remove() }) QUnit.test('should skip over non-items when using item indices', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '</div>' + '<script type="text/x-metamorph" id="thingy"/>' + '<div class="carousel-item">' + '<img alt="">' + '</div>' + '<div class="carousel-item">' +
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
'</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') $template.bootstrapCarousel(1) assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') }) QUnit.test('should skip over non-items when using next/prev methods', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' + '<div class="carousel-inner">' + '<div class="carousel-item active">' + '<img alt="">' + '</div>' + '<script type="text/x-metamorph" id="thingy"/>' + '<div class="carousel-item">' + '<img alt="">' + '</div>' + '<div class="carousel-item">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') $template.bootstrapCarousel('next') assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') }) QUnit.test('should go to previous item if left arrow key is pressed', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item">' + '<img alt="">' + '</div>' + '<div id="second" class="carousel-item active">' + '<img alt="">' + '</div>' + '<div id="third" class="carousel-item">' + '<img alt="">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') EventHandler.trigger($template[0], 'keydown', { which: 37 }) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') }) QUnit.test('should go to next item if right arrow key is pressed', function (assert) { assert.expect(2)
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item active">' + '<img alt="">' + '</div>' + '<div id="second" class="carousel-item">' + '<img alt="">' + '</div>' + '<div id="third" class="carousel-item">' + '<img alt="">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') EventHandler.trigger($template[0], 'keydown', { which: 39 }) assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') }) QUnit.test('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item active">' + '<img alt="">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() var done = assert.async() EventHandler.one($template[0], 'keydown', function (event) { assert.strictEqual(event.defaultPrevented, false) }) // arrow down EventHandler.trigger($template[0], 'keydown', { which: 40 }) EventHandler.one($template[0], 'keydown', function (event) { assert.strictEqual(event.defaultPrevented, false) done() }) // arrow up EventHandler.trigger($template[0], 'keydown', { which: 38 }) }) QUnit.test('should support disabling the keyboard navigation', function (assert) { assert.expect(3) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item active">' + '<img alt="">' + '</div>' + '<div id="second" class="carousel-item">' + '<img alt="">' + '</div>' +
701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770
'<div id="third" class="carousel-item">' + '<img alt="">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') $template.trigger($.Event('keydown', { which: 39 })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press') $template.trigger($.Event('keydown', { which: 37 })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press') }) QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) { assert.expect(7) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item active">' + '<img alt="">' + '<input type="text" id="in-put">' + '<textarea id="text-area"></textarea>' + '</div>' + '<div id="second" class="carousel-item">' + '<img alt="">' + '</div>' + '<div id="third" class="carousel-item">' + '<img alt="">' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) var $input = $template.find('#in-put') var $textarea = $template.find('#text-area') assert.strictEqual($input.length, 1, 'found <input>') assert.strictEqual($textarea.length, 1, 'found <textarea>') $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') $input.trigger($.Event('keydown', { which: 39 })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>') $input.trigger($.Event('keydown', { which: 37 })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>') $textarea.trigger($.Event('keydown', { which: 39 })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>') $textarea.trigger($.Event('keydown', { which: 37 }))
771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>') }) QUnit.test('should wrap around from end to start when wrap option is true', function (assert) { assert.expect(3) var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' + '<ol class="carousel-indicators">' + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '</ol>' + '<div class="carousel-inner">' + '<div class="carousel-item active" id="one">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="two">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="three">' + '<div class="carousel-caption"/>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '</div>' var $carousel = $(carouselHTML) var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') } var done = assert.async() EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide') EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide') EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide') done() }) $carousel.bootstrapCarousel('next') }) $carousel.bootstrapCarousel('next') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should wrap around from start to end when wrap option is true', function (assert) { assert.expect(1) var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' + '<ol class="carousel-indicators">' + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '</ol>' + '<div class="carousel-inner">' + '<div class="carousel-item active" id="one">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="two">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="three">' + '<div class="carousel-caption"/>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' +
841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910
'</div>' var $carousel = $(carouselHTML) var done = assert.async() EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide') done() }) $carousel.bootstrapCarousel('prev') }) QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) { assert.expect(3) var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' + '<ol class="carousel-indicators">' + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '</ol>' + '<div class="carousel-inner">' + '<div class="carousel-item active" id="one">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="two">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="three">' + '<div class="carousel-caption"/>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '</div>' var $carousel = $(carouselHTML) var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') } var done = assert.async() EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide') EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide') EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.ok(false, 'carousel slid when it should not have slid') }) $carousel.bootstrapCarousel('next') assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide') done() }) $carousel.bootstrapCarousel('next') }) $carousel.bootstrapCarousel('next') }) QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) { assert.expect(1) var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' + '<ol class="carousel-indicators">' + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + '</ol>' + '<div class="carousel-inner">' + '<div class="carousel-item active" id="one">' + '<div class="carousel-caption"/>' +
911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980
'</div>' + '<div class="carousel-item" id="two">' + '<div class="carousel-caption"/>' + '</div>' + '<div class="carousel-item" id="three">' + '<div class="carousel-caption"/>' + '</div>' + '</div>' + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + '</div>' var $carousel = $(carouselHTML) EventHandler.one($carousel[0], 'slid.bs.carousel', function () { assert.ok(false, 'carousel slid when it should not have slid') }) $carousel.bootstrapCarousel('prev') assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide') }) QUnit.test('should not prevent keydown for inputs and textareas', function (assert) { assert.expect(2) var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + '<div class="carousel-inner">' + '<div id="first" class="carousel-item">' + '<input type="text" id="inputText" />' + '</div>' + '<div id="second" class="carousel-item active">' + '<textarea id="txtArea"></textarea>' + '</div>' + '</div>' + '</div>' var $template = $(templateHTML) var done = assert.async() $template.appendTo('#qunit-fixture') var $inputText = $template.find('#inputText') var $textArea = $template.find('#txtArea') $template.bootstrapCarousel() var eventKeyDown = $.Event('keydown', { which: 65 }) // 65 for "a" $inputText.on('keydown', function (event) { assert.strictEqual(event.isDefaultPrevented(), false) }) $inputText.trigger(eventKeyDown) $textArea.on('keydown', function (event) { assert.strictEqual(event.isDefaultPrevented(), false) done() }) $textArea.trigger(eventKeyDown) }) QUnit.test('should not go to the next item when the carousel is not visible', function (assert) { assert.expect(2) var done = assert.async() var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' + ' <div class="carousel-inner">' + ' <div id="firstItem" class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' +
981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050
'</div>' var $html = $(html) $html .appendTo('#qunit-fixture') .bootstrapCarousel() var $firstItem = $('#firstItem') setTimeout(function () { assert.ok($firstItem.hasClass('active')) $html .bootstrapCarousel('dispose') .attr('style', 'visibility: hidden;') .bootstrapCarousel() setTimeout(function () { assert.ok($firstItem.hasClass('active')) done() }, 80) }, 80) }) QUnit.test('should not go to the next item when the parent of the carousel is not visible', function (assert) { assert.expect(2) var done = assert.async() var html = '<div id="parent" style="display: none;">' + ' <div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' + ' <div class="carousel-inner">' + ' <div id="firstItem" class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>' + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>' + ' </div>' + '</div>' var $html = $(html) $html.appendTo('#qunit-fixture') var $parent = $html.find('#parent') var $carousel = $html.find('#myCarousel') $carousel.bootstrapCarousel() var $firstItem = $('#firstItem') setTimeout(function () { assert.ok($firstItem.hasClass('active')) $carousel.bootstrapCarousel('dispose') $parent.attr('style', 'visibility: hidden;') $carousel.bootstrapCarousel() setTimeout(function () { assert.ok($firstItem.hasClass('active')) done() }, 80) }, 80) }) QUnit.test('should allow swiperight and call prev with pointer events', function (assert) { if (!supportPointerEvent) { assert.expect(0) return } document.documentElement.ontouchstart = $.noop Simulator.setType('pointer') assert.expect(3) var $styles = $(stylesCarousel).appendTo('head')
1051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120
var done = assert.async() var carouselHTML = '<div class="carousel" data-interval="false">' + ' <div class="carousel-inner">' + ' <div id="item" class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' </div>' + '</div>' var $carousel = $(carouselHTML).appendTo('#qunit-fixture') var $item = $('#item') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, 'prev') $carousel.one('slid.bs.carousel', function () { assert.ok(true, 'slid event fired') assert.ok($item.hasClass('active')) assert.ok(spy.called) $styles.remove() delete document.documentElement.ontouchstart done() }) Simulator.gestures.swipe($carousel[0], { deltaX: 300, deltaY: 0 }) }) QUnit.test('should allow swiperight and call prev with touch events', function (assert) { Simulator.setType('touch') clearPointerEvents() assert.expect(3) var done = assert.async() document.documentElement.ontouchstart = $.noop var carouselHTML = '<div class="carousel" data-interval="false">' + ' <div class="carousel-inner">' + ' <div id="item" class="carousel-item">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' </div>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var $item = $('#item') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, 'prev') $carousel.one('slid.bs.carousel', function () { assert.ok(true, 'slid event fired') assert.ok($item.hasClass('active')) assert.ok(spy.called) delete document.documentElement.ontouchstart restorePointerEvents() done() })
1121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190
Simulator.gestures.swipe($carousel[0], { deltaX: 300, deltaY: 0 }) }) QUnit.test('should allow swipeleft and call next with pointer events', function (assert) { if (!supportPointerEvent) { assert.expect(0) return } document.documentElement.ontouchstart = $.noop assert.expect(3) Simulator.setType('pointer') var $styles = $(stylesCarousel).appendTo('head') var done = assert.async() var carouselHTML = '<div class="carousel" data-interval="false">' + ' <div class="carousel-inner">' + ' <div id="item" class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' + ' <img alt="">' + ' </div>' + ' </div>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var $item = $('#item') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, 'next') $carousel.one('slid.bs.carousel', function () { assert.ok(true, 'slid event fired') assert.ok(!$item.hasClass('active')) assert.ok(spy.called) $styles.remove() delete document.documentElement.ontouchstart done() }) Simulator.gestures.swipe($carousel[0], { pos: [300, 10], deltaX: -300, deltaY: 0 }) }) QUnit.test('should allow swipeleft and call next with touch events', function (assert) { assert.expect(3) clearPointerEvents() Simulator.setType('touch') document.documentElement.ontouchstart = $.noop var done = assert.async() var carouselHTML = '<div class="carousel" data-interval="false">' + ' <div class="carousel-inner">' + ' <div id="item" class="carousel-item active">' + ' <img alt="">' + ' </div>' + ' <div class="carousel-item">' +
1191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260
' <img alt="">' + ' </div>' + ' </div>' + '</div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') var $item = $('#item') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, 'next') $carousel.one('slid.bs.carousel', function () { assert.ok(true, 'slid event fired') assert.ok(!$item.hasClass('active')) assert.ok(spy.called) restorePointerEvents() delete document.documentElement.ontouchstart done() }) Simulator.gestures.swipe($carousel[0], { pos: [300, 10], deltaX: -300, deltaY: 0 }) }) QUnit.test('should not allow pinch with touch events', function (assert) { assert.expect(0) clearPointerEvents() Simulator.setType('touch') var done = assert.async() document.documentElement.ontouchstart = $.noop var carouselHTML = '<div class="carousel" data-interval="false"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() Simulator.gestures.swipe($carousel[0], { pos: [300, 10], deltaX: -300, deltaY: 0, touches: 2 }, function () { restorePointerEvents() delete document.documentElement.ontouchstart done() }) }) QUnit.test('should not call _slide if the carousel is sliding', function (assert) { assert.expect(1) var carouselHTML = '<div class="carousel" data-interval="false"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, '_slide') carousel._isSliding = true carousel.next() assert.strictEqual(spy.called, false)
1261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330
}) QUnit.test('should call next when the page is visible', function (assert) { assert.expect(1) var carouselHTML = '<div class="carousel" data-interval="false"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() var carousel = $carousel.data('bs.carousel') var spy = sinon.spy(carousel, 'next') var sandbox = sinon.createSandbox() sandbox.replaceGetter(document, 'hidden', function () { return false }) sandbox.stub($carousel, 'is').returns(true) sandbox.stub($carousel, 'css').returns('block') carousel.nextWhenVisible() assert.strictEqual(spy.called, true) sandbox.restore() }) QUnit.test('should not cycle when there is no attribute data-ride', function (assert) { assert.expect(1) var spy = sinon.spy(Carousel.prototype, 'cycle') var carouselHTML = '<div class="carousel"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() assert.strictEqual(spy.called, false) spy.restore() }) QUnit.test('should cycle when there is data-ride attribute', function (assert) { assert.expect(1) var spy = sinon.spy(Carousel.prototype, 'cycle') var carouselHTML = '<div class="carousel" data-ride="carousel"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() assert.strictEqual(spy.called, true) spy.restore() }) QUnit.test('should init carousels with data-ride on load event', function (assert) { assert.expect(1) var done = assert.async() var spy = sinon.spy(Carousel, '_jQueryInterface') var carouselHTML = '<div class="carousel" data-ride="carousel"></div>' var $carousel = $(carouselHTML) $carousel.appendTo('#qunit-fixture') $(window).trigger($.Event('load')) setTimeout(function () { assert.strictEqual(spy.called, true) spy.restore()
133113321333133413351336133713381339134013411342134313441345134613471348
done() }, 5) }) QUnit.test('should not add touch event listeners when touch option set to false', function (assert) { assert.expect(1) var spy = sinon.spy(Carousel.prototype, '_addTouchEventListeners') var $carousel = $('<div class="carousel" data-ride="carousel" data-touch="false"></div>') $carousel.appendTo('#qunit-fixture') $carousel.bootstrapCarousel() assert.strictEqual(spy.called, false) spy.restore() }) })