Merge pull request #13853 from hnrch02/unit-tests-cleanup

Major unit tests cleanup
This commit is contained in:
Jacob 2014-07-06 21:43:48 -07:00
commit b5d86ad0bd
13 changed files with 1384 additions and 1035 deletions

View File

@ -13,23 +13,22 @@
<script>
// See https://github.com/axemclion/grunt-saucelabs#test-result-details-with-qunit
var log = []
QUnit.done = function (test_results) {
var tests = log.map(function (details) {
return {
QUnit.done(function (testResults) {
var tests = []
for (var i = 0, len = log.length; i < len; i++) {
var details = log[i]
tests.push({
name: details.name,
result: details.result,
expected: details.expected,
actual: details.actual,
source: details.source
}
})
test_results.tests = tests
// Delaying results a bit because in real-world scenario you won't get them immediately
setTimeout(function () {
window.global_test_results = test_results
}, 2000)
}
testResults.tests = tests
window.global_test_results = testResults
})
QUnit.testStart(function (testDetails) {
QUnit.log = function (details) {
@ -39,6 +38,12 @@
}
}
})
// Cleanup
QUnit.testDone(function () {
$('#qunit-fixture').empty()
$('#modal-test, .modal-backdrop').remove()
})
</script>
<!-- Plugin sources -->
@ -70,7 +75,7 @@
</head>
<body>
<div>
<div id="qunit-container">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>

View File

@ -19,15 +19,18 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
strictEqual($.fn.affix, undefined, 'affix was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapAffix()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $affix = $el.bootstrapAffix()
ok($affix instanceof $, 'returns jquery collection')
strictEqual($affix[0], $el[0], 'collection contains element')
})
test('should exit early if element is not visible', function () {
var $affix = $('<div style="display: none"></div>').bootstrapAffix()
var $affix = $('<div style="display: none"/>').bootstrapAffix()
$affix.data('bs.affix').checkPosition()
ok(!$affix.hasClass('affix'), 'affix class was not added')
})
@ -35,8 +38,14 @@ $(function () {
test('should trigger affixed event after affix', function () {
stop()
var template = $('<div id="affixTarget"><ul><li>Please affix</li><li>And unaffix</li></ul></div><div id="affixAfter" style="height: 20000px; display:block;"></div>')
template.appendTo('body')
var templateHTML = '<div id="affixTarget">'
+ '<ul>'
+ '<li>Please affix</li>'
+ '<li>And unaffix</li>'
+ '</ul>'
+ '</div>'
+ '<div id="affixAfter" style="height: 20000px; display: block;"/>'
$(templateHTML).appendTo(document.body)
$('#affixTarget').bootstrapAffix({
offset: $('#affixTarget ul').position()
@ -44,19 +53,19 @@ $(function () {
$('#affixTarget')
.on('affix.bs.affix', function () {
ok(true, 'affix event triggered')
ok(true, 'affix event fired')
}).on('affixed.bs.affix', function () {
ok(true, 'affixed event triggered')
$('#affixTarget').remove()
$('#affixAfter').remove()
ok(true, 'affixed event fired')
$('#affixTarget, #affixAfter').remove()
start()
})
setTimeout(function () {
window.scrollTo(0, document.body.scrollHeight)
setTimeout(function () {
window.scroll(0, 0)
}, 0)
}, 16) // for testing in a browser
}, 0)
})
})

View File

@ -19,52 +19,52 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
strictEqual($.fn.alert, undefined, 'alert was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapAlert()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $alert = $el.bootstrapAlert()
ok($alert instanceof $, 'returns jquery collection')
strictEqual($alert[0], $el[0], 'collection contains element')
})
test('should fade element out on clicking .close', function () {
var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>'
var alert = $(alertHTML).bootstrapAlert()
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
var $alert = $(alertHTML).bootstrapAlert()
alert.find('.close').click()
$alert.find('.close').click()
ok(!alert.hasClass('in'), 'remove .in class on .close click')
equal($alert.hasClass('in'), false, 'remove .in class on .close click')
})
test('should remove element when clicking .close', function () {
$.support.transition = false
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>'
var alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
notEqual($('#qunit-fixture').find('.alert-message').length, 0, 'element added to dom')
ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom')
$alert.find('.close').click()
alert.find('.close').click()
ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
equal($('#qunit-fixture').find('.alert-message').length, 0, 'element removed from dom')
})
test('should not fire closed when close is prevented', function () {
$.support.transition = false
stop()
$('<div class="alert"/>')
.on('close.bs.alert', function (e) {
e.preventDefault()
ok(true)
ok(true, 'close event fired')
start()
})
.on('closed.bs.alert', function () {
ok(false)
ok(false, 'closed event fired')
})
.bootstrapAlert('close')
})

View File

@ -19,133 +19,133 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.button, 'button was set back to undefined (org value)')
strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapButton()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $button = $el.bootstrapButton()
ok($button instanceof $, 'returns jquery collection')
strictEqual($button[0], $el[0], 'collection contains element')
})
test('should return set state to loading', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
}, 0)
})
test('should return reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
btn.bootstrapButton('reset')
equal(btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('reset')
equal($btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()
}, 0)
}, 0)
})
test('should work with an empty string as reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat"></button>')
equal(btn.html(), '', 'btn text equals ""')
btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat')
var $btn = $('<button class="btn" data-loading-text="fat"/>')
equal($btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
btn.bootstrapButton('reset')
equal(btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('reset')
equal($btn.html(), '', 'btn text equals ""')
setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()
}, 0)
}, 0)
})
test('should toggle active', function () {
var btn = $('<button class="btn">mdo</button>')
ok(!btn.hasClass('active'), 'btn does not have active class')
btn.bootstrapButton('toggle')
ok(btn.hasClass('active'), 'btn has class active')
var $btn = $('<button class="btn">mdo</button>')
ok(!$btn.hasClass('active'), 'btn does not have active class')
$btn.bootstrapButton('toggle')
ok($btn.hasClass('active'), 'btn has class active')
})
test('should toggle active when btn children are clicked', function () {
var btn = $('<button class="btn" data-toggle="button">mdo</button>')
var inner = $('<i></i>')
btn
.append(inner)
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
var $inner = $('<i/>')
$btn
.append($inner)
.appendTo('#qunit-fixture')
ok(!$btn.hasClass('active'), 'btn does not have active class')
$inner.click()
ok($btn.hasClass('active'), 'btn has class active')
})
test('should toggle active when btn children are clicked within btn-group', function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
var btn = $('<button class="btn">fat</button>')
var inner = $('<i></i>')
btngroup
.append(btn.append(inner))
.appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click()
ok(btn.hasClass('active'), 'btn has class active')
var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
var $btn = $('<button class="btn">fat</button>')
var $inner = $('<i/>')
$btngroup
.append($btn.append($inner))
.appendTo('#qunit-fixture')
ok(!$btn.hasClass('active'), 'btn does not have active class')
$inner.click()
ok($btn.hasClass('active'), 'btn has class active')
})
test('should check for closest matching toggle', function () {
var group = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' +
'<input type="radio" name="options" id="option1" checked="true"> Option 1' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option2"> Option 2' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option3"> Option 3' +
'</label>' +
'</div>'
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+ '<label class="btn btn-primary active">'
+ '<input type="radio" name="options" id="option1" checked="true"> Option 1'
+ '</label>'
+ '<label class="btn btn-primary">'
+ '<input type="radio" name="options" id="option2"> Option 2'
+ '</label>'
+ '<label class="btn btn-primary">'
+ '<input type="radio" name="options" id="option3"> Option 3'
+ '</label>'
+ '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
group = $(group)
var $btn1 = $group.children().eq(0)
var $btn2 = $group.children().eq(1)
var btn1 = $(group.children()[0])
var btn2 = $(group.children()[1])
ok($btn1.hasClass('active'), 'btn1 has active class')
ok($btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
$btn2.find('input').click()
ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
ok($btn2.hasClass('active'), 'btn2 has active class')
ok($btn2.find('input').prop('checked'), 'btn2 is checked')
group.appendTo($('#qunit-fixture'))
ok(btn1.hasClass('active'), 'btn1 has active class')
ok(btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!btn2.hasClass('active'), 'btn2 does not have active class')
ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
btn2.find('input').click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
btn2.find('input').click() /* clicking an already checked radio should not un-check it */
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
$btn2.find('input').click() // clicking an already checked radio should not un-check it
ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
ok($btn2.hasClass('active'), 'btn2 has active class')
ok($btn2.find('input').prop('checked'), 'btn2 is checked')
})
})

View File

@ -19,141 +19,343 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.carousel, 'carousel was set back to undefined (orig value)')
strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
})
test('should return element', function () {
ok($(document.body).bootstrapCarousel()[0] == document.body, 'document.body returned')
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 slide when slide is prevented', function () {
$.support.transition = false
test('should not fire slid when slide is prevented', function () {
stop()
$('<div class="carousel"/>')
.on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(true)
ok(true, 'slide event fired')
start()
})
.on('slid.bs.carousel', function () {
ok(false)
ok(false, 'slid event fired')
})
.bootstrapCarousel('next')
})
test('should reset when slide is prevented', function () {
var template = '<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><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>'
var $carousel = $(template)
$.support.transition = false
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.one('slide.bs.carousel', function (e) {
$carousel
.one('slide.bs.carousel', function (e) {
e.preventDefault()
setTimeout(function () {
ok($carousel.find('.item:eq(0)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'))
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')
}, 1)
}, 0)
})
$carousel.one('slid.bs.carousel', function () {
.one('slid.bs.carousel', function () {
setTimeout(function () {
ok($carousel.find('.item:eq(1)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'))
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()
}, 1)
}, 0)
})
$carousel.bootstrapCarousel('next')
.bootstrapCarousel('next')
})
test('should fire slide event with direction', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</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>{{_i}}Second Thumbnail label{{/i}}</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>{{_i}}Third Thumbnail label{{/i}}</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>'
$.support.transition = false
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()
$(template).on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left')
$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('next')
})
.bootstrapCarousel('prev')
})
.bootstrapCarousel('next')
})
test('should fire slid event with direction', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</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>{{_i}}Second Thumbnail label{{/i}}</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>{{_i}}Third Thumbnail label{{/i}}</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>'
$.support.transition = false
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()
$(template).on('slid.bs.carousel', function (e) {
e.preventDefault()
ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left')
$carousel
.one('slid.bs.carousel', function (e) {
ok(e.direction, 'direction present on next')
strictEqual(e.direction, 'left', 'direction is left on next')
$carousel
.one('slid.bs.carousel', function (e) {
ok(e.direction, 'direction present on prev')
strictEqual(e.direction, 'right', 'direction is right on prev')
start()
}).bootstrapCarousel('next')
})
.bootstrapCarousel('prev')
})
.bootstrapCarousel('next')
})
test('should fire slide event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</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>{{_i}}Second Thumbnail label{{/i}}</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>{{_i}}Third Thumbnail label{{/i}}</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>'
$.support.transition = false
var template = '<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>'
stop()
$(template)
.on('slide.bs.carousel', function (e) {
e.preventDefault()
ok(e.relatedTarget)
ok($(e.relatedTarget).hasClass('item'))
ok(e.relatedTarget, 'relatedTarget present')
ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
start()
})
.bootstrapCarousel('next')
})
test('should fire slid event with relatedTarget', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</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>{{_i}}Second Thumbnail label{{/i}}</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>{{_i}}Third Thumbnail label{{/i}}</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>'
$.support.transition = false
var template = '<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>'
stop()
$(template)
.on('slid.bs.carousel', function (e) {
e.preventDefault()
ok(e.relatedTarget)
ok($(e.relatedTarget).hasClass('item'))
ok(e.relatedTarget, 'relatedTarget present')
ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
start()
})
.bootstrapCarousel('next')
})
test('should set interval from data attribute', 4, function () {
var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</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>{{_i}}Second Thumbnail label{{/i}}</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>{{_i}}Third Thumbnail label{{/i}}</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>')
template.attr('data-interval', 1814)
test('should set interval from data attribute', function () {
var templateHTML = '<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 = $(templateHTML)
$carousel.attr('data-interval', 1814)
template.appendTo('body')
$carousel.appendTo('body')
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814)
$('#myCarousel').remove()
equal($carousel.data('bs.carousel').options.interval, 1814)
$carousel.remove()
template.appendTo('body').attr('data-modal', 'foobar')
$carousel.appendTo('body').attr('data-modal', 'foobar')
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set')
$('#myCarousel').remove()
equal($carousel.data('bs.carousel').options.interval, 1814, 'even if there is an data-modal attribute set')
$carousel.remove()
template.appendTo('body')
$carousel.appendTo('body')
$('[data-slide]').first().click()
$('#myCarousel').attr('data-interval', 1860)
$carousel.attr('data-interval', 1860)
$('[data-slide]').first().click()
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on initialization')
$('#myCarousel').remove()
equal($carousel.data('bs.carousel').options.interval, 1814, 'attributes should be read only on initialization')
$carousel.remove()
template.attr('data-interval', false)
template.appendTo('body')
$('#myCarousel').bootstrapCarousel(1)
ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options')
$('#myCarousel').remove()
$carousel.attr('data-interval', false)
$carousel.appendTo('body')
$carousel.bootstrapCarousel(1)
strictEqual($carousel.data('bs.carousel').options.interval, false, 'data attribute has higher priority than default options')
$carousel.remove()
})
test('should skip over non-items', function () {
$.support.transition = false
var $template = $(
'<div id="myCarousel" class="carousel" data-interval="1814">'
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">'
+ '<div class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<script type="text/x-metamorph" id="thingy"></script>'
+ '<script type="text/x-metamorph" id="thingy"/>'
+ '<div class="item">'
+ '<img alt="">'
+ '</div>'
@ -161,14 +363,14 @@ $(function () {
+ '</div>'
+ '</div>'
+ '</div>'
)
var $template = $(templateHTML)
$template.bootstrapCarousel()
equal($template.find('.item')[0], $template.find('.active')[0], 'the first carousel item should be active')
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
$template.bootstrapCarousel(1)
equal($template.find('.item')[1], $template.find('.active')[0], 'the second carousel item should be active')
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
})

View File

@ -19,156 +19,153 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
strictEqual($.fn.collapse, undefined, 'collapse was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapCollapse()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $collapse = $el.bootstrapCollapse()
ok($collapse instanceof $, 'returns jquery collection')
strictEqual($collapse[0], $el[0], 'collection contains element')
})
test('should show a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('show')
ok(el.hasClass('in'), 'has class in')
ok(!/height/.test(el.attr('style')), 'has height reset')
var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
ok($el.hasClass('in'), 'has class "in"')
ok(!/height/.test($el.attr('style')), 'has height reset')
})
test('should hide a collapsed element', function () {
var el = $('<div class="collapse"></div>').bootstrapCollapse('hide')
ok(!el.hasClass('in'), 'does not have class in')
ok(/height/.test(el.attr('style')), 'has height set')
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
ok(!$el.hasClass('in'), 'does not have class "in"')
ok(/height/.test($el.attr('style')), 'has height set')
})
test('should not fire shown when show is prevented', function () {
$.support.transition = false
stop()
$('<div class="collapse"/>')
.on('show.bs.collapse', function (e) {
e.preventDefault()
ok(true)
ok(true, 'show event fired')
start()
})
.on('shown.bs.collapse', function () {
ok(false)
ok(false, 'shown event fired')
})
.bootstrapCollapse('show')
})
test('should reset style to auto after finishing opening collapse', function () {
$.support.transition = false
stop()
$('<div class="collapse" style="height: 0px"/>')
.on('show.bs.collapse', function () {
ok(this.style.height == '0px')
equal(this.style.height, '0px', 'height is 0px')
})
.on('shown.bs.collapse', function () {
ok(this.style.height === '')
strictEqual(this.style.height, '', 'height is auto')
start()
})
.bootstrapCollapse('show')
})
test('should add active class to target when collapse shown', function () {
$.support.transition = false
test('should remove "collapsed" class from target when collapse is shown', function () {
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1"></div>')
.appendTo($('#qunit-fixture'))
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
.on('show.bs.collapse', function () {
ok(!target.hasClass('collapsed'))
ok(!$target.hasClass('collapsed'))
start()
})
target.click()
$target.click()
})
test('should remove active class to target when collapse hidden', function () {
$.support.transition = false
test('should add "collapsed" class to target when collapse is hidden', function () {
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"></div>')
.appendTo($('#qunit-fixture'))
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
ok(target.hasClass('collapsed'))
ok($target.hasClass('collapsed'))
start()
})
target.click()
$target.click()
})
test('should remove active class from inactive accordion targets', function () {
$.support.transition = false
test('should remove "collapsed" class from active accordion target', function () {
stop()
var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo($('#qunit-fixture'))
var accordionHTML = '<div id="accordion">'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0))
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
$('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1))
var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
$('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"/>').appendTo($groups.eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2))
var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
$('<div id="body3"></div>')
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"/>')
.appendTo($groups.eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
start()
})
target3.click()
$target3.click()
})
test('should allow dots in data-parent', function () {
$.support.transition = false
stop()
var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo($('#qunit-fixture'))
var accordionHTML = '<div class="accordion">'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0))
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
$('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(0))
$('<div id="body1" class="in"/>').appendTo($groups.eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1))
var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
$('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(1))
$('<div id="body2"/>').appendTo($groups.eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2))
var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
$('<div id="body3"></div>')
.appendTo(accordion.find('.accordion-group').eq(2))
$('<div id="body3"/>')
.appendTo($groups.eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
start()
})
target3.click()
$target3.click()
})
})

View File

@ -19,209 +19,208 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
strictEqual($.fn.dropdown, undefined, 'dropdown was set back to undefined (org value)')
})
test('should return element', function () {
var el = $('<div />')
ok(el.bootstrapDropdown()[0] === el[0], 'same element returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $dropdown = $el.bootstrapDropdown()
ok($dropdown instanceof $, 'returns jquery collection')
strictEqual($dropdown[0], $el[0], 'collection contains element')
})
test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
test('should not open dropdown if target is disabled via attribute', function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
})
test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
test('should not open dropdown if target is disabled via class', function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
})
test('should add class open to menu if clicked', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
})
test('should test if element has a # before assuming it\'s a selector', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
})
test('should remove open class if body clicked', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
test('should remove "open" class if body is clicked', function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
.click()
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
$('body').click()
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed')
dropdown.remove()
ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
$(document.body).click()
ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class removed')
})
test('should remove open class if body clicked, with multiple drop downs', function () {
var dropdownHTML = '<ul class="nav">' +
' <li><a href="#menu1">Menu 1</a></li>' +
' <li class="dropdown" id="testmenu">' +
' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>' +
' <ul class="dropdown-menu" role="menu">' +
' <li><a href="#sub1">Submenu 1</a></li>' +
' </ul>' +
' </li>' +
'</ul>' +
'<div class="btn-group">' +
' <button class="btn">Actions</button>' +
' <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>' +
' <ul class="dropdown-menu">' +
' <li><a href="#">Action 1</a></li>' +
' </ul>' +
'</div>'
var dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var first = dropdowns.first()
var last = dropdowns.last()
test('should remove "open" class if body is clicked, with multiple dropdowns', function () {
var dropdownHTML = '<ul class="nav">'
+ '<li><a href="#menu1">Menu 1</a></li>'
+ '<li class="dropdown" id="testmenu">'
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
+ '<ul class="dropdown-menu" role="menu">'
+ '<li><a href="#sub1">Submenu 1</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
+ '<div class="btn-group">'
+ '<button class="btn">Actions</button>'
+ '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Action 1</a></li>'
+ '</ul>'
+ '</div>'
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var $first = $dropdowns.first()
var $last = $dropdowns.last()
ok(dropdowns.length == 2, 'Should be two dropdowns')
strictEqual($dropdowns.length, 2, 'two dropdowns')
first.click()
ok(first.parents('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($('#qunit-fixture .open').length === 0, 'open class removed')
$first.click()
strictEqual($first.parents('.open').length, 1, '"open" class added on click')
strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
$(document.body).click()
strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
last.click()
ok(last.parent('.open').length == 1, 'open class added on click')
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
$('body').click()
ok($('#qunit-fixture .open').length === 0, 'open class removed')
$('#qunit-fixture').html('')
$last.click()
strictEqual($last.parent('.open').length, 1, '"open" class added on click')
strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
$(document.body).click()
strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
})
test('should fire show and hide event', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
stop()
dropdown
$dropdown
.parent('.dropdown')
.on('show.bs.dropdown', function () {
ok(true, 'show was called')
ok(true, 'show was fired')
})
.on('hide.bs.dropdown', function () {
ok(true, 'hide was called')
ok(true, 'hide was fired')
start()
})
dropdown.click()
$dropdown.click()
$(document.body).click()
})
test('should fire shown and hiden event', function () {
var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' +
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
var dropdown = $(dropdownHTML)
test('should fire shown and hidden event', function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"/>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.bootstrapDropdown()
stop()
dropdown
$dropdown
.parent('.dropdown')
.on('shown.bs.dropdown', function () {
ok(true, 'show was called')
ok(true, 'shown was fired')
})
.on('hidden.bs.dropdown', function () {
ok(true, 'hide was called')
ok(true, 'hidden was fired')
start()
})
dropdown.click()
$dropdown.click()
$(document.body).click()
})

View File

@ -4,8 +4,7 @@ $(function () {
module('modal plugin')
test('should be defined on jquery object', function () {
var div = $('<div id="modal-test"></div>')
ok(div.modal, 'modal method is defined')
ok($(document.body).modal, 'modal method is defined')
})
module('modal', {
@ -20,13 +19,14 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.modal, 'modal was set back to undefined (orig value)')
strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
})
test('should return element', function () {
var div = $('<div id="modal-test"></div>')
ok(div.bootstrapModal() == div, 'document.body returned')
$('#modal-test').remove()
test('should return jquery collection containing the element', function () {
var $el = $('<div id="modal-test"/>')
var $modal = $el.bootstrapModal()
ok($modal instanceof $, 'returns jquery collection')
strictEqual($modal[0], $el[0], 'collection contains element')
})
test('should expose defaults var for settings', function () {
@ -35,11 +35,10 @@ $(function () {
test('should insert into dom when show method is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove()
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
start()
})
.bootstrapModal('show')
@ -47,46 +46,41 @@ $(function () {
test('should fire show event', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('show.bs.modal', function () {
ok(true, 'show was called')
})
.on('shown.bs.modal', function () {
$(this).remove()
ok(true, 'show event fired')
start()
})
.bootstrapModal('show')
})
test('should not fire shown when default prevented', function () {
test('should not fire shown when show was prevented', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('show.bs.modal', function (e) {
e.preventDefault()
ok(true, 'show was called')
ok(true, 'show event fired')
start()
})
.on('shown.bs.modal', function () {
ok(false, 'shown was called')
ok(false, 'shown event fired')
})
.bootstrapModal('show')
})
test('should hide modal when hide is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start()
})
.bootstrapModal('show')
@ -94,17 +88,15 @@ $(function () {
test('should toggle when toggle is called', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>')
div
$('<div id="modal-test"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.bootstrapModal('toggle')
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).bootstrapModal('toggle')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
@ -112,17 +104,15 @@ $(function () {
test('should remove from dom when click [data-dismiss="modal"]', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>')
div
$('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
notEqual($('#modal-test').length, 0, 'modal inserted into dom')
$(this).find('.close').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('toggle')
@ -130,16 +120,14 @@ $(function () {
test('should allow modal close with "backdrop:false"', function () {
stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
div
$('<div id="modal-test" data-backdrop="false"/>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
div.bootstrapModal('hide')
$(this).bootstrapModal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
@ -147,18 +135,16 @@ $(function () {
test('should close modal when clicking outside of modal-content', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div
$('<div id="modal-test"><div class="contents"/></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal insterted into dom')
notEqual($('#modal-test').length, 0, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').mousedown()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.bootstrapModal('show')
@ -204,19 +190,17 @@ $(function () {
test('should trigger hide event once when clicking outside of modal-content', function () {
stop()
$.support.transition = false
var triggered
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div
$('<div id="modal-test"><div class="contents"/></div>')
.on('shown.bs.modal', function () {
triggered = 0
$('#modal-test').mousedown()
})
.on('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
strictEqual(triggered, 1, 'modal hide triggered once')
start()
})
.bootstrapModal('show')
@ -224,34 +208,31 @@ $(function () {
test('should close reopened modal with [data-dismiss="modal"] click', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
.on('shown.bs.modal', function () {
$('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden')
})
.one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () {
$(this)
.one('hidden.bs.modal', function () {
start()
}).bootstrapModal('show')
})
.bootstrapModal('show')
div.remove()
})
.bootstrapModal('show')
})
test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run
equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused')
div.remove()
toggleBtn.remove()
setTimeout(function () {
ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
start()
}, 0)
})
@ -259,29 +240,26 @@ $(function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
})
test('should not restore focus to toggling element if the associated show event gets prevented', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var otherBtn = $('<button id="other-btn">Golden boy</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
.one('show.bs.modal', function (e) {
e.preventDefault()
otherBtn.focus()
window.setTimeout(function () { // give the focus event from the previous line a chance to run
div.bootstrapModal('show')
}, 0)
$otherBtn.focus()
setTimeout($.proxy(function () {
$(this).bootstrapModal('show')
}, this), 0)
})
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run (except it shouldn't run in this case)
equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element')
div.remove()
toggleBtn.remove()
otherBtn.remove()
setTimeout(function () {
ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
start()
}, 0)
})
@ -289,6 +267,7 @@ $(function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
$toggleBtn.click()
})
})

View File

@ -2,7 +2,7 @@
* grunt-contrib-qunit
* http://gruntjs.com/
*
* Copyright (c) 2013 "Cowboy" Ben Alman, contributors
* Copyright (c) 2014 "Cowboy" Ben Alman, contributors
* Licensed under the MIT license.
*/
@ -21,48 +21,52 @@
}
// These methods connect QUnit to PhantomJS.
QUnit.log = function (obj) {
QUnit.log(function (obj) {
// What is this I dont even
if (obj.message === '[object Object], undefined:undefined') { return }
// Parse some stuff before sending it.
var actual = QUnit.jsDump.parse(obj.actual)
var expected = QUnit.jsDump.parse(obj.expected)
var actual
var expected
if (!obj.result) {
// Dumping large objects can be very slow, and the dump isn't used for
// passing tests, so only dump if the test failed.
actual = QUnit.jsDump.parse(obj.actual)
expected = QUnit.jsDump.parse(obj.expected)
}
// Send it.
sendMessage('qunit.log', obj.result, actual, expected, obj.message, obj.source)
}
})
QUnit.testStart = function (obj) {
QUnit.testStart(function (obj) {
sendMessage('qunit.testStart', obj.name)
}
})
QUnit.testDone = function (obj) {
sendMessage('qunit.testDone', obj.name, obj.failed, obj.passed, obj.total)
}
QUnit.testDone(function (obj) {
sendMessage('qunit.testDone', obj.name, obj.failed, obj.passed, obj.total, obj.duration)
})
QUnit.moduleStart = function (obj) {
QUnit.moduleStart(function (obj) {
sendMessage('qunit.moduleStart', obj.name)
}
})
QUnit.begin = function () {
sendMessage('qunit.begin')
console.log('Starting test suite')
console.log('================================================\n')
}
QUnit.moduleDone = function (opts) {
if (opts.failed === 0) {
console.log('\r\u2714 All tests passed in "' + opts.name + '" module')
QUnit.moduleDone(function (obj) {
if (obj.failed === 0) {
console.log('\r\u2714 All tests passed in "' + obj.name + '" module')
} else {
console.log('\u2716 ' + opts.failed + ' tests failed in "' + opts.name + '" module')
}
sendMessage('qunit.moduleDone', opts.name, opts.failed, opts.passed, opts.total)
console.log('\u2716 ' + obj.failed + ' tests failed in "' + obj.name + '" module')
}
sendMessage('qunit.moduleDone', obj.name, obj.failed, obj.passed, obj.total)
})
QUnit.done = function (opts) {
console.log('\n================================================')
console.log('Tests completed in ' + opts.runtime + ' milliseconds')
console.log(opts.passed + ' tests of ' + opts.total + ' passed, ' + opts.failed + ' failed.')
sendMessage('qunit.done', opts.failed, opts.passed, opts.total, opts.runtime)
}
QUnit.begin(function () {
sendMessage('qunit.begin')
console.log('\n\nStarting test suite')
console.log('================================================\n')
})
QUnit.done(function (obj) {
sendMessage('qunit.done', obj.failed, obj.passed, obj.total, obj.runtime)
})
}())

View File

@ -4,8 +4,7 @@ $(function () {
module('popover plugin')
test('should be defined on jquery object', function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
ok($(document.body).popover, 'popover method is defined')
})
module('popover', {
@ -20,46 +19,44 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
strictEqual($.fn.popover, undefined, 'popover was set back to undefined (org value)')
})
test('should return element', function () {
var div = $('<div></div>')
ok(div.bootstrapPopover() == div, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $popover = $el.bootstrapPopover()
ok($popover instanceof $, 'returns jquery collection')
strictEqual($popover[0], $el[0], 'collection contains element')
})
test('should render popover element', function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
var $popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover removed')
notEqual($('.popover').length, 0, 'popover was inserted')
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover removed')
})
test('should store popover instance in popover data object', function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.bootstrapPopover()
var $popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>').bootstrapPopover()
ok(!!popover.data('bs.popover'), 'popover instance exists')
ok($popover.data('bs.popover'), 'popover instance exists')
})
test('should store popover trigger in popover instance data object', function () {
$.support.transition = false
var popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover()
popover.bootstrapPopover('show')
ok(!!$('.popover').data('bs.popover'), 'popover trigger stored in instance data')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('show')
ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
})
test('should get title and content from options', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
var $popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: function () {
@ -70,23 +67,20 @@ $(function () {
}
})
popover.bootstrapPopover('show')
$popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
notEqual($('.popover').length, 0, 'popover was inserted')
equal($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
})
test('should not duplicate HTML object', function () {
$.support.transition = false
var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻')
var $div = $('<div>').html('loves writing tests (╯°□°)╯︵ ┻━┻')
var popover = $('<a href="#">@fat</a>')
var $popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
content: function () {
@ -94,42 +88,38 @@ $(function () {
}
})
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
$popover.bootstrapPopover('show')
notEqual($('.popover').length, 0, 'popover was inserted')
equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
$popover.bootstrapPopover('show')
notEqual($('.popover').length, 0, 'popover was inserted')
equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
})
test('should get title and content from attributes', function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover()
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
notEqual($('.popover').length, 0, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
})
test('should get title and content from attributes #2', function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
test('should get title and content from attributes ignoring options passed via js', function () {
var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: 'ignored title option',
@ -137,48 +127,50 @@ $(function () {
})
.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
notEqual($('.popover').length, 0, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
})
test('should respect custom classes', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
test('should respect custom template', function () {
var $popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.bootstrapPopover({
title: 'Test',
content: 'Test',
template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
})
popover.bootstrapPopover('show')
$popover.bootstrapPopover('show')
ok($('.popover').length, 'popover was inserted')
notEqual($('.popover').length, 0, 'popover was inserted')
ok($('.popover').hasClass('foobar'), 'custom class is present')
popover.bootstrapPopover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
$popover.bootstrapPopover('hide')
equal($('.popover').length, 0, 'popover was removed')
})
test('should destroy popover', function () {
var popover = $('<div/>').bootstrapPopover({
var $popover = $('<div/>')
.bootstrapPopover({
trigger: 'hover'
}).on('click.foo', function () {})
ok(popover.data('bs.popover'), 'popover has data')
ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
popover.bootstrapPopover('show')
popover.bootstrapPopover('destroy')
ok(!popover.hasClass('in'), 'popover is hidden')
ok(!popover.data('popover'), 'popover does not have data')
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover still has click.foo')
ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events')
})
.on('click.foo', $.noop)
ok($popover.data('bs.popover'), 'popover has data')
ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
equal($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
$popover.bootstrapPopover('show')
$popover.bootstrapPopover('destroy')
ok(!$popover.hasClass('in'), 'popover is hidden')
ok(!$popover.data('popover'), 'popover does not have data')
equal($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
})
})

View File

@ -19,100 +19,107 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
strictEqual($.fn.scrollspy, undefined, 'scrollspy was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapScrollspy()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $scrollspy = $el.bootstrapScrollspy()
ok($scrollspy instanceof $, 'returns jquery collection')
strictEqual($scrollspy[0], $el[0], 'collection contains element')
})
test('should switch active class on scroll', function () {
var sectionHTML = '<div id="masthead"></div>'
$(sectionHTML).append('#qunit-fixture')
var topbarHTML = '<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container">' +
'<h3><a href="#">Bootstrap</a></h3>' +
'<li><a href="#masthead">Overview</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>'
// Does not work properly ATM, #13500 will fix this
test('should switch "active" class on scroll', function () {
var topbarHTML = '<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container">'
+ '<h3><a href="#">Bootstrap</a></h3>'
+ '<li><a href="#masthead">Overview</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
var $topbar = $(topbarHTML).bootstrapScrollspy()
$(sectionHTML).append('#qunit-fixture')
ok($topbar.find('.active', true))
})
asyncTest('should only switch active class on current target', function () {
expect(1);
var sectionHTML = '<div id="root" class="active">' +
'<div class="topbar">' +
'<div class="topbar-inner">' +
'<div class="container" id="ss-target">' +
'<ul class="nav">' +
'<li><a href="#masthead">Overview</a></li>' +
'<li><a href="#detail">Detail</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>' +
'<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
'<div style="height: 200px;">' +
'<h4 id="masthead">Overview</h4>' +
'<p style="height: 200px">' +
'Ad leggings keytar, brunch id art party dolor labore.' +
'</p>' +
'</div>' +
'<div style="height: 200px;">' +
'<h4 id="detail">Detail</h4>' +
'<p style="height: 200px">' +
'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
'</p>' +
'</div>' +
'</div>' +
'</div>'
test('should only switch "active" class on current target', function () {
stop()
var sectionHTML = '<div id="root" class="active">'
+ '<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container" id="ss-target">'
+ '<ul class="nav">'
+ '<li><a href="#masthead">Overview</a></li>'
+ '<li><a href="#detail">Detail</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
+ '<div style="height: 200px;">'
+ '<h4 id="masthead">Overview</h4>'
+ '<p style="height: 200px">'
+ 'Ad leggings keytar, brunch id art party dolor labore.'
+ '</p>'
+ '</div>'
+ '<div style="height: 200px;">'
+ '<h4 id="detail">Detail</h4>'
+ '<p style="height: 200px">'
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
+ '</p>'
+ '</div>'
+ '</div>'
+ '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section
var $scrollspy = $section
.show()
.find('#scrollspy-example')
.bootstrapScrollspy({ target: '#ss-target' })
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok($section.hasClass('active'), 'Active class still on root node')
$scrollspy.on('scroll.bs.scrollspy', function () {
ok($section.hasClass('active'), '"active" class still on root node')
start()
})
$scrollSpy.scrollTop(350);
$scrollspy.scrollTop(350)
})
asyncTest('middle navigation option correctly selected when large offset is used', function () {
expect(3);
var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
'<nav id="navigation" class="navbar">' +
'<ul class="nav navbar-nav">' +
'<li class="active"><a id="one-link" href="#one">One</a></li>' +
'<li><a id="two-link" href="#two">Two</a></li>' +
'<li><a id="three-link" href="#three">Three</a></li>' +
'</ul>' +
'</nav>' +
'<div id="content" style="height: 200px; overflow-y: auto;">' +
'<div id="one" style="height: 500px;"></div>' +
'<div id="two" style="height: 300px;"></div>' +
'<div id="three" style="height: 10px;"></div>' +
'</div>'
test('middle navigation option correctly selected when large offset is used', function () {
stop()
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="nav navbar-nav">'
+ '<li class="active"><a id="one-link" href="#one">One</a></li>'
+ '<li><a id="two-link" href="#two">Two</a></li>'
+ '<li><a id="three-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
+ '<div id="content" style="height: 200px; overflow-y: auto;">'
+ '<div id="one" style="height: 500px;"></div>'
+ '<div id="two" style="height: 300px;"></div>'
+ '<div id="three" style="height: 10px;"></div>'
+ '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollSpy = $section
var $scrollspy = $section
.show()
.filter('#content')
$scrollSpy.bootstrapScrollspy({ target: '#navigation', offset: $scrollSpy.position().top })
$scrollSpy.on('scroll.bs.scrollspy', function () {
ok(!$section.find('#one-link').parent().hasClass('active'), 'Active class removed from first section')
ok($section.find('#two-link').parent().hasClass('active'), 'Active class on middle section')
ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section')
$scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
$scrollspy.on('scroll.bs.scrollspy', function () {
ok(!$section.find('#one-link').parent().hasClass('active'), '"active" class removed from first section')
ok($section.find('#two-link').parent().hasClass('active'), '"active" class on middle section')
ok(!$section.find('#three-link').parent().hasClass('active'), '"active" class not on last section')
start()
})
$scrollSpy.scrollTop(550);
$scrollspy.scrollTop(550)
})
test('should add the active class to the correct element', function () {

View File

@ -19,20 +19,23 @@ $(function () {
})
test('should provide no conflict', function () {
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
strictEqual($.fn.tab, undefined, 'tab was set back to undefined (org value)')
})
test('should return element', function () {
ok($(document.body).bootstrapTab()[0] == document.body, 'document.body returned')
test('should return jquery collection containing the element', function () {
var $el = $('<div/>')
var $tab = $el.bootstrapTab()
ok($tab instanceof $, 'returns jquery collection')
strictEqual($tab[0], $el[0], 'collection contains element')
})
test('should activate element by tab id', function () {
var tabsHTML = '<ul class="tabs">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
var tabsHTML = '<ul class="tabs">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
$(tabsHTML).find('li:last a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
@ -42,12 +45,12 @@ $(function () {
})
test('should activate element by tab id', function () {
var pillsHTML = '<ul class="pills">' +
'<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' +
'</ul>'
var pillsHTML = '<ul class="pills">'
+ '<li><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
$(pillsHTML).find('li:last a').bootstrapTab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
@ -56,39 +59,44 @@ $(function () {
equal($('#qunit-fixture').find('.active').attr('id'), 'home')
})
test('should not fire closed when close is prevented', function () {
$.support.transition = false
test('should not fire shown when show is prevented', function () {
stop()
$('<div class="tab"/>')
.on('show.bs.tab', function (e) {
e.preventDefault()
ok(true)
ok(true, 'show event fired')
start()
})
.on('shown.bs.tab', function () {
ok(false)
ok(false, 'shown event fired')
})
.bootstrapTab('show')
})
test('show and shown events should reference correct relatedTarget', function () {
var dropHTML = '<ul class="drop">' +
'<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
'<ul class="dropdown-menu">' +
'<li><a href="#1-1" data-toggle="tab">1-1</a></li>' +
'<li><a href="#1-2" data-toggle="tab">1-2</a></li>' +
'</ul>' +
'</li>' +
'</ul>'
stop()
$(dropHTML).find('ul>li:first a').bootstrapTab('show').end()
.find('ul>li:last a')
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
var dropHTML = '<ul class="drop">'
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+ '<li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
$(dropHTML)
.find('ul > li:first a')
.bootstrapTab('show')
.end()
.find('ul > li:last a')
.on('show.bs.tab', function (e) {
equal(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
start()
})
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
.on('shown.bs.tab', function (e) {
equal(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
})
.bootstrapTab('show')
})

File diff suppressed because it is too large Load Diff