bootstrap-source/bootstrap-3.0.3/js/tests/unit/tooltip.js
author stetrabby <info@trabucchi.de>
Fri, 20 Dec 2013 22:49:16 +0100
changeset 54 0ded9d7748b7
permissions -rwxr-xr-x
initial less based on the pymove3d.css
info@54
     1
$(function () {
info@54
     2
info@54
     3
    module("tooltip")
info@54
     4
info@54
     5
      test("should provide no conflict", function () {
info@54
     6
        var tooltip = $.fn.tooltip.noConflict()
info@54
     7
        ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
info@54
     8
        $.fn.tooltip = tooltip
info@54
     9
      })
info@54
    10
info@54
    11
      test("should be defined on jquery object", function () {
info@54
    12
        var div = $("<div></div>")
info@54
    13
        ok(div.tooltip, 'popover method is defined')
info@54
    14
      })
info@54
    15
info@54
    16
      test("should return element", function () {
info@54
    17
        var div = $("<div></div>")
info@54
    18
        ok(div.tooltip() == div, 'document.body returned')
info@54
    19
      })
info@54
    20
info@54
    21
      test("should expose default settings", function () {
info@54
    22
        ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')
info@54
    23
      })
info@54
    24
info@54
    25
      test("should empty title attribute", function () {
info@54
    26
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
info@54
    27
        ok(tooltip.attr('title') === '', 'title attribute was emptied')
info@54
    28
      })
info@54
    29
info@54
    30
      test("should add data attribute for referencing original title", function () {
info@54
    31
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
info@54
    32
        equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
info@54
    33
      })
info@54
    34
info@54
    35
      test("should place tooltips relative to placement option", function () {
info@54
    36
        $.support.transition = false
info@54
    37
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
    38
          .appendTo('#qunit-fixture')
info@54
    39
          .tooltip({placement: 'bottom'})
info@54
    40
          .tooltip('show')
info@54
    41
info@54
    42
        ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')
info@54
    43
        tooltip.tooltip('hide')
info@54
    44
      })
info@54
    45
info@54
    46
      test("should allow html entities", function () {
info@54
    47
        $.support.transition = false
info@54
    48
        var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
info@54
    49
          .appendTo('#qunit-fixture')
info@54
    50
          .tooltip({html: true})
info@54
    51
          .tooltip('show')
info@54
    52
info@54
    53
        ok($('.tooltip b').length, 'b tag was inserted')
info@54
    54
        tooltip.tooltip('hide')
info@54
    55
        ok(!$(".tooltip").length, 'tooltip removed')
info@54
    56
      })
info@54
    57
info@54
    58
      test("should respect custom classes", function () {
info@54
    59
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
    60
          .appendTo('#qunit-fixture')
info@54
    61
          .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
info@54
    62
          .tooltip('show')
info@54
    63
info@54
    64
        ok($('.tooltip').hasClass('some-class'), 'custom class is present')
info@54
    65
        tooltip.tooltip('hide')
info@54
    66
        ok(!$(".tooltip").length, 'tooltip removed')
info@54
    67
      })
info@54
    68
info@54
    69
      test("should fire show event", function () {
info@54
    70
        stop()
info@54
    71
        var tooltip = $('<div title="tooltip title"></div>')
info@54
    72
          .on("show.bs.tooltip", function() {
info@54
    73
            ok(true, "show was called")
info@54
    74
            start()
info@54
    75
          })
info@54
    76
          .tooltip('show')
info@54
    77
      })
info@54
    78
info@54
    79
      test("should fire shown event", function () {
info@54
    80
        stop()
info@54
    81
        var tooltip = $('<div title="tooltip title"></div>')
info@54
    82
          .on("shown.bs.tooltip", function() {
info@54
    83
            ok(true, "shown was called")
info@54
    84
            start()
info@54
    85
          })
info@54
    86
          .tooltip('show')
info@54
    87
      })
info@54
    88
info@54
    89
      test("should not fire shown event when default prevented", function () {
info@54
    90
        stop()
info@54
    91
        var tooltip = $('<div title="tooltip title"></div>')
info@54
    92
          .on("show.bs.tooltip", function(e) {
info@54
    93
            e.preventDefault()
info@54
    94
            ok(true, "show was called")
info@54
    95
            start()
info@54
    96
          })
info@54
    97
          .on("shown.bs.tooltip", function() {
info@54
    98
            ok(false, "shown was called")
info@54
    99
          })
info@54
   100
          .tooltip('show')
info@54
   101
      })
info@54
   102
info@54
   103
      test("should fire hide event", function () {
info@54
   104
        stop()
info@54
   105
        var tooltip = $('<div title="tooltip title"></div>')
info@54
   106
          .on("shown.bs.tooltip", function() {
info@54
   107
            $(this).tooltip('hide')
info@54
   108
          })
info@54
   109
          .on("hide.bs.tooltip", function() {
info@54
   110
            ok(true, "hide was called")
info@54
   111
            start()
info@54
   112
          })
info@54
   113
          .tooltip('show')
info@54
   114
      })
info@54
   115
info@54
   116
      test("should fire hidden event", function () {
info@54
   117
        stop()
info@54
   118
        var tooltip = $('<div title="tooltip title"></div>')
info@54
   119
          .on("shown.bs.tooltip", function() {
info@54
   120
            $(this).tooltip('hide')
info@54
   121
          })
info@54
   122
          .on("hidden.bs.tooltip", function() {
info@54
   123
            ok(true, "hidden was called")
info@54
   124
            start()
info@54
   125
          })
info@54
   126
          .tooltip('show')
info@54
   127
      })
info@54
   128
info@54
   129
      test("should not fire hidden event when default prevented", function () {
info@54
   130
        stop()
info@54
   131
        var tooltip = $('<div title="tooltip title"></div>')
info@54
   132
          .on("shown.bs.tooltip", function() {
info@54
   133
            $(this).tooltip('hide')
info@54
   134
          })
info@54
   135
          .on("hide.bs.tooltip", function(e) {
info@54
   136
            e.preventDefault()
info@54
   137
            ok(true, "hide was called")
info@54
   138
            start()
info@54
   139
          })
info@54
   140
          .on("hidden.bs.tooltip", function() {
info@54
   141
            ok(false, "hidden was called")
info@54
   142
          })
info@54
   143
          .tooltip('show')
info@54
   144
      })
info@54
   145
info@54
   146
      test("should not show tooltip if leave event occurs before delay expires", function () {
info@54
   147
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   148
          .appendTo('#qunit-fixture')
info@54
   149
          .tooltip({ delay: 200 })
info@54
   150
info@54
   151
        stop()
info@54
   152
info@54
   153
        tooltip.trigger('mouseenter')
info@54
   154
info@54
   155
        setTimeout(function () {
info@54
   156
          ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   157
          tooltip.trigger('mouseout')
info@54
   158
          setTimeout(function () {
info@54
   159
            ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   160
            start()
info@54
   161
          }, 200)
info@54
   162
        }, 100)
info@54
   163
      })
info@54
   164
info@54
   165
      test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {
info@54
   166
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   167
          .appendTo('#qunit-fixture')
info@54
   168
          .tooltip({ delay: { show: 200, hide: 0} })
info@54
   169
info@54
   170
        stop()
info@54
   171
info@54
   172
        tooltip.trigger('mouseenter')
info@54
   173
info@54
   174
        setTimeout(function () {
info@54
   175
          ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   176
          tooltip.trigger('mouseout')
info@54
   177
          setTimeout(function () {
info@54
   178
            ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   179
            start()
info@54
   180
          }, 200)
info@54
   181
        }, 100)
info@54
   182
      })
info@54
   183
info@54
   184
      test("should wait 200 ms before hiding the tooltip", 3, function () {
info@54
   185
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   186
          .appendTo('#qunit-fixture')
info@54
   187
          .tooltip({ delay: { show: 0, hide: 200} })
info@54
   188
info@54
   189
        stop()
info@54
   190
info@54
   191
        tooltip.trigger('mouseenter')
info@54
   192
info@54
   193
        setTimeout(function () {
info@54
   194
          ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
info@54
   195
          tooltip.trigger('mouseout')
info@54
   196
          setTimeout(function () {
info@54
   197
            ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
info@54
   198
            setTimeout(function () {
info@54
   199
              ok(!$(".tooltip").is('.in'), 'tooltip removed')
info@54
   200
              start()
info@54
   201
            }, 150)
info@54
   202
          }, 100)
info@54
   203
        }, 1)
info@54
   204
      })
info@54
   205
info@54
   206
      test("should not hide tooltip if leave event occurs, then tooltip is show immediately again", function () {
info@54
   207
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   208
          .appendTo('#qunit-fixture')
info@54
   209
          .tooltip({ delay: { show: 0, hide: 200} })
info@54
   210
info@54
   211
        stop()
info@54
   212
info@54
   213
        tooltip.trigger('mouseenter')
info@54
   214
info@54
   215
        setTimeout(function () {
info@54
   216
          ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
info@54
   217
          tooltip.trigger('mouseout')
info@54
   218
          setTimeout(function () {
info@54
   219
            ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
info@54
   220
            tooltip.trigger('mouseenter')
info@54
   221
            setTimeout(function () {
info@54
   222
              ok($(".tooltip").is('.in'), 'tooltip removed')
info@54
   223
              start()
info@54
   224
            }, 150)
info@54
   225
          }, 100)
info@54
   226
        }, 1)
info@54
   227
      })
info@54
   228
info@54
   229
      test("should not show tooltip if leave event occurs before delay expires", function () {
info@54
   230
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   231
          .appendTo('#qunit-fixture')
info@54
   232
          .tooltip({ delay: 100 })
info@54
   233
        stop()
info@54
   234
        tooltip.trigger('mouseenter')
info@54
   235
        setTimeout(function () {
info@54
   236
          ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   237
          tooltip.trigger('mouseout')
info@54
   238
          setTimeout(function () {
info@54
   239
            ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   240
            start()
info@54
   241
          }, 100)
info@54
   242
        }, 50)
info@54
   243
      })
info@54
   244
info@54
   245
      test("should show tooltip if leave event hasn't occured before delay expires", function () {
info@54
   246
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   247
          .appendTo('#qunit-fixture')
info@54
   248
          .tooltip({ delay: 150 })
info@54
   249
        stop()
info@54
   250
        tooltip.trigger('mouseenter')
info@54
   251
        setTimeout(function () {
info@54
   252
          ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
info@54
   253
        }, 100)
info@54
   254
        setTimeout(function () {
info@54
   255
          ok($(".tooltip").is('.fade.in'), 'tooltip has faded in')
info@54
   256
          start()
info@54
   257
        }, 200)
info@54
   258
      })
info@54
   259
info@54
   260
      test("should destroy tooltip", function () {
info@54
   261
        var tooltip = $('<div/>').tooltip().on('click.foo', function(){})
info@54
   262
        ok(tooltip.data('bs.tooltip'), 'tooltip has data')
info@54
   263
        ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
info@54
   264
        ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
info@54
   265
        tooltip.tooltip('show')
info@54
   266
        tooltip.tooltip('destroy')
info@54
   267
        ok(!tooltip.hasClass('in'), 'tooltip is hidden')
info@54
   268
        ok(!$._data(tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
info@54
   269
        ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip still has click.foo')
info@54
   270
        ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
info@54
   271
      })
info@54
   272
info@54
   273
      test("should show tooltip with delegate selector on click", function () {
info@54
   274
        var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
info@54
   275
        var tooltip = div.appendTo('#qunit-fixture')
info@54
   276
                         .tooltip({ selector: 'a[rel=tooltip]',
info@54
   277
                                    trigger: 'click' })
info@54
   278
        div.find('a').trigger('click')
info@54
   279
        ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
info@54
   280
      })
info@54
   281
info@54
   282
      test("should show tooltip when toggle is called", function () {
info@54
   283
        var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
info@54
   284
          .appendTo('#qunit-fixture')
info@54
   285
          .tooltip({trigger: 'manual'})
info@54
   286
          .tooltip('toggle')
info@54
   287
        ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
info@54
   288
      })
info@54
   289
info@54
   290
      test("should place tooltips inside the body", function () {
info@54
   291
        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
info@54
   292
          .appendTo('#qunit-fixture')
info@54
   293
          .tooltip({container:'body'})
info@54
   294
          .tooltip('show')
info@54
   295
        ok($("body > .tooltip").length, 'inside the body')
info@54
   296
        ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
info@54
   297
        tooltip.tooltip('hide')
info@54
   298
      })
info@54
   299
info@54
   300
      test("should place tooltip inside window", function(){
info@54
   301
        var container = $("<div />").appendTo("body")
info@54
   302
            .css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
info@54
   303
          , tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
info@54
   304
          .css({position: "absolute", top:0, left: 0})
info@54
   305
          .appendTo(container)
info@54
   306
          .tooltip({placement: "top", animate: false})
info@54
   307
          .tooltip("show")
info@54
   308
info@54
   309
        stop()
info@54
   310
info@54
   311
        setTimeout(function(){
info@54
   312
          ok($(".tooltip").offset().left >= 0)
info@54
   313
info@54
   314
          start()
info@54
   315
          container.remove()
info@54
   316
        }, 100)
info@54
   317
      })
info@54
   318
info@54
   319
      test("should place tooltip on top of element", function(){
info@54
   320
        var container = $("<div />").appendTo("body")
info@54
   321
              .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
info@54
   322
            , p = $("<p style='margin-top:200px' />").appendTo(container)
info@54
   323
            , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
info@54
   324
              .css({marginTop: 200})
info@54
   325
              .appendTo(p)
info@54
   326
              .tooltip({placement: "top", animate: false})
info@54
   327
              .tooltip("show")
info@54
   328
info@54
   329
        stop()
info@54
   330
info@54
   331
        setTimeout(function(){
info@54
   332
          var tooltip = container.find(".tooltip")
info@54
   333
info@54
   334
          start()
info@54
   335
          ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
info@54
   336
          container.remove()
info@54
   337
        }, 100)
info@54
   338
      })
info@54
   339
info@54
   340
      test("should add position class before positioning so that position-specific styles are taken into account", function(){
info@54
   341
        $("head").append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
info@54
   342
info@54
   343
        var container = $("<div />").appendTo("body")
info@54
   344
          , target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
info@54
   345
              .appendTo(container)
info@54
   346
              .tooltip({placement: 'right'})
info@54
   347
              .tooltip('show')
info@54
   348
          , tooltip = container.find(".tooltip")
info@54
   349
info@54
   350
        ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) )
info@54
   351
        target.tooltip('hide')
info@54
   352
      })
info@54
   353
info@54
   354
      test("tooltip title test #1", function () {
info@54
   355
        var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
info@54
   356
          .appendTo('#qunit-fixture')
info@54
   357
          .tooltip({
info@54
   358
          })
info@54
   359
          .tooltip('show')
info@54
   360
        equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
info@54
   361
        tooltip.tooltip('hide')
info@54
   362
        ok(!$(".tooltip").length, 'tooltip removed')
info@54
   363
      })
info@54
   364
info@54
   365
      test("tooltip title test #2", function () {
info@54
   366
        var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
info@54
   367
          .appendTo('#qunit-fixture')
info@54
   368
          .tooltip({
info@54
   369
            title: 'This is a tooltip with some content'
info@54
   370
          })
info@54
   371
          .tooltip('show')
info@54
   372
        equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
info@54
   373
        tooltip.tooltip('hide')
info@54
   374
        ok(!$(".tooltip").length, 'tooltip removed')
info@54
   375
      })
info@54
   376
info@54
   377
      test("tooltip title test #3", function () {
info@54
   378
        var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
info@54
   379
          .appendTo('#qunit-fixture')
info@54
   380
          .tooltip({
info@54
   381
            title: 'This is a tooltip with some content'
info@54
   382
          })
info@54
   383
          .tooltip('show')
info@54
   384
        equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
info@54
   385
        tooltip.tooltip('hide')
info@54
   386
        ok(!$(".tooltip").length, 'tooltip removed')
info@54
   387
      })
info@54
   388
info@54
   389
      test("tooltips should be placed dynamically, with the dynamic placement option", function () {
info@54
   390
        $.support.transition = false
info@54
   391
        var ttContainer = $('<div id="dynamic-tt-test"/>').css({
info@54
   392
          'height' : 400
info@54
   393
          , 'overflow' : 'hidden'
info@54
   394
          , 'position' : 'absolute'
info@54
   395
          , 'top' : 0
info@54
   396
          , 'left' : 0
info@54
   397
          , 'width' : 600})
info@54
   398
          .appendTo('body')
info@54
   399
info@54
   400
        var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
info@54
   401
          .appendTo('#dynamic-tt-test')
info@54
   402
          .tooltip({placement: 'auto'})
info@54
   403
          .tooltip('show')
info@54
   404
info@54
   405
info@54
   406
        ok($(".tooltip").is('.bottom'),  'top positioned tooltip is dynamically positioned bottom')
info@54
   407
info@54
   408
        topTooltip.tooltip('hide')
info@54
   409
info@54
   410
        var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
info@54
   411
          .appendTo('#dynamic-tt-test')
info@54
   412
          .tooltip({placement: 'right auto'})
info@54
   413
          .tooltip('show')
info@54
   414
info@54
   415
        ok($(".tooltip").is('.left'),  'right positioned tooltip is dynamically positioned left')
info@54
   416
        rightTooltip.tooltip('hide')
info@54
   417
info@54
   418
        var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
info@54
   419
          .appendTo('#dynamic-tt-test')
info@54
   420
          .tooltip({placement: 'auto bottom'})
info@54
   421
          .tooltip('show')
info@54
   422
info@54
   423
        ok($(".tooltip").is('.top'),  'bottom positioned tooltip is dynamically positioned top')
info@54
   424
        bottomTooltip.tooltip('hide')
info@54
   425
info@54
   426
        var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
info@54
   427
          .appendTo('#dynamic-tt-test')
info@54
   428
          .tooltip({placement: 'auto left'})
info@54
   429
          .tooltip('show')
info@54
   430
info@54
   431
        ok($(".tooltip").is('.right'),  'left positioned tooltip is dynamically positioned right')
info@54
   432
        leftTooltip.tooltip('hide')
info@54
   433
info@54
   434
        ttContainer.remove()
info@54
   435
      })
info@54
   436
info@54
   437
})
Impressum Datenschutzerklärung