0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/js/tests/unit/carousel.js

922 lines
36 KiB
JavaScript
Raw Normal View History

$(function () {
'use strict'
2015-05-06 22:34:14 +02:00
QUnit.module('carousel plugin')
2015-05-06 22:34:14 +02:00
QUnit.test('should be defined on jQuery object', function (assert) {
assert.expect(1)
assert.ok($(document.body).carousel, 'carousel method is defined')
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
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()
},
2015-05-06 22:34:14 +02:00
afterEach: function () {
$.fn.carousel = $.fn.bootstrapCarousel
delete $.fn.bootstrapCarousel
}
})
2015-05-06 22:34:14 +02:00
QUnit.test('should provide no conflict', function (assert) {
assert.expect(1)
assert.strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
})
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"')
}
})
2015-05-06 22:34:14 +02:00
QUnit.test('should return jquery collection containing the element', function (assert) {
assert.expect(2)
2014-06-18 21:33:49 +02:00
var $el = $('<div/>')
var $carousel = $el.bootstrapCarousel()
2015-05-06 22:34:14 +02:00
assert.ok($carousel instanceof $, 'returns jquery collection')
assert.strictEqual($carousel[0], $el[0], 'collection contains element')
2014-02-13 08:55:12 +01:00
})
2015-05-13 23:46:50 +02:00
QUnit.test('should type check config options', function (assert) {
assert.expect(2)
2015-05-13 23:46:50 +02:00
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 (e) {
message = e.message
}
assert.ok(message === expectedMessage, 'correct error message')
config = {
keyboard: document.createElement('div')
2015-05-13 23:46:50 +02:00
}
expectedMessage = 'CAROUSEL: Option "keyboard" provided type "element" but expected type "boolean".'
try {
$('<div/>').bootstrapCarousel(config)
} catch (e) {
message = e.message
}
assert.ok(message === expectedMessage, 'correct error message')
})
2015-05-06 22:34:14 +02:00
QUnit.test('should not fire slid when slide is prevented', function (assert) {
assert.expect(1)
var done = assert.async()
2014-02-13 08:55:12 +01:00
$('<div class="carousel"/>')
.on('slide.bs.carousel', function (e) {
2014-02-17 20:56:46 +01:00
e.preventDefault()
2015-05-06 22:34:14 +02:00
assert.ok(true, 'slide event fired')
done()
2014-02-13 08:55:12 +01:00
})
.on('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.ok(false, 'slid event fired')
})
.bootstrapCarousel('next')
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
QUnit.test('should reset when slide is prevented', function (assert) {
assert.expect(6)
2014-07-06 11:56:12 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var $carousel = $(carouselHTML)
var done = assert.async()
2014-06-18 21:33:49 +02:00
$carousel
.one('slide.bs.carousel', function (e) {
e.preventDefault()
setTimeout(function () {
2015-05-08 07:26:40 +02:00
assert.ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
2015-05-06 22:34:14 +02:00
assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
2014-06-18 21:33:49 +02:00
$carousel.bootstrapCarousel('next')
}, 0)
})
.one('slid.bs.carousel', function () {
setTimeout(function () {
2015-05-08 07:26:40 +02:00
assert.ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
2015-05-06 22:34:14 +02:00
assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
2015-05-08 07:26:40 +02:00
assert.ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
2015-05-06 22:34:14 +02:00
assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
done()
2014-06-18 21:33:49 +02:00
}, 0)
})
.bootstrapCarousel('next')
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
QUnit.test('should fire slide event with direction', function (assert) {
assert.expect(4)
2014-07-06 11:56:12 +02:00
var carouselHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var $carousel = $(carouselHTML)
var done = assert.async()
2014-06-18 21:33:49 +02:00
$carousel
.one('slide.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.direction, 'direction present on next')
assert.strictEqual(e.direction, 'left', 'direction is left on next')
2014-06-18 21:33:49 +02:00
$carousel
.one('slide.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.direction, 'direction present on prev')
assert.strictEqual(e.direction, 'right', 'direction is right on prev')
done()
2014-06-18 21:33:49 +02:00
})
.bootstrapCarousel('prev')
})
.bootstrapCarousel('next')
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
QUnit.test('should fire slid event with direction', function (assert) {
assert.expect(4)
2014-07-06 11:56:12 +02:00
var carouselHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var $carousel = $(carouselHTML)
var done = assert.async()
2014-06-18 21:33:49 +02:00
$carousel
.one('slid.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.direction, 'direction present on next')
assert.strictEqual(e.direction, 'left', 'direction is left on next')
2014-06-18 21:33:49 +02:00
$carousel
.one('slid.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.direction, 'direction present on prev')
assert.strictEqual(e.direction, 'right', 'direction is right on prev')
done()
2014-06-18 21:33:49 +02:00
})
.bootstrapCarousel('prev')
})
.bootstrapCarousel('next')
})
2015-05-06 22:34:14 +02:00
QUnit.test('should fire slide event with relatedTarget', function (assert) {
assert.expect(2)
2014-07-06 11:56:12 +02:00
var template = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var done = assert.async()
2014-06-18 21:33:49 +02:00
2014-02-13 08:55:12 +01:00
$(template)
.on('slide.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.relatedTarget, 'relatedTarget present')
2015-05-08 07:26:40 +02:00
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
done()
2012-10-16 08:49:01 +02:00
})
.bootstrapCarousel('next')
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
QUnit.test('should fire slid event with relatedTarget', function (assert) {
assert.expect(2)
2014-07-06 11:56:12 +02:00
var template = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var done = assert.async()
2014-06-18 21:33:49 +02:00
$(template)
.on('slid.bs.carousel', function (e) {
2015-05-06 22:34:14 +02:00
assert.ok(e.relatedTarget, 'relatedTarget present')
2015-05-08 07:26:40 +02:00
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
done()
})
.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()
$(template)
.on('slid.bs.carousel', function (e) {
assert.ok(e.from !== undefined, 'from present')
assert.ok(e.to !== undefined, 'to present')
$(this).off()
done()
})
.on('slide.bs.carousel', function (e) {
assert.ok(e.from !== undefined, 'from present')
assert.ok(e.to !== undefined, 'to present')
$(this).off('slide.bs.carousel')
})
.bootstrapCarousel('next')
})
2015-05-06 22:34:14 +02:00
QUnit.test('should set interval from data attribute', function (assert) {
assert.expect(4)
2014-07-06 11:56:12 +02:00
var templateHTML = '<div id="myCarousel" class="carousel slide">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<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>'
2014-06-18 21:33:49 +02:00
var $carousel = $(templateHTML)
$carousel.attr('data-interval', 1814)
2012-10-16 08:49:01 +02:00
2014-06-18 21:33:49 +02:00
$carousel.appendTo('body')
2015-05-06 22:34:14 +02:00
$('[data-slide]').first().trigger('click')
2015-05-08 07:26:40 +02:00
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814)
2014-06-18 21:33:49 +02:00
$carousel.remove()
2012-10-15 20:55:32 +02:00
2014-06-18 21:33:49 +02:00
$carousel.appendTo('body').attr('data-modal', 'foobar')
2015-05-06 22:34:14 +02:00
$('[data-slide]').first().trigger('click')
2015-05-08 07:26:40 +02:00
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'even if there is an data-modal attribute set')
2014-06-18 21:33:49 +02:00
$carousel.remove()
2012-10-16 08:49:01 +02:00
2014-06-18 21:33:49 +02:00
$carousel.appendTo('body')
2015-05-06 22:34:14 +02:00
$('[data-slide]').first().trigger('click')
2014-06-18 21:33:49 +02:00
$carousel.attr('data-interval', 1860)
2015-05-06 22:34:14 +02:00
$('[data-slide]').first().trigger('click')
2015-05-08 07:26:40 +02:00
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'attributes should be read only on initialization')
2014-06-18 21:33:49 +02:00
$carousel.remove()
$carousel.attr('data-interval', false)
$carousel.appendTo('body')
$carousel.bootstrapCarousel(1)
2015-05-08 07:26:40 +02:00
assert.strictEqual($carousel.data('bs.carousel')._config.interval, false, 'data attribute has higher priority than default options')
2014-06-18 21:33:49 +02:00
$carousel.remove()
2014-02-13 08:55:12 +01:00
})
2015-05-06 22:34:14 +02:00
QUnit.test('should skip over non-items when using item indices', function (assert) {
assert.expect(2)
2014-07-06 11:56:12 +02:00
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
2014-07-06 11:56:12 +02:00
+ '<img alt="">'
+ '</div>'
+ '<script type="text/x-metamorph" id="thingy"/>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
2014-07-06 11:56:12 +02:00
+ '</div>'
+ '</div>'
+ '</div>'
2014-06-18 21:33:49 +02:00
var $template = $(templateHTML)
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel(1)
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active">'
+ '<img alt="">'
+ '</div>'
+ '<script type="text/x-metamorph" id="thingy"/>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel('next')
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div id="first" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="second" class="carousel-item active">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="third" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
$template.trigger($.Event('keydown', { which: 37 }))
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
})
2015-05-06 22:34:14 +02:00
QUnit.test('should go to next item if right arrow key is pressed', function (assert) {
assert.expect(2)
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
2015-05-08 07:26:40 +02:00
+ '<div id="first" class="carousel-item active">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="second" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="third" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 }))
2015-05-08 07:26:40 +02:00
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()
var eventArrowDown = $.Event('keydown', { which: 40 })
var eventArrowUp = $.Event('keydown', { which: 38 })
$template.one('keydown', function (event) {
assert.strictEqual(event.isDefaultPrevented(), false)
})
$template.trigger(eventArrowDown)
$template.one('keydown', function (event) {
assert.strictEqual(event.isDefaultPrevented(), false)
done()
})
$template.trigger(eventArrowUp)
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div id="first" class="carousel-item active">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="second" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="third" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 }))
2015-05-08 07:26:40 +02:00
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 }))
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div id="first" class="carousel-item active">'
+ '<img alt="">'
+ '<input type="text" id="in-put">'
+ '<textarea id="text-area"></textarea>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div id="second" class="carousel-item">'
+ '<img alt="">'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<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')
2015-05-06 22:34:14 +02:00
assert.strictEqual($input.length, 1, 'found <input>')
assert.strictEqual($textarea.length, 1, 'found <textarea>')
$template.bootstrapCarousel()
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
$input.trigger($.Event('keydown', { which: 39 }))
2015-05-08 07:26:40 +02:00
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 }))
2015-05-08 07:26:40 +02:00
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 }))
2015-05-08 07:26:40 +02:00
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 }))
2015-05-08 07:26:40 +02:00
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<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)
2015-05-08 07:26:40 +02:00
var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
var done = assert.async()
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
done()
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<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 done = assert.async()
$carousel
.on('slid.bs.carousel', function () {
2015-05-08 07:26:40 +02:00
assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
done()
})
.bootstrapCarousel('prev')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<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)
2015-05-08 07:26:40 +02:00
var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
var done = assert.async()
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
$carousel
.one('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.ok(false, 'carousel slid when it should not have slid')
})
.bootstrapCarousel('next')
2015-05-06 22:34:14 +02:00
assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
done()
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
2015-05-06 22:34:14 +02:00
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">'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<div class="carousel-item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
2015-05-08 07:26:40 +02:00
+ '<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)
$carousel
.on('slid.bs.carousel', function () {
2015-05-06 22:34:14 +02:00
assert.ok(false, 'carousel slid when it should not have slid')
})
.bootstrapCarousel('prev')
2015-05-08 07:26:40 +02:00
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>'
+ '</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)
})
})