carousel.js 26.95 KiB
$(function () {
  'use strict';
  module('carousel plugin')
  test('should be defined on jQuery object', function () {
    ok($(document.body).carousel, 'carousel method is defined')
  })
  module('carousel', {
    setup: 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()
    teardown: function () {
      $.fn.carousel = $.fn.bootstrapCarousel
      delete $.fn.bootstrapCarousel
  test('should provide no conflict', function () {
    strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
  test('should return jquery collection containing the element', function () {
    var $el = $('<div/>')
    var $carousel = $el.bootstrapCarousel()
    ok($carousel instanceof $, 'returns jquery collection')
    strictEqual($carousel[0], $el[0], 'collection contains element')
  test('should not fire slid when slide is prevented', function () {
    stop()
    $('<div class="carousel"/>')
      .on('slide.bs.carousel', function (e) {
        e.preventDefault()
        ok(true, 'slide event fired')
        start()
      .on('slid.bs.carousel', function () {
        ok(false, 'slid event fired')
      .bootstrapCarousel('next')
  test('should reset when slide is prevented', function () {
    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="item active">'
        + '<div class="carousel-caption"/>'
        + '</div>'
        + '<div class="item">'
        + '<div class="carousel-caption"/>'
        + '</div>'
        + '<div class="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)
    stop()
    $carousel
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
.one('slide.bs.carousel', function (e) { e.preventDefault() setTimeout(function () { ok($carousel.find('.item:eq(0)').is('.active'), 'first item still active') ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') $carousel.bootstrapCarousel('next') }, 0) }) .one('slid.bs.carousel', function () { setTimeout(function () { ok(!$carousel.find('.item:eq(0)').is('.active'), 'first item still active') ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') ok($carousel.find('.item:eq(1)').is('.active'), 'second item active') ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active') start() }, 0) }) .bootstrapCarousel('next') }) test('should fire slide event with direction', function () { var carouselHTML = '<div id="myCarousel" class="carousel slide">' + '<div class="carousel-inner">' + '<div class="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="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="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) stop() $carousel .one('slide.bs.carousel', function (e) { ok(e.direction, 'direction present on next') strictEqual(e.direction, 'left', 'direction is left on next') $carousel .one('slide.bs.carousel', function (e) { ok(e.direction, 'direction present on prev') strictEqual(e.direction, 'right', 'direction is right on prev') start() }) .bootstrapCarousel('prev')