Skip to content

B
bootstrap
Commit 895b0006 authored by XhmikosR's avatar XhmikosR
Browse files
Options

Re-indent test files.

parent accc95cc
Hide whitespace changes
Inline Side-by-side
Showing with 1471 additions and 1470 deletions
js/.jshintrc
View file @ 895b0006
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"eqeqeq" : false, "eqeqeq" : false,
"eqnull" : true, "eqnull" : true,
"expr" : true, "expr" : true,
"indent" : 2,
"laxbreak" : true, "laxbreak" : true,
"quotmark" : "single", "quotmark" : "single",
"validthis": true "validthis": true
......
js/tests/unit/affix.js
View file @ 895b0006
$(function () { $(function () {
module('affix') module('affix')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var affix = $.fn.affix.noConflict() var affix = $.fn.affix.noConflict()
ok(!$.fn.affix, 'affix was set back to undefined (org value)') ok(!$.fn.affix, 'affix was set back to undefined (org value)')
$.fn.affix = affix $.fn.affix = affix
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).affix, 'affix method is defined') ok($(document.body).affix, 'affix method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).affix()[0] == document.body, 'document.body returned') ok($(document.body).affix()[0] == document.body, 'document.body returned')
}) })
test('should exit early if element is not visible', function () { test('should exit early if element is not visible', function () {
var $affix = $('<div style="display: none"></div>').affix() var $affix = $('<div style="display: none"></div>').affix()
$affix.data('bs.affix').checkPosition() $affix.data('bs.affix').checkPosition()
ok(!$affix.hasClass('affix'), 'affix class was not added') ok(!$affix.hasClass('affix'), 'affix class was not added')
})
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 affixer = $('#affixTarget').affix({
offset: $('#affixTarget ul').position()
})
$('#affixTarget')
.on('affix.bs.affix', function (e) {
ok(true, 'affix event triggered')
}).on('affixed.bs.affix', function (e) {
ok(true,'affixed event triggered')
$('#affixTarget').remove()
$('#affixAfter').remove()
start()
}) })
test('should trigger affixed event after affix', function () { setTimeout(function () {
stop() window.scrollTo(0, document.body.scrollHeight)
setTimeout(function () { window.scroll(0,0) }, 0)
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>') },0)
template.appendTo('body') })
var affixer = $('#affixTarget').affix({
offset: $('#affixTarget ul').position()
})
$('#affixTarget')
.on('affix.bs.affix', function (e) {
ok(true, 'affix event triggered')
}).on('affixed.bs.affix', function (e) {
ok(true,'affixed event triggered')
$('#affixTarget').remove()
$('#affixAfter').remove()
start()
})
setTimeout(function () {
window.scrollTo(0, document.body.scrollHeight)
setTimeout(function () { window.scroll(0,0) }, 0)
},0)
})
}) })
js/tests/unit/alert.js
View file @ 895b0006
$(function () { $(function () {
module('alert') module('alert')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var alert = $.fn.alert.noConflict() var alert = $.fn.alert.noConflict()
ok(!$.fn.alert, 'alert was set back to undefined (org value)') ok(!$.fn.alert, 'alert was set back to undefined (org value)')
$.fn.alert = alert $.fn.alert = alert
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).alert, 'alert method is defined') ok($(document.body).alert, 'alert method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).alert()[0] == document.body, 'document.body returned') ok($(document.body).alert()[0] == document.body, 'document.body returned')
}) })
test('should fade element out on clicking .close', function () { test('should fade element out on clicking .close', function () {
var alertHTML = '<div class="alert-message warning fade in">' + var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' + '<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>', '</div>',
alert = $(alertHTML).alert() alert = $(alertHTML).alert()
alert.find('.close').click() alert.find('.close').click()
ok(!alert.hasClass('in'), 'remove .in class on .close click') ok(!alert.hasClass('in'), 'remove .in class on .close click')
}) })
test('should remove element when clicking .close', function () { test('should remove element when clicking .close', function () {
$.support.transition = false $.support.transition = false
var alertHTML = '<div class="alert-message warning fade in">' + var alertHTML = '<div class="alert-message warning fade in">' +
'<a class="close" href="#" data-dismiss="alert">×</a>' + '<a class="close" href="#" data-dismiss="alert">×</a>' +
'<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
'</div>', '</div>',
alert = $(alertHTML).appendTo('#qunit-fixture').alert() alert = $(alertHTML).appendTo('#qunit-fixture').alert()
ok($('#qunit-fixture').find('.alert-message').length, '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') ok(!$('#qunit-fixture').find('.alert-message').length, '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);
start();
}) })
.on('closed.bs.alert', function () {
test('should not fire closed when close is prevented', function () { ok(false);
$.support.transition = false
stop();
$('<div class="alert"/>')
.on('close.bs.alert', function (e) {
e.preventDefault();
ok(true);
start();
})
.on('closed.bs.alert', function () {
ok(false);
})
.alert('close')
}) })
.alert('close')
})
}) })
js/tests/unit/button.js
View file @ 895b0006
$(function () { $(function () {
module('button') module('button')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var button = $.fn.button.noConflict() var button = $.fn.button.noConflict()
ok(!$.fn.button, 'button was set back to undefined (org value)') ok(!$.fn.button, 'button was set back to undefined (org value)')
$.fn.button = button $.fn.button = button
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).button, 'button method is defined') ok($(document.body).button, 'button method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).button()[0] == document.body, 'document.body returned') ok($(document.body).button()[0] == document.body, 'document.body returned')
}) })
test('should return set state to loading', function () { test('should return set state to loading', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.button('loading') btn.button('loading')
equal(btn.html(), 'fat', 'btn text equals fat') equal(btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled') ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class') ok(btn.hasClass('disabled'), 'btn has disabled class')
start() start()
}, 0) }, 0)
}) })
test('should return reset state', function () { test('should return reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal(btn.html(), 'mdo', 'btn text equals mdo')
btn.button('loading') btn.button('loading')
equal(btn.html(), 'fat', 'btn text equals fat') equal(btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled') ok(btn.attr('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class') ok(btn.hasClass('disabled'), 'btn has disabled class')
start() start()
stop() stop()
btn.button('reset') btn.button('reset')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal(btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () { setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled') ok(!btn.attr('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class') ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
start() start()
}, 0) }, 0)
}, 0) }, 0)
}) })
test('should toggle active', function () { test('should toggle active', function () {
var btn = $('<button class="btn">mdo</button>') var btn = $('<button class="btn">mdo</button>')
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!btn.hasClass('active'), 'btn does not have active class')
btn.button('toggle') btn.button('toggle')
ok(btn.hasClass('active'), 'btn has class active') ok(btn.hasClass('active'), 'btn has class active')
}) })
test('should toggle active when btn children are clicked', function () { test('should toggle active when btn children are clicked', function () {
var btn = $('<button class="btn" data-toggle="button">mdo</button>'), var btn = $('<button class="btn" data-toggle="button">mdo</button>'),
inner = $('<i></i>') inner = $('<i></i>')
btn btn
.append(inner) .append(inner)
.appendTo($('#qunit-fixture')) .appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click() inner.click()
ok(btn.hasClass('active'), 'btn has class active') ok(btn.hasClass('active'), 'btn has class active')
}) })
test('should toggle active when btn children are clicked within btn-group', function () { test('should toggle active when btn children are clicked within btn-group', function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>'), var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>'),
btn = $('<button class="btn">fat</button>'), btn = $('<button class="btn">fat</button>'),
inner = $('<i></i>') inner = $('<i></i>')
btngroup btngroup
.append(btn.append(inner)) .append(btn.append(inner))
.appendTo($('#qunit-fixture')) .appendTo($('#qunit-fixture'))
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!btn.hasClass('active'), 'btn does not have active class')
inner.click() inner.click()
ok(btn.hasClass('active'), 'btn has class active') ok(btn.hasClass('active'), 'btn has class active')
}) })
test('should check for closest matching toggle', function () { test('should check for closest matching toggle', function () {
var group = '<div class="btn-group" data-toggle="buttons">' + var group = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' + '<label class="btn btn-primary active">' +
'<input type="radio" name="options" id="option1" checked="true"> Option 1' + '<input type="radio" name="options" id="option1" checked="true"> Option 1' +
'</label>' + '</label>' +
'<label class="btn btn-primary">' + '<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option2"> Option 2' + '<input type="radio" name="options" id="option2"> Option 2' +
'</label>' + '</label>' +
'<label class="btn btn-primary">' + '<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option3"> Option 3' + '<input type="radio" name="options" id="option3"> Option 3' +
'</label>' + '</label>' +
'</div>' '</div>'
group = $(group) group = $(group)
var btn1 = $(group.children()[0]) var btn1 = $(group.children()[0])
var btn2 = $(group.children()[1]) var btn2 = $(group.children()[1])
var btn3 = $(group.children()[2]) var btn3 = $(group.children()[2])
group.appendTo($('#qunit-fixture')) group.appendTo($('#qunit-fixture'))
ok(btn1.hasClass('active'), 'btn1 has active class') ok(btn1.hasClass('active'), 'btn1 has active class')
ok(btn1.find('input').prop('checked'), 'btn1 is checked') ok(btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!btn2.hasClass('active'), 'btn2 does not have active class') ok(!btn2.hasClass('active'), 'btn2 does not have active class')
ok(!btn2.find('input').prop('checked'), 'btn2 is not checked') ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
btn2.find('input').click() btn2.find('input').click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class') ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked') ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class') ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked') ok(btn2.find('input').prop('checked'), 'btn2 is checked')
btn2.find('input').click() /* clicking an already checked radio should not un-check it */ 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.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked') ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class') ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked') ok(btn2.find('input').prop('checked'), 'btn2 is checked')
}) })
}) })
js/tests/unit/carousel.js
View file @ 895b0006
$(function () { $(function () {
module('carousel') module('carousel')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var carousel = $.fn.carousel.noConflict() var carousel = $.fn.carousel.noConflict()
ok(!$.fn.carousel, 'carousel was set back to undefined (org value)') ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
$.fn.carousel = carousel $.fn.carousel = carousel
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).carousel, 'carousel method is defined') ok($(document.body).carousel, 'carousel method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).carousel()[0] == document.body, 'document.body returned') ok($(document.body).carousel()[0] == document.body, 'document.body returned')
}) })
test('should not fire slide when slide is prevented', function () { test('should not fire slide when slide is prevented', function () {
$.support.transition = false $.support.transition = false
stop() stop()
$('<div class="carousel"/>') $('<div class="carousel"/>')
.on('slide.bs.carousel', function (e) { .on('slide.bs.carousel', function (e) {
e.preventDefault(); e.preventDefault();
ok(true); ok(true);
start(); start();
}) })
.on('slid.bs.carousel', function () { .on('slid.bs.carousel', function () {
ok(false); ok(false);
})
.carousel('next')
}) })
.carousel('next')
})
test('should reset when slide is prevented', function () { 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 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) var $carousel = $(template)
$.support.transition = false $.support.transition = false
stop() stop()
$carousel.one('slide.bs.carousel', function (e) { $carousel.one('slide.bs.carousel', function (e) {
e.preventDefault() e.preventDefault()
setTimeout(function () { setTimeout(function () {
ok($carousel.find('.item:eq(0)').is('.active')) ok($carousel.find('.item:eq(0)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(0)').is('.active')) ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'))
$carousel.carousel('next')
}, 1);
})
$carousel.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'))
start()
}, 1);
})
$carousel.carousel('next') $carousel.carousel('next')
}) }, 1);
})
$carousel.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'))
start()
}, 1);
})
$carousel.carousel('next')
})
test('should fire slide event with direction', function () { 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>' 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 $.support.transition = false
stop() stop()
$(template).on('slide.bs.carousel', function (e) { $(template).on('slide.bs.carousel', function (e) {
e.preventDefault() e.preventDefault()
ok(e.direction) ok(e.direction)
ok(e.direction === 'right' || e.direction === 'left') ok(e.direction === 'right' || e.direction === 'left')
start() start()
}).carousel('next') }).carousel('next')
}) })
test('should fire slide event with relatedTarget', function () { 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>' 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 $.support.transition = false
stop() stop()
$(template) $(template)
.on('slide.bs.carousel', function (e) { .on('slide.bs.carousel', function (e) {
e.preventDefault(); e.preventDefault();
ok(e.relatedTarget); ok(e.relatedTarget);
ok($(e.relatedTarget).hasClass('item')); ok($(e.relatedTarget).hasClass('item'));
start(); start();
})
.carousel('next')
}) })
.carousel('next')
})
test('should set interval from data attribute', 4, function () { 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>'); 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); template.attr('data-interval', 1814);
template.appendTo('body'); template.appendTo('body');
$('[data-slide]').first().click(); $('[data-slide]').first().click();
ok($('#myCarousel').data('bs.carousel').options.interval == 1814); ok($('#myCarousel').data('bs.carousel').options.interval == 1814);
$('#myCarousel').remove(); $('#myCarousel').remove();
template.appendTo('body').attr('data-modal', 'foobar'); template.appendTo('body').attr('data-modal', 'foobar');
$('[data-slide]').first().click(); $('[data-slide]').first().click();
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set'); ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set');
$('#myCarousel').remove(); $('#myCarousel').remove();
template.appendTo('body'); template.appendTo('body');
$('[data-slide]').first().click(); $('[data-slide]').first().click();
$('#myCarousel').attr('data-interval', 1860); $('#myCarousel').attr('data-interval', 1860);
$('[data-slide]').first().click(); $('[data-slide]').first().click();
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on intitialization'); ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on intitialization');
$('#myCarousel').remove(); $('#myCarousel').remove();
template.attr('data-interval', false); template.attr('data-interval', false);
template.appendTo('body'); template.appendTo('body');
$('#myCarousel').carousel(1); $('#myCarousel').carousel(1);
ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options'); ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options');
$('#myCarousel').remove(); $('#myCarousel').remove();
}) })
}) })
js/tests/unit/collapse.js
View file @ 895b0006
$(function () { $(function () {
module('collapse') module('collapse')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var collapse = $.fn.collapse.noConflict() var collapse = $.fn.collapse.noConflict()
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)') ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
$.fn.collapse = collapse $.fn.collapse = collapse
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).collapse, 'collapse method is defined') ok($(document.body).collapse, 'collapse method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).collapse()[0] == document.body, 'document.body returned') ok($(document.body).collapse()[0] == document.body, 'document.body returned')
}) })
test('should show a collapsed element', function () { test('should show a collapsed element', function () {
var el = $('<div class="collapse"></div>').collapse('show') var el = $('<div class="collapse"></div>').collapse('show')
ok(el.hasClass('in'), 'has class in') ok(el.hasClass('in'), 'has class in')
ok(/height/.test(el.attr('style')), 'has height set') ok(/height/.test(el.attr('style')), 'has height set')
})
test('should hide a collapsed element', function () {
var el = $('<div class="collapse"></div>').collapse('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);
start();
}) })
.on('shown.bs.collapse', function () {
test('should hide a collapsed element', function () { ok(false);
var el = $('<div class="collapse"></div>').collapse('hide')
ok(!el.hasClass('in'), 'does not have class in')
ok(/height/.test(el.attr('style')), 'has height set')
}) })
.collapse('show')
test('should not fire shown when show is prevented', function () { })
$.support.transition = false
stop() test('should reset style to auto after finishing opening collapse', function () {
$('<div class="collapse"/>') $.support.transition = false
.on('show.bs.collapse', function (e) { stop()
e.preventDefault(); $('<div class="collapse" style="height: 0px"/>')
ok(true); .on('show.bs.collapse', function () {
start(); ok(this.style.height == '0px')
})
.on('shown.bs.collapse', function () {
ok(false);
})
.collapse('show')
}) })
.on('shown.bs.collapse', function () {
test('should reset style to auto after finishing opening collapse', function () { ok(this.style.height == 'auto')
$.support.transition = false start()
stop()
$('<div class="collapse" style="height: 0px"/>')
.on('show.bs.collapse', function () {
ok(this.style.height == '0px')
})
.on('shown.bs.collapse', function () {
ok(this.style.height == 'auto')
start()
})
.collapse('show')
}) })
.collapse('show')
})
test('should add active class to target when collapse shown', function () { test('should add active class to target when collapse shown', function () {
$.support.transition = false $.support.transition = false
stop() stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture'))
var collapsible = $('<div id="test1"></div>') var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture')) .appendTo($('#qunit-fixture'))
.on('show.bs.collapse', function () {
ok(!target.hasClass('collapsed'))
start()
})
target.click() var collapsible = $('<div id="test1"></div>')
.appendTo($('#qunit-fixture'))
.on('show.bs.collapse', function () {
ok(!target.hasClass('collapsed'))
start()
}) })
test('should remove active class to target when collapse hidden', function () { target.click()
$.support.transition = false })
stop()
var target = $('<a data-toggle="collapse" href="#test1"></a>') test('should remove active class to target when collapse hidden', function () {
.appendTo($('#qunit-fixture')) $.support.transition = false
stop()
var collapsible = $('<div id="test1" class="in"></div>') var target = $('<a data-toggle="collapse" href="#test1"></a>')
.appendTo($('#qunit-fixture')) .appendTo($('#qunit-fixture'))
.on('hide.bs.collapse', function () {
ok(target.hasClass('collapsed'))
start()
})
target.click() var collapsible = $('<div id="test1" class="in"></div>')
.appendTo($('#qunit-fixture'))
.on('hide.bs.collapse', function () {
ok(target.hasClass('collapsed'))
start()
}) })
test('should remove active class from inactive accordion targets', function () { target.click()
$.support.transition = false })
stop()
var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') test('should remove active class from inactive accordion targets', function () {
.appendTo($('#qunit-fixture')) $.support.transition = false
stop()
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>') var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo(accordion.find('.accordion-group').eq(0)) .appendTo($('#qunit-fixture'))
var collapsible1 = $('<div id="body1" class="in"></div>') var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0)) .appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>') var collapsible1 = $('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(1)) .appendTo(accordion.find('.accordion-group').eq(0))
var collapsible2 = $('<div id="body2"></div>') var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1)) .appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>') var collapsible2 = $('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo(accordion.find('.accordion-group').eq(1))
var collapsible3 = $('<div id="body3"></div>') var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
start() var collapsible3 = $('<div id="body3"></div>')
}) .appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
target3.click() start()
}) })
test('should allow dots in data-parent', function () { target3.click()
$.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>') test('should allow dots in data-parent', function () {
.appendTo($('#qunit-fixture')) $.support.transition = false
stop()
var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>') var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
.appendTo(accordion.find('.accordion-group').eq(0)) .appendTo($('#qunit-fixture'))
var collapsible1 = $('<div id="body1" class="in"></div>') var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(0)) .appendTo(accordion.find('.accordion-group').eq(0))
var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>') var collapsible1 = $('<div id="body1" class="in"></div>')
.appendTo(accordion.find('.accordion-group').eq(1)) .appendTo(accordion.find('.accordion-group').eq(0))
var collapsible2 = $('<div id="body2"></div>') var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(1)) .appendTo(accordion.find('.accordion-group').eq(1))
var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>') var collapsible2 = $('<div id="body2"></div>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo(accordion.find('.accordion-group').eq(1))
var collapsible3 = $('<div id="body3"></div>') var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
.appendTo(accordion.find('.accordion-group').eq(2)) .appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
start() var collapsible3 = $('<div id="body3"></div>')
}) .appendTo(accordion.find('.accordion-group').eq(2))
.on('show.bs.collapse', function () {
ok(target1.hasClass('collapsed'))
ok(target2.hasClass('collapsed'))
ok(!target3.hasClass('collapsed'))
target3.click() start()
}) })
target3.click()
})
}) })
js/tests/unit/dropdown.js
View file @ 895b0006
$(function () { $(function () {
module('dropdowns') module('dropdowns')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var dropdown = $.fn.dropdown.noConflict() var dropdown = $.fn.dropdown.noConflict()
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)') ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
$.fn.dropdown = dropdown $.fn.dropdown = dropdown
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).dropdown, 'dropdown method is defined') ok($(document.body).dropdown, 'dropdown method is defined')
}) })
test('should return element', function () { test('should return element', function () {
var el = $('<div />') var el = $('<div />')
ok(el.dropdown()[0] === el[0], 'same element returned') ok(el.dropdown()[0] === el[0], 'same element returned')
}) })
test('should not open dropdown if target is disabled', function () { test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' + var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' + '<li class="dropdown">' +
'<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' + '<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' + '<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' + '<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' + '<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' + '<li><a href="#">Another link</a></li>' +
'</ul>' + '</ul>' +
'</li>' + '</li>' +
'</ul>', '</ul>',
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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 () { test('should not open dropdown if target is disabled', function () {
var dropdownHTML = '<ul class="tabs">' + var dropdownHTML = '<ul class="tabs">' +
'<li class="dropdown">' + '<li class="dropdown">' +
'<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +
'<ul class="dropdown-menu">' + '<ul class="dropdown-menu">' +
'<li><a href="#">Secondary link</a></li>' + '<li><a href="#">Secondary link</a></li>' +
'<li><a href="#">Something else here</a></li>' + '<li><a href="#">Something else here</a></li>' +
'<li class="divider"></li>' + '<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' + '<li><a href="#">Another link</a></li>' +
'</ul>' + '</ul>' +
'</li>' + '</li>' +
'</ul>', '</ul>',
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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>',
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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>',
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
.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()
})
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>',
dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]'),
first = dropdowns.first(),
last = dropdowns.last()
ok(dropdowns.length == 2, 'Should be 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')
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('')
})
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>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('show.bs.dropdown', function () {
ok(true, 'show was called')
}) })
.bind('hide.bs.dropdown', function () {
test('should add class open to menu if clicked', function () { ok(true, 'hide was called')
var dropdownHTML = '<ul class="tabs">' + start()
'<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>',
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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 () { dropdown.click()
var dropdownHTML = '<ul class="tabs">' + $(document.body).click()
'<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>' + test('should fire shown and hiden event', function () {
'<li><a href="#">Something else here</a></li>' + var dropdownHTML = '<ul class="tabs">' +
'<li class="divider"></li>' + '<li class="dropdown">' +
'<li><a href="#">Another link</a></li>' + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
'</ul>' + '<ul class="dropdown-menu">' +
'</li>' + '<li><a href="#">Secondary link</a></li>' +
'</ul>', '<li><a href="#">Something else here</a></li>' +
dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() '<li class="divider"></li>' +
'<li><a href="#">Another link</a></li>' +
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') '</ul>' +
'</li>' +
'</ul>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('shown.bs.dropdown', function () {
ok(true, 'show was called')
}) })
.bind('hidden.bs.dropdown', function () {
ok(true, 'hide was called')
test('should remove open class if body clicked', function () { start()
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>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
.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()
})
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>',
dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]'),
first = dropdowns.first(),
last = dropdowns.last()
ok(dropdowns.length == 2, 'Should be 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')
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('')
}) })
test('should fire show and hide event', function () { dropdown.click()
var dropdownHTML = '<ul class="tabs">' + $(document.body).click()
'<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>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('show.bs.dropdown', function () {
ok(true, 'show was called')
})
.bind('hide.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
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>',
dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]')
.dropdown()
stop()
dropdown
.parent('.dropdown')
.bind('shown.bs.dropdown', function () {
ok(true, 'show was called')
})
.bind('hidden.bs.dropdown', function () {
ok(true, 'hide was called')
start()
})
dropdown.click()
$(document.body).click()
})
}) })
js/tests/unit/modal.js
View file @ 895b0006
...@@ -2,194 +2,194 @@ $(function () { ...@@ -2,194 +2,194 @@ $(function () {
module('modal') module('modal')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var modal = $.fn.modal.noConflict() var modal = $.fn.modal.noConflict()
ok(!$.fn.modal, 'modal was set back to undefined (org value)') ok(!$.fn.modal, 'modal was set back to undefined (org value)')
$.fn.modal = modal $.fn.modal = modal
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
var div = $('<div id="modal-test"></div>') var div = $('<div id="modal-test"></div>')
ok(div.modal, 'modal method is defined') ok(div.modal, 'modal method is defined')
}) })
test('should return element', function () { test('should return element', function () {
var div = $('<div id="modal-test"></div>') var div = $('<div id="modal-test"></div>')
ok(div.modal() == div, 'document.body returned') ok(div.modal() == div, 'document.body returned')
$('#modal-test').remove() $('#modal-test').remove()
}) })
test('should expose defaults var for settings', function () { test('should expose defaults var for settings', function () {
ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed') ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
}) })
test('should insert into dom when show method is called', function () { test('should insert into dom when show method is called', function () {
stop() stop()
$.support.transition = false $.support.transition = false
$('<div id="modal-test"></div>') $('<div id="modal-test"></div>')
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal inserted into dom') ok($('#modal-test').length, 'modal inserted into dom')
$(this).remove() $(this).remove()
start()
})
.modal('show')
})
test('should fire show event', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function () {
ok(true, 'show was called')
})
.on('shown.bs.modal', function () {
$(this).remove()
start()
})
.modal('show')
})
test('should not fire shown when default prevented', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function (e) {
e.preventDefault()
ok(true, 'show was called')
start()
})
.on('shown.bs.modal', function () {
ok(false, 'shown was called')
})
.modal('show')
})
test('should hide modal when hide is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
$(this).modal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start()
})
.modal('show')
})
test('should toggle when toggle is called', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>')
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.modal('toggle')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('toggle')
})
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
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('toggle')
})
test('should allow modal close with "backdrop:false"', function () {
stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
div.modal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').click()
})
.bind('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
triggered = 0
$('#modal-test').click()
})
.bind('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
$('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden')
})
.one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () {
start() start()
}) }).modal('show')
.modal('show') })
}) .modal('show')
test('should fire show event', function () { div.remove()
stop() })
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function () {
ok(true, 'show was called')
})
.on('shown.bs.modal', function () {
$(this).remove()
start()
})
.modal('show')
})
test('should not fire shown when default prevented', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('show.bs.modal', function (e) {
e.preventDefault()
ok(true, 'show was called')
start()
})
.on('shown.bs.modal', function () {
ok(false, 'shown was called')
})
.modal('show')
})
test('should hide modal when hide is called', function () {
stop()
$.support.transition = false
$('<div id="modal-test"></div>')
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
$(this).modal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
$('#modal-test').remove()
start()
})
.modal('show')
})
test('should toggle when toggle is called', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"></div>')
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.modal('toggle')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('toggle')
})
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
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
ok($('#modal-test').length, 'modal inserted into dom')
div.find('.close').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('toggle')
})
test('should allow modal close with "backdrop:false"', function () {
stop()
$.support.transition = false
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
div
.on('shown.bs.modal', function () {
ok($('#modal-test').is(':visible'), 'modal visible')
div.modal('hide')
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
ok($('#modal-test').length, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
$('#modal-test').click()
})
.bind('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
div.remove()
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
triggered = 0
$('#modal-test').click()
})
.bind('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
start()
})
.modal('show')
})
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
.bind('shown.bs.modal', function () {
$('#close').click()
ok(!$('#modal-test').is(':visible'), 'modal hidden')
})
.one('hidden.bs.modal', function () {
div.one('hidden.bs.modal', function () {
start()
}).modal('show')
})
.modal('show')
div.remove()
})
}) })
js/tests/unit/popover.js
View file @ 895b0006
$(function () { $(function () {
module('popover') module('popover')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var popover = $.fn.popover.noConflict() var popover = $.fn.popover.noConflict()
ok(!$.fn.popover, 'popover was set back to undefined (org value)') ok(!$.fn.popover, 'popover was set back to undefined (org value)')
$.fn.popover = popover $.fn.popover = popover
})
test('should be defined on jquery object', function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
})
test('should return element', function () {
var div = $('<div></div>')
ok(div.popover() == div, 'document.body returned')
})
test('should render popover element', function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.appendTo('#qunit-fixture')
.popover('show')
ok($('.popover').length, 'popover was inserted')
popover.popover('hide')
ok(!$('.popover').length, '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>')
.popover()
ok(!!popover.data('bs.popover'), 'popover instance exists')
})
test('should get title and content from options', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.popover({
title: function () {
return '@fat'
},
content: function () {
return 'loves writing tests （╯°□°）╯︵ ┻━┻'
}
}) })
test('should be defined on jquery object', function () { popover.popover('show')
var div = $('<div></div>')
ok(div.popover, 'popover method is defined') ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
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>')
.appendTo('#qunit-fixture')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
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>')
.appendTo('#qunit-fixture')
.popover({
title: 'ignored title option',
content: 'ignored content option'
}) })
.popover('show')
test('should return element', function () {
var div = $('<div></div>') ok($('.popover').length, 'popover was inserted')
ok(div.popover() == div, 'document.body returned') equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should respect custom classes', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.popover({
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>'
}) })
test('should render popover element', function () { popover.popover('show')
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>') ok($('.popover').length, 'popover was inserted')
.appendTo('#qunit-fixture') ok($('.popover').hasClass('foobar'), 'custom class is present')
.popover('show')
popover.popover('hide')
ok($('.popover').length, 'popover was inserted') ok(!$('.popover').length, 'popover was removed')
popover.popover('hide') $('#qunit-fixture').empty()
ok(!$('.popover').length, 'popover removed') })
})
test('should destroy popover', function () {
test('should store popover instance in popover data object', function () { var popover = $('<div/>').popover({trigger: 'hover'}).on('click.foo', function () {})
$.support.transition = false ok(popover.data('bs.popover'), 'popover has data')
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>') ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
.popover() ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
popover.popover('show')
ok(!!popover.data('bs.popover'), 'popover instance exists') popover.popover('destroy')
}) ok(!popover.hasClass('in'), 'popover is hidden')
ok(!popover.data('popover'), 'popover does not have data')
test('should get title and content from options', function () { ok($._data(popover[0],'events').click[0].namespace == 'foo', 'popover still has click.foo')
$.support.transition = false ok(!$._data(popover[0], 'events').mouseover && !$._data(popover[0], 'events').mouseout, 'popover does not have any events')
var popover = $('<a href="#">@fat</a>') })
.appendTo('#qunit-fixture')
.popover({
title: function () {
return '@fat'
},
content: function () {
return 'loves writing tests （╯°□°）╯︵ ┻━┻'
}
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
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>')
.appendTo('#qunit-fixture')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
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>')
.appendTo('#qunit-fixture')
.popover({
title: 'ignored title option',
content: 'ignored content option'
})
.popover('show')
ok($('.popover').length, 'popover was inserted')
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
equal($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should respect custom classes', function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-fixture')
.popover({
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>'
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
ok($('.popover').hasClass('foobar'), 'custom class is present')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-fixture').empty()
})
test('should destroy popover', function () {
var popover = $('<div/>').popover({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.popover('show')
popover.popover('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')
})
}) })
js/tests/unit/scrollspy.js
View file @ 895b0006
$(function () { $(function () {
module('scrollspy') module('scrollspy')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var scrollspy = $.fn.scrollspy.noConflict() var scrollspy = $.fn.scrollspy.noConflict()
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)') ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
$.fn.scrollspy = scrollspy $.fn.scrollspy = scrollspy
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).scrollspy, 'scrollspy method is defined') ok($(document.body).scrollspy, 'scrollspy method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned') ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
}) })
test('should switch active class on scroll', function () { test('should switch active class on scroll', function () {
var sectionHTML = '<div id="masthead"></div>' var sectionHTML = '<div id="masthead"></div>',
$section = $(sectionHTML).append('#qunit-fixture'), $section = $(sectionHTML).append('#qunit-fixture'),
topbarHTML = '<div class="topbar">' + topbarHTML = '<div class="topbar">' +
'<div class="topbar-inner">' + '<div class="topbar-inner">' +
'<div class="container">' + '<div class="container">' +
'<h3><a href="#">Bootstrap</a></h3>' + '<h3><a href="#">Bootstrap</a></h3>' +
'<li><a href="#masthead">Overview</a></li>' + '<li><a href="#masthead">Overview</a></li>' +
'</ul>' + '</ul>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>', '</div>',
$topbar = $(topbarHTML).scrollspy() $topbar = $(topbarHTML).scrollspy()
ok($topbar.find('.active', true)) ok($topbar.find('.active', true))
}) })
}) })
js/tests/unit/tab.js
View file @ 895b0006
$(function () { $(function () {
module('tabs') module('tabs')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var tab = $.fn.tab.noConflict() var tab = $.fn.tab.noConflict()
ok(!$.fn.tab, 'tab was set back to undefined (org value)') ok(!$.fn.tab, 'tab was set back to undefined (org value)')
$.fn.tab = tab $.fn.tab = tab
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
ok($(document.body).tab, 'tabs method is defined') ok($(document.body).tab, 'tabs method is defined')
}) })
test('should return element', function () { test('should return element', function () {
ok($(document.body).tab()[0] == document.body, 'document.body returned') ok($(document.body).tab()[0] == document.body, 'document.body returned')
}) })
test('should activate element by tab id', function () { test('should activate element by tab id', function () {
var tabsHTML = '<ul class="tabs">' + var tabsHTML = '<ul class="tabs">' +
'<li><a href="#home">Home</a></li>' + '<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' + '<li><a href="#profile">Profile</a></li>' +
'</ul>' '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture') $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$(tabsHTML).find('li:last a').tab('show') $(tabsHTML).find('li:last a').tab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile') equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
$(tabsHTML).find('li:first a').tab('show') $(tabsHTML).find('li:first a').tab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'home') equal($('#qunit-fixture').find('.active').attr('id'), 'home')
}) })
test('should activate element by tab id', function () { test('should activate element by tab id', function () {
var pillsHTML = '<ul class="pills">' + var pillsHTML = '<ul class="pills">' +
'<li><a href="#home">Home</a></li>' + '<li><a href="#home">Home</a></li>' +
'<li><a href="#profile">Profile</a></li>' + '<li><a href="#profile">Profile</a></li>' +
'</ul>' '</ul>'
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture') $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
$(pillsHTML).find('li:last a').tab('show') $(pillsHTML).find('li:last a').tab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'profile') equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
$(pillsHTML).find('li:first a').tab('show') $(pillsHTML).find('li:first a').tab('show')
equal($('#qunit-fixture').find('.active').attr('id'), 'home') equal($('#qunit-fixture').find('.active').attr('id'), 'home')
}) })
test('should not fire closed when close is prevented', function () { test('should not fire closed when close is prevented', function () {
$.support.transition = false $.support.transition = false
stop(); stop();
$('<div class="tab"/>') $('<div class="tab"/>')
.on('show.bs.tab', function (e) { .on('show.bs.tab', function (e) {
e.preventDefault(); e.preventDefault();
ok(true); ok(true);
start(); start();
})
.on('shown.bs.tab', function () {
ok(false);
})
.tab('show')
}) })
.on('shown.bs.tab', function () {
test('show and shown events should reference correct relatedTarget', function () { ok(false);
var dropHTML = '<ul class="drop">' + })
'<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' + .tab('show')
'<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>' + test('show and shown events should reference correct relatedTarget', function () {
'</ul>' + var dropHTML = '<ul class="drop">' +
'</li>' + '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
'</ul>' '<ul class="dropdown-menu">' +
'<li><a href="#1-1" data-toggle="tab">1-1</a></li>' +
$(dropHTML).find('ul>li:first a').tab('show').end() '<li><a href="#1-2" data-toggle="tab">1-2</a></li>' +
.find('ul>li:last a') '</ul>' +
.on('show.bs.tab', function (event) { '</li>' +
equal(event.relatedTarget.hash, '#1-1') '</ul>'
})
.on('show.bs.tab', function (event) { $(dropHTML).find('ul>li:first a').tab('show').end()
equal(event.relatedTarget.hash, '#1-1') .find('ul>li:last a')
}) .on('show.bs.tab', function (event) {
.tab('show') equal(event.relatedTarget.hash, '#1-1')
})
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
}) })
.tab('show')
})
}) })
js/tests/unit/tooltip.js
View file @ 895b0006
$(function () { $(function () {
module('tooltip') module('tooltip')
test('should provide no conflict', function () { test('should provide no conflict', function () {
var tooltip = $.fn.tooltip.noConflict() var tooltip = $.fn.tooltip.noConflict()
ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)') ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
$.fn.tooltip = tooltip $.fn.tooltip = tooltip
}) })
test('should be defined on jquery object', function () { test('should be defined on jquery object', function () {
var div = $('<div></div>') var div = $('<div></div>')
ok(div.tooltip, 'popover method is defined') ok(div.tooltip, 'popover method is defined')
}) })
test('should return element', function () { test('should return element', function () {
var div = $('<div></div>') var div = $('<div></div>')
ok(div.tooltip() == div, 'document.body returned') ok(div.tooltip() == div, 'document.body returned')
}) })
test('should expose default settings', function () { test('should expose default settings', function () {
ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined') ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')
}) })
test('should empty title attribute', function () { test('should empty title attribute', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
ok(tooltip.attr('title') === '', 'title attribute was emptied') ok(tooltip.attr('title') === '', 'title attribute was emptied')
}) })
test('should add data attribute for referencing original title', function () { test('should add data attribute for referencing original title', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute') equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
}) })
test('should place tooltips relative to placement option', function () { test('should place tooltips relative to placement option', function () {
$.support.transition = false $.support.transition = false
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({placement: 'bottom'}) .tooltip({placement: 'bottom'})
.tooltip('show') .tooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
tooltip.tooltip('hide') tooltip.tooltip('hide')
}) })
test('should allow html entities', function () { test('should allow html entities', function () {
$.support.transition = false $.support.transition = false
var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({html: true}) .tooltip({html: true})
.tooltip('show') .tooltip('show')
ok($('.tooltip b').length, 'b tag was inserted') ok($('.tooltip b').length, 'b tag was inserted')
tooltip.tooltip('hide') tooltip.tooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed') ok(!$('.tooltip').length, 'tooltip removed')
}) })
test('should respect custom classes', function () { test('should respect custom classes', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
.tooltip('show') .tooltip('show')
ok($('.tooltip').hasClass('some-class'), 'custom class is present') ok($('.tooltip').hasClass('some-class'), 'custom class is present')
tooltip.tooltip('hide') tooltip.tooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed') ok(!$('.tooltip').length, 'tooltip removed')
}) })
test('should fire show event', function () { test('should fire show event', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('show.bs.tooltip', function () { .on('show.bs.tooltip', function () {
ok(true, 'show was called') ok(true, 'show was called')
start() start()
}) })
.tooltip('show') .tooltip('show')
}) })
test('should fire shown event', function () { test('should fire shown event', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
ok(true, 'shown was called') ok(true, 'shown was called')
start() start()
}) })
.tooltip('show') .tooltip('show')
}) })
test('should not fire shown event when default prevented', function () { test('should not fire shown event when default prevented', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('show.bs.tooltip', function (e) { .on('show.bs.tooltip', function (e) {
e.preventDefault() e.preventDefault()
ok(true, 'show was called') ok(true, 'show was called')
start() start()
}) })
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
ok(false, 'shown was called') ok(false, 'shown was called')
}) })
.tooltip('show') .tooltip('show')
}) })
test('should fire hide event', function () { test('should fire hide event', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
$(this).tooltip('hide') $(this).tooltip('hide')
}) })
.on('hide.bs.tooltip', function () { .on('hide.bs.tooltip', function () {
ok(true, 'hide was called') ok(true, 'hide was called')
start() start()
}) })
.tooltip('show') .tooltip('show')
}) })
test('should fire hidden event', function () { test('should fire hidden event', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
$(this).tooltip('hide') $(this).tooltip('hide')
}) })
.on('hidden.bs.tooltip', function () { .on('hidden.bs.tooltip', function () {
ok(true, 'hidden was called') ok(true, 'hidden was called')
start() start()
}) })
.tooltip('show') .tooltip('show')
}) })
test('should not fire hidden event when default prevented', function () { test('should not fire hidden event when default prevented', function () {
stop() stop()
var tooltip = $('<div title="tooltip title"></div>') var tooltip = $('<div title="tooltip title"></div>')
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
$(this).tooltip('hide') $(this).tooltip('hide')
}) })
.on('hide.bs.tooltip', function (e) { .on('hide.bs.tooltip', function (e) {
e.preventDefault() e.preventDefault()
ok(true, 'hide was called') ok(true, 'hide was called')
start() start()
}) })
.on('hidden.bs.tooltip', function () { .on('hidden.bs.tooltip', function () {
ok(false, 'hidden was called') ok(false, 'hidden was called')
}) })
.tooltip('show') .tooltip('show')
}) })
test('should not show tooltip if leave event occurs before delay expires', function () { test('should not show tooltip if leave event occurs before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({ delay: 200 }) .tooltip({ delay: 200 })
stop() stop()
tooltip.trigger('mouseenter') tooltip.trigger('mouseenter')
setTimeout(function () { setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout') tooltip.trigger('mouseout')
setTimeout(function () { setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start() start()
}, 200) }, 200)
}, 100) }, 100)
}) })
test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () { test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({ delay: { show: 200, hide: 0} }) .tooltip({ delay: { show: 200, hide: 0} })
stop() stop()
tooltip.trigger('mouseenter') tooltip.trigger('mouseenter')
setTimeout(function () { setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
tooltip.trigger('mouseout') tooltip.trigger('mouseout')
setTimeout(function () { setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start() start()
}, 200) }, 200)
}, 100) }, 100)
}) })
test('should wait 200 ms before hiding the tooltip', 3, function () { test('should wait 200 ms before hiding the tooltip', 3, function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({ delay: { show: 0, hide: 200} }) .tooltip({ delay: { show: 0, hide: 200} })
stop() stop()
tooltip.trigger('mouseenter') tooltip.trigger('mouseenter')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
tooltip.trigger('mouseout')
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
setTimeout(function () { setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in') ok(!$('.tooltip').is('.in'), 'tooltip removed')
tooltip.trigger('mouseout') start()
setTimeout(function () { }, 150)
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in') }, 100)
setTimeout(function () { }, 1)
ok(!$('.tooltip').is('.in'), 'tooltip removed') })
start()
}, 150)
}, 100)
}, 1)
})
test('should not hide tooltip if leave event occurs, then tooltip is show immediately again', function () { test('should not hide tooltip if leave event occurs, then tooltip is show immediately again', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.tooltip({ delay: { show: 0, hide: 200} }) .tooltip({ delay: { show: 0, hide: 200} })
stop() stop()
tooltip.trigger('mouseenter') tooltip.trigger('mouseenter')
setTimeout(function () { setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in') ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
tooltip.trigger('mouseout') tooltip.trigger('mouseout')
setTimeout(function () { setTimeout(function () {
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in') ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
tooltip.trigger('mouseenter')
setTimeout(function () {
ok($('.tooltip').is('.in'), 'tooltip removed')
start()
}, 150)
}, 100)
}, 1)
})
test('should not show tooltip if leave event occurs before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.tooltip({ delay: 100 })
stop()
tooltip.trigger('mouseenter') tooltip.trigger('mouseenter')
setTimeout(function () { setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') ok($('.tooltip').is('.in'), 'tooltip removed')
tooltip.trigger('mouseout')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
start()
}, 100)
}, 50)
})
test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.tooltip({ delay: 150 })
stop()
tooltip.trigger('mouseenter')
setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
}, 100)
setTimeout(function () {
ok($('.tooltip').is('.fade.in'), 'tooltip has faded in')
start() start()
}, 200) }, 150)
}) }, 100)
}, 1)
test('should destroy tooltip', function () { })
var tooltip = $('<div/>').tooltip().on('click.foo', function () {})
ok(tooltip.data('bs.tooltip'), 'tooltip has data') test('should not show tooltip if leave event occurs before delay expires', function () {
ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') .appendTo('#qunit-fixture')
tooltip.tooltip('show') .tooltip({ delay: 100 })
tooltip.tooltip('destroy') stop()
ok(!tooltip.hasClass('in'), 'tooltip is hidden') tooltip.trigger('mouseenter')
ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data') setTimeout(function () {
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo') ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events') tooltip.trigger('mouseout')
}) setTimeout(function () {
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
test('should show tooltip with delegate selector on click', function () { start()
var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>') }, 100)
var tooltip = div.appendTo('#qunit-fixture') }, 50)
.tooltip({ selector: 'a[rel=tooltip]', })
trigger: 'click' })
div.find('a').trigger('click') test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in') var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
}) .appendTo('#qunit-fixture')
.tooltip({ delay: 150 })
test('should show tooltip when toggle is called', function () { stop()
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>') tooltip.trigger('mouseenter')
.appendTo('#qunit-fixture') setTimeout(function () {
.tooltip({trigger: 'manual'}) ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
.tooltip('toggle') }, 100)
ok($('.tooltip').is('.fade.in'), 'tooltip should be toggled in') setTimeout(function () {
}) ok($('.tooltip').is('.fade.in'), 'tooltip has faded in')
start()
test('should place tooltips inside the body', function () { }, 200)
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') })
.appendTo('#qunit-fixture')
.tooltip({container: 'body'}) test('should destroy tooltip', function () {
.tooltip('show') var tooltip = $('<div/>').tooltip().on('click.foo', function () {})
ok($('body > .tooltip').length, 'inside the body') ok(tooltip.data('bs.tooltip'), 'tooltip has data')
ok(!$('#qunit-fixture > .tooltip').length, 'not found in parent') ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
tooltip.tooltip('hide') ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
}) tooltip.tooltip('show')
tooltip.tooltip('destroy')
test('should place tooltip inside window', function () { ok(!tooltip.hasClass('in'), 'tooltip is hidden')
var container = $('<div />').appendTo('body') ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
.css({position: 'absolute', width: 200, height: 200, bottom: 0, left: 0}), ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo')
tooltip = $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>') ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
.css({position: 'absolute', top: 0, left: 0}) })
test('should show tooltip with delegate selector on click', function () {
var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
var tooltip = div.appendTo('#qunit-fixture')
.tooltip({ selector: 'a[rel=tooltip]',
trigger: 'click' })
div.find('a').trigger('click')
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
})
test('should show tooltip when toggle is called', function () {
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
.appendTo('#qunit-fixture')
.tooltip({trigger: 'manual'})
.tooltip('toggle')
ok($('.tooltip').is('.fade.in'), 'tooltip should be toggled in')
})
test('should place tooltips inside the body', function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.tooltip({container: 'body'})
.tooltip('show')
ok($('body > .tooltip').length, 'inside the body')
ok(!$('#qunit-fixture > .tooltip').length, 'not found in parent')
tooltip.tooltip('hide')
})
test('should place tooltip inside window', function () {
var container = $('<div />').appendTo('body')
.css({position: 'absolute', width: 200, height: 200, bottom: 0, left: 0}),
tooltip = $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>')
.css({position: 'absolute', top: 0, left: 0})
.appendTo(container)
.tooltip({placement: 'top', animate: false})
.tooltip('show')
stop()
setTimeout(function () {
ok($('.tooltip').offset().left >= 0)
start()
container.remove()
}, 100)
})
test('should place tooltip on top of element', function () {
var container = $('<div />').appendTo('body')
.css({position: 'absolute', bottom: 0, left: 0, textAlign: 'right', width: 300, height: 300}),
p = $('<p style="margin-top:200px" />').appendTo(container),
tooltiped = $('<a href="#" title="very very very very very very very long tooltip">Hover me</a>')
.css({marginTop: 200})
.appendTo(p)
.tooltip({placement: 'top', animate: false})
.tooltip('show')
stop()
setTimeout(function () {
var tooltip = container.find('.tooltip')
start()
ok(Math.round(tooltip.offset().top + tooltip.outerHeight()) <= Math.round(tooltiped.offset().top))
container.remove()
}, 100)
})
test('should add position class before positioning so that position-specific styles are taken into account', function () {
$('head').append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
var container = $('<div />').appendTo('body'),
target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
.appendTo(container) .appendTo(container)
.tooltip({placement: 'top', animate: false}) .tooltip({placement: 'right'})
.tooltip('show') .tooltip('show'),
tooltip = container.find('.tooltip')
stop()
// this is some dumb hack shit because sub pixels in firefox
setTimeout(function () { var top = Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2))
ok($('.tooltip').offset().left >= 0) var top2 = Math.round(tooltip.offset().top)
var topDiff = top - top2
start() ok(topDiff <= 1 && topDiff >= -1)
container.remove() target.tooltip('hide')
}, 100) })
})
test('tooltip title test #1', function () {
test('should place tooltip on top of element', function () { var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
var container = $('<div />').appendTo('body') .appendTo('#qunit-fixture')
.css({position: 'absolute', bottom: 0, left: 0, textAlign: 'right', width: 300, height: 300}), .tooltip({})
p = $('<p style="margin-top:200px" />').appendTo(container), .tooltip('show')
tooltiped = $('<a href="#" title="very very very very very very very long tooltip">Hover me</a>') equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
.css({marginTop: 200}) tooltip.tooltip('hide')
.appendTo(p) ok(!$('.tooltip').length, 'tooltip removed')
.tooltip({placement: 'top', animate: false}) })
.tooltip('show')
test('tooltip title test #2', function () {
stop() var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture')
setTimeout(function () { .tooltip({
var tooltip = container.find('.tooltip') title: 'This is a tooltip with some content'
})
start() .tooltip('show')
ok(Math.round(tooltip.offset().top + tooltip.outerHeight()) <= Math.round(tooltiped.offset().top)) equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
container.remove() tooltip.tooltip('hide')
}, 100) ok(!$('.tooltip').length, 'tooltip removed')
}) })
test('should add position class before positioning so that position-specific styles are taken into account', function () { test('tooltip title test #3', function () {
$('head').append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>') var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture')
var container = $('<div />').appendTo('body'), .tooltip({
target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>') title: 'This is a tooltip with some content'
.appendTo(container) })
.tooltip({placement: 'right'}) .tooltip('show')
.tooltip('show'), equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
tooltip = container.find('.tooltip') tooltip.tooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed')
// this is some dumb hack shit because sub pixels in firefox })
var top = Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2))
var top2 = Math.round(tooltip.offset().top) test('tooltips should be placed dynamically, with the dynamic placement option', function () {
var topDiff = top - top2 $.support.transition = false
ok(topDiff <= 1 && topDiff >= -1) var ttContainer = $('<div id="dynamic-tt-test"/>').css({
target.tooltip('hide') 'height' : 400,
}) 'overflow' : 'hidden',
'position' : 'absolute',
test('tooltip title test #1', function () { 'top' : 0,
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') 'left' : 0,
.appendTo('#qunit-fixture') 'width' : 600
.tooltip({ })
}) .appendTo('body')
.tooltip('show')
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
tooltip.tooltip('hide') .appendTo('#dynamic-tt-test')
ok(!$('.tooltip').length, 'tooltip removed') .tooltip({placement: 'auto'})
}) .tooltip('show')
test('tooltip title test #2', function () { ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
.appendTo('#qunit-fixture') topTooltip.tooltip('hide')
.tooltip({
title: 'This is a tooltip with some content' var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
}) .appendTo('#dynamic-tt-test')
.tooltip('show') .tooltip({placement: 'right auto'})
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option') .tooltip('show')
tooltip.tooltip('hide')
ok(!$('.tooltip').length, 'tooltip removed') ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
}) rightTooltip.tooltip('hide')
test('tooltip title test #3', function () { var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') .appendTo('#dynamic-tt-test')
.appendTo('#qunit-fixture') .tooltip({placement: 'auto left'})
.tooltip({ .tooltip('show')
title: 'This is a tooltip with some content'
}) ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
.tooltip('show') leftTooltip.tooltip('hide')
equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
tooltip.tooltip('hide') ttContainer.remove()
ok(!$('.tooltip').length, 'tooltip removed') })
})
test('tooltips should be placed dynamically, with the dynamic placement option', function () {
$.support.transition = false
var ttContainer = $('<div id="dynamic-tt-test"/>').css({
'height' : 400,
'overflow' : 'hidden',
'position' : 'absolute',
'top' : 0,
'left' : 0,
'width' : 600})
.appendTo('body')
var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto'})
.tooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
topTooltip.tooltip('hide')
var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'right auto'})
.tooltip('show')
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
rightTooltip.tooltip('hide')
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto left'})
.tooltip('show')
ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
leftTooltip.tooltip('hide')
ttContainer.remove()
})
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment