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

   1 $(function () {
   2   'use strict'
   3
   4   QUnit.module('collapse plugin')
   5
   6   QUnit.test('should be defined on jquery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).collapse, 'collapse method is defined')
   9   })
  10
  11   QUnit.module('collapse', {
  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.bootstrapCollapse = $.fn.collapse.noConflict()
  15     },
  16     afterEach: function () {
  17       $.fn.collapse = $.fn.bootstrapCollapse
  18       delete $.fn.bootstrapCollapse
  19     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.collapse, undefined, 'collapse was set back to undefined (org value)')
  25   })
  26
  27   QUnit.test('should throw explicit error on undefined method', function (assert) {
  28     assert.expect(1)
  29     var $el = $('<div/>')
  30     $el.bootstrapCollapse()
  31     try {
  32       $el.bootstrapCollapse('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/>')
  42     var $collapse = $el.bootstrapCollapse()
  43     assert.ok($collapse instanceof $, 'returns jquery collection')
  44     assert.strictEqual($collapse[0], $el[0], 'collection contains element')
  45   })
  46
  47   QUnit.test('should show a collapsed element', function (assert) {
  48     assert.expect(2)
  49     var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
  50
  51     assert.ok($el.hasClass('show'), 'has class "show"')
  52     assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
  53   })
  54
  55   QUnit.test('should collapse only the first collapse', function (assert) {
  56     assert.expect(2)
  57     var html = [
  58       '<div class="panel-group" id="accordion1">',
  59       '<div class="panel">',
  60       '<div id="collapse1" class="collapse"/>',
  61       '</div>',
  62       '</div>',
  63       '<div class="panel-group" id="accordion2">',
  64       '<div class="panel">',
  65       '<div id="collapse2" class="collapse show"/>',
  66       '</div>',
  67       '</div>'
  68     ].join('')
  69     $(html).appendTo('#qunit-fixture')
  70     var $el1 = $('#collapse1')
  71     var $el2 = $('#collapse2')
  72     $el1.bootstrapCollapse('show')
  73
  74     assert.ok($el1.hasClass('show'))
  75     assert.ok($el2.hasClass('show'))
  76   })
  77
  78   QUnit.test('should hide a collapsed element', function (assert) {
  79     assert.expect(1)
  80     var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
  81
  82     assert.ok(!$el.hasClass('show'), 'does not have class "show"')
  83   })
  84
  85   QUnit.test('should not fire shown when show is prevented', function (assert) {
  86     assert.expect(1)
  87     var done = assert.async()
  88
  89     $('<div class="collapse"/>')
  90       .on('show.bs.collapse', function (e) {
  91         e.preventDefault()
  92         assert.ok(true, 'show event fired')
  93         done()
  94       })
  95       .on('shown.bs.collapse', function () {
  96         assert.ok(false, 'shown event fired')
  97       })
  98       .bootstrapCollapse('show')
  99   })
 100
 101   QUnit.test('should reset style to auto after finishing opening collapse', function (assert) {
 102     assert.expect(2)
 103     var done = assert.async()
 104
 105     $('<div class="collapse" style="height: 0px"/>')
 106       .on('show.bs.collapse', function () {
 107         assert.strictEqual(this.style.height, '0px', 'height is 0px')
 108       })
 109       .on('shown.bs.collapse', function () {
 110         assert.strictEqual(this.style.height, '', 'height is auto')
 111         done()
 112       })
 113       .bootstrapCollapse('show')
 114   })
 115
 116   QUnit.test('should reset style to auto after finishing closing collapse', function (assert) {
 117     assert.expect(1)
 118     var done = assert.async()
 119
 120     $('<div class="collapse"/>')
 121       .on('shown.bs.collapse', function () {
 122         $(this).bootstrapCollapse('hide')
 123       })
 124       .on('hidden.bs.collapse', function () {
 125         assert.strictEqual(this.style.height, '', 'height is auto')
 126         done()
 127       })
 128       .bootstrapCollapse('show')
 129   })
 130
 131   QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) {
 132     assert.expect(1)
 133     var done = assert.async()
 134
 135     var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
 136
 137     $('<div id="test1"/>')
 138       .appendTo('#qunit-fixture')
 139       .on('shown.bs.collapse', function () {
 140         assert.ok(!$target.hasClass('collapsed'), 'target does not have collapsed class')
 141         done()
 142       })
 143
 144     $target.trigger('click')
 145   })
 146
 147   QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) {
 148     assert.expect(1)
 149     var done = assert.async()
 150
 151     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 152
 153     $('<div id="test1" class="show"/>')
 154       .appendTo('#qunit-fixture')
 155       .on('hidden.bs.collapse', function () {
 156         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
 157         done()
 158       })
 159
 160     $target.trigger('click')
 161   })
 162
 163   QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) {
 164     assert.expect(2)
 165     var done = assert.async()
 166
 167     var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
 168     var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
 169
 170     $('<div id="test1"/>')
 171       .appendTo('#qunit-fixture')
 172       .on('shown.bs.collapse', function () {
 173         assert.ok(!$target.hasClass('collapsed'), 'target trigger does not have collapsed class')
 174         assert.ok(!$alt.hasClass('collapsed'), 'alt trigger does not have collapsed class')
 175         done()
 176       })
 177
 178     $target.trigger('click')
 179   })
 180
 181   QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) {
 182     assert.expect(2)
 183     var done = assert.async()
 184
 185     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 186     var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 187
 188     $('<div id="test1" class="show"/>')
 189       .appendTo('#qunit-fixture')
 190       .on('hidden.bs.collapse', function () {
 191         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
 192         assert.ok($alt.hasClass('collapsed'), 'alt trigger has collapsed class')
 193         done()
 194       })
 195
 196     $target.trigger('click')
 197   })
 198
 199   QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) {
 200     assert.expect(0)
 201     var done = assert.async()
 202
 203     var $test = $('<div id="test1" class="show"/>')
 204       .appendTo('#qunit-fixture')
 205       .on('hide.bs.collapse', function () {
 206         assert.ok(false)
 207       })
 208
 209     $test.bootstrapCollapse('show')
 210
 211     setTimeout(done, 0)
 212   })
 213
 214   QUnit.test('should open a collapse when initialized with "show" option if not already shown', function (assert) {
 215     assert.expect(1)
 216     var done = assert.async()
 217
 218     var $test = $('<div id="test1" />')
 219       .appendTo('#qunit-fixture')
 220       .on('show.bs.collapse', function () {
 221         assert.ok(true)
 222       })
 223
 224     $test.bootstrapCollapse('show')
 225
 226     setTimeout(done, 0)
 227   })
 228
 229   QUnit.test('should not show a collapse when initialized with "hide" option if already hidden', function (assert) {
 230     assert.expect(0)
 231     var done = assert.async()
 232
 233     $('<div class="collapse"></div>')
 234       .appendTo('#qunit-fixture')
 235       .on('show.bs.collapse', function () {
 236         assert.ok(false, 'showing a previously-uninitialized hidden collapse when the "hide" method is called')
 237       })
 238       .bootstrapCollapse('hide')
 239
 240     setTimeout(done, 0)
 241   })
 242
 243   QUnit.test('should hide a collapse when initialized with "hide" option if not already hidden', function (assert) {
 244     assert.expect(1)
 245     var done = assert.async()
 246
 247     $('<div class="collapse show"></div>')
 248       .appendTo('#qunit-fixture')
 249       .on('hide.bs.collapse', function () {
 250         assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
 251       })
 252       .bootstrapCollapse('hide')
 253
 254     setTimeout(done, 0)
 255   })
 256
 257   QUnit.test('should remove "collapsed" class from active accordion target', function (assert) {
 258     assert.expect(3)
 259     var done = assert.async()
 260
 261     var accordionHTML = '<div id="accordion">'
 262         + '<div class="card"/>'
 263         + '<div class="card"/>'
 264         + '<div class="card"/>'
 265         + '</div>'
 266     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 267
 268     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 269
 270     $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 271
 272     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 273
 274     $('<div id="body2"/>').appendTo($groups.eq(1))
 275
 276     var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
 277
 278     $('<div id="body3"/>')
 279       .appendTo($groups.eq(2))
 280       .on('shown.bs.collapse', function () {
 281         assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
 282         assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
 283         assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
 284
 285         done()
 286       })
 287
 288     $target3.trigger('click')
 289   })
 290
 291   QUnit.test('should allow dots in data-parent', function (assert) {
 292     assert.expect(3)
 293     var done = assert.async()
 294
 295     var accordionHTML = '<div class="accordion">'
 296         + '<div class="card"/>'
 297         + '<div class="card"/>'
 298         + '<div class="card"/>'
 299         + '</div>'
 300     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 301
 302     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
 303
 304     $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 305
 306     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
 307
 308     $('<div id="body2"/>').appendTo($groups.eq(1))
 309
 310     var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
 311
 312     $('<div id="body3"/>')
 313       .appendTo($groups.eq(2))
 314       .on('shown.bs.collapse', function () {
 315         assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
 316         assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
 317         assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
 318
 319         done()
 320       })
 321
 322     $target3.trigger('click')
 323   })
 324
 325   QUnit.test('should set aria-expanded="true" on target when collapse is shown', function (assert) {
 326     assert.expect(1)
 327     var done = assert.async()
 328
 329     var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
 330
 331     $('<div id="test1"/>')
 332       .appendTo('#qunit-fixture')
 333       .on('shown.bs.collapse', function () {
 334         assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
 335         done()
 336       })
 337
 338     $target.trigger('click')
 339   })
 340
 341   QUnit.test('should set aria-expanded="false" on target when collapse is hidden', function (assert) {
 342     assert.expect(1)
 343     var done = assert.async()
 344
 345     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 346
 347     $('<div id="test1" class="show"/>')
 348       .appendTo('#qunit-fixture')
 349       .on('hidden.bs.collapse', function () {
 350         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
 351         done()
 352       })
 353
 354     $target.trigger('click')
 355   })
 356
 357   QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) {
 358     assert.expect(2)
 359     var done = assert.async()
 360
 361     var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
 362     var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
 363
 364     $('<div id="test1"/>')
 365       .appendTo('#qunit-fixture')
 366       .on('shown.bs.collapse', function () {
 367         assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
 368         assert.strictEqual($alt.attr('aria-expanded'), 'true', 'aria-expanded on alt is "true"')
 369         done()
 370       })
 371
 372     $target.trigger('click')
 373   })
 374
 375   QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) {
 376     assert.expect(2)
 377     var done = assert.async()
 378
 379     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 380     var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 381
 382     $('<div id="test1" class="show"/>')
 383       .appendTo('#qunit-fixture')
 384       .on('hidden.bs.collapse', function () {
 385         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
 386         assert.strictEqual($alt.attr('aria-expanded'), 'false', 'aria-expanded on alt is "false"')
 387         done()
 388       })
 389
 390     $target.trigger('click')
 391   })
 392
 393   QUnit.test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function (assert) {
 394     assert.expect(3)
 395     var done = assert.async()
 396
 397     var accordionHTML = '<div id="accordion">'
 398         + '<div class="card"/>'
 399         + '<div class="card"/>'
 400         + '<div class="card"/>'
 401         + '</div>'
 402     var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 403
 404     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 405
 406     $('<div id="body1" aria-expanded="true" class="show"/>').appendTo($groups.eq(0))
 407
 408     var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
 409
 410     $('<div id="body2" aria-expanded="false"/>').appendTo($groups.eq(1))
 411
 412     var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
 413
 414     $('<div id="body3" aria-expanded="false"/>')
 415       .appendTo($groups.eq(2))
 416       .on('shown.bs.collapse', function () {
 417         assert.strictEqual($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
 418         assert.strictEqual($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"')
 419         assert.strictEqual($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"')
 420
 421         done()
 422       })
 423
 424     $target3.trigger('click')
 425   })
 426
 427   QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) {
 428     assert.expect(1)
 429     var done = assert.async()
 430
 431     var accordionHTML = '<div id="accordion">'
 432         + '<div class="card"/>'
 433         + '<div class="card"/>'
 434         + '</div>'
 435     var showFired = false
 436     var $groups   = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
 437
 438     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 439
 440     $('<div id="body1" class="collapse"/>')
 441       .appendTo($groups.eq(0))
 442       .on('show.bs.collapse', function () {
 443         showFired = true
 444       })
 445
 446     var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 447     var $body2   = $('<div id="body2" class="collapse"/>').appendTo($groups.eq(1))
 448
 449     $target2.trigger('click')
 450
 451     $body2
 452       .toggleClass('show collapsing')
 453       .data('bs.collapse')._isTransitioning = 1
 454
 455     $target1.trigger('click')
 456
 457     setTimeout(function () {
 458       assert.ok(!showFired, 'show event did not fire')
 459       done()
 460     }, 1)
 461   })
 462
 463   QUnit.test('should add "collapsed" class to target when collapse is hidden via manual invocation', function (assert) {
 464     assert.expect(1)
 465     var done = assert.async()
 466
 467     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 468
 469     $('<div id="test1" class="show"/>')
 470       .appendTo('#qunit-fixture')
 471       .on('hidden.bs.collapse', function () {
 472         assert.ok($target.hasClass('collapsed'))
 473         done()
 474       })
 475       .bootstrapCollapse('hide')
 476   })
 477
 478   QUnit.test('should remove "collapsed" class from target when collapse is shown via manual invocation', function (assert) {
 479     assert.expect(1)
 480     var done = assert.async()
 481
 482     var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
 483
 484     $('<div id="test1"/>')
 485       .appendTo('#qunit-fixture')
 486       .on('shown.bs.collapse', function () {
 487         assert.ok(!$target.hasClass('collapsed'))
 488         done()
 489       })
 490       .bootstrapCollapse('show')
 491   })
 492
 493 })