src/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/modal.js

   1 $(function () {
   2   'use strict'
   3
   4   QUnit.module('modal plugin')
   5
   6   QUnit.test('should be defined on jquery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).modal, 'modal method is defined')
   9   })
  10
  11   QUnit.module('modal', {
  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.bootstrapModal = $.fn.modal.noConflict()
  15     },
  16     afterEach: function () {
  17       $.fn.modal = $.fn.bootstrapModal
  18       delete $.fn.bootstrapModal
  19     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
  25   })
  26
  27   QUnit.test('should throw explicit error on undefined method', function (assert) {
  28     assert.expect(1)
  29     var $el = $('<div id="modal-test"/>')
  30     $el.bootstrapModal()
  31     try {
  32       $el.bootstrapModal('noMethod')
  33     }
  34     catch (err) {
  35       assert.strictEqual(err.message, 'No method named "noMethod"')
  36     }
  37   })
  38
  39   QUnit.test('should return jquery collection containing the element', function (assert) {
  40     assert.expect(2)
  41     var $el = $('<div id="modal-test"/>')
  42     var $modal = $el.bootstrapModal()
  43     assert.ok($modal instanceof $, 'returns jquery collection')
  44     assert.strictEqual($modal[0], $el[0], 'collection contains element')
  45   })
  46
  47   QUnit.test('should expose defaults var for settings', function (assert) {
  48     assert.expect(1)
  49     assert.ok($.fn.bootstrapModal.Constructor.Default, 'default object exposed')
  50   })
  51
  52   QUnit.test('should insert into dom when show method is called', function (assert) {
  53     assert.expect(1)
  54     var done = assert.async()
  55
  56     $('<div id="modal-test"/>')
  57       .on('shown.bs.modal', function () {
  58         assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
  59         done()
  60       })
  61       .bootstrapModal('show')
  62   })
  63
  64   QUnit.test('should fire show event', function (assert) {
  65     assert.expect(1)
  66     var done = assert.async()
  67
  68     $('<div id="modal-test"/>')
  69       .on('show.bs.modal', function () {
  70         assert.ok(true, 'show event fired')
  71         done()
  72       })
  73       .bootstrapModal('show')
  74   })
  75
  76   QUnit.test('should not fire shown when show was prevented', function (assert) {
  77     assert.expect(1)
  78     var done = assert.async()
  79
  80     $('<div id="modal-test"/>')
  81       .on('show.bs.modal', function (e) {
  82         e.preventDefault()
  83         assert.ok(true, 'show event fired')
  84         done()
  85       })
  86       .on('shown.bs.modal', function () {
  87         assert.ok(false, 'shown event fired')
  88       })
  89       .bootstrapModal('show')
  90   })
  91
  92   QUnit.test('should hide modal when hide is called', function (assert) {
  93     assert.expect(3)
  94     var done = assert.async()
  95
  96     $('<div id="modal-test"/>')
  97       .on('shown.bs.modal', function () {
  98         assert.ok($('#modal-test').is(':visible'), 'modal visible')
  99         assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
 100         $(this).bootstrapModal('hide')
 101       })
 102       .on('hidden.bs.modal', function () {
 103         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 104         done()
 105       })
 106       .bootstrapModal('show')
 107   })
 108
 109   QUnit.test('should toggle when toggle is called', function (assert) {
 110     assert.expect(3)
 111     var done = assert.async()
 112
 113     $('<div id="modal-test"/>')
 114       .on('shown.bs.modal', function () {
 115         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 116         assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
 117         $(this).bootstrapModal('toggle')
 118       })
 119       .on('hidden.bs.modal', function () {
 120         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 121         done()
 122       })
 123       .bootstrapModal('toggle')
 124   })
 125
 126   QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) {
 127     assert.expect(3)
 128     var done = assert.async()
 129
 130     $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
 131       .on('shown.bs.modal', function () {
 132         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 133         assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
 134         $(this).find('.close').trigger('click')
 135       })
 136       .on('hidden.bs.modal', function () {
 137         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 138         done()
 139       })
 140       .bootstrapModal('toggle')
 141   })
 142
 143   QUnit.test('should allow modal close with "backdrop:false"', function (assert) {
 144     assert.expect(2)
 145     var done = assert.async()
 146
 147     $('<div id="modal-test" data-backdrop="false"/>')
 148       .on('shown.bs.modal', function () {
 149         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 150         $(this).bootstrapModal('hide')
 151       })
 152       .on('hidden.bs.modal', function () {
 153         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 154         done()
 155       })
 156       .bootstrapModal('show')
 157   })
 158
 159   QUnit.test('should close modal when clicking outside of modal-content', function (assert) {
 160     assert.expect(3)
 161     var done = assert.async()
 162
 163     $('<div id="modal-test"><div class="contents"/></div>')
 164       .on('shown.bs.modal', function () {
 165         assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
 166         $('.contents').trigger('click')
 167         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 168         $('#modal-test').trigger('click')
 169       })
 170       .on('hidden.bs.modal', function () {
 171         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 172         done()
 173       })
 174       .bootstrapModal('show')
 175   })
 176
 177   QUnit.test('should not close modal when clicking outside of modal-content if data-backdrop="true"', function (assert) {
 178     assert.expect(1)
 179     var done = assert.async()
 180
 181     $('<div id="modal-test" data-backdrop="false"><div class="contents"/></div>')
 182       .on('shown.bs.modal', function () {
 183         $('#modal-test').trigger('click')
 184         assert.ok($('#modal-test').is(':visible'), 'modal not hidden')
 185         done()
 186       })
 187       .bootstrapModal('show')
 188   })
 189
 190   QUnit.test('should close modal when escape key is pressed via keydown', function (assert) {
 191     assert.expect(3)
 192     var done = assert.async()
 193
 194     var $div = $('<div id="modal-test"/>')
 195     $div
 196       .on('shown.bs.modal', function () {
 197         assert.ok($('#modal-test').length, 'modal inserted into dom')
 198         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 199         $div.trigger($.Event('keydown', { which: 27 }))
 200
 201         setTimeout(function () {
 202           assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 203           $div.remove()
 204           done()
 205         }, 0)
 206       })
 207       .bootstrapModal('show')
 208   })
 209
 210   QUnit.test('should not close modal when escape key is pressed via keyup', function (assert) {
 211     assert.expect(3)
 212     var done = assert.async()
 213
 214     var $div = $('<div id="modal-test"/>')
 215     $div
 216       .on('shown.bs.modal', function () {
 217         assert.ok($('#modal-test').length, 'modal inserted into dom')
 218         assert.ok($('#modal-test').is(':visible'), 'modal visible')
 219         $div.trigger($.Event('keyup', { which: 27 }))
 220
 221         setTimeout(function () {
 222           assert.ok($div.is(':visible'), 'modal still visible')
 223           $div.remove()
 224           done()
 225         }, 0)
 226       })
 227       .bootstrapModal('show')
 228   })
 229
 230   QUnit.test('should trigger hide event once when clicking outside of modal-content', function (assert) {
 231     assert.expect(1)
 232     var done = assert.async()
 233
 234     var triggered
 235
 236     $('<div id="modal-test"><div class="contents"/></div>')
 237       .on('shown.bs.modal', function () {
 238         triggered = 0
 239         $('#modal-test').trigger('click')
 240       })
 241       .on('hide.bs.modal', function () {
 242         triggered += 1
 243         assert.strictEqual(triggered, 1, 'modal hide triggered once')
 244         done()
 245       })
 246       .bootstrapModal('show')
 247   })
 248
 249   QUnit.test('should remove aria-hidden attribute when shown, add it back when hidden', function (assert) {
 250     assert.expect(3)
 251     var done = assert.async()
 252
 253     $('<div id="modal-test" aria-hidden="true"/>')
 254       .on('shown.bs.modal', function () {
 255         assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed')
 256         $(this).bootstrapModal('hide')
 257       })
 258       .on('hidden.bs.modal', function () {
 259         assert.ok($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute added')
 260         assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'correct aria-hidden="true" added')
 261         done()
 262       })
 263       .bootstrapModal('show')
 264   })
 265
 266   QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
 267     assert.expect(2)
 268     var done = assert.async()
 269
 270     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
 271       .one('shown.bs.modal', function () {
 272         $('#close').trigger('click')
 273       })
 274       .one('hidden.bs.modal', function () {
 275         // after one open-close cycle
 276         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 277         $(this)
 278           .one('shown.bs.modal', function () {
 279             $('#close').trigger('click')
 280           })
 281           .one('hidden.bs.modal', function () {
 282             assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
 283             done()
 284           })
 285           .bootstrapModal('show')
 286       })
 287       .bootstrapModal('show')
 288   })
 289
 290   QUnit.test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) {
 291     assert.expect(1)
 292     var done = assert.async()
 293
 294     var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
 295
 296     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
 297       .on('hidden.bs.modal', function () {
 298         setTimeout(function () {
 299           assert.ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
 300           done()
 301         }, 0)
 302       })
 303       .on('shown.bs.modal', function () {
 304         $('#close').trigger('click')
 305       })
 306       .appendTo('#qunit-fixture')
 307
 308     $toggleBtn.trigger('click')
 309   })
 310
 311   QUnit.test('should not restore focus to toggling element if the associated show event gets prevented', function (assert) {
 312     assert.expect(1)
 313     var done = assert.async()
 314     var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
 315     var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
 316
 317     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
 318       .one('show.bs.modal', function (e) {
 319         e.preventDefault()
 320         $otherBtn.trigger('focus')
 321         setTimeout($.proxy(function () {
 322           $(this).bootstrapModal('show')
 323         }, this), 0)
 324       })
 325       .on('hidden.bs.modal', function () {
 326         setTimeout(function () {
 327           assert.ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
 328           done()
 329         }, 0)
 330       })
 331       .on('shown.bs.modal', function () {
 332         $('#close').trigger('click')
 333       })
 334       .appendTo('#qunit-fixture')
 335
 336     $toggleBtn.trigger('click')
 337   })
 338
 339   QUnit.test('should restore inline body padding after closing', function (assert) {
 340     assert.expect(2)
 341     var done = assert.async()
 342     var originalBodyPad = 0
 343     var $body = $(document.body)
 344
 345     $body.css('padding-right', originalBodyPad)
 346
 347     $('<div id="modal-test"/>')
 348       .on('hidden.bs.modal', function () {
 349         var currentBodyPad = parseInt($body.css('padding-right'), 10)
 350         assert.notStrictEqual($body.attr('style'), '', 'body has non-empty style attribute')
 351         assert.strictEqual(currentBodyPad, originalBodyPad, 'original body padding was not changed')
 352         $body.removeAttr('style')
 353         done()
 354       })
 355       .on('shown.bs.modal', function () {
 356         $(this).bootstrapModal('hide')
 357       })
 358       .bootstrapModal('show')
 359   })
 360
 361   QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
 362     assert.expect(1)
 363     var done = assert.async()
 364     var $body = $(document.body)
 365     var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
 366
 367     $('<div id="modal-test"/>')
 368       .on('hidden.bs.modal', function () {
 369         assert.ok(!$body.attr('style'), 'body does not have inline padding set')
 370         $style.remove()
 371         done()
 372       })
 373       .on('shown.bs.modal', function () {
 374         $(this).bootstrapModal('hide')
 375       })
 376       .bootstrapModal('show')
 377   })
 378
 379   QUnit.test('should have a paddingRight when the modal is taller than the viewport', function (assert) {
 380     assert.expect(2)
 381     var done = assert.async()
 382     $('<div class="fixed-top fixed-bottom sticky-top is-fixed">@Johann-S</div>').appendTo('#qunit-fixture')
 383     $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px')
 384
 385     $('<div id="modal-test"/>')
 386       .on('shown.bs.modal', function () {
 387         var paddingRight = parseInt($(document.body).css('padding-right'), 10)
 388         assert.strictEqual(isNaN(paddingRight), false)
 389         assert.strictEqual(paddingRight !== 0, true)
 390         $(document.body).css('padding-right', '') // Because test case "should ignore other inline styles when trying to restore body padding after closing" fail if not
 391         done()
 392       })
 393       .bootstrapModal('show')
 394   })
 395
 396   QUnit.test('should remove padding-right on modal after closing', function (assert) {
 397     assert.expect(3)
 398     var done = assert.async()
 399     $('<div class="fixed-top fixed-bottom is-fixed sticky-top">@Johann-S</div>').appendTo('#qunit-fixture')
 400     $('.fixed-top, .fixed-bottom, .is-fixed, .sticky-top').css('padding-right', '10px')
 401
 402     $('<div id="modal-test"/>')
 403       .on('shown.bs.modal', function () {
 404         var paddingRight = parseInt($(document.body).css('padding-right'), 10)
 405         assert.strictEqual(isNaN(paddingRight), false)
 406         assert.strictEqual(paddingRight !== 0, true)
 407         $(this).bootstrapModal('hide')
 408       })
 409       .on('hidden.bs.modal', function () {
 410         var paddingRight = parseInt($(document.body).css('padding-right'), 10)
 411         assert.strictEqual(paddingRight, 0)
 412         done()
 413       })
 414       .bootstrapModal('show')
 415   })
 416
 417   QUnit.test('should ignore other inline styles when trying to restore body padding after closing', function (assert) {
 418     assert.expect(2)
 419     var done = assert.async()
 420     var $body = $(document.body)
 421     var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
 422
 423     $body.css('color', 'red')
 424
 425     $('<div id="modal-test"/>')
 426       .on('hidden.bs.modal', function () {
 427         assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set')
 428         assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set')
 429         $body.removeAttr('style')
 430         $style.remove()
 431         done()
 432       })
 433       .on('shown.bs.modal', function () {
 434         $(this).bootstrapModal('hide')
 435       })
 436       .bootstrapModal('show')
 437   })
 438
 439   QUnit.test('should properly restore non-pixel inline body padding after closing', function (assert) {
 440     assert.expect(1)
 441     var done = assert.async()
 442     var $body = $(document.body)
 443
 444     $body.css('padding-right', '5%')
 445
 446     $('<div id="modal-test"/>')
 447       .on('hidden.bs.modal', function () {
 448         assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set')
 449         $body.removeAttr('style')
 450         done()
 451       })
 452       .on('shown.bs.modal', function () {
 453         $(this).bootstrapModal('hide')
 454       })
 455       .bootstrapModal('show')
 456   })
 457
 458   QUnit.test('should not follow link in area tag', function (assert) {
 459     assert.expect(2)
 460     var done = assert.async()
 461
 462     $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>')
 463       .appendTo('#qunit-fixture')
 464
 465     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
 466       .appendTo('#qunit-fixture')
 467
 468     $('#test')
 469       .on('click.bs.modal.data-api', function (event) {
 470         assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen')
 471
 472         setTimeout(function () {
 473           assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href')
 474           done()
 475         }, 1)
 476       })
 477       .trigger('click')
 478   })
 479 })