Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use Modal method in ladle
Best JavaScript code snippet using ladle
modal.spec.js
Source:modal.spec.js 
...38 describe('constructor', () => {39 it('should take care of element either passed as a CSS selector or DOM element', () => {40 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'41 const modalEl = fixtureEl.querySelector('.modal')42 const modalBySelector = new Modal('.modal')43 const modalByElement = new Modal(modalEl)44 expect(modalBySelector._element).toEqual(modalEl)45 expect(modalByElement._element).toEqual(modalEl)46 })47 })48 describe('toggle', () => {49 it('should call ScrollBarHelper to handle scrollBar on body', done => {50 fixtureEl.innerHTML = [51 '<div class="modal"><div class="modal-dialog"></div></div>'52 ].join('')53 spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()54 spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()55 const modalEl = fixtureEl.querySelector('.modal')56 const modal = new Modal(modalEl)57 modalEl.addEventListener('shown.bs.modal', () => {58 expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()59 modal.toggle()60 })61 modalEl.addEventListener('hidden.bs.modal', () => {62 expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()63 done()64 })65 modal.toggle()66 })67 })68 describe('show', () => {69 it('should show a modal', done => {70 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'71 const modalEl = fixtureEl.querySelector('.modal')72 const modal = new Modal(modalEl)73 modalEl.addEventListener('show.bs.modal', event => {74 expect(event).toBeDefined()75 })76 modalEl.addEventListener('shown.bs.modal', () => {77 expect(modalEl.getAttribute('aria-modal')).toEqual('true')78 expect(modalEl.getAttribute('role')).toEqual('dialog')79 expect(modalEl.getAttribute('aria-hidden')).toBeNull()80 expect(modalEl.style.display).toEqual('block')81 expect(document.querySelector('.modal-backdrop')).not.toBeNull()82 done()83 })84 modal.show()85 })86 it('should show a modal without backdrop', done => {87 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'88 const modalEl = fixtureEl.querySelector('.modal')89 const modal = new Modal(modalEl, {90 backdrop: false91 })92 modalEl.addEventListener('show.bs.modal', event => {93 expect(event).toBeDefined()94 })95 modalEl.addEventListener('shown.bs.modal', () => {96 expect(modalEl.getAttribute('aria-modal')).toEqual('true')97 expect(modalEl.getAttribute('role')).toEqual('dialog')98 expect(modalEl.getAttribute('aria-hidden')).toBeNull()99 expect(modalEl.style.display).toEqual('block')100 expect(document.querySelector('.modal-backdrop')).toBeNull()101 done()102 })103 modal.show()104 })105 it('should show a modal and append the element', done => {106 const modalEl = document.createElement('div')107 const id = 'dynamicModal'108 modalEl.setAttribute('id', id)109 modalEl.classList.add('modal')110 modalEl.innerHTML = '<div class="modal-dialog"></div>'111 const modal = new Modal(modalEl)112 modalEl.addEventListener('shown.bs.modal', () => {113 const dynamicModal = document.getElementById(id)114 expect(dynamicModal).not.toBeNull()115 dynamicModal.remove()116 done()117 })118 modal.show()119 })120 it('should do nothing if a modal is shown', () => {121 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'122 const modalEl = fixtureEl.querySelector('.modal')123 const modal = new Modal(modalEl)124 spyOn(EventHandler, 'trigger')125 modal._isShown = true126 modal.show()127 expect(EventHandler.trigger).not.toHaveBeenCalled()128 })129 it('should do nothing if a modal is transitioning', () => {130 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'131 const modalEl = fixtureEl.querySelector('.modal')132 const modal = new Modal(modalEl)133 spyOn(EventHandler, 'trigger')134 modal._isTransitioning = true135 modal.show()136 expect(EventHandler.trigger).not.toHaveBeenCalled()137 })138 it('should not fire shown event when show is prevented', done => {139 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'140 const modalEl = fixtureEl.querySelector('.modal')141 const modal = new Modal(modalEl)142 modalEl.addEventListener('show.bs.modal', event => {143 event.preventDefault()144 const expectedDone = () => {145 expect().nothing()146 done()147 }148 setTimeout(expectedDone, 10)149 })150 modalEl.addEventListener('shown.bs.modal', () => {151 throw new Error('shown event triggered')152 })153 modal.show()154 })155 it('should be shown after the first call to show() has been prevented while fading is enabled ', done => {156 fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'157 const modalEl = fixtureEl.querySelector('.modal')158 const modal = new Modal(modalEl)159 let prevented = false160 modalEl.addEventListener('show.bs.modal', event => {161 if (!prevented) {162 event.preventDefault()163 prevented = true164 setTimeout(() => {165 modal.show()166 })167 }168 })169 modalEl.addEventListener('shown.bs.modal', () => {170 expect(prevented).toBeTrue()171 expect(modal._isAnimated()).toBeTrue()172 done()173 })174 modal.show()175 })176 it('should set is transitioning if fade class is present', done => {177 fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'178 const modalEl = fixtureEl.querySelector('.modal')179 const modal = new Modal(modalEl)180 modalEl.addEventListener('show.bs.modal', () => {181 setTimeout(() => {182 expect(modal._isTransitioning).toEqual(true)183 })184 })185 modalEl.addEventListener('shown.bs.modal', () => {186 expect(modal._isTransitioning).toEqual(false)187 done()188 })189 modal.show()190 })191 it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', done => {192 fixtureEl.innerHTML = [193 '<div class="modal fade">',194 ' <div class="modal-dialog">',195 ' <div class="modal-header">',196 ' <button type="button" data-bs-dismiss="modal"></button>',197 ' </div>',198 ' </div>',199 '</div>'200 ].join('')201 const modalEl = fixtureEl.querySelector('.modal')202 const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')203 const modal = new Modal(modalEl)204 spyOn(modal, 'hide').and.callThrough()205 modalEl.addEventListener('shown.bs.modal', () => {206 btnClose.click()207 })208 modalEl.addEventListener('hidden.bs.modal', () => {209 expect(modal.hide).toHaveBeenCalled()210 done()211 })212 modal.show()213 })214 it('should close modal when a click occurred on a data-bs-dismiss="modal" with "bs-target" outside of modal element', done => {215 fixtureEl.innerHTML = [216 '<button type="button" data-bs-dismiss="modal" data-bs-target="#modal1"></button>',217 '<div id="modal1" class="modal fade">',218 ' <div class="modal-dialog">',219 ' </div>',220 '</div>'221 ].join('')222 const modalEl = fixtureEl.querySelector('.modal')223 const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')224 const modal = new Modal(modalEl)225 spyOn(modal, 'hide').and.callThrough()226 modalEl.addEventListener('shown.bs.modal', () => {227 btnClose.click()228 })229 modalEl.addEventListener('hidden.bs.modal', () => {230 expect(modal.hide).toHaveBeenCalled()231 done()232 })233 modal.show()234 })235 it('should set .modal\'s scroll top to 0', done => {236 fixtureEl.innerHTML = [237 '<div class="modal fade">',238 ' <div class="modal-dialog">',239 ' </div>',240 '</div>'241 ].join('')242 const modalEl = fixtureEl.querySelector('.modal')243 const modal = new Modal(modalEl)244 modalEl.addEventListener('shown.bs.modal', () => {245 expect(modalEl.scrollTop).toEqual(0)246 done()247 })248 modal.show()249 })250 it('should set modal body scroll top to 0 if modal body do not exists', done => {251 fixtureEl.innerHTML = [252 '<div class="modal fade">',253 ' <div class="modal-dialog">',254 ' <div class="modal-body"></div>',255 ' </div>',256 '</div>'257 ].join('')258 const modalEl = fixtureEl.querySelector('.modal')259 const modalBody = modalEl.querySelector('.modal-body')260 const modal = new Modal(modalEl)261 modalEl.addEventListener('shown.bs.modal', () => {262 expect(modalBody.scrollTop).toEqual(0)263 done()264 })265 modal.show()266 })267 it('should not trap focus if focus equal to false', done => {268 fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div></div>'269 const modalEl = fixtureEl.querySelector('.modal')270 const modal = new Modal(modalEl, {271 focus: false272 })273 spyOn(modal._focustrap, 'activate').and.callThrough()274 modalEl.addEventListener('shown.bs.modal', () => {275 expect(modal._focustrap.activate).not.toHaveBeenCalled()276 done()277 })278 modal.show()279 })280 it('should add listener when escape touch is pressed', done => {281 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'282 const modalEl = fixtureEl.querySelector('.modal')283 const modal = new Modal(modalEl)284 spyOn(modal, 'hide').and.callThrough()285 modalEl.addEventListener('shown.bs.modal', () => {286 const keydownEscape = createEvent('keydown')287 keydownEscape.key = 'Escape'288 modalEl.dispatchEvent(keydownEscape)289 })290 modalEl.addEventListener('hidden.bs.modal', () => {291 expect(modal.hide).toHaveBeenCalled()292 done()293 })294 modal.show()295 })296 it('should do nothing when the pressed key is not escape', done => {297 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'298 const modalEl = fixtureEl.querySelector('.modal')299 const modal = new Modal(modalEl)300 spyOn(modal, 'hide')301 const expectDone = () => {302 expect(modal.hide).not.toHaveBeenCalled()303 done()304 }305 modalEl.addEventListener('shown.bs.modal', () => {306 const keydownTab = createEvent('keydown')307 keydownTab.key = 'Tab'308 modalEl.dispatchEvent(keydownTab)309 setTimeout(expectDone, 30)310 })311 modal.show()312 })313 it('should adjust dialog on resize', done => {314 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'315 const modalEl = fixtureEl.querySelector('.modal')316 const modal = new Modal(modalEl)317 spyOn(modal, '_adjustDialog').and.callThrough()318 const expectDone = () => {319 expect(modal._adjustDialog).toHaveBeenCalled()320 done()321 }322 modalEl.addEventListener('shown.bs.modal', () => {323 const resizeEvent = createEvent('resize')324 window.dispatchEvent(resizeEvent)325 setTimeout(expectDone, 10)326 })327 modal.show()328 })329 it('should not close modal when clicking outside of modal-content if backdrop = false', done => {330 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'331 const modalEl = fixtureEl.querySelector('.modal')332 const modal = new Modal(modalEl, {333 backdrop: false334 })335 const shownCallback = () => {336 setTimeout(() => {337 expect(modal._isShown).toEqual(true)338 done()339 }, 10)340 }341 modalEl.addEventListener('shown.bs.modal', () => {342 modalEl.click()343 shownCallback()344 })345 modalEl.addEventListener('hidden.bs.modal', () => {346 throw new Error('Should not hide a modal')347 })348 modal.show()349 })350 it('should not close modal when clicking outside of modal-content if backdrop = static', done => {351 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'352 const modalEl = fixtureEl.querySelector('.modal')353 const modal = new Modal(modalEl, {354 backdrop: 'static'355 })356 const shownCallback = () => {357 setTimeout(() => {358 expect(modal._isShown).toEqual(true)359 done()360 }, 10)361 }362 modalEl.addEventListener('shown.bs.modal', () => {363 modalEl.click()364 shownCallback()365 })366 modalEl.addEventListener('hidden.bs.modal', () => {367 throw new Error('Should not hide a modal')368 })369 modal.show()370 })371 it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {372 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'373 const modalEl = fixtureEl.querySelector('.modal')374 const modal = new Modal(modalEl, {375 backdrop: 'static',376 keyboard: true377 })378 const shownCallback = () => {379 setTimeout(() => {380 expect(modal._isShown).toEqual(false)381 done()382 }, 10)383 }384 modalEl.addEventListener('shown.bs.modal', () => {385 const keydownEscape = createEvent('keydown')386 keydownEscape.key = 'Escape'387 modalEl.dispatchEvent(keydownEscape)388 shownCallback()389 })390 modal.show()391 })392 it('should not close modal when escape key is pressed with keyboard = false', done => {393 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'394 const modalEl = fixtureEl.querySelector('.modal')395 const modal = new Modal(modalEl, {396 keyboard: false397 })398 const shownCallback = () => {399 setTimeout(() => {400 expect(modal._isShown).toEqual(true)401 done()402 }, 10)403 }404 modalEl.addEventListener('shown.bs.modal', () => {405 const keydownEscape = createEvent('keydown')406 keydownEscape.key = 'Escape'407 modalEl.dispatchEvent(keydownEscape)408 shownCallback()409 })410 modalEl.addEventListener('hidden.bs.modal', () => {411 throw new Error('Should not hide a modal')412 })413 modal.show()414 })415 it('should not overflow when clicking outside of modal-content if backdrop = static', done => {416 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'417 const modalEl = fixtureEl.querySelector('.modal')418 const modal = new Modal(modalEl, {419 backdrop: 'static'420 })421 modalEl.addEventListener('shown.bs.modal', () => {422 modalEl.click()423 setTimeout(() => {424 expect(modalEl.clientHeight).toEqual(modalEl.scrollHeight)425 done()426 }, 20)427 })428 modal.show()429 })430 it('should not queue multiple callbacks when clicking outside of modal-content and backdrop = static', done => {431 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" style="transition-duration: 50ms;"></div></div>'432 const modalEl = fixtureEl.querySelector('.modal')433 const modal = new Modal(modalEl, {434 backdrop: 'static'435 })436 modalEl.addEventListener('shown.bs.modal', () => {437 const spy = spyOn(modal, '_queueCallback').and.callThrough()438 modalEl.click()439 modalEl.click()440 setTimeout(() => {441 expect(spy).toHaveBeenCalledTimes(1)442 done()443 }, 20)444 })445 modal.show()446 })447 it('should trap focus', done => {448 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'449 const modalEl = fixtureEl.querySelector('.modal')450 const modal = new Modal(modalEl)451 spyOn(modal._focustrap, 'activate').and.callThrough()452 modalEl.addEventListener('shown.bs.modal', () => {453 expect(modal._focustrap.activate).toHaveBeenCalled()454 done()455 })456 modal.show()457 })458 })459 describe('hide', () => {460 it('should hide a modal', done => {461 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'462 const modalEl = fixtureEl.querySelector('.modal')463 const modal = new Modal(modalEl)464 modalEl.addEventListener('shown.bs.modal', () => {465 modal.hide()466 })467 modalEl.addEventListener('hide.bs.modal', event => {468 expect(event).toBeDefined()469 })470 modalEl.addEventListener('hidden.bs.modal', () => {471 expect(modalEl.getAttribute('aria-modal')).toBeNull()472 expect(modalEl.getAttribute('role')).toBeNull()473 expect(modalEl.getAttribute('aria-hidden')).toEqual('true')474 expect(modalEl.style.display).toEqual('none')475 expect(document.querySelector('.modal-backdrop')).toBeNull()476 done()477 })478 modal.show()479 })480 it('should close modal when clicking outside of modal-content', done => {481 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'482 const modalEl = fixtureEl.querySelector('.modal')483 const modal = new Modal(modalEl)484 modalEl.addEventListener('shown.bs.modal', () => {485 modalEl.click()486 })487 modalEl.addEventListener('hidden.bs.modal', () => {488 expect(modalEl.getAttribute('aria-modal')).toBeNull()489 expect(modalEl.getAttribute('role')).toBeNull()490 expect(modalEl.getAttribute('aria-hidden')).toEqual('true')491 expect(modalEl.style.display).toEqual('none')492 expect(document.querySelector('.modal-backdrop')).toBeNull()493 done()494 })495 modal.show()496 })497 it('should do nothing is the modal is not shown', () => {498 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'499 const modalEl = fixtureEl.querySelector('.modal')500 const modal = new Modal(modalEl)501 modal.hide()502 expect().nothing()503 })504 it('should do nothing is the modal is transitioning', () => {505 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'506 const modalEl = fixtureEl.querySelector('.modal')507 const modal = new Modal(modalEl)508 modal._isTransitioning = true509 modal.hide()510 expect().nothing()511 })512 it('should not hide a modal if hide is prevented', done => {513 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'514 const modalEl = fixtureEl.querySelector('.modal')515 const modal = new Modal(modalEl)516 modalEl.addEventListener('shown.bs.modal', () => {517 modal.hide()518 })519 const hideCallback = () => {520 setTimeout(() => {521 expect(modal._isShown).toEqual(true)522 done()523 }, 10)524 }525 modalEl.addEventListener('hide.bs.modal', event => {526 event.preventDefault()527 hideCallback()528 })529 modalEl.addEventListener('hidden.bs.modal', () => {530 throw new Error('should not trigger hidden')531 })532 modal.show()533 })534 it('should release focus trap', done => {535 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'536 const modalEl = fixtureEl.querySelector('.modal')537 const modal = new Modal(modalEl)538 spyOn(modal._focustrap, 'deactivate').and.callThrough()539 modalEl.addEventListener('shown.bs.modal', () => {540 modal.hide()541 })542 modalEl.addEventListener('hidden.bs.modal', () => {543 expect(modal._focustrap.deactivate).toHaveBeenCalled()544 done()545 })546 modal.show()547 })548 })549 describe('dispose', () => {550 it('should dispose a modal', () => {551 fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'552 const modalEl = fixtureEl.querySelector('.modal')553 const modal = new Modal(modalEl)554 const focustrap = modal._focustrap555 spyOn(focustrap, 'deactivate').and.callThrough()556 expect(Modal.getInstance(modalEl)).toEqual(modal)557 spyOn(EventHandler, 'off')558 modal.dispose()559 expect(Modal.getInstance(modalEl)).toBeNull()560 expect(EventHandler.off).toHaveBeenCalledTimes(3)561 expect(focustrap.deactivate).toHaveBeenCalled()562 })563 })564 describe('handleUpdate', () => {565 it('should call adjust dialog', () => {566 fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'567 const modalEl = fixtureEl.querySelector('.modal')568 const modal = new Modal(modalEl)569 spyOn(modal, '_adjustDialog')570 modal.handleUpdate()571 expect(modal._adjustDialog).toHaveBeenCalled()572 })573 })574 describe('data-api', () => {575 it('should toggle modal', done => {576 fixtureEl.innerHTML = [577 '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',578 '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'579 ].join('')580 const modalEl = fixtureEl.querySelector('.modal')581 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')582 modalEl.addEventListener('shown.bs.modal', () => {583 expect(modalEl.getAttribute('aria-modal')).toEqual('true')584 expect(modalEl.getAttribute('role')).toEqual('dialog')585 expect(modalEl.getAttribute('aria-hidden')).toBeNull()586 expect(modalEl.style.display).toEqual('block')587 expect(document.querySelector('.modal-backdrop')).not.toBeNull()588 setTimeout(() => trigger.click(), 10)589 })590 modalEl.addEventListener('hidden.bs.modal', () => {591 expect(modalEl.getAttribute('aria-modal')).toBeNull()592 expect(modalEl.getAttribute('role')).toBeNull()593 expect(modalEl.getAttribute('aria-hidden')).toEqual('true')594 expect(modalEl.style.display).toEqual('none')595 expect(document.querySelector('.modal-backdrop')).toBeNull()596 done()597 })598 trigger.click()599 })600 it('should not recreate a new modal', done => {601 fixtureEl.innerHTML = [602 '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',603 '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'604 ].join('')605 const modalEl = fixtureEl.querySelector('.modal')606 const modal = new Modal(modalEl)607 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')608 spyOn(modal, 'show').and.callThrough()609 modalEl.addEventListener('shown.bs.modal', () => {610 expect(modal.show).toHaveBeenCalled()611 done()612 })613 trigger.click()614 })615 it('should prevent default when the trigger is <a> or <area>', done => {616 fixtureEl.innerHTML = [617 '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',618 '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'619 ].join('')620 const modalEl = fixtureEl.querySelector('.modal')621 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')622 spyOn(Event.prototype, 'preventDefault').and.callThrough()623 modalEl.addEventListener('shown.bs.modal', () => {624 expect(modalEl.getAttribute('aria-modal')).toEqual('true')625 expect(modalEl.getAttribute('role')).toEqual('dialog')626 expect(modalEl.getAttribute('aria-hidden')).toBeNull()627 expect(modalEl.style.display).toEqual('block')628 expect(document.querySelector('.modal-backdrop')).not.toBeNull()629 expect(Event.prototype.preventDefault).toHaveBeenCalled()630 done()631 })632 trigger.click()633 })634 it('should focus the trigger on hide', done => {635 fixtureEl.innerHTML = [636 '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',637 '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'638 ].join('')639 const modalEl = fixtureEl.querySelector('.modal')640 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')641 spyOn(trigger, 'focus')642 modalEl.addEventListener('shown.bs.modal', () => {643 const modal = Modal.getInstance(modalEl)644 modal.hide()645 })646 const hideListener = () => {647 setTimeout(() => {648 expect(trigger.focus).toHaveBeenCalled()649 done()650 }, 20)651 }652 modalEl.addEventListener('hidden.bs.modal', () => {653 hideListener()654 })655 trigger.click()656 })657 it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', done => {658 fixtureEl.innerHTML = [659 '<div class="modal">',660 ' <div class="modal-dialog">',661 ' <button type="button" data-bs-dismiss="modal"></button>',662 ' </div>',663 '</div>'664 ].join('')665 const modalEl = fixtureEl.querySelector('.modal')666 const btnClose = fixtureEl.querySelector('button[data-bs-dismiss="modal"]')667 const modal = new Modal(modalEl)668 spyOn(Event.prototype, 'preventDefault').and.callThrough()669 modalEl.addEventListener('shown.bs.modal', () => {670 btnClose.click()671 })672 modalEl.addEventListener('hidden.bs.modal', () => {673 expect(Event.prototype.preventDefault).not.toHaveBeenCalled()674 done()675 })676 modal.show()677 })678 it('should prevent default when a click occurred on data-bs-dismiss="modal" where tagName is <a> or <area>', done => {679 fixtureEl.innerHTML = [680 '<div class="modal">',681 ' <div class="modal-dialog">',682 ' <a type="button" data-bs-dismiss="modal"></a>',683 ' </div>',684 '</div>'685 ].join('')686 const modalEl = fixtureEl.querySelector('.modal')687 const btnClose = fixtureEl.querySelector('a[data-bs-dismiss="modal"]')688 const modal = new Modal(modalEl)689 spyOn(Event.prototype, 'preventDefault').and.callThrough()690 modalEl.addEventListener('shown.bs.modal', () => {691 btnClose.click()692 })693 modalEl.addEventListener('hidden.bs.modal', () => {694 expect(Event.prototype.preventDefault).toHaveBeenCalled()695 done()696 })697 modal.show()698 })699 it('should not focus the trigger if the modal is not visible', done => {700 fixtureEl.innerHTML = [701 '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal" style="display: none;"></a>',702 '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div></div>'703 ].join('')704 const modalEl = fixtureEl.querySelector('.modal')705 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')706 spyOn(trigger, 'focus')707 modalEl.addEventListener('shown.bs.modal', () => {708 const modal = Modal.getInstance(modalEl)709 modal.hide()710 })711 const hideListener = () => {712 setTimeout(() => {713 expect(trigger.focus).not.toHaveBeenCalled()714 done()715 }, 20)716 }717 modalEl.addEventListener('hidden.bs.modal', () => {718 hideListener()719 })720 trigger.click()721 })722 it('should not focus the trigger if the modal is not shown', done => {723 fixtureEl.innerHTML = [724 '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',725 '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'726 ].join('')727 const modalEl = fixtureEl.querySelector('.modal')728 const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')729 spyOn(trigger, 'focus')730 const showListener = () => {731 setTimeout(() => {732 expect(trigger.focus).not.toHaveBeenCalled()733 done()734 }, 10)735 }736 modalEl.addEventListener('show.bs.modal', event => {737 event.preventDefault()738 showListener()739 })740 trigger.click()741 })742 it('should call hide first, if another modal is open', done => {743 fixtureEl.innerHTML = [744 '<button data-bs-toggle="modal" data-bs-target="#modal2"></button>',745 '<div id="modal1" class="modal fade"><div class="modal-dialog"></div></div>',746 '<div id="modal2" class="modal"><div class="modal-dialog"></div></div>'747 ].join('')748 const trigger2 = fixtureEl.querySelector('button')749 const modalEl1 = document.querySelector('#modal1')750 const modalEl2 = document.querySelector('#modal2')751 const modal1 = new Modal(modalEl1)752 modalEl1.addEventListener('shown.bs.modal', () => {753 trigger2.click()754 })755 modalEl1.addEventListener('hidden.bs.modal', () => {756 expect(Modal.getInstance(modalEl2)).not.toBeNull()757 expect(modalEl2.classList.contains('show')).toBeTrue()758 done()759 })760 modal1.show()761 })762 })763 describe('jQueryInterface', () => {764 it('should create a modal', () => {765 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'766 const div = fixtureEl.querySelector('div')767 jQueryMock.fn.modal = Modal.jQueryInterface768 jQueryMock.elements = [div]769 jQueryMock.fn.modal.call(jQueryMock)770 expect(Modal.getInstance(div)).not.toBeNull()771 })772 it('should create a modal with given config', () => {773 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'774 const div = fixtureEl.querySelector('div')775 jQueryMock.fn.modal = Modal.jQueryInterface776 jQueryMock.elements = [div]777 jQueryMock.fn.modal.call(jQueryMock, { keyboard: false })778 spyOn(Modal.prototype, 'constructor')779 expect(Modal.prototype.constructor).not.toHaveBeenCalledWith(div, { keyboard: false })780 const modal = Modal.getInstance(div)781 expect(modal).not.toBeNull()782 expect(modal._config.keyboard).toBe(false)783 })784 it('should not re create a modal', () => {785 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'786 const div = fixtureEl.querySelector('div')787 const modal = new Modal(div)788 jQueryMock.fn.modal = Modal.jQueryInterface789 jQueryMock.elements = [div]790 jQueryMock.fn.modal.call(jQueryMock)791 expect(Modal.getInstance(div)).toEqual(modal)792 })793 it('should throw error on undefined method', () => {794 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'795 const div = fixtureEl.querySelector('div')796 const action = 'undefinedMethod'797 jQueryMock.fn.modal = Modal.jQueryInterface798 jQueryMock.elements = [div]799 expect(() => {800 jQueryMock.fn.modal.call(jQueryMock, action)801 }).toThrowError(TypeError, `No method named "${action}"`)802 })803 it('should call show method', () => {804 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'805 const div = fixtureEl.querySelector('div')806 const modal = new Modal(div)807 jQueryMock.fn.modal = Modal.jQueryInterface808 jQueryMock.elements = [div]809 spyOn(modal, 'show')810 jQueryMock.fn.modal.call(jQueryMock, 'show')811 expect(modal.show).toHaveBeenCalled()812 })813 it('should not call show method', () => {814 fixtureEl.innerHTML = '<div class="modal" data-bs-show="false"><div class="modal-dialog"></div></div>'815 const div = fixtureEl.querySelector('div')816 jQueryMock.fn.modal = Modal.jQueryInterface817 jQueryMock.elements = [div]818 spyOn(Modal.prototype, 'show')819 jQueryMock.fn.modal.call(jQueryMock)820 expect(Modal.prototype.show).not.toHaveBeenCalled()821 })822 })823 describe('getInstance', () => {824 it('should return modal instance', () => {825 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'826 const div = fixtureEl.querySelector('div')827 const modal = new Modal(div)828 expect(Modal.getInstance(div)).toEqual(modal)829 expect(Modal.getInstance(div)).toBeInstanceOf(Modal)830 })831 it('should return null when there is no modal instance', () => {832 fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'833 const div = fixtureEl.querySelector('div')834 expect(Modal.getInstance(div)).toBeNull()835 })836 })837 describe('getOrCreateInstance', () => {838 it('should return modal instance', () => {839 fixtureEl.innerHTML = '<div></div>'840 const div = fixtureEl.querySelector('div')841 const modal = new Modal(div)842 expect(Modal.getOrCreateInstance(div)).toEqual(modal)843 expect(Modal.getInstance(div)).toEqual(Modal.getOrCreateInstance(div, {}))844 expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal)845 })846 it('should return new instance when there is no modal instance', () => {847 fixtureEl.innerHTML = '<div></div>'848 const div = fixtureEl.querySelector('div')849 expect(Modal.getInstance(div)).toEqual(null)850 expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal)851 })852 it('should return new instance when there is no modal instance with given configuration', () => {853 fixtureEl.innerHTML = '<div></div>'854 const div = fixtureEl.querySelector('div')855 expect(Modal.getInstance(div)).toEqual(null)856 const modal = Modal.getOrCreateInstance(div, {857 backdrop: true858 })859 expect(modal).toBeInstanceOf(Modal)860 expect(modal._config.backdrop).toEqual(true)861 })862 it('should return the instance when exists without given configuration', () => {863 fixtureEl.innerHTML = '<div></div>'864 const div = fixtureEl.querySelector('div')865 const modal = new Modal(div, {866 backdrop: true867 })868 expect(Modal.getInstance(div)).toEqual(modal)869 const modal2 = Modal.getOrCreateInstance(div, {870 backdrop: false871 })872 expect(modal).toBeInstanceOf(Modal)873 expect(modal2).toEqual(modal)874 expect(modal2._config.backdrop).toEqual(true)875 })876 })...
modal_root.js
Source:modal_root.js
...183 onClose(optionalType) {184 if (optionalType === 'COMPOSE') {185 dispatch(cancelReplyCompose())186 }187 dispatch(closeModal())188 },189})190ModalRoot.propTypes = {191 type: PropTypes.string,192 props: PropTypes.object,193 onClose: PropTypes.func.isRequired,194}...
Using AI Code Generation
1var ladle = require('ladle');2var client = ladle.createClient({3});4client.createDatabase('test', function (err, res) {5 if (err) {6 console.log('error creating database: %s', err);7 } else {8 console.log('created database');9 }10});11client.deleteDatabase('test', function (err, res) {12 if (err) {13 console.log('error deleting database: %s', err);14 } else {15 console.log('deleted database');16 }17});18client.createDatabase('test', function (err, res) {19 if (err) {20 console.log('error creating database: %s', err);21 } else {22 console.log('created database');23 }24});25client.getDatabase('test', function (err, res) {26 if (err) {27 console.log('error getting database: %s', err);28 } else {29 console.log('got database');30 }31});32client.createDocument('test', { _id: 'test', 'name': 'test' }, function (err, res) {33 if (err) {34 console.log('error creating document: %s', err);35 } else {36 console.log('created document');37 }38});39client.getDocument('test', 'test', function (err, res) {40 if (err) {41 console.log('error getting document: %s', err);42 } else {43 console.log('got document');44 }45});46client.updateDocument('test', { _id: 'test', _rev: '1-3a1c1d8f0a0f9a2e2bce5a0b2d8c5d1f', 'name': 'test' }, function (err, res) {47 if (err) {48 console.log('error updating document: %s', err);49 } else {50 console.log('updated document');51 }52});53client.deleteDocument('test', { _id: 'test', _rev: '2-3a1c1d8f0a0f9a2e2bce5a0b2d8c5d1f' }, function (err, res) {54 if (err) {55 console.log('error deleting document: %s', err);56 } else {
Using AI Code Generation
1var ladle = require('ladle');2modal.open(function(err, db){3 if(err) throw err;4 db.collection('test').find().toArray(function(err, docs){5 if(err) throw err;6 console.log(docs);7 });8});
Using AI Code Generation
1var ladle = require('ladle');2var db = ladle.createConnection({3});4db.modal('test', function(err, test) {5 console.log(test);6});7var ladle = require('ladle');8var db = ladle.createConnection({9});10db.modal('test', function(err, test) {11 console.log(test);12});13var ladle = require('ladle');14var db = ladle.createConnection({15});16db.modal('test', function(err, test) {17 console.log(test);18});19var ladle = require('ladle');20var db = ladle.createConnection({21});22db.modal('test', function(err, test) {23 console.log(test);24});25var ladle = require('ladle');26var db = ladle.createConnection({27});28db.modal('test', function(err, test) {29 console.log(test);30});31var ladle = require('ladle');32var db = ladle.createConnection({33});34db.modal('test', function(err, test) {35 console.log(test);36});37var ladle = require('ladle');38var db = ladle.createConnection({
Using AI Code Generation
1const ladle = require('ladle');2const modal = ladle.modal('test');3modal.set('test', 'test');4modal.get('test');5const ladle = require('ladle');6const modal = ladle.modal('test');7modal.get('test');8const ladle = require('ladle');9const modal = ladle.modal('test');10modal.get('test');11### ladle.modal(name)12### ladle.clear()13### modal.set(key, value)14### modal.get(key)15### modal.clear()16### modal.remove(key)17MIT © [Sahil Saini](
Using AI Code Generation
1var ladle = require('ladle');2var Modal = ladle.Modal;3var modal = new Modal();4var myModal = modal.create({5});6myModal.show();7var ladle = require('ladle');8var Modal = ladle.Modal;9var modal = new Modal();10var myModal = modal.create({11});12myModal.show();13create(options)14show()15hide()16destroy()17show()18destroy()19var myModal = modal.create({20});21var myModal = modal.create({
Using AI Code Generation
1var ladle = require('ladle');2ladle.modal({3}, function (button) {4 console.log('You clicked ' + button);5});6ladle.toast({7}, function (button) {8 console.log('You clicked ' + button);9});10ladle.notify({11}, function (button) {12 console.log('You clicked ' + button);13});14ladle.alert({15}, function (button) {16 console.log('You clicked ' + button);17});18ladle.confirm({19}, function (button) {20 console.log('You clicked ' + button);21});22ladle.prompt({23}, function (button) {24 console.log('You clicked ' + button);25});26ladle.progress({27}, function (button) {28 console.log('You clicked ' + button);29});30ladle.spinner({
Using AI Code Generation
1var ladle = require('ladle');2var modal = ladle.modal();3 .fill('input[name="q"]', 'ladle')4 .pressButton('input[name="btnG"]', function() {5 browser.text('body', function(err, body) {6 console.log(body);7 });8 });9});10var ladle = require('ladle');11var modal = ladle.modal();12 .fill('input[name="q"]', 'ladle')13 .pressButton('input[name="btnG"]', function() {14 browser.text('body', function(err, body) {15 console.log(body);16 });17 });18});19var ladle = require('ladle');20var modal = ladle.modal();21 .fill('input[name="q"]', 'ladle')22 .pressButton('input[name="btnG"]', function() {23 browser.text('body', function(err, body) {24 console.log(body);25 });26 });27});28var ladle = require('ladle');29var modal = ladle.modal();30 .fill('input[name="q"]', 'ladle')31 .pressButton('input[name="btnG"]', function() {32 browser.text('body', function(err, body) {33 console.log(body);34 });35 });36});37var ladle = require('ladle');38var modal = ladle.modal();39 .fill('input[name="q"]', 'ladle')40 .pressButton('input[name="btnG"]',
Using AI Code Generation
1var ladle = require('ladle');2var Modal = ladle.Modal;3var modal = new Modal();4 console.log('google title: ', $('title').text());5});6var headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0'};7 console.log('google title: ', $('title').text());8});9var headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0'};10var timeout = 10000;11 console.log('google title: ', $('title').text());12});13var form = {14};15 console.log('google title: ', $('title').text());16});17var headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0'};18var form = {19};20 console.log('google title: ', $('title').text());21});22var headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0'};23var timeout = 10000;24var form = {
Using AI Code Generation
1var ladle = require('ladle');2var modal = ladle.modal();3myModal.open();4myModal.close();5var ladle = require('ladle');6var modal = ladle.modal();7myModal.open();8myModal.close();9var ladle = require('ladle');10var modal = ladle.modal();11myModal.open();12myModal.close();13var ladle = require('ladle');14var modal = ladle.modal();15myModal.open();16myModal.close();17var ladle = require('ladle');18var modal = ladle.modal();19myModal.open();20myModal.close();21var ladle = require('ladle');22var modal = ladle.modal();23myModal.open();24myModal.close();25var ladle = require('ladle');26var modal = ladle.modal();27myModal.open();28myModal.close();29var ladle = require('ladle');30var modal = ladle.modal();31myModal.open();32myModal.close();33var ladle = require('ladle');34var modal = ladle.modal();35myModal.open();36myModal.close();
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 ladle 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?
