1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/bootstrap-source/bootstrap-3.0.3/js/tests/unit/tooltip.js Fri Dec 20 22:49:16 2013 +0100
1.3 @@ -0,0 +1,437 @@
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 +})