diff options
author | XhmikosR <xhmikosr@users.sourceforge.net> | 2014-02-13 11:55:12 +0400 |
---|---|---|
committer | XhmikosR <xhmikosr@users.sourceforge.net> | 2014-02-14 13:02:03 +0400 |
commit | 895b0006b9adbaf3c56953d2ab2967aa85071086 (patch) | |
tree | d62d89d0b09e50c6a50339120795b40eff0dffa6 | |
parent | accc95ccd63f8aa903fa07bea55ef34794d84cc5 (diff) |
Re-indent test files.
-rw-r--r-- | js/.jshintrc | 1 | ||||
-rw-r--r-- | js/tests/unit/affix.js | 90 | ||||
-rw-r--r-- | js/tests/unit/alert.js | 112 | ||||
-rw-r--r-- | js/tests/unit/button.js | 236 | ||||
-rw-r--r-- | js/tests/unit/carousel.js | 184 | ||||
-rw-r--r-- | js/tests/unit/collapse.js | 250 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 416 | ||||
-rw-r--r-- | js/tests/unit/modal.js | 378 | ||||
-rw-r--r-- | js/tests/unit/popover.js | 248 | ||||
-rw-r--r-- | js/tests/unit/scrollspy.js | 54 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 134 | ||||
-rw-r--r-- | js/tests/unit/tooltip.js | 838 |
12 files changed, 1471 insertions, 1470 deletions
diff --git a/js/.jshintrc b/js/.jshintrc index ab4dfdfc98..ec49259641 100644 --- a/js/.jshintrc +++ b/js/.jshintrc @@ -8,6 +8,7 @@ "eqeqeq" : false, "eqnull" : true, "expr" : true, + "indent" : 2, "laxbreak" : true, "quotmark" : "single", "validthis": true diff --git a/js/tests/unit/affix.js b/js/tests/unit/affix.js index 3c8105bceb..b348ecf2b5 100644 --- a/js/tests/unit/affix.js +++ b/js/tests/unit/affix.js @@ -1,50 +1,50 @@ $(function () { - module('affix') - - test('should provide no conflict', function () { - var affix = $.fn.affix.noConflict() - ok(!$.fn.affix, 'affix was set back to undefined (org value)') - $.fn.affix = affix - }) - - test('should be defined on jquery object', function () { - ok($(document.body).affix, 'affix method is defined') - }) - - test('should return element', function () { - ok($(document.body).affix()[0] == document.body, 'document.body returned') - }) - - test('should exit early if element is not visible', function () { - var $affix = $('<div style="display: none"></div>').affix() - $affix.data('bs.affix').checkPosition() - ok(!$affix.hasClass('affix'), 'affix class was not added') + module('affix') + + test('should provide no conflict', function () { + var affix = $.fn.affix.noConflict() + ok(!$.fn.affix, 'affix was set back to undefined (org value)') + $.fn.affix = affix + }) + + test('should be defined on jquery object', function () { + ok($(document.body).affix, 'affix method is defined') + }) + + test('should return element', function () { + ok($(document.body).affix()[0] == document.body, 'document.body returned') + }) + + test('should exit early if element is not visible', function () { + var $affix = $('<div style="display: none"></div>').affix() + $affix.data('bs.affix').checkPosition() + 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 () { - 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() - }) - - setTimeout(function () { - window.scrollTo(0, document.body.scrollHeight) - setTimeout(function () { window.scroll(0,0) }, 0) - },0) - }) + setTimeout(function () { + window.scrollTo(0, document.body.scrollHeight) + setTimeout(function () { window.scroll(0,0) }, 0) + },0) + }) }) diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js index b88b95fee5..755d9d1e55 100644 --- a/js/tests/unit/alert.js +++ b/js/tests/unit/alert.js @@ -1,62 +1,62 @@ $(function () { - module('alert') - - test('should provide no conflict', function () { - var alert = $.fn.alert.noConflict() - ok(!$.fn.alert, 'alert was set back to undefined (org value)') - $.fn.alert = alert - }) - - test('should be defined on jquery object', function () { - ok($(document.body).alert, 'alert method is defined') - }) - - test('should return element', function () { - ok($(document.body).alert()[0] == document.body, 'document.body returned') - }) - - test('should fade element out on clicking .close', function () { - var alertHTML = '<div class="alert-message warning fade in">' + - '<a class="close" href="#" data-dismiss="alert">×</a>' + - '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + - '</div>', - alert = $(alertHTML).alert() - - alert.find('.close').click() - - ok(!alert.hasClass('in'), 'remove .in class on .close click') - }) - - test('should remove element when clicking .close', function () { - $.support.transition = false - - var alertHTML = '<div class="alert-message warning fade in">' + - '<a class="close" href="#" data-dismiss="alert">×</a>' + - '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + - '</div>', - alert = $(alertHTML).appendTo('#qunit-fixture').alert() - - ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom') - - alert.find('.close').click() - - ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom') + module('alert') + + test('should provide no conflict', function () { + var alert = $.fn.alert.noConflict() + ok(!$.fn.alert, 'alert was set back to undefined (org value)') + $.fn.alert = alert + }) + + test('should be defined on jquery object', function () { + ok($(document.body).alert, 'alert method is defined') + }) + + test('should return element', function () { + ok($(document.body).alert()[0] == document.body, 'document.body returned') + }) + + test('should fade element out on clicking .close', function () { + var alertHTML = '<div class="alert-message warning fade in">' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + + '</div>', + alert = $(alertHTML).alert() + + alert.find('.close').click() + + ok(!alert.hasClass('in'), 'remove .in class on .close click') + }) + + test('should remove element when clicking .close', function () { + $.support.transition = false + + var alertHTML = '<div class="alert-message warning fade in">' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + + '</div>', + alert = $(alertHTML).appendTo('#qunit-fixture').alert() + + ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom') + + alert.find('.close').click() + + 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(); }) - - 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 () { - ok(false); - }) - .alert('close') + .on('closed.bs.alert', function () { + ok(false); }) + .alert('close') + }) }) diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 104e8d8577..73420863ce 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -1,122 +1,122 @@ $(function () { - module('button') - - test('should provide no conflict', function () { - var button = $.fn.button.noConflict() - ok(!$.fn.button, 'button was set back to undefined (org value)') - $.fn.button = button - }) - - test('should be defined on jquery object', function () { - ok($(document.body).button, 'button method is defined') - }) - - test('should return element', function () { - ok($(document.body).button()[0] == document.body, 'document.body returned') - }) - - test('should return set state to loading', function () { - var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') - equal(btn.html(), 'mdo', 'btn text equals mdo') - btn.button('loading') - equal(btn.html(), 'fat', 'btn text equals fat') - stop() - setTimeout(function () { - ok(btn.attr('disabled'), 'btn is disabled') - ok(btn.hasClass('disabled'), 'btn has disabled class') - start() - }, 0) - }) - - test('should return reset state', function () { - var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') - equal(btn.html(), 'mdo', 'btn text equals mdo') - btn.button('loading') - equal(btn.html(), 'fat', 'btn text equals fat') - stop() - setTimeout(function () { - ok(btn.attr('disabled'), 'btn is disabled') - ok(btn.hasClass('disabled'), 'btn has disabled class') - start() - stop() - btn.button('reset') - equal(btn.html(), 'mdo', 'btn text equals mdo') - setTimeout(function () { - ok(!btn.attr('disabled'), 'btn is not disabled') - ok(!btn.hasClass('disabled'), 'btn does not have disabled class') - start() - }, 0) - }, 0) - - }) - - test('should toggle active', function () { - var btn = $('<button class="btn">mdo</button>') - ok(!btn.hasClass('active'), 'btn does not have active class') - btn.button('toggle') - ok(btn.hasClass('active'), 'btn has class active') - }) - - test('should toggle active when btn children are clicked', function () { - var btn = $('<button class="btn" data-toggle="button">mdo</button>'), - inner = $('<i></i>') - btn - .append(inner) - .appendTo($('#qunit-fixture')) - ok(!btn.hasClass('active'), 'btn does not have active class') - inner.click() - ok(btn.hasClass('active'), 'btn has class active') - }) - - test('should toggle active when btn children are clicked within btn-group', function () { - var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>'), - btn = $('<button class="btn">fat</button>'), - inner = $('<i></i>') - btngroup - .append(btn.append(inner)) - .appendTo($('#qunit-fixture')) - ok(!btn.hasClass('active'), 'btn does not have active class') - inner.click() - ok(btn.hasClass('active'), 'btn has class active') - }) - - test('should check for closest matching toggle', function () { - var group = '<div class="btn-group" data-toggle="buttons">' + - '<label class="btn btn-primary active">' + - '<input type="radio" name="options" id="option1" checked="true"> Option 1' + - '</label>' + - '<label class="btn btn-primary">' + - '<input type="radio" name="options" id="option2"> Option 2' + - '</label>' + - '<label class="btn btn-primary">' + - '<input type="radio" name="options" id="option3"> Option 3' + - '</label>' + - '</div>' - - group = $(group) - - var btn1 = $(group.children()[0]) - var btn2 = $(group.children()[1]) - var btn3 = $(group.children()[2]) - - group.appendTo($('#qunit-fixture')) - - ok(btn1.hasClass('active'), 'btn1 has active class') - ok(btn1.find('input').prop('checked'), 'btn1 is checked') - ok(!btn2.hasClass('active'), 'btn2 does not have active class') - ok(!btn2.find('input').prop('checked'), 'btn2 is not checked') - btn2.find('input').click() - ok(!btn1.hasClass('active'), 'btn1 does not have active class') - ok(!btn1.find('input').prop('checked'), 'btn1 is checked') - ok(btn2.hasClass('active'), 'btn2 has active class') - ok(btn2.find('input').prop('checked'), 'btn2 is checked') - - btn2.find('input').click() /* clicking an already checked radio should not un-check it */ - ok(!btn1.hasClass('active'), 'btn1 does not have active class') - ok(!btn1.find('input').prop('checked'), 'btn1 is checked') - ok(btn2.hasClass('active'), 'btn2 has active class') - ok(btn2.find('input').prop('checked'), 'btn2 is checked') - }) + module('button') + + test('should provide no conflict', function () { + var button = $.fn.button.noConflict() + ok(!$.fn.button, 'button was set back to undefined (org value)') + $.fn.button = button + }) + + test('should be defined on jquery object', function () { + ok($(document.body).button, 'button method is defined') + }) + + test('should return element', function () { + ok($(document.body).button()[0] == document.body, 'document.body returned') + }) + + test('should return set state to loading', function () { + var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equal(btn.html(), 'mdo', 'btn text equals mdo') + btn.button('loading') + equal(btn.html(), 'fat', 'btn text equals fat') + stop() + setTimeout(function () { + ok(btn.attr('disabled'), 'btn is disabled') + ok(btn.hasClass('disabled'), 'btn has disabled class') + start() + }, 0) + }) + + test('should return reset state', function () { + var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equal(btn.html(), 'mdo', 'btn text equals mdo') + btn.button('loading') + equal(btn.html(), 'fat', 'btn text equals fat') + stop() + setTimeout(function () { + ok(btn.attr('disabled'), 'btn is disabled') + ok(btn.hasClass('disabled'), 'btn has disabled class') + start() + stop() + btn.button('reset') + equal(btn.html(), 'mdo', 'btn text equals mdo') + setTimeout(function () { + ok(!btn.attr('disabled'), 'btn is not disabled') + ok(!btn.hasClass('disabled'), 'btn does not have disabled class') + start() + }, 0) + }, 0) + + }) + + test('should toggle active', function () { + var btn = $('<button class="btn">mdo</button>') + ok(!btn.hasClass('active'), 'btn does not have active class') + btn.button('toggle') + ok(btn.hasClass('active'), 'btn has class active') + }) + + test('should toggle active when btn children are clicked', function () { + var btn = $('<button class="btn" data-toggle="button">mdo</button>'), + inner = $('<i></i>') + btn + .append(inner) + .appendTo($('#qunit-fixture')) + ok(!btn.hasClass('active'), 'btn does not have active class') + inner.click() + ok(btn.hasClass('active'), 'btn has class active') + }) + + test('should toggle active when btn children are clicked within btn-group', function () { + var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>'), + btn = $('<button class="btn">fat</button>'), + inner = $('<i></i>') + btngroup + .append(btn.append(inner)) + .appendTo($('#qunit-fixture')) + ok(!btn.hasClass('active'), 'btn does not have active class') + inner.click() + ok(btn.hasClass('active'), 'btn has class active') + }) + + test('should check for closest matching toggle', function () { + var group = '<div class="btn-group" data-toggle="buttons">' + + '<label class="btn btn-primary active">' + + '<input type="radio" name="options" id="option1" checked="true"> Option 1' + + '</label>' + + '<label class="btn btn-primary">' + + '<input type="radio" name="options" id="option2"> Option 2' + + '</label>' + + '<label class="btn btn-primary">' + + '<input type="radio" name="options" id="option3"> Option 3' + + '</label>' + + '</div>' + + group = $(group) + + var btn1 = $(group.children()[0]) + var btn2 = $(group.children()[1]) + var btn3 = $(group.children()[2]) + + group.appendTo($('#qunit-fixture')) + + ok(btn1.hasClass('active'), 'btn1 has active class') + ok(btn1.find('input').prop('checked'), 'btn1 is checked') + ok(!btn2.hasClass('active'), 'btn2 does not have active class') + ok(!btn2.find('input').prop('checked'), 'btn2 is not checked') + btn2.find('input').click() + ok(!btn1.hasClass('active'), 'btn1 does not have active class') + ok(!btn1.find('input').prop('checked'), 'btn1 is checked') + ok(btn2.hasClass('active'), 'btn2 has active class') + ok(btn2.find('input').prop('checked'), 'btn2 is checked') + + btn2.find('input').click() /* clicking an already checked radio should not un-check it */ + ok(!btn1.hasClass('active'), 'btn1 does not have active class') + ok(!btn1.find('input').prop('checked'), 'btn1 is checked') + ok(btn2.hasClass('active'), 'btn2 has active class') + ok(btn2.find('input').prop('checked'), 'btn2 is checked') + }) }) diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 5edec68adb..6851e17a5e 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -1,110 +1,110 @@ $(function () { - module('carousel') + module('carousel') - test('should provide no conflict', function () { - var carousel = $.fn.carousel.noConflict() - ok(!$.fn.carousel, 'carousel was set back to undefined (org value)') - $.fn.carousel = carousel - }) + test('should provide no conflict', function () { + var carousel = $.fn.carousel.noConflict() + ok(!$.fn.carousel, 'carousel was set back to undefined (org value)') + $.fn.carousel = carousel + }) - test('should be defined on jquery object', function () { - ok($(document.body).carousel, 'carousel method is defined') - }) + test('should be defined on jquery object', function () { + ok($(document.body).carousel, 'carousel method is defined') + }) - test('should return element', function () { - ok($(document.body).carousel()[0] == document.body, 'document.body returned') - }) + test('should return element', function () { + ok($(document.body).carousel()[0] == document.body, 'document.body returned') + }) - test('should not fire slide when slide is prevented', function () { - $.support.transition = false - stop() - $('<div class="carousel"/>') - .on('slide.bs.carousel', function (e) { - e.preventDefault(); - ok(true); - start(); - }) - .on('slid.bs.carousel', function () { - ok(false); - }) - .carousel('next') + test('should not fire slide when slide is prevented', function () { + $.support.transition = false + stop() + $('<div class="carousel"/>') + .on('slide.bs.carousel', function (e) { + e.preventDefault(); + ok(true); + start(); + }) + .on('slid.bs.carousel', function () { + ok(false); }) + .carousel('next') + }) - test('should reset when slide is prevented', function () { - var template = '<div id="carousel-example-generic" class="carousel slide"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>' - var $carousel = $(template) - $.support.transition = false - stop() - $carousel.one('slide.bs.carousel', function (e) { - e.preventDefault() - setTimeout(function () { - ok($carousel.find('.item:eq(0)').is('.active')) - ok($carousel.find('.carousel-indicators li:eq(0)').is('.active')) - $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); - }) + test('should reset when slide is prevented', function () { + var template = '<div id="carousel-example-generic" class="carousel slide"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>' + var $carousel = $(template) + $.support.transition = false + stop() + $carousel.one('slide.bs.carousel', function (e) { + e.preventDefault() + setTimeout(function () { + ok($carousel.find('.item:eq(0)').is('.active')) + ok($carousel.find('.carousel-indicators li:eq(0)').is('.active')) $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 () { - 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">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>' - $.support.transition = false - stop() - $(template).on('slide.bs.carousel', function (e) { - e.preventDefault() - ok(e.direction) - ok(e.direction === 'right' || e.direction === 'left') - start() - }).carousel('next') - }) + test('should fire slide event with direction', function () { + var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>' + $.support.transition = false + stop() + $(template).on('slide.bs.carousel', function (e) { + e.preventDefault() + ok(e.direction) + ok(e.direction === 'right' || e.direction === 'left') + start() + }).carousel('next') + }) - test('should fire slide event with relatedTarget', function () { - var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>' - $.support.transition = false - stop() - $(template) - .on('slide.bs.carousel', function (e) { - e.preventDefault(); - ok(e.relatedTarget); - ok($(e.relatedTarget).hasClass('item')); - start(); - }) - .carousel('next') + test('should fire slide event with relatedTarget', function () { + var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>' + $.support.transition = false + stop() + $(template) + .on('slide.bs.carousel', function (e) { + e.preventDefault(); + ok(e.relatedTarget); + ok($(e.relatedTarget).hasClass('item')); + start(); }) + .carousel('next') + }) - test('should set interval from data attribute', 4, function () { - var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>'); - template.attr('data-interval', 1814); + 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">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>'); + template.attr('data-interval', 1814); - template.appendTo('body'); - $('[data-slide]').first().click(); - ok($('#myCarousel').data('bs.carousel').options.interval == 1814); - $('#myCarousel').remove(); + template.appendTo('body'); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('bs.carousel').options.interval == 1814); + $('#myCarousel').remove(); - template.appendTo('body').attr('data-modal', 'foobar'); - $('[data-slide]').first().click(); - ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set'); - $('#myCarousel').remove(); + template.appendTo('body').attr('data-modal', 'foobar'); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set'); + $('#myCarousel').remove(); - template.appendTo('body'); - $('[data-slide]').first().click(); - $('#myCarousel').attr('data-interval', 1860); - $('[data-slide]').first().click(); - ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on intitialization'); - $('#myCarousel').remove(); + template.appendTo('body'); + $('[data-slide]').first().click(); + $('#myCarousel').attr('data-interval', 1860); + $('[data-slide]').first().click(); + ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on intitialization'); + $('#myCarousel').remove(); - template.attr('data-interval', false); - template.appendTo('body'); - $('#myCarousel').carousel(1); - ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options'); - $('#myCarousel').remove(); - }) + template.attr('data-interval', false); + template.appendTo('body'); + $('#myCarousel').carousel(1); + ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options'); + $('#myCarousel').remove(); + }) }) diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index 10d5aeda6f..133e6eab72 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -1,164 +1,164 @@ $(function () { - module('collapse') - - test('should provide no conflict', function () { - var collapse = $.fn.collapse.noConflict() - ok(!$.fn.collapse, 'collapse was set back to undefined (org value)') - $.fn.collapse = collapse - }) - - test('should be defined on jquery object', function () { - ok($(document.body).collapse, 'collapse method is defined') - }) - - test('should return element', function () { - ok($(document.body).collapse()[0] == document.body, 'document.body returned') - }) - - test('should show a collapsed element', function () { - var el = $('<div class="collapse"></div>').collapse('show') - ok(el.hasClass('in'), 'has class in') - ok(/height/.test(el.attr('style')), 'has height set') + module('collapse') + + test('should provide no conflict', function () { + var collapse = $.fn.collapse.noConflict() + ok(!$.fn.collapse, 'collapse was set back to undefined (org value)') + $.fn.collapse = collapse + }) + + test('should be defined on jquery object', function () { + ok($(document.body).collapse, 'collapse method is defined') + }) + + test('should return element', function () { + ok($(document.body).collapse()[0] == document.body, 'document.body returned') + }) + + test('should show a collapsed element', function () { + var el = $('<div class="collapse"></div>').collapse('show') + ok(el.hasClass('in'), 'has class in') + 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(); }) - - 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') + .on('shown.bs.collapse', function () { + ok(false); }) - - 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 () { - ok(false); - }) - .collapse('show') + .collapse('show') + }) + + test('should reset style to auto after finishing opening collapse', function () { + $.support.transition = false + stop() + $('<div class="collapse" style="height: 0px"/>') + .on('show.bs.collapse', function () { + ok(this.style.height == '0px') }) - - test('should reset style to auto after finishing opening collapse', function () { - $.support.transition = false - stop() - $('<div class="collapse" style="height: 0px"/>') - .on('show.bs.collapse', function () { - ok(this.style.height == '0px') - }) - .on('shown.bs.collapse', function () { - ok(this.style.height == 'auto') - start() - }) - .collapse('show') + .on('shown.bs.collapse', function () { + ok(this.style.height == 'auto') + start() }) + .collapse('show') + }) - test('should add active class to target when collapse shown', function () { - $.support.transition = false - stop() - - var target = $('<a data-toggle="collapse" href="#test1"></a>') - .appendTo($('#qunit-fixture')) + test('should add active class to target when collapse shown', function () { + $.support.transition = false + stop() - var collapsible = $('<div id="test1"></div>') - .appendTo($('#qunit-fixture')) - .on('show.bs.collapse', function () { - ok(!target.hasClass('collapsed')) - start() - }) + var target = $('<a data-toggle="collapse" href="#test1"></a>') + .appendTo($('#qunit-fixture')) - 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 () { - $.support.transition = false - stop() + target.click() + }) - var target = $('<a data-toggle="collapse" href="#test1"></a>') - .appendTo($('#qunit-fixture')) + test('should remove active class to target when collapse hidden', function () { + $.support.transition = false + stop() - var collapsible = $('<div id="test1" class="in"></div>') - .appendTo($('#qunit-fixture')) - .on('hide.bs.collapse', function () { - ok(target.hasClass('collapsed')) - start() - }) + var target = $('<a data-toggle="collapse" href="#test1"></a>') + .appendTo($('#qunit-fixture')) - 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 () { - $.support.transition = false - stop() + target.click() + }) - var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') - .appendTo($('#qunit-fixture')) + test('should remove active class from inactive accordion targets', function () { + $.support.transition = false + stop() - var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(0)) + var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') + .appendTo($('#qunit-fixture')) - var collapsible1 = $('<div id="body1" class="in"></div>') - .appendTo(accordion.find('.accordion-group').eq(0)) + var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(0)) - var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(1)) + var collapsible1 = $('<div id="body1" class="in"></div>') + .appendTo(accordion.find('.accordion-group').eq(0)) - var collapsible2 = $('<div id="body2"></div>') - .appendTo(accordion.find('.accordion-group').eq(1)) + var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(1)) - var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(2)) + var collapsible2 = $('<div id="body2"></div>') + .appendTo(accordion.find('.accordion-group').eq(1)) - 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')) + var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(2)) - 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 () { - $.support.transition = false - stop() + target3.click() + }) - var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') - .appendTo($('#qunit-fixture')) + test('should allow dots in data-parent', function () { + $.support.transition = false + stop() - var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(0)) + var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>') + .appendTo($('#qunit-fixture')) - var collapsible1 = $('<div id="body1" class="in"></div>') - .appendTo(accordion.find('.accordion-group').eq(0)) + var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(0)) - var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(1)) + var collapsible1 = $('<div id="body1" class="in"></div>') + .appendTo(accordion.find('.accordion-group').eq(0)) - var collapsible2 = $('<div id="body2"></div>') - .appendTo(accordion.find('.accordion-group').eq(1)) + var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(1)) - var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>') - .appendTo(accordion.find('.accordion-group').eq(2)) + var collapsible2 = $('<div id="body2"></div>') + .appendTo(accordion.find('.accordion-group').eq(1)) - 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')) + var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>') + .appendTo(accordion.find('.accordion-group').eq(2)) - 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() + }) + }) diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index b358b73878..8597426cde 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -1,218 +1,218 @@ $(function () { - module('dropdowns') - - test('should provide no conflict', function () { - var dropdown = $.fn.dropdown.noConflict() - ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)') - $.fn.dropdown = dropdown - }) - - test('should be defined on jquery object', function () { - ok($(document.body).dropdown, 'dropdown method is defined') - }) - - test('should return element', function () { - var el = $('<div />') - ok(el.dropdown()[0] === el[0], 'same element returned') - }) - - test('should not open dropdown if target is disabled', function () { - var dropdownHTML = '<ul class="tabs">' + - '<li class="dropdown">' + - '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' + - '<ul class="dropdown-menu">' + - '<li><a href="#">Secondary link</a></li>' + - '<li><a href="#">Something else here</a></li>' + - '<li class="divider"></li>' + - '<li><a href="#">Another link</a></li>' + - '</ul>' + - '</li>' + - '</ul>', - dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() - - ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') - }) - - test('should not open dropdown if target is disabled', function () { - var dropdownHTML = '<ul class="tabs">' + - '<li class="dropdown">' + - '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' + - '<ul class="dropdown-menu">' + - '<li><a href="#">Secondary link</a></li>' + - '<li><a href="#">Something else here</a></li>' + - '<li class="divider"></li>' + - '<li><a href="#">Another link</a></li>' + - '</ul>' + - '</li>' + - '</ul>', - dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() - - ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') + module('dropdowns') + + test('should provide no conflict', function () { + var dropdown = $.fn.dropdown.noConflict() + ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)') + $.fn.dropdown = dropdown + }) + + test('should be defined on jquery object', function () { + ok($(document.body).dropdown, 'dropdown method is defined') + }) + + test('should return element', function () { + var el = $('<div />') + ok(el.dropdown()[0] === el[0], 'same element returned') + }) + + test('should not open dropdown if target is disabled', function () { + var dropdownHTML = '<ul class="tabs">' + + '<li class="dropdown">' + + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' + + '<ul class="dropdown-menu">' + + '<li><a href="#">Secondary link</a></li>' + + '<li><a href="#">Something else here</a></li>' + + '<li class="divider"></li>' + + '<li><a href="#">Another link</a></li>' + + '</ul>' + + '</li>' + + '</ul>', + dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() + + ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') + }) + + test('should not open dropdown if target is disabled', function () { + var dropdownHTML = '<ul class="tabs">' + + '<li class="dropdown">' + + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' + + '<ul class="dropdown-menu">' + + '<li><a href="#">Secondary link</a></li>' + + '<li><a href="#">Something else here</a></li>' + + '<li class="divider"></li>' + + '<li><a href="#">Another link</a></li>' + + '</ul>' + + '</li>' + + '</ul>', + dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().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') }) - - 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') + .bind('hide.bs.dropdown', function () { + ok(true, 'hide was called') + start() }) - 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') + 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') }) - - - 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('') + .bind('hidden.bs.dropdown', function () { + ok(true, 'hide was called') + start() }) - 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 () { - 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() - }) + dropdown.click() + $(document.body).click() + }) }) diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 281978142c..b026d18c49 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -2,194 +2,194 @@ $(function () { module('modal') - test('should provide no conflict', function () { - var modal = $.fn.modal.noConflict() - ok(!$.fn.modal, 'modal was set back to undefined (org value)') - $.fn.modal = modal - }) - - test('should be defined on jquery object', function () { - var div = $('<div id="modal-test"></div>') - ok(div.modal, 'modal method is defined') - }) - - test('should return element', function () { - var div = $('<div id="modal-test"></div>') - ok(div.modal() == div, 'document.body returned') - $('#modal-test').remove() - }) - - test('should expose defaults var for settings', function () { - ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed') - }) - - test('should insert into dom when show method is called', function () { - stop() - $.support.transition = false - $('<div id="modal-test"></div>') - .on('shown.bs.modal', function () { - ok($('#modal-test').length, 'modal inserted into dom') - $(this).remove() + test('should provide no conflict', function () { + var modal = $.fn.modal.noConflict() + ok(!$.fn.modal, 'modal was set back to undefined (org value)') + $.fn.modal = modal + }) + + test('should be defined on jquery object', function () { + var div = $('<div id="modal-test"></div>') + ok(div.modal, 'modal method is defined') + }) + + test('should return element', function () { + var div = $('<div id="modal-test"></div>') + ok(div.modal() == div, 'document.body returned') + $('#modal-test').remove() + }) + + test('should expose defaults var for settings', function () { + ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed') + }) + + test('should insert into dom when show method is called', function () { + stop() + $.support.transition = false + $('<div id="modal-test"></div>') + .on('shown.bs.modal', function () { + ok($('#modal-test').length, 'modal inserted into dom') + $(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() - }) - .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() - }).modal('show') - }) - .modal('show') - - div.remove() - }) + }).modal('show') + }) + .modal('show') + + div.remove() + }) }) diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js index ecab948c7d..c08b6d8ef2 100644 --- a/js/tests/unit/popover.js +++ b/js/tests/unit/popover.js @@ -1,133 +1,133 @@ $(function () { - module('popover') - - test('should provide no conflict', function () { - var popover = $.fn.popover.noConflict() - ok(!$.fn.popover, 'popover was set back to undefined (org value)') - $.fn.popover = popover + module('popover') + + test('should provide no conflict', function () { + var popover = $.fn.popover.noConflict() + ok(!$.fn.popover, 'popover was set back to undefined (org value)') + $.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 () { - var div = $('<div></div>') - ok(div.popover, 'popover method is defined') + 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' }) - - test('should return element', function () { - var div = $('<div></div>') - ok(div.popover() == div, 'document.body returned') + .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>' }) - 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 (╯°□°)╯︵ ┻━┻' - } - }) - - 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') - }) + 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') + }) }) diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index cf7b50dc43..694af95c62 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -1,36 +1,36 @@ $(function () { - module('scrollspy') + module('scrollspy') - test('should provide no conflict', function () { - var scrollspy = $.fn.scrollspy.noConflict() - ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)') - $.fn.scrollspy = scrollspy - }) + test('should provide no conflict', function () { + var scrollspy = $.fn.scrollspy.noConflict() + ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)') + $.fn.scrollspy = scrollspy + }) - test('should be defined on jquery object', function () { - ok($(document.body).scrollspy, 'scrollspy method is defined') - }) + test('should be defined on jquery object', function () { + ok($(document.body).scrollspy, 'scrollspy method is defined') + }) - test('should return element', function () { - ok($(document.body).scrollspy()[0] == document.body, 'document.body returned') - }) + test('should return element', function () { + ok($(document.body).scrollspy()[0] == document.body, 'document.body returned') + }) - test('should switch active class on scroll', function () { - var sectionHTML = '<div id="masthead"></div>' - $section = $(sectionHTML).append('#qunit-fixture'), - topbarHTML = '<div class="topbar">' + - '<div class="topbar-inner">' + - '<div class="container">' + - '<h3><a href="#">Bootstrap</a></h3>' + - '<li><a href="#masthead">Overview</a></li>' + - '</ul>' + - '</div>' + - '</div>' + - '</div>', - $topbar = $(topbarHTML).scrollspy() + test('should switch active class on scroll', function () { + var sectionHTML = '<div id="masthead"></div>', + $section = $(sectionHTML).append('#qunit-fixture'), + topbarHTML = '<div class="topbar">' + + '<div class="topbar-inner">' + + '<div class="container">' + + '<h3><a href="#">Bootstrap</a></h3>' + + '<li><a href="#masthead">Overview</a></li>' + + '</ul>' + + '</div>' + + '</div>' + + '</div>', + $topbar = $(topbarHTML).scrollspy() - ok($topbar.find('.active', true)) - }) + ok($topbar.find('.active', true)) + }) }) diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index b8dbf2c18e..60e46364dc 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -1,86 +1,86 @@ $(function () { - module('tabs') + module('tabs') - test('should provide no conflict', function () { - var tab = $.fn.tab.noConflict() - ok(!$.fn.tab, 'tab was set back to undefined (org value)') - $.fn.tab = tab - }) + test('should provide no conflict', function () { + var tab = $.fn.tab.noConflict() + ok(!$.fn.tab, 'tab was set back to undefined (org value)') + $.fn.tab = tab + }) - test('should be defined on jquery object', function () { - ok($(document.body).tab, 'tabs method is defined') - }) + test('should be defined on jquery object', function () { + ok($(document.body).tab, 'tabs method is defined') + }) - test('should return element', function () { - ok($(document.body).tab()[0] == document.body, 'document.body returned') - }) + test('should return element', function () { + ok($(document.body).tab()[0] == document.body, 'document.body returned') + }) - test('should activate element by tab id', function () { - var tabsHTML = '<ul class="tabs">' + - '<li><a href="#home">Home</a></li>' + - '<li><a href="#profile">Profile</a></li>' + - '</ul>' + test('should activate element by tab id', function () { + var tabsHTML = '<ul class="tabs">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' - $('<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') - equal($('#qunit-fixture').find('.active').attr('id'), 'profile') + $(tabsHTML).find('li:last a').tab('show') + equal($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(tabsHTML).find('li:first a').tab('show') - equal($('#qunit-fixture').find('.active').attr('id'), 'home') - }) + $(tabsHTML).find('li:first a').tab('show') + equal($('#qunit-fixture').find('.active').attr('id'), 'home') + }) - test('should activate element by tab id', function () { - var pillsHTML = '<ul class="pills">' + - '<li><a href="#home">Home</a></li>' + - '<li><a href="#profile">Profile</a></li>' + - '</ul>' + test('should activate element by tab id', function () { + var pillsHTML = '<ul class="pills">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' - $('<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') - equal($('#qunit-fixture').find('.active').attr('id'), 'profile') + $(pillsHTML).find('li:last a').tab('show') + equal($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(pillsHTML).find('li:first a').tab('show') - equal($('#qunit-fixture').find('.active').attr('id'), 'home') - }) + $(pillsHTML).find('li:first a').tab('show') + equal($('#qunit-fixture').find('.active').attr('id'), 'home') + }) - test('should not fire closed when close is prevented', function () { - $.support.transition = false - stop(); - $('<div class="tab"/>') - .on('show.bs.tab', function (e) { - e.preventDefault(); - ok(true); - start(); - }) - .on('shown.bs.tab', function () { - ok(false); - }) - .tab('show') + test('should not fire closed when close is prevented', function () { + $.support.transition = false + stop(); + $('<div class="tab"/>') + .on('show.bs.tab', function (e) { + e.preventDefault(); + ok(true); + start(); }) - - test('show and shown events should reference correct relatedTarget', function () { - var dropHTML = '<ul class="drop">' + - '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' + - '<ul class="dropdown-menu">' + - '<li><a href="#1-1" data-toggle="tab">1-1</a></li>' + - '<li><a href="#1-2" data-toggle="tab">1-2</a></li>' + - '</ul>' + - '</li>' + - '</ul>' - - $(dropHTML).find('ul>li:first a').tab('show').end() - .find('ul>li:last a') - .on('show.bs.tab', function (event) { - equal(event.relatedTarget.hash, '#1-1') - }) - .on('show.bs.tab', function (event) { - equal(event.relatedTarget.hash, '#1-1') - }) - .tab('show') + .on('shown.bs.tab', function () { + ok(false); + }) + .tab('show') + }) + + test('show and shown events should reference correct relatedTarget', function () { + var dropHTML = '<ul class="drop">' + + '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' + + '<ul class="dropdown-menu">' + + '<li><a href="#1-1" data-toggle="tab">1-1</a></li>' + + '<li><a href="#1-2" data-toggle="tab">1-2</a></li>' + + '</ul>' + + '</li>' + + '</ul>' + + $(dropHTML).find('ul>li:first a').tab('show').end() + .find('ul>li:last a') + .on('show.bs.tab', function (event) { + equal(event.relatedTarget.hash, '#1-1') + }) + .on('show.bs.tab', function (event) { + equal(event.relatedTarget.hash, '#1-1') }) + .tab('show') + }) }) diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index b9b003dd1d..c3af7d82e0 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -1,432 +1,432 @@ $(function () { - module('tooltip') - - test('should provide no conflict', function () { - var tooltip = $.fn.tooltip.noConflict() - ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)') - $.fn.tooltip = tooltip - }) - - test('should be defined on jquery object', function () { - var div = $('<div></div>') - ok(div.tooltip, 'popover method is defined') - }) - - test('should return element', function () { - var div = $('<div></div>') - ok(div.tooltip() == div, 'document.body returned') - }) - - test('should expose default settings', function () { - ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined') - }) - - test('should empty title attribute', function () { - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() - ok(tooltip.attr('title') === '', 'title attribute was emptied') - }) - - test('should add data attribute for referencing original title', function () { - 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') - }) - - test('should place tooltips relative to placement option', function () { - $.support.transition = false - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') - .appendTo('#qunit-fixture') - .tooltip({placement: 'bottom'}) - .tooltip('show') - - ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') - tooltip.tooltip('hide') - }) - - test('should allow html entities', function () { - $.support.transition = false - var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') - .appendTo('#qunit-fixture') - .tooltip({html: true}) - .tooltip('show') - - ok($('.tooltip b').length, 'b tag was inserted') - tooltip.tooltip('hide') - ok(!$('.tooltip').length, 'tooltip removed') - }) - - test('should respect custom classes', function () { - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') - .appendTo('#qunit-fixture') - .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) - .tooltip('show') - - ok($('.tooltip').hasClass('some-class'), 'custom class is present') - tooltip.tooltip('hide') - ok(!$('.tooltip').length, 'tooltip removed') - }) - - test('should fire show event', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('show.bs.tooltip', function () { - ok(true, 'show was called') - start() - }) - .tooltip('show') - }) - - test('should fire shown event', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('shown.bs.tooltip', function () { - ok(true, 'shown was called') - start() - }) - .tooltip('show') - }) - - test('should not fire shown event when default prevented', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('show.bs.tooltip', function (e) { - e.preventDefault() - ok(true, 'show was called') - start() - }) - .on('shown.bs.tooltip', function () { - ok(false, 'shown was called') - }) - .tooltip('show') - }) - - test('should fire hide event', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('shown.bs.tooltip', function () { - $(this).tooltip('hide') - }) - .on('hide.bs.tooltip', function () { - ok(true, 'hide was called') - start() - }) - .tooltip('show') - }) - - test('should fire hidden event', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('shown.bs.tooltip', function () { - $(this).tooltip('hide') - }) - .on('hidden.bs.tooltip', function () { - ok(true, 'hidden was called') - start() - }) - .tooltip('show') - }) - - test('should not fire hidden event when default prevented', function () { - stop() - var tooltip = $('<div title="tooltip title"></div>') - .on('shown.bs.tooltip', function () { - $(this).tooltip('hide') - }) - .on('hide.bs.tooltip', function (e) { - e.preventDefault() - ok(true, 'hide was called') - start() - }) - .on('hidden.bs.tooltip', function () { - ok(false, 'hidden was called') - }) - .tooltip('show') - }) - - 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: 200 }) - - stop() - - tooltip.trigger('mouseenter') - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') - tooltip.trigger('mouseout') - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') - start() - }, 200) - }, 100) - }) - - 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>') - .appendTo('#qunit-fixture') - .tooltip({ delay: { show: 200, hide: 0} }) - - stop() - - tooltip.trigger('mouseenter') - - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') - tooltip.trigger('mouseout') - setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') - start() - }, 200) - }, 100) - }) - - test('should wait 200 ms before hiding the tooltip', 3, function () { - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') - .appendTo('#qunit-fixture') - .tooltip({ delay: { show: 0, hide: 200} }) - - stop() - - tooltip.trigger('mouseenter') - + module('tooltip') + + test('should provide no conflict', function () { + var tooltip = $.fn.tooltip.noConflict() + ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)') + $.fn.tooltip = tooltip + }) + + test('should be defined on jquery object', function () { + var div = $('<div></div>') + ok(div.tooltip, 'popover method is defined') + }) + + test('should return element', function () { + var div = $('<div></div>') + ok(div.tooltip() == div, 'document.body returned') + }) + + test('should expose default settings', function () { + ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined') + }) + + test('should empty title attribute', function () { + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() + ok(tooltip.attr('title') === '', 'title attribute was emptied') + }) + + test('should add data attribute for referencing original title', function () { + 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') + }) + + test('should place tooltips relative to placement option', function () { + $.support.transition = false + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') + .appendTo('#qunit-fixture') + .tooltip({placement: 'bottom'}) + .tooltip('show') + + ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') + tooltip.tooltip('hide') + }) + + test('should allow html entities', function () { + $.support.transition = false + var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') + .appendTo('#qunit-fixture') + .tooltip({html: true}) + .tooltip('show') + + ok($('.tooltip b').length, 'b tag was inserted') + tooltip.tooltip('hide') + ok(!$('.tooltip').length, 'tooltip removed') + }) + + test('should respect custom classes', function () { + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') + .appendTo('#qunit-fixture') + .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) + .tooltip('show') + + ok($('.tooltip').hasClass('some-class'), 'custom class is present') + tooltip.tooltip('hide') + ok(!$('.tooltip').length, 'tooltip removed') + }) + + test('should fire show event', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('show.bs.tooltip', function () { + ok(true, 'show was called') + start() + }) + .tooltip('show') + }) + + test('should fire shown event', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('shown.bs.tooltip', function () { + ok(true, 'shown was called') + start() + }) + .tooltip('show') + }) + + test('should not fire shown event when default prevented', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('show.bs.tooltip', function (e) { + e.preventDefault() + ok(true, 'show was called') + start() + }) + .on('shown.bs.tooltip', function () { + ok(false, 'shown was called') + }) + .tooltip('show') + }) + + test('should fire hide event', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('shown.bs.tooltip', function () { + $(this).tooltip('hide') + }) + .on('hide.bs.tooltip', function () { + ok(true, 'hide was called') + start() + }) + .tooltip('show') + }) + + test('should fire hidden event', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('shown.bs.tooltip', function () { + $(this).tooltip('hide') + }) + .on('hidden.bs.tooltip', function () { + ok(true, 'hidden was called') + start() + }) + .tooltip('show') + }) + + test('should not fire hidden event when default prevented', function () { + stop() + var tooltip = $('<div title="tooltip title"></div>') + .on('shown.bs.tooltip', function () { + $(this).tooltip('hide') + }) + .on('hide.bs.tooltip', function (e) { + e.preventDefault() + ok(true, 'hide was called') + start() + }) + .on('hidden.bs.tooltip', function () { + ok(false, 'hidden was called') + }) + .tooltip('show') + }) + + 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: 200 }) + + stop() + + tooltip.trigger('mouseenter') + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') + tooltip.trigger('mouseout') + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') + start() + }, 200) + }, 100) + }) + + 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>') + .appendTo('#qunit-fixture') + .tooltip({ delay: { show: 200, hide: 0} }) + + stop() + + tooltip.trigger('mouseenter') + + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') + tooltip.trigger('mouseout') + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') + start() + }, 200) + }, 100) + }) + + test('should wait 200 ms before hiding the tooltip', 3, function () { + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') + .appendTo('#qunit-fixture') + .tooltip({ delay: { show: 0, hide: 200} }) + + stop() + + 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 () { - 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 () { - ok(!$('.tooltip').is('.in'), 'tooltip removed') - start() - }, 150) - }, 100) - }, 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 () { - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') - .appendTo('#qunit-fixture') - .tooltip({ delay: { show: 0, hide: 200} }) + 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>') + .appendTo('#qunit-fixture') + .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') - 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() + 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') tooltip.trigger('mouseenter') setTimeout(function () { - ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') - 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') + ok($('.tooltip').is('.in'), 'tooltip removed') start() - }, 200) - }) - - test('should destroy tooltip', function () { - var tooltip = $('<div/>').tooltip().on('click.foo', function () {}) - ok(tooltip.data('bs.tooltip'), 'tooltip has data') - ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event') - ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') - tooltip.tooltip('show') - tooltip.tooltip('destroy') - ok(!tooltip.hasClass('in'), 'tooltip is hidden') - ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data') - ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo') - ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events') - }) - - 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}) + }, 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') + setTimeout(function () { + ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in') + 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() + }, 200) + }) + + test('should destroy tooltip', function () { + var tooltip = $('<div/>').tooltip().on('click.foo', function () {}) + ok(tooltip.data('bs.tooltip'), 'tooltip has data') + ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event') + ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event') + tooltip.tooltip('show') + tooltip.tooltip('destroy') + ok(!tooltip.hasClass('in'), 'tooltip is hidden') + ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data') + ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo') + ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events') + }) + + 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) - .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) - .tooltip({placement: 'right'}) - .tooltip('show'), - tooltip = container.find('.tooltip') - - // 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) - var topDiff = top - top2 - ok(topDiff <= 1 && topDiff >= -1) - target.tooltip('hide') - }) - - test('tooltip title test #1', function () { - var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') - .appendTo('#qunit-fixture') - .tooltip({ - }) - .tooltip('show') - equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') - tooltip.tooltip('hide') - ok(!$('.tooltip').length, 'tooltip removed') - }) - - test('tooltip title test #2', function () { - var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') - .appendTo('#qunit-fixture') - .tooltip({ - title: 'This is a tooltip with some content' - }) - .tooltip('show') - equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option') - tooltip.tooltip('hide') - ok(!$('.tooltip').length, 'tooltip removed') - }) - - test('tooltip title test #3', function () { - var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') - .appendTo('#qunit-fixture') - .tooltip({ - title: 'This is a tooltip with some content' - }) - .tooltip('show') - equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set') - tooltip.tooltip('hide') - 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() - }) + .tooltip({placement: 'right'}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + // 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) + var topDiff = top - top2 + ok(topDiff <= 1 && topDiff >= -1) + target.tooltip('hide') + }) + + test('tooltip title test #1', function () { + var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') + .appendTo('#qunit-fixture') + .tooltip({}) + .tooltip('show') + equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') + tooltip.tooltip('hide') + ok(!$('.tooltip').length, 'tooltip removed') + }) + + test('tooltip title test #2', function () { + var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') + .appendTo('#qunit-fixture') + .tooltip({ + title: 'This is a tooltip with some content' + }) + .tooltip('show') + equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option') + tooltip.tooltip('hide') + ok(!$('.tooltip').length, 'tooltip removed') + }) + + test('tooltip title test #3', function () { + var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>') + .appendTo('#qunit-fixture') + .tooltip({ + title: 'This is a tooltip with some content' + }) + .tooltip('show') + equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set') + tooltip.tooltip('hide') + 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() + }) }) |