carousel.js

             '        <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')
    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()
    })

    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">' +
        '      <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)
  })

  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()
      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()
  })
})