static/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/popover.js

   1 $(function () {
   2   'use strict'
   3
   4   QUnit.module('popover plugin')
   5
   6   QUnit.test('should be defined on jquery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).popover, 'popover method is defined')
   9   })
  10
  11   QUnit.module('popover', {
  12     beforeEach: function () {
  13       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
  14       $.fn.bootstrapPopover = $.fn.popover.noConflict()
  15     },
  16     afterEach: function () {
  17       $.fn.popover = $.fn.bootstrapPopover
  18       delete $.fn.bootstrapPopover
  19       $('.popover').remove()
  20     }
  21   })
  22
  23   QUnit.test('should provide no conflict', function (assert) {
  24     assert.expect(1)
  25     assert.strictEqual($.fn.popover, undefined, 'popover was set back to undefined (org value)')
  26   })
  27
  28   QUnit.test('should throw explicit error on undefined method', function (assert) {
  29     assert.expect(1)
  30     var $el = $('<div/>')
  31     $el.bootstrapPopover()
  32     try {
  33       $el.bootstrapPopover('noMethod')
  34     }
  35     catch (err) {
  36       assert.strictEqual(err.message, 'No method named "noMethod"')
  37     }
  38   })
  39
  40   QUnit.test('should return jquery collection containing the element', function (assert) {
  41     assert.expect(2)
  42     var $el = $('<div/>')
  43     var $popover = $el.bootstrapPopover()
  44     assert.ok($popover instanceof $, 'returns jquery collection')
  45     assert.strictEqual($popover[0], $el[0], 'collection contains element')
  46   })
  47
  48   QUnit.test('should render popover element', function (assert) {
  49     assert.expect(2)
  50     var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
  51       .appendTo('#qunit-fixture')
  52       .bootstrapPopover('show')
  53
  54     assert.notEqual($('.popover').length, 0, 'popover was inserted')
  55     $popover.bootstrapPopover('hide')
  56     assert.strictEqual($('.popover').length, 0, 'popover removed')
  57   })
  58
  59   QUnit.test('should store popover instance in popover data object', function (assert) {
  60     assert.expect(1)
  61     var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()
  62
  63     assert.ok($popover.data('bs.popover'), 'popover instance exists')
  64   })
  65
  66   QUnit.test('should store popover trigger in popover instance data object', function (assert) {
  67     assert.expect(1)
  68     var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
  69       .appendTo('#qunit-fixture')
  70       .bootstrapPopover()
  71
  72     $popover.bootstrapPopover('show')
  73
  74     assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
  75   })
  76
  77   QUnit.test('should get title and content from options', function (assert) {
  78     assert.expect(4)
  79     var $popover = $('<a href="#">@fat</a>')
  80       .appendTo('#qunit-fixture')
  81       .bootstrapPopover({
  82         title: function () {
  83           return '@fat'
  84         },
  85         content: function () {
  86           return 'loves writing tests （╯°□°）╯︵ ┻━┻'
  87         }
  88       })
  89
  90     $popover.bootstrapPopover('show')
  91
  92     assert.notEqual($('.popover').length, 0, 'popover was inserted')
  93     assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
  94     assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
  95
  96     $popover.bootstrapPopover('hide')
  97
  98     assert.strictEqual($('.popover').length, 0, 'popover was removed')
  99   })
 100
 101   QUnit.test('should allow DOMElement title and content (html: true)', function (assert) {
 102     assert.expect(5)
 103     var title = document.createTextNode('@glebm <3 writing tests')
 104     var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
 105     var $popover = $('<a href="#" rel="tooltip"/>')
 106       .appendTo('#qunit-fixture')
 107       .bootstrapPopover({ html: true, title: title, content: content })
 108
 109     $popover.bootstrapPopover('show')
 110
 111     assert.notEqual($('.popover').length, 0, 'popover inserted')
 112     assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
 113     assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied')
 114     // toLowerCase because IE8 will return <I>...</I>
 115     assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted')
 116     assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied')
 117   })
 118
 119   QUnit.test('should allow DOMElement title and content (html: false)', function (assert) {
 120     assert.expect(5)
 121     var title = document.createTextNode('@glebm <3 writing tests')
 122     var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
 123     var $popover = $('<a href="#" rel="tooltip"/>')
 124       .appendTo('#qunit-fixture')
 125       .bootstrapPopover({ title: title, content: content })
 126
 127     $popover.bootstrapPopover('show')
 128
 129     assert.notEqual($('.popover').length, 0, 'popover inserted')
 130     assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
 131     assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved')
 132     assert.strictEqual($('.popover .popover-content').html(), '¯\\_(ツ)_/¯', 'content inserted')
 133     assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
 134   })
 135
 136
 137   QUnit.test('should not duplicate HTML object', function (assert) {
 138     assert.expect(6)
 139     var $div = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻')
 140
 141     var $popover = $('<a href="#">@fat</a>')
 142       .appendTo('#qunit-fixture')
 143       .bootstrapPopover({
 144         html: true,
 145         content: function () {
 146           return $div
 147         }
 148       })
 149
 150     $popover.bootstrapPopover('show')
 151     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 152     assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
 153
 154     $popover.bootstrapPopover('hide')
 155     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 156
 157     $popover.bootstrapPopover('show')
 158     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 159     assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
 160
 161     $popover.bootstrapPopover('hide')
 162     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 163   })
 164
 165   QUnit.test('should get title and content from attributes', function (assert) {
 166     assert.expect(4)
 167     var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
 168       .appendTo('#qunit-fixture')
 169       .bootstrapPopover()
 170       .bootstrapPopover('show')
 171
 172     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 173     assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
 174     assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
 175
 176     $popover.bootstrapPopover('hide')
 177     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 178   })
 179
 180   QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) {
 181     assert.expect(4)
 182     var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
 183       .appendTo('#qunit-fixture')
 184       .bootstrapPopover({
 185         title: 'ignored title option',
 186         content: 'ignored content option'
 187       })
 188       .bootstrapPopover('show')
 189
 190     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 191     assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
 192     assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
 193
 194     $popover.bootstrapPopover('hide')
 195     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 196   })
 197
 198   QUnit.test('should respect custom template', function (assert) {
 199     assert.expect(3)
 200     var $popover = $('<a href="#">@fat</a>')
 201       .appendTo('#qunit-fixture')
 202       .bootstrapPopover({
 203         title: 'Test',
 204         content: 'Test',
 205         template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
 206       })
 207
 208     $popover.bootstrapPopover('show')
 209
 210     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 211     assert.ok($('.popover').hasClass('foobar'), 'custom class is present')
 212
 213     $popover.bootstrapPopover('hide')
 214     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 215   })
 216
 217   QUnit.test('should destroy popover', function (assert) {
 218     assert.expect(7)
 219     var $popover = $('<div/>')
 220       .bootstrapPopover({
 221         trigger: 'hover'
 222       })
 223       .on('click.foo', $.noop)
 224
 225     assert.ok($popover.data('bs.popover'), 'popover has data')
 226     assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
 227     assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
 228
 229     $popover.bootstrapPopover('show')
 230     $popover.bootstrapPopover('dispose')
 231
 232     assert.ok(!$popover.hasClass('show'), 'popover is hidden')
 233     assert.ok(!$popover.data('popover'), 'popover does not have data')
 234     assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
 235     assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
 236   })
 237
 238   QUnit.test('should render popover element using delegated selector', function (assert) {
 239     assert.expect(2)
 240     var $div = $('<div><a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a></div>')
 241       .appendTo('#qunit-fixture')
 242       .bootstrapPopover({
 243         selector: 'a',
 244         trigger: 'click'
 245       })
 246
 247     $div.find('a').trigger('click')
 248     assert.notEqual($('.popover').length, 0, 'popover was inserted')
 249
 250     $div.find('a').trigger('click')
 251     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 252   })
 253
 254   QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
 255     assert.expect(1)
 256     var $content = $('<div class="content-with-handler"><a class="btn btn-warning">Button with event handler</a></div>').appendTo('#qunit-fixture')
 257
 258     var handlerCalled = false
 259     $('.content-with-handler .btn').on('click', function () {
 260       handlerCalled = true
 261     })
 262
 263     var $div = $('<div><a href="#">Show popover</a></div>')
 264       .appendTo('#qunit-fixture')
 265       .bootstrapPopover({
 266         html: true,
 267         trigger: 'manual',
 268         container: 'body',
 269         content: function () {
 270           return $content
 271         }
 272       })
 273
 274     var done = assert.async()
 275     $div
 276       .one('shown.bs.popover', function () {
 277         $div
 278           .one('hidden.bs.popover', function () {
 279             $div
 280               .one('shown.bs.popover', function () {
 281                 $('.content-with-handler .btn').trigger('click')
 282                 $div.bootstrapPopover('dispose')
 283                 assert.ok(handlerCalled, 'content\'s event handler still present')
 284                 done()
 285               })
 286               .bootstrapPopover('show')
 287           })
 288           .bootstrapPopover('hide')
 289       })
 290       .bootstrapPopover('show')
 291   })
 292
 293   QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) {
 294     assert.expect(1)
 295
 296     var $popover = $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
 297       .appendTo('#qunit-fixture')
 298       .on('hidden.bs.popover shown.bs.popover', function () {
 299         assert.ok(false, 'should not fire any popover events')
 300       })
 301       .bootstrapPopover('hide')
 302     assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover')
 303   })
 304
 305   QUnit.test('should fire inserted event', function (assert) {
 306     assert.expect(2)
 307     var done = assert.async()
 308
 309     $('<a href="#">@Johann-S</a>')
 310       .appendTo('#qunit-fixture')
 311       .on('inserted.bs.popover', function () {
 312         assert.notEqual($('.popover').length, 0, 'popover was inserted')
 313         assert.ok(true, 'inserted event fired')
 314         done()
 315       })
 316       .bootstrapPopover({
 317         title: 'Test',
 318         content: 'Test'
 319       })
 320       .bootstrapPopover('show')
 321   })
 322
 323   QUnit.test('should throw an error when show is called on hidden elements', function (assert) {
 324     assert.expect(1)
 325     var done = assert.async()
 326
 327     try {
 328       $('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show')
 329     }
 330     catch (err) {
 331       assert.strictEqual(err.message, 'Please use show on visible elements')
 332       done()
 333     }
 334   })
 335
 336   QUnit.test('should hide popovers when their containing modal is closed', function (assert) {
 337     assert.expect(1)
 338     var done = assert.async()
 339     var templateHTML = '<div id="modal-test" class="modal">' +
 340                           '<div class="modal-dialog" role="document">' +
 341                             '<div class="modal-content">' +
 342                               '<div class="modal-body">' +
 343                                 '<button id="popover-test" type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Popover">' +
 344                                   'Popover on top' +
 345                                 '</button>' +
 346                               '</div>' +
 347                             '</div>' +
 348                           '</div>' +
 349                         '</div>'
 350
 351     $(templateHTML).appendTo('#qunit-fixture')
 352     $('#popover-test')
 353       .on('shown.bs.popover', function () {
 354         $('#modal-test').modal('hide')
 355       })
 356       .on('hide.bs.popover', function () {
 357         assert.ok(true, 'popover hide')
 358         done()
 359       })
 360
 361     $('#modal-test')
 362       .on('shown.bs.modal', function () {
 363         $('#popover-test').bootstrapPopover('show')
 364       })
 365       .modal('show')
 366   })
 367 })