How to use dropDown method in taiko
Best JavaScript code snippet using taiko
dropdown.js
Source:dropdown.js 
1$(function () {2 'use strict'3 QUnit.module('dropdowns plugin')4 QUnit.test('should be defined on jquery object', function (assert) {5 assert.expect(1)6 assert.ok($(document.body).dropdown, 'dropdown method is defined')7 })8 QUnit.module('dropdowns', {9 beforeEach: function () {10 // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode11 $.fn.bootstrapDropdown = $.fn.dropdown.noConflict()12 },13 afterEach: function () {14 $.fn.dropdown = $.fn.bootstrapDropdown15 delete $.fn.bootstrapDropdown16 $('#qunit-fixture').html('')17 }18 })19 QUnit.test('should provide no conflict', function (assert) {20 assert.expect(1)21 assert.strictEqual(typeof $.fn.dropdown, 'undefined', 'dropdown was set back to undefined (org value)')22 })23 QUnit.test('should throw explicit error on undefined method', function (assert) {24 assert.expect(1)25 var $el = $('<div/>')26 $el.bootstrapDropdown()27 try {28 $el.bootstrapDropdown('noMethod')29 } catch (err) {30 assert.strictEqual(err.message, 'No method named "noMethod"')31 }32 })33 QUnit.test('should return jquery collection containing the element', function (assert) {34 assert.expect(2)35 var $el = $('<div/>')36 var $dropdown = $el.bootstrapDropdown()37 assert.ok($dropdown instanceof $, 'returns jquery collection')38 assert.strictEqual($dropdown[0], $el[0], 'collection contains element')39 })40 QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) {41 assert.expect(1)42 var done = assert.async()43 var dropdownHTML = '<div class="tabs">' +44 '<div class="dropdown">' +45 '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +46 '<div class="dropdown-menu">' +47 '<a class="dropdown-item" href="#">Secondary link</a>' +48 '<a class="dropdown-item" href="#">Something else here</a>' +49 '<div class="divider"/>' +50 '<a class="dropdown-item" href="#">Another link</a>' +51 '</div>' +52 '</div>' +53 '</div>'54 $(dropdownHTML).appendTo('#qunit-fixture')55 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()56 $dropdown.on('click', function () {57 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))58 done()59 })60 $dropdown.trigger($.Event('click'))61 })62 QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) {63 assert.expect(1)64 var done = assert.async()65 var dropdownHTML = '<div class="tabs">' +66 '<div class="dropdown">' +67 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +68 '<div class="dropdown-menu">' +69 '<a class="dropdown-item" href="#">Secondary link</a>' +70 '<a class="dropdown-item" href="#">Something else here</a>' +71 '</div>' +72 '</div>' +73 '</div>'74 var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()75 $dropdown76 .parent('.dropdown')77 .on('shown.bs.dropdown', function () {78 assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added')79 done()80 })81 $dropdown.trigger('click')82 })83 QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) {84 assert.expect(1)85 var done = assert.async()86 var dropdownHTML = '<div class="tabs">' +87 '<div class="dropdown">' +88 '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' +89 '<div class="dropdown-menu">' +90 '<a class="dropdown-item" href="#">Secondary link</a>' +91 '<a class="dropdown-item" href="#">Something else here</a>' +92 '</div>' +93 '</div>' +94 '</div>'95 var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()96 $dropdown97 .parent('.dropdown')98 .on('shown.bs.dropdown', function () {99 assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added')100 done()101 })102 $dropdown.trigger('click')103 })104 QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {105 assert.expect(1)106 var done = assert.async()107 var dropdownHTML = '<div class="tabs">' +108 '<div class="dropdown">' +109 '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' +110 '<div class="dropdown-menu">' +111 '<a class="dropdown-item" href="#">Secondary link</a>' +112 '<a class="dropdown-item" href="#">Something else here</a>' +113 '<div class="divider"/>' +114 '<a class="dropdown-item" href="#">Another link</a>' +115 '</div>' +116 '</div>' +117 '</div>'118 var $dropdown = $(dropdownHTML)119 .appendTo('#qunit-fixture')120 .find('[data-toggle="dropdown"]')121 .bootstrapDropdown()122 $dropdown123 .parent('.dropdown')124 .on('shown.bs.dropdown', function () {125 assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')126 done()127 })128 $dropdown.trigger('click')129 })130 QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {131 assert.expect(1)132 var done = assert.async()133 var dropdownHTML = '<div class="tabs">' +134 '<div class="dropdown">' +135 '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>' +136 '<div class="dropdown-menu">' +137 '<a class="dropdown-item" href="#">Secondary link</a>' +138 '<a class="dropdown-item" href="#">Something else here</a>' +139 '<div class="divider"/>' +140 '<a class="dropdown-item" href="#">Another link</a>' +141 '</div>' +142 '</div>' +143 '</div>'144 var $dropdown = $(dropdownHTML)145 .appendTo('#qunit-fixture')146 .find('[data-toggle="dropdown"]')147 .bootstrapDropdown()148 $dropdown149 .parent('.dropdown')150 .on('hidden.bs.dropdown', function () {151 assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')152 done()153 })154 $dropdown.trigger('click')155 $(document.body).trigger('click')156 })157 QUnit.test('should not open dropdown if target is disabled via class', function (assert) {158 assert.expect(1)159 var done = assert.async()160 var dropdownHTML = '<div class="tabs">' +161 '<div class="dropdown">' +162 '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +163 '<div class="dropdown-menu">' +164 '<a class="dropdown-item" href="#">Secondary link</a>' +165 '<a class="dropdown-item" href="#">Something else here</a>' +166 '<div class="divider"/>' +167 '<a class="dropdown-item" href="#">Another link</a>' +168 '</div>' +169 '</div>' +170 '</div>'171 $(dropdownHTML).appendTo('#qunit-fixture')172 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()173 $dropdown.on('click', function () {174 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))175 done()176 })177 $dropdown.trigger($.Event('click'))178 })179 QUnit.test('should add class show to menu if clicked', function (assert) {180 assert.expect(1)181 var done = assert.async()182 var dropdownHTML = '<div class="tabs">' +183 '<div class="dropdown">' +184 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +185 '<div class="dropdown-menu">' +186 '<a class="dropdown-item" href="#">Secondary link</a>' +187 '<a class="dropdown-item" href="#">Something else here</a>' +188 '<div class="divider"/>' +189 '<a class="dropdown-item" href="#">Another link</a>' +190 '</div>' +191 '</div>' +192 '</div>'193 var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()194 $dropdown195 .parent('.dropdown')196 .on('shown.bs.dropdown', function () {197 assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')198 done()199 })200 $dropdown.trigger('click')201 })202 QUnit.test('should remove "show" class if body is clicked', function (assert) {203 assert.expect(2)204 var done = assert.async()205 var dropdownHTML = '<div class="tabs">' +206 '<div class="dropdown">' +207 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +208 '<div class="dropdown-menu">' +209 '<a class="dropdown-item" href="#">Secondary link</a>' +210 '<a class="dropdown-item" href="#">Something else here</a>' +211 '<div class="divider"/>' +212 '<a class="dropdown-item" href="#">Another link</a>' +213 '</div>' +214 '</div>' +215 '</div>'216 var $dropdown = $(dropdownHTML)217 .appendTo('#qunit-fixture')218 .find('[data-toggle="dropdown"]')219 .bootstrapDropdown()220 $dropdown221 .parent('.dropdown')222 .on('shown.bs.dropdown', function () {223 assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')224 $(document.body).trigger('click')225 }).on('hidden.bs.dropdown', function () {226 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')227 done()228 })229 $dropdown.trigger('click')230 })231 QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {232 assert.expect(2)233 var done = assert.async()234 var dropdownHTML = '<div class="tabs">' +235 '<div class="dropdown">' +236 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +237 '<div class="dropdown-menu">' +238 '<a class="dropdown-item" href="#">Secondary link</a>' +239 '<a class="dropdown-item" href="#">Something else here</a>' +240 '<div class="dropdown-divider"/>' +241 '<a class="dropdown-item" href="#">Another link</a>' +242 '</div>' +243 '</div>' +244 '</div>'245 var $dropdown = $(dropdownHTML)246 .appendTo('#qunit-fixture')247 .find('[data-toggle="dropdown"]')248 .bootstrapDropdown()249 $dropdown250 .parent('.dropdown')251 .on('shown.bs.dropdown', function () {252 assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')253 var e = $.Event('keyup')254 e.which = 9 // Tab255 $(document.body).trigger(e)256 }).on('hidden.bs.dropdown', function () {257 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')258 done()259 })260 $dropdown.trigger('click')261 })262 QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {263 assert.expect(7)264 var done = assert.async()265 var dropdownHTML = '<div class="nav">' +266 '<div class="dropdown" id="testmenu">' +267 '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' +268 '<div class="dropdown-menu">' +269 '<a class="dropdown-item" href="#sub1">Submenu 1</a>' +270 '</div>' +271 '</div>' +272 '</div>' +273 '<div class="btn-group">' +274 '<button class="btn">Actions</button>' +275 '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>' +276 '<div class="dropdown-menu">' +277 '<a class="dropdown-item" href="#">Action 1</a>' +278 '</div>' +279 '</div>'280 var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')281 var $first = $dropdowns.first()282 var $last = $dropdowns.last()283 assert.strictEqual($dropdowns.length, 2, 'two dropdowns')284 $first.parent('.dropdown')285 .on('shown.bs.dropdown', function () {286 assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')287 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')288 $(document.body).trigger('click')289 }).on('hidden.bs.dropdown', function () {290 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')291 $last.trigger('click')292 })293 $last.parent('.btn-group')294 .on('shown.bs.dropdown', function () {295 assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')296 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')297 $(document.body).trigger('click')298 }).on('hidden.bs.dropdown', function () {299 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')300 done()301 })302 $first.trigger('click')303 })304 QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {305 assert.expect(7)306 var done = assert.async()307 var dropdownHTML = '<div class="nav">' +308 '<div class="dropdown" id="testmenu">' +309 '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' +310 '<div class="dropdown-menu">' +311 '<a class="dropdown-item" href="#sub1">Submenu 1</a>' +312 '</div>' +313 '</div>' +314 '</div>' +315 '<div class="btn-group">' +316 '<button class="btn">Actions</button>' +317 '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>' +318 '<div class="dropdown-menu">' +319 '<a class="dropdown-item" href="#">Action 1</a>' +320 '</div>' +321 '</div>'322 var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')323 var $first = $dropdowns.first()324 var $last = $dropdowns.last()325 assert.strictEqual($dropdowns.length, 2, 'two dropdowns')326 $first.parent('.dropdown')327 .on('shown.bs.dropdown', function () {328 assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')329 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')330 var e = $.Event('keyup')331 e.which = 9 // Tab332 $(document.body).trigger(e)333 }).on('hidden.bs.dropdown', function () {334 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')335 $last.trigger('click')336 })337 $last.parent('.btn-group')338 .on('shown.bs.dropdown', function () {339 assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')340 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')341 var e = $.Event('keyup')342 e.which = 9 // Tab343 $(document.body).trigger(e)344 }).on('hidden.bs.dropdown', function () {345 assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')346 done()347 })348 $first.trigger('click')349 })350 QUnit.test('should fire show and hide event', function (assert) {351 assert.expect(2)352 var dropdownHTML = '<div class="tabs">' +353 '<div class="dropdown">' +354 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +355 '<div class="dropdown-menu">' +356 '<a class="dropdown-item" href="#">Secondary link</a>' +357 '<a class="dropdown-item" href="#">Something else here</a>' +358 '<div class="divider"/>' +359 '<a class="dropdown-item" href="#">Another link</a>' +360 '</div>' +361 '</div>' +362 '</div>'363 var $dropdown = $(dropdownHTML)364 .appendTo('#qunit-fixture')365 .find('[data-toggle="dropdown"]')366 .bootstrapDropdown()367 var done = assert.async()368 $dropdown369 .parent('.dropdown')370 .on('show.bs.dropdown', function () {371 assert.ok(true, 'show was fired')372 })373 .on('hide.bs.dropdown', function () {374 assert.ok(true, 'hide was fired')375 done()376 })377 $dropdown.trigger('click')378 $(document.body).trigger('click')379 })380 QUnit.test('should fire shown and hidden event', function (assert) {381 assert.expect(2)382 var dropdownHTML = '<div class="tabs">' +383 '<div class="dropdown">' +384 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +385 '<div class="dropdown-menu">' +386 '<a class="dropdown-item" href="#">Secondary link</a>' +387 '<a class="dropdown-item" href="#">Something else here</a>' +388 '<div class="divider"/>' +389 '<a class="dropdown-item" href="#">Another link</a>' +390 '</div>' +391 '</div>' +392 '</div>'393 var $dropdown = $(dropdownHTML)394 .appendTo('#qunit-fixture')395 .find('[data-toggle="dropdown"]')396 .bootstrapDropdown()397 var done = assert.async()398 $dropdown399 .parent('.dropdown')400 .on('shown.bs.dropdown', function () {401 assert.ok(true, 'shown was fired')402 })403 .on('hidden.bs.dropdown', function () {404 assert.ok(true, 'hidden was fired')405 done()406 })407 $dropdown.trigger('click')408 $(document.body).trigger('click')409 })410 QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {411 assert.expect(2)412 var dropdownHTML = '<div class="tabs">' +413 '<div class="dropdown">' +414 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +415 '<div class="dropdown-menu">' +416 '<a class="dropdown-item" href="#">Secondary link</a>' +417 '<a class="dropdown-item" href="#">Something else here</a>' +418 '<div class="divider"/>' +419 '<a class="dropdown-item" href="#">Another link</a>' +420 '</div>' +421 '</div>' +422 '</div>'423 var $dropdown = $(dropdownHTML)424 .appendTo('#qunit-fixture')425 .find('[data-toggle="dropdown"]')426 .bootstrapDropdown()427 var done = assert.async()428 $dropdown.parent('.dropdown')429 .on('hidden.bs.dropdown', function (e) {430 assert.strictEqual(e.relatedTarget, $dropdown[0])431 done()432 })433 .on('shown.bs.dropdown', function (e) {434 assert.strictEqual(e.relatedTarget, $dropdown[0])435 $(document.body).trigger('click')436 })437 $dropdown.trigger('click')438 })439 QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {440 assert.expect(3)441 var dropdownHTML = '<div class="tabs">' +442 '<div class="dropdown">' +443 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +444 '<div class="dropdown-menu">' +445 '<a class="dropdown-item" href="#">Secondary link</a>' +446 '<a class="dropdown-item" href="#">Something else here</a>' +447 '<div class="divider"/>' +448 '<a class="dropdown-item" href="#">Another link</a>' +449 '</div>' +450 '</div>' +451 '</div>'452 var $dropdown = $(dropdownHTML)453 .appendTo('#qunit-fixture')454 .find('[data-toggle="dropdown"]')455 .bootstrapDropdown()456 $dropdown.parent('.dropdown')457 .on('hide.bs.dropdown', function (e) {458 assert.ok(e.clickEvent)459 })460 .on('hidden.bs.dropdown', function (e) {461 assert.ok(e.clickEvent)462 })463 .on('shown.bs.dropdown', function () {464 assert.ok(true, 'shown was fired')465 $(document.body).trigger('click')466 })467 $dropdown.trigger('click')468 })469 QUnit.test('should fire hide and hidden event without a clickEvent if event type is not click', function (assert) {470 assert.expect(3)471 var dropdownHTML = '<div class="tabs">' +472 '<div class="dropdown">' +473 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +474 '<div class="dropdown-menu">' +475 '<a class="dropdown-item" href="#">Secondary link</a>' +476 '<a class="dropdown-item" href="#">Something else here</a>' +477 '<div class="divider"/>' +478 '<a class="dropdown-item" href="#">Another link</a>' +479 '</div>' +480 '</div>' +481 '</div>'482 var $dropdown = $(dropdownHTML)483 .appendTo('#qunit-fixture')484 .find('[data-toggle="dropdown"]')485 .bootstrapDropdown()486 $dropdown.parent('.dropdown')487 .on('hide.bs.dropdown', function (e) {488 assert.notOk(e.clickEvent)489 })490 .on('hidden.bs.dropdown', function (e) {491 assert.notOk(e.clickEvent)492 })493 .on('shown.bs.dropdown', function () {494 assert.ok(true, 'shown was fired')495 $dropdown.trigger($.Event('keydown', {496 which: 27497 }))498 })499 $dropdown.trigger('click')500 })501 QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {502 assert.expect(3)503 var done = assert.async()504 var dropdownHTML = '<div class="tabs">' +505 '<div class="dropdown">' +506 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +507 '<div class="dropdown-menu">' +508 '<a class="dropdown-item" href="#">Secondary link</a>' +509 '<a class="dropdown-item" href="#">Something else here</a>' +510 '<div class="divider"/>' +511 '<a class="dropdown-item" href="#">Another link</a>' +512 '<input type="text" id="input">' +513 '<textarea id="textarea"/>' +514 '</div>' +515 '</div>' +516 '</div>'517 var $dropdown = $(dropdownHTML)518 .appendTo('#qunit-fixture')519 .find('[data-toggle="dropdown"]')520 .bootstrapDropdown()521 var $input = $('#input')522 var $textarea = $('#textarea')523 $dropdown524 .parent('.dropdown')525 .on('shown.bs.dropdown', function () {526 assert.ok(true, 'shown was fired')527 $input.trigger('focus').trigger($.Event('keydown', {528 which: 38529 }))530 assert.ok($(document.activeElement).is($input), 'input still focused')531 $textarea.trigger('focus').trigger($.Event('keydown', {532 which: 38533 }))534 assert.ok($(document.activeElement).is($textarea), 'textarea still focused')535 done()536 })537 $dropdown.trigger('click')538 })539 QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {540 assert.expect(3)541 var done = assert.async()542 var dropdownHTML = '<div class="tabs">' +543 '<div class="dropdown">' +544 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +545 '<div class="dropdown-menu">' +546 '<a class="dropdown-item disabled" href="#">Disabled link</a>' +547 '<button class="dropdown-item" type="button" disabled>Disabled button</button>' +548 '<a id="item1" class="dropdown-item" href="#">Another link</a>' +549 '</div>' +550 '</div>' +551 '</div>'552 var $dropdown = $(dropdownHTML)553 .appendTo('#qunit-fixture')554 .find('[data-toggle="dropdown"]')555 .bootstrapDropdown()556 $dropdown557 .parent('.dropdown')558 .on('shown.bs.dropdown', function () {559 assert.ok(true, 'shown was fired')560 $dropdown.trigger($.Event('keydown', {561 which: 40562 }))563 $dropdown.trigger($.Event('keydown', {564 which: 40565 }))566 assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')567 assert.ok(!$(document.activeElement).is(':disabled'), ':disabled is not focused')568 done()569 })570 $dropdown.trigger('click')571 })572 QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {573 assert.expect(4)574 var done = assert.async()575 var dropdownHTML = '<div class="tabs">' +576 '<div class="dropdown">' +577 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +578 '<div class="dropdown-menu">' +579 '<a id="item1" class="dropdown-item" href="#">A link</a>' +580 '<a id="item2" class="dropdown-item" href="#">Another link</a>' +581 '</div>' +582 '</div>' +583 '</div>'584 var $dropdown = $(dropdownHTML)585 .appendTo('#qunit-fixture')586 .find('[data-toggle="dropdown"]')587 .bootstrapDropdown()588 $dropdown589 .parent('.dropdown')590 .on('shown.bs.dropdown', function () {591 assert.ok(true, 'shown was fired')592 $dropdown.trigger($.Event('keydown', {593 which: 40594 }))595 assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')596 $(document.activeElement).trigger($.Event('keydown', {597 which: 40598 }))599 assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')600 $(document.activeElement).trigger($.Event('keydown', {601 which: 38602 }))603 assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')604 done()605 })606 $dropdown.trigger('click')607 })608 QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {609 assert.expect(2)610 var done = assert.async()611 var dropdownHTML = '<div class="dropdown">' +612 '<button type="button" data-toggle="dropdown">Dropdown</button>' +613 '<div class="dropdown-menu">' +614 '<input id="textField" type="text" />' +615 '</div>' +616 '</div>'617 var $dropdown = $(dropdownHTML)618 .appendTo('#qunit-fixture')619 .find('[data-toggle="dropdown"]')620 .bootstrapDropdown()621 var $textfield = $('#textField')622 $textfield.on('click', function () {623 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')624 done()625 })626 $dropdown627 .parent('.dropdown')628 .on('shown.bs.dropdown', function () {629 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')630 $textfield.trigger($.Event('click'))631 })632 $dropdown.trigger('click')633 })634 QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {635 assert.expect(2)636 var done = assert.async()637 var dropdownHTML = '<div class="dropdown">' +638 '<button type="button" data-toggle="dropdown">Dropdown</button>' +639 '<div class="dropdown-menu">' +640 '<textarea id="textArea"></textarea>' +641 '</div>' +642 '</div>'643 var $dropdown = $(dropdownHTML)644 .appendTo('#qunit-fixture')645 .find('[data-toggle="dropdown"]')646 .bootstrapDropdown()647 var $textarea = $('#textArea')648 $textarea.on('click', function () {649 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')650 done()651 })652 $dropdown653 .parent('.dropdown')654 .on('shown.bs.dropdown', function () {655 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')656 $textarea.trigger($.Event('click'))657 })658 $dropdown.trigger('click')659 })660 QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {661 assert.expect(1)662 var done = assert.async()663 var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' +664 '<div class="dropdown">' +665 ' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>' +666 ' <div class="dropdown-menu" aria-labelledby="dropdown">' +667 ' <a class="dropdown-item" href="#">Action</a>' +668 ' <a class="dropdown-item" href="#">Another action</a>' +669 ' <a class="dropdown-item" href="#">Something else here</a>' +670 ' </div>' +671 '</div>' +672 '</nav>'673 $(html).appendTo('#qunit-fixture')674 var $triggerDropdown = $('#qunit-fixture')675 .find('[data-toggle="dropdown"]')676 .bootstrapDropdown()677 var $dropdownMenu = $triggerDropdown.next()678 $triggerDropdown679 .parent('.dropdown')680 .on('shown.bs.dropdown', function () {681 assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')682 done()683 })684 $triggerDropdown.trigger($.Event('click'))685 })686 QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {687 assert.expect(7)688 var done = assert.async()689 var dropdownHTML = '<div class="tabs">' +690 '<div class="dropdown">' +691 '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +692 '<div class="dropdown-menu">' +693 '<a class="dropdown-item" href="#">Secondary link</a>' +694 '<a class="dropdown-item" href="#">Something else here</a>' +695 '<div class="divider"/>' +696 '<a class="dropdown-item" href="#">Another link</a>' +697 '<input type="text" id="input">' +698 '<textarea id="textarea"/>' +699 '</div>' +700 '</div>' +701 '</div>'702 var $dropdown = $(dropdownHTML)703 .appendTo('#qunit-fixture')704 .find('[data-toggle="dropdown"]')705 .bootstrapDropdown()706 var $input = $('#input')707 var $textarea = $('#textarea')708 $dropdown709 .parent('.dropdown')710 .on('shown.bs.dropdown', function () {711 // Space key712 $input.trigger('focus').trigger($.Event('keydown', {713 which: 32714 }))715 assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')716 $textarea.trigger('focus').trigger($.Event('keydown', {717 which: 32718 }))719 assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')720 // Key up721 $input.trigger('focus').trigger($.Event('keydown', {722 which: 38723 }))724 assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')725 $textarea.trigger('focus').trigger($.Event('keydown', {726 which: 38727 }))728 assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')729 // Key down730 $input.trigger('focus').trigger($.Event('keydown', {731 which: 40732 }))733 assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')734 $textarea.trigger('focus').trigger($.Event('keydown', {735 which: 40736 }))737 assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')738 // Key escape739 $input.trigger('focus').trigger($.Event('keydown', {740 which: 27741 }))742 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')743 done()744 })745 $dropdown.trigger('click')746 })747 QUnit.test('should ignore space key events for <input>s within dropdown, and accept up, down and escape', function (assert) {748 assert.expect(6)749 var done = assert.async()750 var dropdownHTML =751 '<ul class="nav tabs">' +752 ' <li class="dropdown">' +753 ' <input type="text" id="input" data-toggle="dropdown">' +754 ' <div class="dropdown-menu" role="menu">' +755 ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' +756 ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' +757 ' <div class="divider"></div>' +758 ' <a class="dropdown-item" href="#">Another link</a>' +759 ' </div>' +760 ' </li>' +761 '</ul>'762 var $dropdown = $(dropdownHTML)763 .appendTo('#qunit-fixture')764 .find('[data-toggle="dropdown"]')765 .bootstrapDropdown()766 var $input = $('#input')767 $dropdown768 .parent('.dropdown')769 .one('shown.bs.dropdown', function () {770 assert.ok(true, 'shown was fired')771 // Key space772 $input.trigger('focus').trigger($.Event('keydown', {773 which: 32774 }))775 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')776 assert.ok($(document.activeElement).is($input), 'input is still focused')777 // Key escape778 $input.trigger('focus').trigger($.Event('keydown', {779 which: 27780 }))781 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')782 $dropdown783 .parent('.dropdown')784 .one('shown.bs.dropdown', function () {785 // Key down786 $input.trigger('focus').trigger($.Event('keydown', {787 which: 40788 }))789 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')790 $dropdown791 .parent('.dropdown')792 .one('shown.bs.dropdown', function () {793 // Key up794 $input.trigger('focus').trigger($.Event('keydown', {795 which: 38796 }))797 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')798 done()799 }).bootstrapDropdown('toggle')800 $input.trigger('click')801 })802 $input.trigger('click')803 })804 $input.trigger('click')805 })806 QUnit.test('should ignore space key events for <textarea>s within dropdown, and accept up, down and escape', function (assert) {807 assert.expect(6)808 var done = assert.async()809 var dropdownHTML =810 '<ul class="nav tabs">' +811 ' <li class="dropdown">' +812 ' <textarea id="textarea" data-toggle="dropdown"></textarea>' +813 ' <div class="dropdown-menu" role="menu">' +814 ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' +815 ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' +816 ' <div class="divider"></div>' +817 ' <a class="dropdown-item" href="#">Another link</a>' +818 ' </div>' +819 ' </li>' +820 '</ul>'821 var $dropdown = $(dropdownHTML)822 .appendTo('#qunit-fixture')823 .find('[data-toggle="dropdown"]')824 .bootstrapDropdown()825 var $textarea = $('#textarea')826 $dropdown827 .parent('.dropdown')828 .one('shown.bs.dropdown', function () {829 assert.ok(true, 'shown was fired')830 // Key space831 $textarea.trigger('focus').trigger($.Event('keydown', {832 which: 32833 }))834 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')835 assert.ok($(document.activeElement).is($textarea), 'textarea is still focused')836 // Key escape837 $textarea.trigger('focus').trigger($.Event('keydown', {838 which: 27839 }))840 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')841 $dropdown842 .parent('.dropdown')843 .one('shown.bs.dropdown', function () {844 // Key down845 $textarea.trigger('focus').trigger($.Event('keydown', {846 which: 40847 }))848 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')849 $dropdown850 .parent('.dropdown')851 .one('shown.bs.dropdown', function () {852 // Key up853 $textarea.trigger('focus').trigger($.Event('keydown', {854 which: 38855 }))856 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')857 done()858 }).bootstrapDropdown('toggle')859 $textarea.trigger('click')860 })861 $textarea.trigger('click')862 })863 $textarea.trigger('click')864 })865 QUnit.test('should not use Popper.js if display set to static', function (assert) {866 assert.expect(1)867 var dropdownHTML =868 '<div class="dropdown">' +869 '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</a>' +870 '<div class="dropdown-menu">' +871 '<a class="dropdown-item" href="#">Secondary link</a>' +872 '<a class="dropdown-item" href="#">Something else here</a>' +873 '<div class="divider"/>' +874 '<a class="dropdown-item" href="#">Another link</a>' +875 '</div>' +876 '</div>'877 var $dropdown = $(dropdownHTML)878 .appendTo('#qunit-fixture')879 .find('[data-toggle="dropdown"]')880 .bootstrapDropdown()881 var done = assert.async()882 var dropdownMenu = $dropdown.next()[0]883 $dropdown.parent('.dropdown')884 .on('shown.bs.dropdown', function () {885 // Popper.js add this attribute when we use it886 assert.strictEqual(dropdownMenu.getAttribute('x-placement'), null)887 done()888 })889 $dropdown.trigger('click')890 })891 QUnit.test('should call Popper.js and detect navbar on update', function (assert) {892 assert.expect(3)893 var dropdownHTML =894 '<div class="dropdown">' +895 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +896 ' <div class="dropdown-menu">' +897 ' <a class="dropdown-item" href="#">Another link</a>' +898 ' </div>' +899 '</div>'900 var $dropdown = $(dropdownHTML)901 .appendTo('#qunit-fixture')902 .find('[data-toggle="dropdown"]')903 .bootstrapDropdown()904 var dropdown = $dropdown.data('bs.dropdown')905 dropdown.toggle()906 assert.ok(dropdown._popper)907 var spyPopper = sinon.spy(dropdown._popper, 'scheduleUpdate')908 var spyDetectNavbar = sinon.spy(dropdown, '_detectNavbar')909 dropdown.update()910 assert.ok(spyPopper.called)911 assert.ok(spyDetectNavbar.called)912 })913 QUnit.test('should just detect navbar on update', function (assert) {914 assert.expect(2)915 var dropdownHTML =916 '<div class="dropdown">' +917 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +918 ' <div class="dropdown-menu">' +919 ' <a class="dropdown-item" href="#">Another link</a>' +920 ' </div>' +921 '</div>'922 var $dropdown = $(dropdownHTML)923 .appendTo('#qunit-fixture')924 .find('[data-toggle="dropdown"]')925 .bootstrapDropdown()926 var dropdown = $dropdown.data('bs.dropdown')927 var spyDetectNavbar = sinon.spy(dropdown, '_detectNavbar')928 dropdown.update()929 assert.notOk(dropdown._popper)930 assert.ok(spyDetectNavbar.called)931 })932 QUnit.test('should dispose dropdown with Popper', function (assert) {933 assert.expect(6)934 var dropdownHTML =935 '<div class="dropdown">' +936 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +937 ' <div class="dropdown-menu">' +938 ' <a class="dropdown-item" href="#">Another link</a>' +939 ' </div>' +940 '</div>'941 var $dropdown = $(dropdownHTML)942 .appendTo('#qunit-fixture')943 .find('[data-toggle="dropdown"]')944 .bootstrapDropdown()945 var dropdown = $dropdown.data('bs.dropdown')946 dropdown.toggle()947 assert.ok(dropdown._popper)948 assert.ok(dropdown._menu !== null)949 assert.ok(dropdown._element !== null)950 var spyDestroy = sinon.spy(dropdown._popper, 'destroy')951 dropdown.dispose()952 assert.ok(spyDestroy.called)953 assert.ok(dropdown._menu === null)954 assert.ok(dropdown._element === null)955 })956 QUnit.test('should dispose dropdown', function (assert) {957 assert.expect(5)958 var dropdownHTML =959 '<div class="dropdown">' +960 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +961 ' <div class="dropdown-menu">' +962 ' <a class="dropdown-item" href="#">Another link</a>' +963 ' </div>' +964 '</div>'965 var $dropdown = $(dropdownHTML)966 .appendTo('#qunit-fixture')967 .find('[data-toggle="dropdown"]')968 .bootstrapDropdown()969 var dropdown = $dropdown.data('bs.dropdown')970 assert.notOk(dropdown._popper)971 assert.ok(dropdown._menu !== null)972 assert.ok(dropdown._element !== null)973 dropdown.dispose()974 assert.ok(dropdown._menu === null)975 assert.ok(dropdown._element === null)976 })977 QUnit.test('should show dropdown', function (assert) {978 assert.expect(2)979 var dropdownHTML =980 '<div class="dropdown">' +981 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +982 ' <div class="dropdown-menu">' +983 ' <a class="dropdown-item" href="#">Another link</a>' +984 ' </div>' +985 '</div>'986 var $dropdown = $(dropdownHTML)987 .appendTo('#qunit-fixture')988 .find('[data-toggle="dropdown"]')989 .bootstrapDropdown()990 var dropdown = $dropdown.data('bs.dropdown')991 var done = assert.async()992 $dropdown993 .parent('.dropdown')994 .on('show.bs.dropdown', function () {995 assert.ok(true, 'show was fired')996 })997 .on('shown.bs.dropdown', function () {998 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')999 done()1000 })1001 dropdown.show()1002 })1003 QUnit.test('should hide dropdown', function (assert) {1004 assert.expect(2)1005 var dropdownHTML =1006 '<div class="dropdown">' +1007 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1008 ' <div class="dropdown-menu">' +1009 ' <a class="dropdown-item" href="#">Another link</a>' +1010 ' </div>' +1011 '</div>'1012 var $dropdown = $(dropdownHTML)1013 .appendTo('#qunit-fixture')1014 .find('[data-toggle="dropdown"]')1015 .bootstrapDropdown()1016 var dropdown = $dropdown.data('bs.dropdown')1017 var done = assert.async()1018 $dropdown.trigger('click')1019 $dropdown1020 .parent('.dropdown')1021 .on('hide.bs.dropdown', function () {1022 assert.ok(true, 'hide was fired')1023 })1024 .on('hidden.bs.dropdown', function () {1025 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is hidden')1026 done()1027 })1028 dropdown.hide()1029 })1030 QUnit.test('should not hide dropdown', function (assert) {1031 assert.expect(1)1032 var dropdownHTML =1033 '<div class="dropdown">' +1034 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1035 ' <div class="dropdown-menu">' +1036 ' <a class="dropdown-item" href="#">Another link</a>' +1037 ' </div>' +1038 '</div>'1039 var $dropdown = $(dropdownHTML)1040 .appendTo('#qunit-fixture')1041 .find('[data-toggle="dropdown"]')1042 .bootstrapDropdown()1043 var dropdown = $dropdown.data('bs.dropdown')1044 $dropdown.trigger('click')1045 dropdown.show()1046 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is still shown')1047 })1048 QUnit.test('should not show dropdown', function (assert) {1049 assert.expect(1)1050 var dropdownHTML =1051 '<div class="dropdown">' +1052 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1053 ' <div class="dropdown-menu">' +1054 ' <a class="dropdown-item" href="#">Another link</a>' +1055 ' </div>' +1056 '</div>'1057 var $dropdown = $(dropdownHTML)1058 .appendTo('#qunit-fixture')1059 .find('[data-toggle="dropdown"]')1060 .bootstrapDropdown()1061 var dropdown = $dropdown.data('bs.dropdown')1062 dropdown.hide()1063 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is still hidden')1064 })1065 QUnit.test('should show dropdown', function (assert) {1066 assert.expect(2)1067 var dropdownHTML =1068 '<div class="dropdown">' +1069 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1070 ' <div class="dropdown-menu">' +1071 ' <a class="dropdown-item" href="#">Another link</a>' +1072 ' </div>' +1073 '</div>'1074 var $dropdown = $(dropdownHTML)1075 .appendTo('#qunit-fixture')1076 .find('[data-toggle="dropdown"]')1077 .bootstrapDropdown()1078 var dropdown = $dropdown.data('bs.dropdown')1079 var done = assert.async()1080 $dropdown1081 .parent('.dropdown')1082 .on('show.bs.dropdown', function () {1083 assert.ok(true, 'show was fired')1084 })1085 .on('shown.bs.dropdown', function () {1086 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')1087 done()1088 })1089 dropdown.show()1090 })1091 QUnit.test('should prevent default event on show method call', function (assert) {1092 assert.expect(1)1093 var dropdownHTML =1094 '<div class="dropdown">' +1095 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1096 ' <div class="dropdown-menu">' +1097 ' <a class="dropdown-item" href="#">Another link</a>' +1098 ' </div>' +1099 '</div>'1100 var $dropdown = $(dropdownHTML)1101 .appendTo('#qunit-fixture')1102 .find('[data-toggle="dropdown"]')1103 .bootstrapDropdown()1104 var dropdown = $dropdown.data('bs.dropdown')1105 var done = assert.async()1106 $dropdown1107 .parent('.dropdown')1108 .on('show.bs.dropdown', function (event) {1109 event.preventDefault()1110 done()1111 })1112 dropdown.show()1113 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is hidden')1114 })1115 QUnit.test('should prevent default event on hide method call', function (assert) {1116 assert.expect(1)1117 var dropdownHTML =1118 '<div class="dropdown">' +1119 ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +1120 ' <div class="dropdown-menu">' +1121 ' <a class="dropdown-item" href="#">Another link</a>' +1122 ' </div>' +1123 '</div>'1124 var $dropdown = $(dropdownHTML)1125 .appendTo('#qunit-fixture')1126 .find('[data-toggle="dropdown"]')1127 .bootstrapDropdown()1128 var dropdown = $dropdown.data('bs.dropdown')1129 var done = assert.async()1130 $dropdown.trigger('click')1131 $dropdown1132 .parent('.dropdown')1133 .on('hide.bs.dropdown', function (event) {1134 event.preventDefault()1135 done()1136 })1137 dropdown.hide()1138 assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')1139 })1140 QUnit.test('should not open dropdown via show method if target is disabled via attribute', function (assert) {1141 assert.expect(1)1142 var dropdownHTML =1143 '<div class="dropdown">' +1144 ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +1145 ' <div class="dropdown-menu">' +1146 ' <a class="dropdown-item" href="#">Another link</a>' +1147 ' </div>' +1148 '</div>'1149 $(dropdownHTML).appendTo('#qunit-fixture')1150 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()1151 $dropdown.show()1152 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))1153 })1154 QUnit.test('should not open dropdown via show method if target is disabled via class', function (assert) {1155 assert.expect(1)1156 var dropdownHTML =1157 '<div class="dropdown">' +1158 ' <button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +1159 ' <div class="dropdown-menu">' +1160 ' <a class="dropdown-item" href="#">Another link</a>' +1161 ' </div>' +1162 '</div>'1163 $(dropdownHTML).appendTo('#qunit-fixture')1164 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()1165 $dropdown.show()1166 assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))1167 })1168 QUnit.test('should not hide dropdown via hide method if target is disabled via attribute', function (assert) {1169 assert.expect(1)1170 var dropdownHTML =1171 '<div class="dropdown show">' +1172 ' <button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +1173 ' <div class="dropdown-menu">' +1174 ' <a class="dropdown-item" href="#">Another link</a>' +1175 ' </div>' +1176 '</div>'1177 $(dropdownHTML).appendTo('#qunit-fixture')1178 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()1179 $dropdown.hide()1180 assert.ok($dropdown.parent('.dropdown').hasClass('show'))1181 })1182 QUnit.test('should not hide dropdown via hide method if target is disabled via class', function (assert) {1183 assert.expect(1)1184 var dropdownHTML =1185 '<div class="dropdown show">' +1186 ' <button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +1187 ' <div class="dropdown-menu">' +1188 ' <a class="dropdown-item" href="#">Another link</a>' +1189 ' </div>' +1190 '</div>'1191 $(dropdownHTML).appendTo('#qunit-fixture')1192 var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()1193 $dropdown.hide()1194 assert.ok($dropdown.parent('.dropdown').hasClass('show'))1195 })...
Using AI Code Generation
1const { dropDown } = require('taiko');2const { write } = require('taiko');3const { click } = require('taiko');4const { goto } = require('taiko');5const { openBrowser } = require('taiko');6const { closeBrowser } = require('taiko');7const { button } = require('taiko');8const { link } = require('taiko');9(async () => {10 try {11 await openBrowser({ headless: false });12 await write("taiko");13 await click(button("Google Search"));14 await dropDown({"id":"select-language"}).select("English");15 await link({"id":"select-language"}).click();16 await closeBrowser();17 } catch (error) {18 console.error(error);19 }20})();
Using AI Code Generation
1const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');2(async () => {3 try {4 await openBrowser();5 await dropDown({id: "dropdown"}).select("Option 2");6 } catch (e) {7 console.error(e);8 } finally {9 await closeBrowser();10 }11})();12const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');13(async () => {14 try {15 await openBrowser();16 await dropDown({id: "dropdown"}).select("Option 2");17 } catch (e) {18 console.error(e);19 } finally {20 await closeBrowser();21 }22})();23const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');24(async () => {25 try {26 await openBrowser();27 await dropDown({id: "dropdown"}).select("Option 2");28 } catch (e) {29 console.error(e);30 } finally {31 await closeBrowser();32 }33})();34const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');35(async () => {36 try {37 await openBrowser();38 await dropDown({id: "dropdown"}).select("Option 2");39 } catch (e) {40 console.error(e);41 } finally {42 await closeBrowser();43 }44})();45const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');46(async () => {47 try {48 await openBrowser();49 await dropDown({id: "dropdown"}).select("Option 2");50 } catch (e) {51 console.error(e);52 } finally {53 await closeBrowser();54 }55})();
Using AI Code Generation
1const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');2(async () => {3 try {4 await openBrowser({ headless: false });5 await dropDown({ id: "select" }).select("Option 2");6 await dropDown({ id: "select" }).select("Option 3");7 await dropDown({ id: "select" }).select("Option 1");8 } catch (e) {9 console.error(e);10 } finally {11 await closeBrowser();12 }13})();14const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');15(async () => {16 try {17 await openBrowser({ headless: false });18 await dropDown({ id: "select" }).select("Option 2");19 await dropDown({ id: "select" }).select("Option 3");20 await dropDown({ id: "select" }).select("Option 1");21 } catch (e) {22 console.error(e);23 } finally {24 await closeBrowser();25 }26})();27const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');28(async () => {29 try {30 await openBrowser({ headless: false });31 await dropDown({ id: "select" }).select("Option 2");32 await dropDown({ id: "select" }).select("Option 3");33 await dropDown({ id: "select" }).select("Option 1");34 } catch (e) {35 console.error(e);36 } finally {37 await closeBrowser();38 }39})();40const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');41(async () => {42 try {43 await openBrowser({ headless: false });44 await dropDown({ id: "select" }).select("Option 2");45 await dropDown({ id: "select" }).select("Option 3");
Using AI Code Generation
1const { dropDown, write, openBrowser, goto, closeBrowser } = require('taiko');2(async () => {3 try {4 await openBrowser();5 await dropDown({ id: 'lst-ib' }).select('Taiko');6 await write('Taiko', into(dropDown({ id: 'lst-ib' })));7 } catch (e) {8 console.error(e);9 } finally {10 await closeBrowser();11 }12})();13const { dropDown, write, openBrowser, goto, closeBrowser } = require('taiko');14(async () => {15 try {16 await openBrowser();17 await dropDown({ id: 'lst-ib' }).select('Taiko');18 await write('Taiko', into(dropDown({ id: 'lst-ib' })));19 } catch (e) {20 console.error(e);21 } finally {22 await closeBrowser();23 }24})();25const { dropDown, write, openBrowser, goto, closeBrowser } = require('taiko');26(async () => {27 try {28 await openBrowser();29 await dropDown({ id: 'lst-ib' }).select('Taiko');30 await write('Taiko', into(dropDown({ id: 'lst-ib' })));31 } catch (e) {32 console.error(e);33 } finally {34 await closeBrowser();35 }36})();
Using AI Code Generation
1const { dropDown } = require('taiko');2(async () => {3 try {4 await dropDown('Select your country').select('India');5 } catch (e) {6 console.error(e);7 } finally {8 closeBrowser();9 }10})();11const { select } = require('taiko');12(async () => {13 try {14 await select('Select your country').select('India');15 } catch (e) {16 console.error(e);17 } finally {18 closeBrowser();19 }20})();21const { select } = require('taiko');22(async () => {23 try {24 await select('Select your country').select('India');25 } catch (e) {26 console.error(e);27 } finally {28 closeBrowser();29 }30})();31const { select } = require('taiko');32(async () => {33 try {34 await select('Select your country').select('India');35 } catch (e) {36 console.error(e);37 } finally {38 closeBrowser();39 }40})();41const { select } = require('taiko');42(async () => {43 try {44 await select('Select your country').select('India');45 } catch (e) {46 console.error(e);47 } finally {48 closeBrowser();49 }50})();51const { select } = require('taiko');52(async () => {53 try {54 await select('Select your country').select('India');55 } catch (e) {56 console.error(e);57 } finally {58 closeBrowser();59 }60})();61const { select } = require('taiko');62(async () => {63 try {64 await select('Select your country').select('India');65 } catch (e) {66 console.error(e);67 } finally {68 closeBrowser();69 }70})();71const { select } = require('taiko');72(async () => {73 try {74 await select('Select your country').select('India');75 } catch (e) {76 console.error(e);77 } finally {78 closeBrowser();79 }80})();
Using AI Code Generation
1const { dropDown } = require('taiko');2(async () => {3 try {4 await dropDown({ id: 'id' }).select('option');5 } catch (e) {6 console.error(e);7 }8 finally {9 closeBrowser();10 }11})();12const { dropDown } = require('taiko');13(async () => {14 try {15 await dropDown({ id: 'id' }).select('option');16 } catch (e) {17 console.error(e);18 }19 finally {20 closeBrowser();21 }22})();23const { dropDown } = require('taiko');24(async () => {25 try {26 await dropDown({ id: 'id' }).select('option');27 } catch (e) {28 console.error(e);29 }30 finally {31 closeBrowser();32 }33})();
Using AI Code Generation
1const { dropDown } = require('taiko');2(async () => {3 try {4 await dropDown({ id: 'select' }).select('option 2');5 } catch (e) {6 console.error(e);7 } finally {8 closeBrowser();9 }10})();11const { select } = require('taiko');12(async () => {13 try {14 await select('option 2', { id: 'select' });15 } catch (e) {16 console.error(e);17 } finally {18 closeBrowser();19 }20})();21const { select } = require('taiko');22(async () => {23 try {24 await select('option 2', { id: 'select' });25 } catch (e) {26 console.error(e);27 } finally {28 closeBrowser();29 }30})();31const { select } = require('taiko');32(async () => {33 try {34 await select('option 2', { id: 'select' });35 } catch (e) {36 console.error(e);37 } finally {38 closeBrowser();39 }40})();41const { select } = require('taiko');42(async () => {43 try {44 await select('option 2', { id: 'select' });45 } catch (e) {46 console.error(e);47 } finally {48 closeBrowser();49 }50})();51const { select } = require('taiko');52(async () => {53 try {54 await select('option 2', { id: 'select' });55 } catch (e) {56 console.error(e);57 } finally {58 closeBrowser();59 }60})();61const { select } = require('taiko');62(async () => {63 try {64 await select('option 2', { id: 'select' });65 } catch (e) {66 console.error(e);67 } finally {68 closeBrowser();69 }70})();71const { select } = require('taiko');72(async () => {73 try {74 await select('option 2', { id: 'select' });75 } catch (e) {
Using AI Code Generation
1const { dropDown } = require('taiko');2const assert = require('assert');3(async () => {4 try {5 await openBrowser();6 await click("JavaScript");7 await write('const { dropDown } = require("taiko");\n(async () => {\n var element = await dropDown({id:"fruits"});\n await element.select("Banana");\n await closeBrowser();\n})();');8 await click("Run");9 await dropDown({id:"fruits"}).select("Banana");10 assert.ok(await dropDown({id:"fruits"}).hasOptions("Apple","Banana","Grape"));11 assert.ok(await dropDown({id:"fruits"}).hasOptions("Apple","Banana","Grape","Mango"));12 assert.ok(await dropDown({id:"fruits"}).hasOptions("Apple","Banana","Grape","Mango","Orange"));13 await closeBrowser();14 } catch (error) {15 console.error(error);16 } finally {17 closeBrowser();18 }19})();
Using AI Code Generation
1const { dropDown } = require('taiko');2dropDown({ id: 'test' }).select('test');3const { dropDown } = require('taiko');4dropDown({ id: 'test' }).select('test');5const { dropDown } = require('taiko');6dropDown({ id: 'test' }).select('test');7const { dropDown } = require('taiko');8dropDown({ id: 'test' }).select('test');9const { dropDown } = require('taiko');10dropDown({ id: 'test' }).select('test');11const { dropDown } = require('taiko');12dropDown({ id: 'test' }).select('test');13const { dropDown } = require('taiko');14dropDown({ id: 'test' }).select('test');15const { dropDown } = require('taiko');16dropDown({ id: 'test' }).select('test');17const { dropDown } = require('taiko');18dropDown({ id: 'test' }).select('test');19const { dropDown } = require('taiko');20dropDown({ id: 'test' }).select('test');21const { dropDown } = require('taiko');22dropDown({ id: 'test' }).select('test');23const { dropDown } = require('taiko');24dropDown({ id: 'test' }).select('test');25const { dropDown } = require('taiko');26dropDown({ id: 'test' }).select('test');27const { dropDown } = require('taiko');28dropDown({ id: 'test' }).select('test');29const { dropDown } = require('
Using AI Code Generation
1var { dropDown } = require('taiko');2(async () => {3 try {4 await dropDown({ id: 'dropdown' }).select('Option 2');5 await dropDown({ id: 'dropdown' }).select(2);6 } catch (e) {7 console.error(e);8 } finally {9 closeBrowser();10 }11})();12var { dropDown } = require('taiko');13(async () => {14 try {15 await dropDown({ id: 'dropdown' }).select('Option 2');16 await dropDown({ id: 'dropdown' }).select(2);17 } catch (e) {18 console.error(e);19 } finally {20 closeBrowser();21 }22})();23var { dropDown } = require('taiko');24(async () => {25 try {26 await dropDown({ id: 'dropdown' }).select('Option 2');27 await dropDown({ id: 'dropdown' }).select(2);28 } catch (e) {29 console.error(e);30 } finally {31 closeBrowser();32 }33})();34var { dropDown } = require('taiko');35(async () => {36 try {37 await dropDown({ id: 'dropdown' }).select('Option 2');38 await dropDown({ id: 'dropdown' }).select(2);39 } catch (e) {40 console.error(e);41 } finally {42 closeBrowser();43 }44})();45var { dropDown } = require('taiko');46(async () => {47 try {48 await dropDown({ id: 'dropdown' }).select('Option 2');49 await dropDown({ id: 'dropdown' }).select(
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run taiko automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
