1.1 --- a/bootstrap-source/bootstrap-3.0.3/js/tests/unit/tooltip.js Sat Jan 18 12:34:36 2014 +0100
1.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
1.3 @@ -1,437 +0,0 @@
1.4 -$(function () {
1.5 -
1.6 - module("tooltip")
1.7 -
1.8 - test("should provide no conflict", function () {
1.9 - var tooltip = $.fn.tooltip.noConflict()
1.10 - ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
1.11 - $.fn.tooltip = tooltip
1.12 - })
1.13 -
1.14 - test("should be defined on jquery object", function () {
1.15 - var div = $("<div></div>")
1.16 - ok(div.tooltip, 'popover method is defined')
1.17 - })
1.18 -
1.19 - test("should return element", function () {
1.20 - var div = $("<div></div>")
1.21 - ok(div.tooltip() == div, 'document.body returned')
1.22 - })
1.23 -
1.24 - test("should expose default settings", function () {
1.25 - ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')
1.26 - })
1.27 -
1.28 - test("should empty title attribute", function () {
1.29 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
1.30 - ok(tooltip.attr('title') === '', 'title attribute was emptied')
1.31 - })
1.32 -
1.33 - test("should add data attribute for referencing original title", function () {
1.34 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
1.35 - equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
1.36 - })
1.37 -
1.38 - test("should place tooltips relative to placement option", function () {
1.39 - $.support.transition = false
1.40 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.41 - .appendTo('#qunit-fixture')
1.42 - .tooltip({placement: 'bottom'})
1.43 - .tooltip('show')
1.44 -
1.45 - ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')
1.46 - tooltip.tooltip('hide')
1.47 - })
1.48 -
1.49 - test("should allow html entities", function () {
1.50 - $.support.transition = false
1.51 - var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
1.52 - .appendTo('#qunit-fixture')
1.53 - .tooltip({html: true})
1.54 - .tooltip('show')
1.55 -
1.56 - ok($('.tooltip b').length, 'b tag was inserted')
1.57 - tooltip.tooltip('hide')
1.58 - ok(!$(".tooltip").length, 'tooltip removed')
1.59 - })
1.60 -
1.61 - test("should respect custom classes", function () {
1.62 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.63 - .appendTo('#qunit-fixture')
1.64 - .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
1.65 - .tooltip('show')
1.66 -
1.67 - ok($('.tooltip').hasClass('some-class'), 'custom class is present')
1.68 - tooltip.tooltip('hide')
1.69 - ok(!$(".tooltip").length, 'tooltip removed')
1.70 - })
1.71 -
1.72 - test("should fire show event", function () {
1.73 - stop()
1.74 - var tooltip = $('<div title="tooltip title"></div>')
1.75 - .on("show.bs.tooltip", function() {
1.76 - ok(true, "show was called")
1.77 - start()
1.78 - })
1.79 - .tooltip('show')
1.80 - })
1.81 -
1.82 - test("should fire shown event", function () {
1.83 - stop()
1.84 - var tooltip = $('<div title="tooltip title"></div>')
1.85 - .on("shown.bs.tooltip", function() {
1.86 - ok(true, "shown was called")
1.87 - start()
1.88 - })
1.89 - .tooltip('show')
1.90 - })
1.91 -
1.92 - test("should not fire shown event when default prevented", function () {
1.93 - stop()
1.94 - var tooltip = $('<div title="tooltip title"></div>')
1.95 - .on("show.bs.tooltip", function(e) {
1.96 - e.preventDefault()
1.97 - ok(true, "show was called")
1.98 - start()
1.99 - })
1.100 - .on("shown.bs.tooltip", function() {
1.101 - ok(false, "shown was called")
1.102 - })
1.103 - .tooltip('show')
1.104 - })
1.105 -
1.106 - test("should fire hide event", function () {
1.107 - stop()
1.108 - var tooltip = $('<div title="tooltip title"></div>')
1.109 - .on("shown.bs.tooltip", function() {
1.110 - $(this).tooltip('hide')
1.111 - })
1.112 - .on("hide.bs.tooltip", function() {
1.113 - ok(true, "hide was called")
1.114 - start()
1.115 - })
1.116 - .tooltip('show')
1.117 - })
1.118 -
1.119 - test("should fire hidden event", function () {
1.120 - stop()
1.121 - var tooltip = $('<div title="tooltip title"></div>')
1.122 - .on("shown.bs.tooltip", function() {
1.123 - $(this).tooltip('hide')
1.124 - })
1.125 - .on("hidden.bs.tooltip", function() {
1.126 - ok(true, "hidden was called")
1.127 - start()
1.128 - })
1.129 - .tooltip('show')
1.130 - })
1.131 -
1.132 - test("should not fire hidden event when default prevented", function () {
1.133 - stop()
1.134 - var tooltip = $('<div title="tooltip title"></div>')
1.135 - .on("shown.bs.tooltip", function() {
1.136 - $(this).tooltip('hide')
1.137 - })
1.138 - .on("hide.bs.tooltip", function(e) {
1.139 - e.preventDefault()
1.140 - ok(true, "hide was called")
1.141 - start()
1.142 - })
1.143 - .on("hidden.bs.tooltip", function() {
1.144 - ok(false, "hidden was called")
1.145 - })
1.146 - .tooltip('show')
1.147 - })
1.148 -
1.149 - test("should not show tooltip if leave event occurs before delay expires", function () {
1.150 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.151 - .appendTo('#qunit-fixture')
1.152 - .tooltip({ delay: 200 })
1.153 -
1.154 - stop()
1.155 -
1.156 - tooltip.trigger('mouseenter')
1.157 -
1.158 - setTimeout(function () {
1.159 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.160 - tooltip.trigger('mouseout')
1.161 - setTimeout(function () {
1.162 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.163 - start()
1.164 - }, 200)
1.165 - }, 100)
1.166 - })
1.167 -
1.168 - test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {
1.169 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.170 - .appendTo('#qunit-fixture')
1.171 - .tooltip({ delay: { show: 200, hide: 0} })
1.172 -
1.173 - stop()
1.174 -
1.175 - tooltip.trigger('mouseenter')
1.176 -
1.177 - setTimeout(function () {
1.178 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.179 - tooltip.trigger('mouseout')
1.180 - setTimeout(function () {
1.181 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.182 - start()
1.183 - }, 200)
1.184 - }, 100)
1.185 - })
1.186 -
1.187 - test("should wait 200 ms before hiding the tooltip", 3, function () {
1.188 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.189 - .appendTo('#qunit-fixture')
1.190 - .tooltip({ delay: { show: 0, hide: 200} })
1.191 -
1.192 - stop()
1.193 -
1.194 - tooltip.trigger('mouseenter')
1.195 -
1.196 - setTimeout(function () {
1.197 - ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
1.198 - tooltip.trigger('mouseout')
1.199 - setTimeout(function () {
1.200 - ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
1.201 - setTimeout(function () {
1.202 - ok(!$(".tooltip").is('.in'), 'tooltip removed')
1.203 - start()
1.204 - }, 150)
1.205 - }, 100)
1.206 - }, 1)
1.207 - })
1.208 -
1.209 - test("should not hide tooltip if leave event occurs, then tooltip is show immediately again", function () {
1.210 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.211 - .appendTo('#qunit-fixture')
1.212 - .tooltip({ delay: { show: 0, hide: 200} })
1.213 -
1.214 - stop()
1.215 -
1.216 - tooltip.trigger('mouseenter')
1.217 -
1.218 - setTimeout(function () {
1.219 - ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
1.220 - tooltip.trigger('mouseout')
1.221 - setTimeout(function () {
1.222 - ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
1.223 - tooltip.trigger('mouseenter')
1.224 - setTimeout(function () {
1.225 - ok($(".tooltip").is('.in'), 'tooltip removed')
1.226 - start()
1.227 - }, 150)
1.228 - }, 100)
1.229 - }, 1)
1.230 - })
1.231 -
1.232 - test("should not show tooltip if leave event occurs before delay expires", function () {
1.233 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.234 - .appendTo('#qunit-fixture')
1.235 - .tooltip({ delay: 100 })
1.236 - stop()
1.237 - tooltip.trigger('mouseenter')
1.238 - setTimeout(function () {
1.239 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.240 - tooltip.trigger('mouseout')
1.241 - setTimeout(function () {
1.242 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.243 - start()
1.244 - }, 100)
1.245 - }, 50)
1.246 - })
1.247 -
1.248 - test("should show tooltip if leave event hasn't occured before delay expires", function () {
1.249 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.250 - .appendTo('#qunit-fixture')
1.251 - .tooltip({ delay: 150 })
1.252 - stop()
1.253 - tooltip.trigger('mouseenter')
1.254 - setTimeout(function () {
1.255 - ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
1.256 - }, 100)
1.257 - setTimeout(function () {
1.258 - ok($(".tooltip").is('.fade.in'), 'tooltip has faded in')
1.259 - start()
1.260 - }, 200)
1.261 - })
1.262 -
1.263 - test("should destroy tooltip", function () {
1.264 - var tooltip = $('<div/>').tooltip().on('click.foo', function(){})
1.265 - ok(tooltip.data('bs.tooltip'), 'tooltip has data')
1.266 - ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
1.267 - ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
1.268 - tooltip.tooltip('show')
1.269 - tooltip.tooltip('destroy')
1.270 - ok(!tooltip.hasClass('in'), 'tooltip is hidden')
1.271 - ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
1.272 - ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo')
1.273 - ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
1.274 - })
1.275 -
1.276 - test("should show tooltip with delegate selector on click", function () {
1.277 - var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
1.278 - var tooltip = div.appendTo('#qunit-fixture')
1.279 - .tooltip({ selector: 'a[rel=tooltip]',
1.280 - trigger: 'click' })
1.281 - div.find('a').trigger('click')
1.282 - ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
1.283 - })
1.284 -
1.285 - test("should show tooltip when toggle is called", function () {
1.286 - var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
1.287 - .appendTo('#qunit-fixture')
1.288 - .tooltip({trigger: 'manual'})
1.289 - .tooltip('toggle')
1.290 - ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
1.291 - })
1.292 -
1.293 - test("should place tooltips inside the body", function () {
1.294 - var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
1.295 - .appendTo('#qunit-fixture')
1.296 - .tooltip({container:'body'})
1.297 - .tooltip('show')
1.298 - ok($("body > .tooltip").length, 'inside the body')
1.299 - ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
1.300 - tooltip.tooltip('hide')
1.301 - })
1.302 -
1.303 - test("should place tooltip inside window", function(){
1.304 - var container = $("<div />").appendTo("body")
1.305 - .css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
1.306 - , tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
1.307 - .css({position: "absolute", top:0, left: 0})
1.308 - .appendTo(container)
1.309 - .tooltip({placement: "top", animate: false})
1.310 - .tooltip("show")
1.311 -
1.312 - stop()
1.313 -
1.314 - setTimeout(function(){
1.315 - ok($(".tooltip").offset().left >= 0)
1.316 -
1.317 - start()
1.318 - container.remove()
1.319 - }, 100)
1.320 - })
1.321 -
1.322 - test("should place tooltip on top of element", function(){
1.323 - var container = $("<div />").appendTo("body")
1.324 - .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
1.325 - , p = $("<p style='margin-top:200px' />").appendTo(container)
1.326 - , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
1.327 - .css({marginTop: 200})
1.328 - .appendTo(p)
1.329 - .tooltip({placement: "top", animate: false})
1.330 - .tooltip("show")
1.331 -
1.332 - stop()
1.333 -
1.334 - setTimeout(function(){
1.335 - var tooltip = container.find(".tooltip")
1.336 -
1.337 - start()
1.338 - ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
1.339 - container.remove()
1.340 - }, 100)
1.341 - })
1.342 -
1.343 - test("should add position class before positioning so that position-specific styles are taken into account", function(){
1.344 - $("head").append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
1.345 -
1.346 - var container = $("<div />").appendTo("body")
1.347 - , target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
1.348 - .appendTo(container)
1.349 - .tooltip({placement: 'right'})
1.350 - .tooltip('show')
1.351 - , tooltip = container.find(".tooltip")
1.352 -
1.353 - ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) )
1.354 - target.tooltip('hide')
1.355 - })
1.356 -
1.357 - test("tooltip title test #1", function () {
1.358 - var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
1.359 - .appendTo('#qunit-fixture')
1.360 - .tooltip({
1.361 - })
1.362 - .tooltip('show')
1.363 - equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
1.364 - tooltip.tooltip('hide')
1.365 - ok(!$(".tooltip").length, 'tooltip removed')
1.366 - })
1.367 -
1.368 - test("tooltip title test #2", function () {
1.369 - var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
1.370 - .appendTo('#qunit-fixture')
1.371 - .tooltip({
1.372 - title: 'This is a tooltip with some content'
1.373 - })
1.374 - .tooltip('show')
1.375 - equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
1.376 - tooltip.tooltip('hide')
1.377 - ok(!$(".tooltip").length, 'tooltip removed')
1.378 - })
1.379 -
1.380 - test("tooltip title test #3", function () {
1.381 - var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
1.382 - .appendTo('#qunit-fixture')
1.383 - .tooltip({
1.384 - title: 'This is a tooltip with some content'
1.385 - })
1.386 - .tooltip('show')
1.387 - equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
1.388 - tooltip.tooltip('hide')
1.389 - ok(!$(".tooltip").length, 'tooltip removed')
1.390 - })
1.391 -
1.392 - test("tooltips should be placed dynamically, with the dynamic placement option", function () {
1.393 - $.support.transition = false
1.394 - var ttContainer = $('<div id="dynamic-tt-test"/>').css({
1.395 - 'height' : 400
1.396 - , 'overflow' : 'hidden'
1.397 - , 'position' : 'absolute'
1.398 - , 'top' : 0
1.399 - , 'left' : 0
1.400 - , 'width' : 600})
1.401 - .appendTo('body')
1.402 -
1.403 - var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
1.404 - .appendTo('#dynamic-tt-test')
1.405 - .tooltip({placement: 'auto'})
1.406 - .tooltip('show')
1.407 -
1.408 -
1.409 - ok($(".tooltip").is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
1.410 -
1.411 - topTooltip.tooltip('hide')
1.412 -
1.413 - var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
1.414 - .appendTo('#dynamic-tt-test')
1.415 - .tooltip({placement: 'right auto'})
1.416 - .tooltip('show')
1.417 -
1.418 - ok($(".tooltip").is('.left'), 'right positioned tooltip is dynamically positioned left')
1.419 - rightTooltip.tooltip('hide')
1.420 -
1.421 - var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
1.422 - .appendTo('#dynamic-tt-test')
1.423 - .tooltip({placement: 'auto bottom'})
1.424 - .tooltip('show')
1.425 -
1.426 - ok($(".tooltip").is('.top'), 'bottom positioned tooltip is dynamically positioned top')
1.427 - bottomTooltip.tooltip('hide')
1.428 -
1.429 - var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
1.430 - .appendTo('#dynamic-tt-test')
1.431 - .tooltip({placement: 'auto left'})
1.432 - .tooltip('show')
1.433 -
1.434 - ok($(".tooltip").is('.right'), 'left positioned tooltip is dynamically positioned right')
1.435 - leftTooltip.tooltip('hide')
1.436 -
1.437 - ttContainer.remove()
1.438 - })
1.439 -
1.440 -})