POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/js/tests/unit/dropdown.js

   1 $(function () {
   2   'use strict';
   3
   4   QUnit.module('dropdowns plugin')
   5
   6   QUnit.test('should be defined on jquery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).dropdown, 'dropdown method is defined')
   9   })
  10
  11   QUnit.module('dropdowns', {
  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.bootstrapDropdown = $.fn.dropdown.noConflict()
  15     },
  16     afterEach: function () {
  17       $.fn.dropdown = $.fn.bootstrapDropdown
  18       delete $.fn.bootstrapDropdown
  19     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.dropdown, undefined, 'dropdown 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 $dropdown = $el.bootstrapDropdown()
  31     assert.ok($dropdown instanceof $, 'returns jquery collection')
  32     assert.strictEqual($dropdown[0], $el[0], 'collection contains element')
  33   })
  34
  35   QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) {
  36     assert.expect(1)
  37     var dropdownHTML = '<ul class="tabs">'
  38         + '<li class="dropdown">'
  39         + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
  40         + '<ul class="dropdown-menu">'
  41         + '<li><a href="#">Secondary link</a></li>'
  42         + '<li><a href="#">Something else here</a></li>'
  43         + '<li class="divider"/>'
  44         + '<li><a href="#">Another link</a></li>'
  45         + '</ul>'
  46         + '</li>'
  47         + '</ul>'
  48     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
  49
  50     assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
  51   })
  52
  53   QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
  54     assert.expect(1)
  55     var dropdownHTML = '<ul class="tabs">'
  56         + '<li class="dropdown">'
  57         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>'
  58         + '<ul class="dropdown-menu">'
  59         + '<li><a href="#">Secondary link</a></li>'
  60         + '<li><a href="#">Something else here</a></li>'
  61         + '<li class="divider"/>'
  62         + '<li><a href="#">Another link</a></li>'
  63         + '</ul>'
  64         + '</li>'
  65         + '</ul>'
  66     var $dropdown = $(dropdownHTML)
  67       .find('[data-toggle="dropdown"]')
  68       .bootstrapDropdown()
  69       .trigger('click')
  70
  71     assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
  72   })
  73
  74   QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
  75     assert.expect(1)
  76     var done = assert.async()
  77     var dropdownHTML = '<ul class="tabs">'
  78         + '<li class="dropdown">'
  79         + '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>'
  80         + '<ul class="dropdown-menu">'
  81         + '<li><a href="#">Secondary link</a></li>'
  82         + '<li><a href="#">Something else here</a></li>'
  83         + '<li class="divider"/>'
  84         + '<li><a href="#">Another link</a></li>'
  85         + '</ul>'
  86         + '</li>'
  87         + '</ul>'
  88     var $dropdown = $(dropdownHTML)
  89       .appendTo('#qunit-fixture')
  90       .find('[data-toggle="dropdown"]')
  91       .bootstrapDropdown()
  92
  93     $dropdown
  94       .parent('.dropdown')
  95       .on('hidden.bs.dropdown', function () {
  96         assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
  97         done()
  98       })
  99
 100     $dropdown.trigger('click')
 101     $(document.body).trigger('click')
 102   })
 103
 104   QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
 105     assert.expect(1)
 106     var dropdownHTML = '<ul class="tabs">'
 107         + '<li class="dropdown">'
 108         + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
 109         + '<ul class="dropdown-menu">'
 110         + '<li><a href="#">Secondary link</a></li>'
 111         + '<li><a href="#">Something else here</a></li>'
 112         + '<li class="divider"/>'
 113         + '<li><a href="#">Another link</a></li>'
 114         + '</ul>'
 115         + '</li>'
 116         + '</ul>'
 117     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 118
 119     assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
 120   })
 121
 122   QUnit.test('should add class open to menu if clicked', function (assert) {
 123     assert.expect(1)
 124     var dropdownHTML = '<ul class="tabs">'
 125         + '<li class="dropdown">'
 126         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 127         + '<ul class="dropdown-menu">'
 128         + '<li><a href="#">Secondary link</a></li>'
 129         + '<li><a href="#">Something else here</a></li>'
 130         + '<li class="divider"/>'
 131         + '<li><a href="#">Another link</a></li>'
 132         + '</ul>'
 133         + '</li>'
 134         + '</ul>'
 135     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 136
 137     assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
 138   })
 139
 140   QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
 141     assert.expect(1)
 142     var dropdownHTML = '<ul class="tabs">'
 143         + '<li class="dropdown">'
 144         + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 145         + '<ul class="dropdown-menu">'
 146         + '<li><a href="#">Secondary link</a></li>'
 147         + '<li><a href="#">Something else here</a></li>'
 148         + '<li class="divider"/>'
 149         + '<li><a href="#">Another link</a></li>'
 150         + '</ul>'
 151         + '</li>'
 152         + '</ul>'
 153     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 154
 155     assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
 156   })
 157
 158
 159   QUnit.test('should remove "open" class if body is clicked', function (assert) {
 160     assert.expect(2)
 161     var dropdownHTML = '<ul class="tabs">'
 162         + '<li class="dropdown">'
 163         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 164         + '<ul class="dropdown-menu">'
 165         + '<li><a href="#">Secondary link</a></li>'
 166         + '<li><a href="#">Something else here</a></li>'
 167         + '<li class="divider"/>'
 168         + '<li><a href="#">Another link</a></li>'
 169         + '</ul>'
 170         + '</li>'
 171         + '</ul>'
 172     var $dropdown = $(dropdownHTML)
 173       .appendTo('#qunit-fixture')
 174       .find('[data-toggle="dropdown"]')
 175       .bootstrapDropdown()
 176       .trigger('click')
 177
 178     assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
 179     $(document.body).trigger('click')
 180     assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class removed')
 181   })
 182
 183   QUnit.test('should remove "open" class if body is clicked, with multiple dropdowns', function (assert) {
 184     assert.expect(7)
 185     var dropdownHTML = '<ul class="nav">'
 186         + '<li><a href="#menu1">Menu 1</a></li>'
 187         + '<li class="dropdown" id="testmenu">'
 188         + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
 189         + '<ul class="dropdown-menu" role="menu">'
 190         + '<li><a href="#sub1">Submenu 1</a></li>'
 191         + '</ul>'
 192         + '</li>'
 193         + '</ul>'
 194         + '<div class="btn-group">'
 195         + '<button class="btn">Actions</button>'
 196         + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
 197         + '<ul class="dropdown-menu">'
 198         + '<li><a href="#">Action 1</a></li>'
 199         + '</ul>'
 200         + '</div>'
 201     var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
 202     var $first = $dropdowns.first()
 203     var $last = $dropdowns.last()
 204
 205     assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
 206
 207     $first.trigger('click')
 208     assert.strictEqual($first.parents('.open').length, 1, '"open" class added on click')
 209     assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
 210     $(document.body).trigger('click')
 211     assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
 212
 213     $last.trigger('click')
 214     assert.strictEqual($last.parent('.open').length, 1, '"open" class added on click')
 215     assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
 216     $(document.body).trigger('click')
 217     assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
 218   })
 219
 220   QUnit.test('should fire show and hide event', function (assert) {
 221     assert.expect(2)
 222     var dropdownHTML = '<ul class="tabs">'
 223         + '<li class="dropdown">'
 224         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 225         + '<ul class="dropdown-menu">'
 226         + '<li><a href="#">Secondary link</a></li>'
 227         + '<li><a href="#">Something else here</a></li>'
 228         + '<li class="divider"/>'
 229         + '<li><a href="#">Another link</a></li>'
 230         + '</ul>'
 231         + '</li>'
 232         + '</ul>'
 233     var $dropdown = $(dropdownHTML)
 234       .appendTo('#qunit-fixture')
 235       .find('[data-toggle="dropdown"]')
 236       .bootstrapDropdown()
 237
 238     var done = assert.async()
 239
 240     $dropdown
 241       .parent('.dropdown')
 242       .on('show.bs.dropdown', function () {
 243         assert.ok(true, 'show was fired')
 244       })
 245       .on('hide.bs.dropdown', function () {
 246         assert.ok(true, 'hide was fired')
 247         done()
 248       })
 249
 250     $dropdown.trigger('click')
 251     $(document.body).trigger('click')
 252   })
 253
 254
 255   QUnit.test('should fire shown and hidden event', function (assert) {
 256     assert.expect(2)
 257     var dropdownHTML = '<ul class="tabs">'
 258         + '<li class="dropdown">'
 259         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 260         + '<ul class="dropdown-menu">'
 261         + '<li><a href="#">Secondary link</a></li>'
 262         + '<li><a href="#">Something else here</a></li>'
 263         + '<li class="divider"/>'
 264         + '<li><a href="#">Another link</a></li>'
 265         + '</ul>'
 266         + '</li>'
 267         + '</ul>'
 268     var $dropdown = $(dropdownHTML)
 269       .appendTo('#qunit-fixture')
 270       .find('[data-toggle="dropdown"]')
 271       .bootstrapDropdown()
 272
 273     var done = assert.async()
 274
 275     $dropdown
 276       .parent('.dropdown')
 277       .on('shown.bs.dropdown', function () {
 278         assert.ok(true, 'shown was fired')
 279       })
 280       .on('hidden.bs.dropdown', function () {
 281         assert.ok(true, 'hidden was fired')
 282         done()
 283       })
 284
 285     $dropdown.trigger('click')
 286     $(document.body).trigger('click')
 287   })
 288
 289   QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
 290     assert.expect(3)
 291     var done = assert.async()
 292
 293     var dropdownHTML = '<ul class="tabs">'
 294         + '<li class="dropdown">'
 295         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 296         + '<ul class="dropdown-menu" role="menu">'
 297         + '<li><a href="#">Secondary link</a></li>'
 298         + '<li><a href="#">Something else here</a></li>'
 299         + '<li class="divider"/>'
 300         + '<li><a href="#">Another link</a></li>'
 301         + '<li><input type="text" id="input"></li>'
 302         + '<li><textarea id="textarea"/></li>'
 303         + '</ul>'
 304         + '</li>'
 305         + '</ul>'
 306     var $dropdown = $(dropdownHTML)
 307       .appendTo('#qunit-fixture')
 308       .find('[data-toggle="dropdown"]')
 309       .bootstrapDropdown()
 310
 311     var $input = $('#input')
 312     var $textarea = $('#textarea')
 313
 314     $dropdown
 315       .parent('.dropdown')
 316       .on('shown.bs.dropdown', function () {
 317         assert.ok(true, 'shown was fired')
 318
 319         $input.trigger('focus').trigger($.Event('keydown', { which: 38 }))
 320         assert.ok($(document.activeElement).is($input), 'input still focused')
 321
 322         $textarea.trigger('focus').trigger($.Event('keydown', { which: 38 }))
 323         assert.ok($(document.activeElement).is($textarea), 'textarea still focused')
 324
 325         done()
 326       })
 327
 328     $dropdown.trigger('click')
 329   })
 330
 331   QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
 332     assert.expect(1)
 333     var dropdownHTML = '<ul class="tabs">'
 334         + '<li class="dropdown">'
 335         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 336         + '<ul class="dropdown-menu" role="menu">'
 337         + '<li class="disabled"><a href="#">Disabled link</a></li>'
 338         + '<li><a href="#">Another link</a></li>'
 339         + '</ul>'
 340         + '</li>'
 341         + '</ul>'
 342     var $dropdown = $(dropdownHTML)
 343       .appendTo('#qunit-fixture')
 344       .find('[data-toggle="dropdown"]')
 345       .bootstrapDropdown()
 346       .trigger('click')
 347
 348     $dropdown.trigger($.Event('keydown', { which: 40 }))
 349     $dropdown.trigger($.Event('keydown', { which: 40 }))
 350
 351     assert.ok(!$(document.activeElement).parent().is('.disabled'), '.disabled is not focused')
 352   })
 353 })