]>
git.ipfire.org Git - ipfire.org.git/blob - static/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/dropdown.js
4 QUnit
.module('dropdowns plugin')
6 QUnit
.test('should be defined on jquery object', function (assert
) {
8 assert
.ok($(document
.body
).dropdown
, 'dropdown method is defined')
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()
16 afterEach: function () {
17 $.fn
.dropdown
= $.fn
.bootstrapDropdown
18 delete $.fn
.bootstrapDropdown
22 QUnit
.test('should provide no conflict', function (assert
) {
24 assert
.strictEqual($.fn
.dropdown
, undefined, 'dropdown was set back to undefined (org value)')
27 QUnit
.test('should throw explicit error on undefined method', function (assert
) {
30 $el
.bootstrapDropdown()
32 $el
.bootstrapDropdown('noMethod')
35 assert
.strictEqual(err
.message
, 'No method named "noMethod"')
39 QUnit
.test('should return jquery collection containing the element', function (assert
) {
42 var $dropdown
= $el
.bootstrapDropdown()
43 assert
.ok($dropdown
instanceof $, 'returns jquery collection')
44 assert
.strictEqual($dropdown
[0], $el
[0], 'collection contains element')
47 QUnit
.test('should not open dropdown if target is disabled via attribute', function (assert
) {
49 var dropdownHTML
= '<ul class="tabs">'
50 + '<li class="dropdown">'
51 + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
52 + '<ul class="dropdown-menu">'
53 + '<li><a href="#">Secondary link</a></li>'
54 + '<li><a href="#">Something else here</a></li>'
55 + '<li class="divider"/>'
56 + '<li><a href="#">Another link</a></li>'
60 var $dropdown
= $(dropdownHTML
).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
62 assert
.ok(!$dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
65 QUnit
.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert
) {
67 var dropdownHTML
= '<ul class="tabs">'
68 + '<li class="dropdown">'
69 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>'
70 + '<ul class="dropdown-menu">'
71 + '<li><a href="#">Secondary link</a></li>'
72 + '<li><a href="#">Something else here</a></li>'
73 + '<li class="divider"/>'
74 + '<li><a href="#">Another link</a></li>'
78 var $dropdown
= $(dropdownHTML
)
79 .find('[data-toggle="dropdown"]')
83 assert
.strictEqual($dropdown
.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
86 QUnit
.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert
) {
88 var done
= assert
.async()
89 var dropdownHTML
= '<ul class="tabs">'
90 + '<li class="dropdown">'
91 + '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>'
92 + '<ul class="dropdown-menu">'
93 + '<li><a href="#">Secondary link</a></li>'
94 + '<li><a href="#">Something else here</a></li>'
95 + '<li class="divider"/>'
96 + '<li><a href="#">Another link</a></li>'
100 var $dropdown
= $(dropdownHTML
)
101 .appendTo('#qunit-fixture')
102 .find('[data-toggle="dropdown"]')
107 .on('hidden.bs.dropdown', function () {
108 assert
.strictEqual($dropdown
.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
112 $dropdown
.trigger('click')
113 $(document
.body
).trigger('click')
116 QUnit
.test('should not open dropdown if target is disabled via class', function (assert
) {
118 var dropdownHTML
= '<ul class="tabs">'
119 + '<li class="dropdown">'
120 + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
121 + '<ul class="dropdown-menu">'
122 + '<li><a href="#">Secondary link</a></li>'
123 + '<li><a href="#">Something else here</a></li>'
124 + '<li class="divider"/>'
125 + '<li><a href="#">Another link</a></li>'
129 var $dropdown
= $(dropdownHTML
).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
131 assert
.ok(!$dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
134 QUnit
.test('should add class show to menu if clicked', function (assert
) {
136 var dropdownHTML
= '<ul class="tabs">'
137 + '<li class="dropdown">'
138 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
139 + '<ul class="dropdown-menu">'
140 + '<li><a href="#">Secondary link</a></li>'
141 + '<li><a href="#">Something else here</a></li>'
142 + '<li class="divider"/>'
143 + '<li><a href="#">Another link</a></li>'
147 var $dropdown
= $(dropdownHTML
).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
149 assert
.ok($dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
152 QUnit
.test('should test if element has a # before assuming it\'s a selector', function (assert
) {
154 var dropdownHTML
= '<ul class="tabs">'
155 + '<li class="dropdown">'
156 + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
157 + '<ul class="dropdown-menu">'
158 + '<li><a href="#">Secondary link</a></li>'
159 + '<li><a href="#">Something else here</a></li>'
160 + '<li class="divider"/>'
161 + '<li><a href="#">Another link</a></li>'
165 var $dropdown
= $(dropdownHTML
).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
167 assert
.ok($dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
171 QUnit
.test('should remove "show" class if body is clicked', function (assert
) {
173 var dropdownHTML
= '<ul class="tabs">'
174 + '<li class="dropdown">'
175 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
176 + '<ul class="dropdown-menu">'
177 + '<li><a href="#">Secondary link</a></li>'
178 + '<li><a href="#">Something else here</a></li>'
179 + '<li class="divider"/>'
180 + '<li><a href="#">Another link</a></li>'
184 var $dropdown
= $(dropdownHTML
)
185 .appendTo('#qunit-fixture')
186 .find('[data-toggle="dropdown"]')
190 assert
.ok($dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
191 $(document
.body
).trigger('click')
192 assert
.ok(!$dropdown
.parent('.dropdown').hasClass('show'), '"show" class removed')
195 QUnit
.test('should remove "show" class if body is focused', function (assert
) {
197 var dropdownHTML
= '<div class="tabs">'
198 + '<div class="dropdown">'
199 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
200 + '<div class="dropdown-menu">'
201 + '<a class="dropdown-item" href="#">Secondary link</a>'
202 + '<a class="dropdown-item" href="#">Something else here</a>'
203 + '<div class="dropdown-divider"/>'
204 + '<a class="dropdown-item" href="#">Another link</a>'
208 var $dropdown
= $(dropdownHTML
)
209 .appendTo('#qunit-fixture')
210 .find('[data-toggle="dropdown"]')
214 assert
.ok($dropdown
.parent('.dropdown').hasClass('show'), '"show" class added on click')
215 $(document
.body
).trigger('focusin')
216 assert
.ok(!$dropdown
.parent('.dropdown').hasClass('show'), '"show" class removed')
219 QUnit
.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert
) {
221 var dropdownHTML
= '<ul class="nav">'
222 + '<li><a href="#menu1">Menu 1</a></li>'
223 + '<li class="dropdown" id="testmenu">'
224 + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
225 + '<ul class="dropdown-menu">'
226 + '<li><a href="#sub1">Submenu 1</a></li>'
230 + '<div class="btn-group">'
231 + '<button class="btn">Actions</button>'
232 + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
233 + '<ul class="dropdown-menu">'
234 + '<li><a href="#">Action 1</a></li>'
237 var $dropdowns
= $(dropdownHTML
).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
238 var $first
= $dropdowns
.first()
239 var $last
= $dropdowns
.last()
241 assert
.strictEqual($dropdowns
.length
, 2, 'two dropdowns')
243 $first
.trigger('click')
244 assert
.strictEqual($first
.parents('.show').length
, 1, '"show" class added on click')
245 assert
.strictEqual($('#qunit-fixture .show').length
, 1, 'only one dropdown is shown')
246 $(document
.body
).trigger('click')
247 assert
.strictEqual($('#qunit-fixture .show').length
, 0, '"show" class removed')
249 $last
.trigger('click')
250 assert
.strictEqual($last
.parent('.show').length
, 1, '"show" class added on click')
251 assert
.strictEqual($('#qunit-fixture .show').length
, 1, 'only one dropdown is shown')
252 $(document
.body
).trigger('click')
253 assert
.strictEqual($('#qunit-fixture .show').length
, 0, '"show" class removed')
256 QUnit
.test('should remove "show" class if body is focused, with multiple dropdowns', function (assert
) {
258 var dropdownHTML
= '<div class="nav">'
259 + '<div class="dropdown" id="testmenu">'
260 + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
261 + '<div class="dropdown-menu">'
262 + '<a class="dropdown-item" href="#sub1">Submenu 1</a>'
266 + '<div class="btn-group">'
267 + '<button class="btn">Actions</button>'
268 + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
269 + '<div class="dropdown-menu">'
270 + '<a class="dropdown-item" href="#">Action 1</a>'
273 var $dropdowns
= $(dropdownHTML
).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
274 var $first
= $dropdowns
.first()
275 var $last
= $dropdowns
.last()
277 assert
.strictEqual($dropdowns
.length
, 2, 'two dropdowns')
279 $first
.trigger('click')
280 assert
.strictEqual($first
.parents('.show').length
, 1, '"show" class added on click')
281 assert
.strictEqual($('#qunit-fixture .show').length
, 1, 'only one dropdown is show')
282 $(document
.body
).trigger('focusin')
283 assert
.strictEqual($('#qunit-fixture .show').length
, 0, '"show" class removed')
285 $last
.trigger('click')
286 assert
.strictEqual($last
.parent('.show').length
, 1, '"show" class added on click')
287 assert
.strictEqual($('#qunit-fixture .show').length
, 1, 'only one dropdown is show')
288 $(document
.body
).trigger('focusin')
289 assert
.strictEqual($('#qunit-fixture .show').length
, 0, '"show" class removed')
292 QUnit
.test('should fire show and hide event', function (assert
) {
294 var dropdownHTML
= '<ul class="tabs">'
295 + '<li class="dropdown">'
296 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
297 + '<ul class="dropdown-menu">'
298 + '<li><a href="#">Secondary link</a></li>'
299 + '<li><a href="#">Something else here</a></li>'
300 + '<li class="divider"/>'
301 + '<li><a href="#">Another link</a></li>'
305 var $dropdown
= $(dropdownHTML
)
306 .appendTo('#qunit-fixture')
307 .find('[data-toggle="dropdown"]')
310 var done
= assert
.async()
314 .on('show.bs.dropdown', function () {
315 assert
.ok(true, 'show was fired')
317 .on('hide.bs.dropdown', function () {
318 assert
.ok(true, 'hide was fired')
322 $dropdown
.trigger('click')
323 $(document
.body
).trigger('click')
327 QUnit
.test('should fire shown and hidden event', function (assert
) {
329 var dropdownHTML
= '<ul class="tabs">'
330 + '<li class="dropdown">'
331 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
332 + '<ul class="dropdown-menu">'
333 + '<li><a href="#">Secondary link</a></li>'
334 + '<li><a href="#">Something else here</a></li>'
335 + '<li class="divider"/>'
336 + '<li><a href="#">Another link</a></li>'
340 var $dropdown
= $(dropdownHTML
)
341 .appendTo('#qunit-fixture')
342 .find('[data-toggle="dropdown"]')
345 var done
= assert
.async()
349 .on('shown.bs.dropdown', function () {
350 assert
.ok(true, 'shown was fired')
352 .on('hidden.bs.dropdown', function () {
353 assert
.ok(true, 'hidden was fired')
357 $dropdown
.trigger('click')
358 $(document
.body
).trigger('click')
361 QUnit
.test('should fire shown and hidden event with a relatedTarget', function (assert
) {
363 var dropdownHTML
= '<ul class="tabs">'
364 + '<li class="dropdown">'
365 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
366 + '<ul class="dropdown-menu">'
367 + '<li><a href="#">Secondary link</a></li>'
368 + '<li><a href="#">Something else here</a></li>'
369 + '<li class="divider"/>'
370 + '<li><a href="#">Another link</a></li>'
374 var $dropdown
= $(dropdownHTML
)
375 .appendTo('#qunit-fixture')
376 .find('[data-toggle="dropdown"]')
378 var done
= assert
.async()
380 $dropdown
.parent('.dropdown')
381 .on('hidden.bs.dropdown', function (e
) {
382 assert
.strictEqual(e
.relatedTarget
, $dropdown
[0])
385 .on('shown.bs.dropdown', function (e
) {
386 assert
.strictEqual(e
.relatedTarget
, $dropdown
[0])
387 $(document
.body
).trigger('click')
390 $dropdown
.trigger('click')
393 QUnit
.test('should ignore keyboard events within <input>s and <textarea>s', function (assert
) {
395 var done
= assert
.async()
397 var dropdownHTML
= '<ul class="tabs">'
398 + '<li class="dropdown">'
399 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
400 + '<ul class="dropdown-menu">'
401 + '<li><a href="#">Secondary link</a></li>'
402 + '<li><a href="#">Something else here</a></li>'
403 + '<li class="divider"/>'
404 + '<li><a href="#">Another link</a></li>'
405 + '<li><input type="text" id="input"></li>'
406 + '<li><textarea id="textarea"/></li>'
410 var $dropdown
= $(dropdownHTML
)
411 .appendTo('#qunit-fixture')
412 .find('[data-toggle="dropdown"]')
415 var $input
= $('#input')
416 var $textarea
= $('#textarea')
420 .on('shown.bs.dropdown', function () {
421 assert
.ok(true, 'shown was fired')
423 $input
.trigger('focus').trigger($.Event('keydown', { which
: 38 }))
424 assert
.ok($(document
.activeElement
).is($input
), 'input still focused')
426 $textarea
.trigger('focus').trigger($.Event('keydown', { which
: 38 }))
427 assert
.ok($(document
.activeElement
).is($textarea
), 'textarea still focused')
432 $dropdown
.trigger('click')
435 QUnit
.test('should skip disabled element when using keyboard navigation', function (assert
) {
437 var dropdownHTML
= '<ul class="tabs">'
438 + '<li class="dropdown">'
439 + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
440 + '<ul class="dropdown-menu">'
441 + '<li class="disabled"><a href="#">Disabled link</a></li>'
442 + '<li><a href="#">Another link</a></li>'
446 var $dropdown
= $(dropdownHTML
)
447 .appendTo('#qunit-fixture')
448 .find('[data-toggle="dropdown"]')
452 $dropdown
.trigger($.Event('keydown', { which
: 40 }))
453 $dropdown
.trigger($.Event('keydown', { which
: 40 }))
455 assert
.ok(!$(document
.activeElement
).parent().is('.disabled'), '.disabled is not focused')
458 QUnit
.test('should not close the dropdown if the user clicks on a text field', function (assert
) {
460 var dropdownHTML
= '<div class="btn-group">'
461 + '<button type="button" data-toggle="dropdown">Dropdown</button>'
462 + '<ul class="dropdown-menu">'
463 + '<li><input id="textField" type="text" /></li>'
466 var $dropdown
= $(dropdownHTML
)
467 .appendTo('#qunit-fixture')
468 .find('[data-toggle="dropdown"]')
472 $('#textField').trigger('click')
474 assert
.ok($dropdown
.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')
477 QUnit
.test('should not close the dropdown if the user clicks on a textarea', function (assert
) {
479 var dropdownHTML
= '<div class="btn-group">'
480 + '<button type="button" data-toggle="dropdown">Dropdown</button>'
481 + '<ul class="dropdown-menu">'
482 + '<li><textarea id="textArea"></textarea></li>'
485 var $dropdown
= $(dropdownHTML
)
486 .appendTo('#qunit-fixture')
487 .find('[data-toggle="dropdown"]')
491 $('#textArea').trigger('click')
493 assert
.ok($dropdown
.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')