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