aboutsummaryrefslogtreecommitdiff
path: root/js/src/modal/modal.spec.js
diff options
context:
space:
mode:
authorJohann-S <[email protected]>2019-10-02 11:43:54 +0200
committerJohann-S <[email protected]>2019-10-03 09:55:57 +0200
commit3d12b541c488ea09efced2fb987fcbf384c656bb (patch)
tree1863095dd8162e25a1909cf741e32faa091c32d4 /js/src/modal/modal.spec.js
parent393ddae09b0578c8d381540bdbb4e68cdec1b45b (diff)
downloadbootstrap-3d12b541c488ea09efced2fb987fcbf384c656bb.tar.xz
bootstrap-3d12b541c488ea09efced2fb987fcbf384c656bb.zip
return to the original file structure to avoid breaking modularity
Diffstat (limited to 'js/src/modal/modal.spec.js')
-rw-r--r--js/src/modal/modal.spec.js987
1 files changed, 0 insertions, 987 deletions
diff --git a/js/src/modal/modal.spec.js b/js/src/modal/modal.spec.js
deleted file mode 100644
index 292f61f8b..000000000
--- a/js/src/modal/modal.spec.js
+++ /dev/null
@@ -1,987 +0,0 @@
-import Modal from './modal'
-import EventHandler from '../dom/event-handler'
-import { makeArray } from '../util/index'
-
-/** Test helpers */
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../../tests/helpers/fixture'
-
-describe('Modal', () => {
- let fixtureEl
- let style
-
- beforeAll(() => {
- fixtureEl = getFixture()
-
- // Enable the scrollbar measurer
- const css = '.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }'
-
- style = document.createElement('style')
- style.type = 'text/css'
- style.appendChild(document.createTextNode(css))
-
- document.head.appendChild(style)
-
- // Simulate scrollbars
- document.documentElement.style.paddingRight = '16px'
- })
-
- afterEach(() => {
- clearFixture()
-
- document.body.classList.remove('modal-open')
- document.body.removeAttribute('style')
- document.body.removeAttribute('data-padding-right')
- const backdropList = makeArray(document.querySelectorAll('.modal-backdrop'))
-
- backdropList.forEach(backdrop => {
- document.body.removeChild(backdrop)
- })
-
- document.body.style.paddingRight = '0px'
- })
-
- afterAll(() => {
- document.head.removeChild(style)
- document.documentElement.style.paddingRight = '0px'
- })
-
- describe('VERSION', () => {
- it('should return plugin version', () => {
- expect(Modal.VERSION).toEqual(jasmine.any(String))
- })
- })
-
- describe('Default', () => {
- it('should return plugin default config', () => {
- expect(Modal.Default).toEqual(jasmine.any(Object))
- })
- })
-
- describe('toggle', () => {
- it('should toggle a modal', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const originalPadding = '0px'
-
- document.body.style.paddingRight = originalPadding
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(document.body.getAttribute('data-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-padding-right')
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(document.body.getAttribute('data-padding-right')).toBeNull()
- expect().nothing()
- done()
- })
-
- modal.toggle()
- })
-
- it('should adjust the inline padding of fixed elements when opening and restore when closing', done => {
- fixtureEl.innerHTML = [
- '<div class="fixed-top" style="padding-right: 0px"></div>',
- '<div class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const fixedEl = fixtureEl.querySelector('.fixed-top')
- const originalPadding = parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const expectedPadding = originalPadding + modal._getScrollbarWidth()
- const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
-
- expect(fixedEl.getAttribute('data-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-padding-right')
- expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
-
- expect(fixedEl.getAttribute('data-padding-right')).toEqual(null, 'data-padding-right should be cleared after closing')
- expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
- done()
- })
-
- modal.toggle()
- })
-
- it('should adjust the inline margin of sticky elements when opening and restore when closing', done => {
- fixtureEl.innerHTML = [
- '<div class="sticky-top" style="margin-right: 0px;"></div>',
- '<div class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const expectedMargin = originalMargin - modal._getScrollbarWidth()
- const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
-
- expect(stickyTopEl.getAttribute('data-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-margin-right')
- expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
-
- expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing')
- expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
- done()
- })
-
- modal.toggle()
- })
-
- it('should ignore values set via CSS when trying to restore body padding after closing', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
- const styleTest = document.createElement('style')
-
- styleTest.type = 'text/css'
- styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
- document.head.appendChild(styleTest)
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(window.getComputedStyle(document.body).paddingLeft).toEqual('0px', 'body does not have inline padding set')
- document.head.removeChild(styleTest)
- done()
- })
-
- modal.toggle()
- })
-
- it('should ignore other inline styles when trying to restore body padding after closing', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
- const styleTest = document.createElement('style')
-
- styleTest.type = 'text/css'
- styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
-
- document.head.appendChild(styleTest)
- document.body.style.color = 'red'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- const bodyPaddingRight = document.body.style.paddingRight
-
- expect(bodyPaddingRight === '0px' || bodyPaddingRight === '').toEqual(true, 'body does not have inline padding set')
- expect(document.body.style.color).toEqual('red', 'body still has other inline styles set')
- document.head.removeChild(styleTest)
- document.body.removeAttribute('style')
- done()
- })
-
- modal.toggle()
- })
-
- it('should properly restore non-pixel inline body padding after closing', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- document.body.style.paddingRight = '5%'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modal.toggle()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(document.body.style.paddingRight).toEqual('5%')
- document.body.removeAttribute('style')
- done()
- })
-
- modal.toggle()
- })
- })
-
- describe('show', () => {
- it('should show a modal', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('show.bs.modal', e => {
- expect(e).toBeDefined()
- })
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).toBeDefined()
- done()
- })
-
- modal.show()
- })
-
- it('should show a modal without backdrop', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl, {
- backdrop: false
- })
-
- modalEl.addEventListener('show.bs.modal', e => {
- expect(e).toBeDefined()
- })
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).toBeNull()
- done()
- })
-
- modal.show()
- })
-
- it('should show a modal and append the element', done => {
- const modalEl = document.createElement('div')
- const id = 'dynamicModal'
-
- modalEl.setAttribute('id', id)
- modalEl.classList.add('modal')
- modalEl.innerHTML = '<div class="modal-dialog"></div>'
-
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const dynamicModal = document.getElementById(id)
- expect(dynamicModal).toBeDefined()
- dynamicModal.parentNode.removeChild(dynamicModal)
- done()
- })
-
- modal.show()
- })
-
- it('should do nothing if a modal is shown', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(EventHandler, 'trigger')
- modal._isShown = true
-
- modal.show()
-
- expect(EventHandler.trigger).not.toHaveBeenCalled()
- })
-
- it('should do nothing if a modal is transitioning', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(EventHandler, 'trigger')
- modal._isTransitioning = true
-
- modal.show()
-
- expect(EventHandler.trigger).not.toHaveBeenCalled()
- })
-
- it('should not fire shown event when show is prevented', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('show.bs.modal', e => {
- e.preventDefault()
-
- const expectedDone = () => {
- expect().nothing()
- done()
- }
-
- setTimeout(expectedDone, 10)
- })
-
- modalEl.addEventListener('shown.bs.modal', () => {
- throw new Error('shown event triggered')
- })
-
- modal.show()
- })
-
- it('should set is transitioning if fade class is present', done => {
- fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('show.bs.modal', () => {
- expect(modal._isTransitioning).toEqual(true)
- })
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modal._isTransitioning).toEqual(false)
- done()
- })
-
- modal.show()
- })
-
- it('should close modal when a click occurred on data-dismiss="modal"', done => {
- fixtureEl.innerHTML = [
- '<div class="modal fade">',
- ' <div class="modal-dialog">',
- ' <div class="modal-header">',
- ' <button type="button" data-dismiss="modal"></button>',
- ' </div>',
- ' </div>',
- '</div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]')
- const modal = new Modal(modalEl)
-
- spyOn(modal, 'hide').and.callThrough()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- btnClose.click()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(modal.hide).toHaveBeenCalled()
- done()
- })
-
- modal.show()
- })
-
- it('should set modal body scroll top to 0 if .modal-dialog-scrollable', done => {
- fixtureEl.innerHTML = [
- '<div class="modal fade">',
- ' <div class="modal-dialog modal-dialog-scrollable">',
- ' <div class="modal-body"></div>',
- ' </div>',
- '</div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modalBody = modalEl.querySelector('.modal-body')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalBody.scrollTop).toEqual(0)
- done()
- })
-
- modal.show()
- })
-
- it('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', done => {
- fixtureEl.innerHTML = [
- '<div class="modal fade">',
- ' <div class="modal-dialog modal-dialog-scrollable">',
- ' </div>',
- '</div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.scrollTop).toEqual(0)
- done()
- })
-
- modal.show()
- })
-
- it('should not enforce focus if focus equal to false', done => {
- fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl, {
- focus: false
- })
-
- spyOn(modal, '_enforceFocus')
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modal._enforceFocus).not.toHaveBeenCalled()
- done()
- })
-
- modal.show()
- })
-
- it('should add listener when escape touch is pressed', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(modal, 'hide').and.callThrough()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const keydownEscape = createEvent('keydown')
- keydownEscape.which = 27
-
- modalEl.dispatchEvent(keydownEscape)
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(modal.hide).toHaveBeenCalled()
- done()
- })
-
- modal.show()
- })
-
- it('should do nothing when the pressed key is not escape', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(modal, 'hide')
-
- const expectDone = () => {
- expect(modal.hide).not.toHaveBeenCalled()
-
- done()
- }
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const keydownTab = createEvent('keydown')
- keydownTab.which = 9
-
- modalEl.dispatchEvent(keydownTab)
- setTimeout(expectDone, 30)
- })
-
- modal.show()
- })
-
- it('should adjust dialog on resize', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(modal, '_adjustDialog').and.callThrough()
-
- const expectDone = () => {
- expect(modal._adjustDialog).toHaveBeenCalled()
-
- done()
- }
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const resizeEvent = createEvent('resize')
-
- window.dispatchEvent(resizeEvent)
- setTimeout(expectDone, 10)
- })
-
- modal.show()
- })
-
- it('should not close modal when clicking outside of modal-content if backdrop = false', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl, {
- backdrop: false
- })
-
- const shownCallback = () => {
- setTimeout(() => {
- expect(modal._isShown).toEqual(true)
- done()
- }, 10)
- }
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modalEl.click()
- shownCallback()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- throw new Error('Should not hide a modal')
- })
-
- modal.show()
- })
-
- it('should not adjust the inline body padding when it does not overflow', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const originalPadding = window.getComputedStyle(document.body).paddingRight
-
- // Hide scrollbars to prevent the body overflowing
- document.body.style.overflow = 'hidden'
- document.documentElement.style.paddingRight = '0px'
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const currentPadding = window.getComputedStyle(document.body).paddingRight
-
- expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
-
- // Restore scrollbars
- document.body.style.overflow = 'auto'
- document.documentElement.style.paddingRight = '16px'
- done()
- })
-
- modal.show()
- })
-
- it('should enforce focus', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const isIE11 = Boolean(window.MSInputMethodContext) && Boolean(document.documentMode)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(modal, '_enforceFocus').and.callThrough()
-
- const focusInListener = () => {
- expect(modal._element.focus).toHaveBeenCalled()
- document.removeEventListener('focusin', focusInListener)
- done()
- }
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modal._enforceFocus).toHaveBeenCalled()
-
- if (isIE11) {
- done()
- return
- }
-
- spyOn(modal._element, 'focus')
-
- document.addEventListener('focusin', focusInListener)
-
- const focusInEvent = createEvent('focusin', { bubbles: true })
- Object.defineProperty(focusInEvent, 'target', {
- value: fixtureEl
- })
-
- document.dispatchEvent(focusInEvent)
- })
-
- modal.show()
- })
- })
-
- describe('hide', () => {
- it('should hide a modal', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modal.hide()
- })
-
- modalEl.addEventListener('hide.bs.modal', e => {
- expect(e).toBeDefined()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual(null)
- expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
- expect(modalEl.style.display).toEqual('none')
- expect(document.querySelector('.modal-backdrop')).toBeNull()
- done()
- })
-
- modal.show()
- })
-
- it('should close modal when clicking outside of modal-content', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modalEl.click()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual(null)
- expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
- expect(modalEl.style.display).toEqual('none')
- expect(document.querySelector('.modal-backdrop')).toBeNull()
- done()
- })
-
- modal.show()
- })
-
- it('should do nothing is the modal is not shown', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modal.hide()
-
- expect().nothing()
- })
-
- it('should do nothing is the modal is transitioning', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modal._isTransitioning = true
- modal.hide()
-
- expect().nothing()
- })
-
- it('should not hide a modal if hide is prevented', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modal.hide()
- })
-
- const hideCallback = () => {
- setTimeout(() => {
- expect(modal._isShown).toEqual(true)
- done()
- }, 10)
- }
-
- modalEl.addEventListener('hide.bs.modal', e => {
- e.preventDefault()
- hideCallback()
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- throw new Error('should not trigger hidden')
- })
-
- modal.show()
- })
- })
-
- describe('dispose', () => {
- it('should dispose a modal', () => {
- fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- expect(Modal.getInstance(modalEl)).toEqual(modal)
-
- spyOn(EventHandler, 'off')
-
- modal.dispose()
-
- expect(Modal.getInstance(modalEl)).toEqual(null)
- expect(EventHandler.off).toHaveBeenCalledTimes(4)
- })
- })
-
- describe('handleUpdate', () => {
- it('should call adjust dialog', () => {
- fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- spyOn(modal, '_adjustDialog')
-
- modal.handleUpdate()
-
- expect(modal._adjustDialog).toHaveBeenCalled()
- })
- })
-
- describe('data-api', () => {
- it('should open modal', done => {
- fixtureEl.innerHTML = [
- '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
- '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).toBeDefined()
- done()
- })
-
- trigger.click()
- })
-
- it('should not recreate a new modal', done => {
- fixtureEl.innerHTML = [
- '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
- '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- spyOn(modal, 'show').and.callThrough()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modal.show).toHaveBeenCalled()
- done()
- })
-
- trigger.click()
- })
-
- it('should prevent default when the trigger is <a> or <area>', done => {
- fixtureEl.innerHTML = [
- '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
- '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- spyOn(Event.prototype, 'preventDefault').and.callThrough()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).toBeDefined()
- expect(Event.prototype.preventDefault).toHaveBeenCalled()
- done()
- })
-
- trigger.click()
- })
-
- it('should focus the trigger on hide', done => {
- fixtureEl.innerHTML = [
- '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
- '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- spyOn(trigger, 'focus')
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const modal = Modal.getInstance(modalEl)
-
- modal.hide()
- })
-
- const hideListener = () => {
- setTimeout(() => {
- expect(trigger.focus).toHaveBeenCalled()
- done()
- }, 20)
- }
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- hideListener()
- })
-
- trigger.click()
- })
-
- it('should not focus the trigger if the modal is not visible', done => {
- fixtureEl.innerHTML = [
- '<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>',
- '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- spyOn(trigger, 'focus')
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const modal = Modal.getInstance(modalEl)
-
- modal.hide()
- })
-
- const hideListener = () => {
- setTimeout(() => {
- expect(trigger.focus).not.toHaveBeenCalled()
- done()
- }, 20)
- }
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- hideListener()
- })
-
- trigger.click()
- })
-
- it('should not focus the trigger if the modal is not shown', done => {
- fixtureEl.innerHTML = [
- '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
- '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
- ].join('')
-
- const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
-
- spyOn(trigger, 'focus')
-
- const showListener = () => {
- setTimeout(() => {
- expect(trigger.focus).not.toHaveBeenCalled()
- done()
- }, 10)
- }
-
- modalEl.addEventListener('show.bs.modal', e => {
- e.preventDefault()
- showListener()
- })
-
- trigger.click()
- })
- })
-
- describe('jQueryInterface', () => {
- it('should create a modal', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(Modal.getInstance(div)).toBeDefined()
- })
-
- it('should not re create a modal', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
- const modal = new Modal(div)
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(Modal.getInstance(div)).toEqual(modal)
- })
-
- it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
- const action = 'undefinedMethod'
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- try {
- jQueryMock.fn.modal.call(jQueryMock, action)
- } catch (error) {
- expect(error.message).toEqual(`No method named "${action}"`)
- }
- })
-
- it('should should call show method', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
- const modal = new Modal(div)
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- spyOn(modal, 'show')
-
- jQueryMock.fn.modal.call(jQueryMock, 'show')
-
- expect(modal.show).toHaveBeenCalled()
- })
-
- it('should should not call show method', () => {
- fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
-
- jQueryMock.fn.modal = Modal.jQueryInterface
- jQueryMock.elements = [div]
-
- spyOn(Modal.prototype, 'show')
-
- jQueryMock.fn.modal.call(jQueryMock)
-
- expect(Modal.prototype.show).not.toHaveBeenCalled()
- })
- })
-
- describe('getInstance', () => {
- it('should return modal instance', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
- const modal = new Modal(div)
-
- expect(Modal.getInstance(div)).toEqual(modal)
- })
-
- it('should return null when there is no modal instance', () => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
-
- const div = fixtureEl.querySelector('div')
-
- expect(Modal.getInstance(div)).toEqual(null)
- })
- })
-})