eskp-app/1.0: bootstrap-source/bootstrap-3.0.3/js/tests/unit/tooltip.js@0ded9d7748b7

     1 $(function () {

     3     module("tooltip")

     5       test("should provide no conflict", function () {

     6         var tooltip = $.fn.tooltip.noConflict()

     7         ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')

     8         $.fn.tooltip = tooltip

     9       })

    11       test("should be defined on jquery object", function () {

    12         var div = $("<div></div>")

    13         ok(div.tooltip, 'popover method is defined')

    14       })

    16       test("should return element", function () {

    17         var div = $("<div></div>")

    18         ok(div.tooltip() == div, 'document.body returned')

    19       })

    21       test("should expose default settings", function () {

    22         ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')

    23       })

    25       test("should empty title attribute", function () {

    26         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()

    27         ok(tooltip.attr('title') === '', 'title attribute was emptied')

    28       })

    30       test("should add data attribute for referencing original title", function () {

    31         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()

    32         equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')

    33       })

    35       test("should place tooltips relative to placement option", function () {

    36         $.support.transition = false

    37         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

    38           .appendTo('#qunit-fixture')

    39           .tooltip({placement: 'bottom'})

    40           .tooltip('show')

    42         ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')

    43         tooltip.tooltip('hide')

    44       })

    46       test("should allow html entities", function () {

    47         $.support.transition = false

    48         var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')

    49           .appendTo('#qunit-fixture')

    50           .tooltip({html: true})

    51           .tooltip('show')

    53         ok($('.tooltip b').length, 'b tag was inserted')

    54         tooltip.tooltip('hide')

    55         ok(!$(".tooltip").length, 'tooltip removed')

    56       })

    58       test("should respect custom classes", function () {

    59         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

    60           .appendTo('#qunit-fixture')

    61           .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})

    62           .tooltip('show')

    64         ok($('.tooltip').hasClass('some-class'), 'custom class is present')

    65         tooltip.tooltip('hide')

    66         ok(!$(".tooltip").length, 'tooltip removed')

    67       })

    69       test("should fire show event", function () {

    70         stop()

    71         var tooltip = $('<div title="tooltip title"></div>')

    72           .on("show.bs.tooltip", function() {

    73             ok(true, "show was called")

    74             start()

    75           })

    76           .tooltip('show')

    77       })

    79       test("should fire shown event", function () {

    80         stop()

    81         var tooltip = $('<div title="tooltip title"></div>')

    82           .on("shown.bs.tooltip", function() {

    83             ok(true, "shown was called")

    84             start()

    85           })

    86           .tooltip('show')

    87       })

    89       test("should not fire shown event when default prevented", function () {

    90         stop()

    91         var tooltip = $('<div title="tooltip title"></div>')

    92           .on("show.bs.tooltip", function(e) {

    93             e.preventDefault()

    94             ok(true, "show was called")

    95             start()

    96           })

    97           .on("shown.bs.tooltip", function() {

    98             ok(false, "shown was called")

    99           })

   100           .tooltip('show')

   101       })

   103       test("should fire hide event", function () {

   104         stop()

   105         var tooltip = $('<div title="tooltip title"></div>')

   106           .on("shown.bs.tooltip", function() {

   107             $(this).tooltip('hide')

   108           })

   109           .on("hide.bs.tooltip", function() {

   110             ok(true, "hide was called")

   111             start()

   112           })

   113           .tooltip('show')

   114       })

   116       test("should fire hidden event", function () {

   117         stop()

   118         var tooltip = $('<div title="tooltip title"></div>')

   119           .on("shown.bs.tooltip", function() {

   120             $(this).tooltip('hide')

   121           })

   122           .on("hidden.bs.tooltip", function() {

   123             ok(true, "hidden was called")

   124             start()

   125           })

   126           .tooltip('show')

   127       })

   129       test("should not fire hidden event when default prevented", function () {

   130         stop()

   131         var tooltip = $('<div title="tooltip title"></div>')

   132           .on("shown.bs.tooltip", function() {

   133             $(this).tooltip('hide')

   134           })

   135           .on("hide.bs.tooltip", function(e) {

   136             e.preventDefault()

   137             ok(true, "hide was called")

   138             start()

   139           })

   140           .on("hidden.bs.tooltip", function() {

   141             ok(false, "hidden was called")

   142           })

   143           .tooltip('show')

   144       })

   146       test("should not show tooltip if leave event occurs before delay expires", function () {

   147         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   148           .appendTo('#qunit-fixture')

   149           .tooltip({ delay: 200 })

   151         stop()

   153         tooltip.trigger('mouseenter')

   155         setTimeout(function () {

   156           ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   157           tooltip.trigger('mouseout')

   158           setTimeout(function () {

   159             ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   160             start()

   161           }, 200)

   162         }, 100)

   163       })

   165       test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {

   166         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   167           .appendTo('#qunit-fixture')

   168           .tooltip({ delay: { show: 200, hide: 0} })

   170         stop()

   172         tooltip.trigger('mouseenter')

   174         setTimeout(function () {

   175           ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   176           tooltip.trigger('mouseout')

   177           setTimeout(function () {

   178             ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   179             start()

   180           }, 200)

   181         }, 100)

   182       })

   184       test("should wait 200 ms before hiding the tooltip", 3, function () {

   185         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   186           .appendTo('#qunit-fixture')

   187           .tooltip({ delay: { show: 0, hide: 200} })

   189         stop()

   191         tooltip.trigger('mouseenter')

   193         setTimeout(function () {

   194           ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')

   195           tooltip.trigger('mouseout')

   196           setTimeout(function () {

   197             ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')

   198             setTimeout(function () {

   199               ok(!$(".tooltip").is('.in'), 'tooltip removed')

   200               start()

   201             }, 150)

   202           }, 100)

   203         }, 1)

   204       })

   206       test("should not hide tooltip if leave event occurs, then tooltip is show immediately again", function () {

   207         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   208           .appendTo('#qunit-fixture')

   209           .tooltip({ delay: { show: 0, hide: 200} })

   211         stop()

   213         tooltip.trigger('mouseenter')

   215         setTimeout(function () {

   216           ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')

   217           tooltip.trigger('mouseout')

   218           setTimeout(function () {

   219             ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')

   220             tooltip.trigger('mouseenter')

   221             setTimeout(function () {

   222               ok($(".tooltip").is('.in'), 'tooltip removed')

   223               start()

   224             }, 150)

   225           }, 100)

   226         }, 1)

   227       })

   229       test("should not show tooltip if leave event occurs before delay expires", function () {

   230         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   231           .appendTo('#qunit-fixture')

   232           .tooltip({ delay: 100 })

   233         stop()

   234         tooltip.trigger('mouseenter')

   235         setTimeout(function () {

   236           ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   237           tooltip.trigger('mouseout')

   238           setTimeout(function () {

   239             ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   240             start()

   241           }, 100)

   242         }, 50)

   243       })

   245       test("should show tooltip if leave event hasn't occured before delay expires", function () {

   246         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   247           .appendTo('#qunit-fixture')

   248           .tooltip({ delay: 150 })

   249         stop()

   250         tooltip.trigger('mouseenter')

   251         setTimeout(function () {

   252           ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')

   253         }, 100)

   254         setTimeout(function () {

   255           ok($(".tooltip").is('.fade.in'), 'tooltip has faded in')

   256           start()

   257         }, 200)

   258       })

   260       test("should destroy tooltip", function () {

   261         var tooltip = $('<div/>').tooltip().on('click.foo', function(){})

   262         ok(tooltip.data('bs.tooltip'), 'tooltip has data')

   263         ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')

   264         ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')

   265         tooltip.tooltip('show')

   266         tooltip.tooltip('destroy')

   267         ok(!tooltip.hasClass('in'), 'tooltip is hidden')

   268         ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data')

   269         ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo')

   270         ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')

   271       })

   273       test("should show tooltip with delegate selector on click", function () {

   274         var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')

   275         var tooltip = div.appendTo('#qunit-fixture')

   276                          .tooltip({ selector: 'a[rel=tooltip]',

   277                                     trigger: 'click' })

   278         div.find('a').trigger('click')

   279         ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')

   280       })

   282       test("should show tooltip when toggle is called", function () {

   283         var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')

   284           .appendTo('#qunit-fixture')

   285           .tooltip({trigger: 'manual'})

   286           .tooltip('toggle')

   287         ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')

   288       })

   290       test("should place tooltips inside the body", function () {

   291         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')

   292           .appendTo('#qunit-fixture')

   293           .tooltip({container:'body'})

   294           .tooltip('show')

   295         ok($("body > .tooltip").length, 'inside the body')

   296         ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')

   297         tooltip.tooltip('hide')

   298       })

   300       test("should place tooltip inside window", function(){

   301         var container = $("<div />").appendTo("body")

   302             .css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})

   303           , tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")

   304           .css({position: "absolute", top:0, left: 0})

   305           .appendTo(container)

   306           .tooltip({placement: "top", animate: false})

   307           .tooltip("show")

   309         stop()

   311         setTimeout(function(){

   312           ok($(".tooltip").offset().left >= 0)

   314           start()

   315           container.remove()

   316         }, 100)

   317       })

   319       test("should place tooltip on top of element", function(){

   320         var container = $("<div />").appendTo("body")

   321               .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})

   322             , p = $("<p style='margin-top:200px' />").appendTo(container)

   323             , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")

   324               .css({marginTop: 200})

   325               .appendTo(p)

   326               .tooltip({placement: "top", animate: false})

   327               .tooltip("show")

   329         stop()

   331         setTimeout(function(){

   332           var tooltip = container.find(".tooltip")

   334           start()

   335           ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)

   336           container.remove()

   337         }, 100)

   338       })

   340       test("should add position class before positioning so that position-specific styles are taken into account", function(){

   341         $("head").append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')

   343         var container = $("<div />").appendTo("body")

   344           , target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')

   345               .appendTo(container)

   346               .tooltip({placement: 'right'})

   347               .tooltip('show')

   348           , tooltip = container.find(".tooltip")

   350         ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) )

   351         target.tooltip('hide')

   352       })

   354       test("tooltip title test #1", function () {

   355         var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')

   356           .appendTo('#qunit-fixture')

   357           .tooltip({

   358           })

   359           .tooltip('show')

   360         equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')

   361         tooltip.tooltip('hide')

   362         ok(!$(".tooltip").length, 'tooltip removed')

   363       })

   365       test("tooltip title test #2", function () {

   366         var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')

   367           .appendTo('#qunit-fixture')

   368           .tooltip({

   369             title: 'This is a tooltip with some content'

   370           })

   371           .tooltip('show')

   372         equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')

   373         tooltip.tooltip('hide')

   374         ok(!$(".tooltip").length, 'tooltip removed')

   375       })

   377       test("tooltip title test #3", function () {

   378         var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')

   379           .appendTo('#qunit-fixture')

   380           .tooltip({

   381             title: 'This is a tooltip with some content'

   382           })

   383           .tooltip('show')

   384         equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')

   385         tooltip.tooltip('hide')

   386         ok(!$(".tooltip").length, 'tooltip removed')

   387       })

   389       test("tooltips should be placed dynamically, with the dynamic placement option", function () {

   390         $.support.transition = false

   391         var ttContainer = $('<div id="dynamic-tt-test"/>').css({

   392           'height' : 400

   393           , 'overflow' : 'hidden'

   394           , 'position' : 'absolute'

   395           , 'top' : 0

   396           , 'left' : 0

   397           , 'width' : 600})

   398           .appendTo('body')

   400         var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')

   401           .appendTo('#dynamic-tt-test')

   402           .tooltip({placement: 'auto'})

   403           .tooltip('show')

   406         ok($(".tooltip").is('.bottom'),  'top positioned tooltip is dynamically positioned bottom')

   408         topTooltip.tooltip('hide')

   410         var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')

   411           .appendTo('#dynamic-tt-test')

   412           .tooltip({placement: 'right auto'})

   413           .tooltip('show')

   415         ok($(".tooltip").is('.left'),  'right positioned tooltip is dynamically positioned left')

   416         rightTooltip.tooltip('hide')

   418         var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')

   419           .appendTo('#dynamic-tt-test')

   420           .tooltip({placement: 'auto bottom'})

   421           .tooltip('show')

   423         ok($(".tooltip").is('.top'),  'bottom positioned tooltip is dynamically positioned top')

   424         bottomTooltip.tooltip('hide')

   426         var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')

   427           .appendTo('#dynamic-tt-test')

   428           .tooltip({placement: 'auto left'})

   429           .tooltip('show')

   431         ok($(".tooltip").is('.right'),  'left positioned tooltip is dynamically positioned right')

   432         leftTooltip.tooltip('hide')

   434         ttContainer.remove()

   435       })

   437 })

author	stetrabby <info@trabucchi.de>
	Fri, 20 Dec 2013 22:49:16 +0100
changeset 54	0ded9d7748b7
permissions	-rwxr-xr-x