',
- '
',
+ '
',
' '
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('shown.bs.dropdown', () => {
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
+ const keyDown = createEvent('keydown')
+ keyDown.which = 40
- triggerDropdown.dispatchEvent(keydown)
- triggerDropdown.dispatchEvent(keydown)
+ triggerDropdown.dispatchEvent(keyDown)
+ triggerDropdown.dispatchEvent(keyDown)
expect(document.activeElement.classList.contains('disabled')).toEqual(false, '.disabled not focused')
expect(document.activeElement.hasAttribute('disabled')).toEqual(false, ':disabled not focused')
@@ -1261,7 +1300,7 @@ describe('Dropdown', () => {
' }',
'',
'
',
- '
',
+ '
',
' '
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
dropdown.addEventListener('shown.bs.dropdown', () => {
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
+ const keyDown = createEvent('keydown')
+ keyDown.which = 40
- triggerDropdown.dispatchEvent(keydown)
+ triggerDropdown.dispatchEvent(keyDown)
expect(document.activeElement.classList.contains('d-none')).toEqual(false, '.d-none not focused')
- expect(document.activeElement.style.display).not.toBe('none', '"display: none" not focused')
- expect(document.activeElement.style.visibility).not.toBe('hidden', '"visibility: hidden" not focused')
+ expect(document.activeElement.style.display === 'none').toEqual(false, '"display: none" not focused')
+ expect(document.activeElement.style.visibility === 'hidden').toEqual(false, '"visibility: hidden" not focused')
done()
})
@@ -1293,7 +1332,7 @@ describe('Dropdown', () => {
it('should focus next/previous element when using keyboard navigation', done => {
fixtureEl.innerHTML = [
'
',
- '
',
+ '
',
' '
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const item1 = fixtureEl.querySelector('#item1')
const item2 = fixtureEl.querySelector('#item2')
dropdown.addEventListener('shown.bs.dropdown', () => {
- const keydownArrowDown = createEvent('keydown')
- keydownArrowDown.key = 'ArrowDown'
+ const keyDown40 = createEvent('keydown')
+ keyDown40.which = 40
- triggerDropdown.dispatchEvent(keydownArrowDown)
+ triggerDropdown.dispatchEvent(keyDown40)
expect(document.activeElement).toEqual(item1, 'item1 is focused')
- document.activeElement.dispatchEvent(keydownArrowDown)
+ document.activeElement.dispatchEvent(keyDown40)
expect(document.activeElement).toEqual(item2, 'item2 is focused')
- const keydownArrowUp = createEvent('keydown')
- keydownArrowUp.key = 'ArrowUp'
+ const keyDown38 = createEvent('keydown')
+ keyDown38.which = 38
- document.activeElement.dispatchEvent(keydownArrowUp)
- expect(document.activeElement).toEqual(item1, 'item1 is focused')
-
- done()
- })
-
- triggerDropdown.click()
- })
-
- it('should focus on the first element when using ArrowUp for the first time', done => {
- fixtureEl.innerHTML = [
- '
',
- ' ',
- ' ',
- '
'
- ].join('')
-
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdown = fixtureEl.querySelector('.dropdown')
- const item1 = fixtureEl.querySelector('#item1')
-
- dropdown.addEventListener('shown.bs.dropdown', () => {
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowUp'
-
- document.activeElement.dispatchEvent(keydown)
+ document.activeElement.dispatchEvent(keyDown38)
expect(document.activeElement).toEqual(item1, 'item1 is focused')
done()
@@ -1359,14 +1370,14 @@ describe('Dropdown', () => {
it('should not close the dropdown if the user clicks on a text field', done => {
fixtureEl.innerHTML = [
'
',
- ' ',
+ ' ',
' ',
'
'
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const input = fixtureEl.querySelector('input')
@@ -1386,14 +1397,14 @@ describe('Dropdown', () => {
it('should not close the dropdown if the user clicks on a textarea', done => {
fixtureEl.innerHTML = [
'
',
- ' ',
+ ' ',
' ',
'
'
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const textarea = fixtureEl.querySelector('textarea')
@@ -1413,69 +1424,73 @@ describe('Dropdown', () => {
it('should ignore keyboard events for
s and
',
'
',
'
'
].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = fixtureEl.querySelector('.dropdown')
const input = fixtureEl.querySelector('input')
const textarea = fixtureEl.querySelector('textarea')
- const keydownSpace = createEvent('keydown')
- keydownSpace.key = 'Space'
+ // Space key
+ const keyDownSpace = createEvent('keydown')
+ keyDownSpace.which = 32
- const keydownArrowUp = createEvent('keydown')
- keydownArrowUp.key = 'ArrowUp'
+ // Key up
+ const keyDownUp = createEvent('keydown')
+ keyDownSpace.which = 38
- const keydownArrowDown = createEvent('keydown')
- keydownArrowDown.key = 'ArrowDown'
+ // Key down
+ const keyDown = createEvent('keydown')
+ keyDownSpace.which = 40
- const keydownEscape = createEvent('keydown')
- keydownEscape.key = 'Escape'
+ // Key escape
+ const keyDownEscape = createEvent('keydown')
+ keyDownEscape.which = 27
dropdown.addEventListener('shown.bs.dropdown', () => {
- // Key Space
+ // Space key
input.focus()
- input.dispatchEvent(keydownSpace)
+ input.dispatchEvent(keyDownSpace)
expect(document.activeElement).toEqual(input, 'input still focused')
textarea.focus()
- textarea.dispatchEvent(keydownSpace)
+ textarea.dispatchEvent(keyDownSpace)
expect(document.activeElement).toEqual(textarea, 'textarea still focused')
- // Key ArrowUp
+ // Key up
input.focus()
- input.dispatchEvent(keydownArrowUp)
+ input.dispatchEvent(keyDownUp)
expect(document.activeElement).toEqual(input, 'input still focused')
textarea.focus()
- textarea.dispatchEvent(keydownArrowUp)
+ textarea.dispatchEvent(keyDownUp)
expect(document.activeElement).toEqual(textarea, 'textarea still focused')
- // Key ArrowDown
+ // Key down
input.focus()
- input.dispatchEvent(keydownArrowDown)
+ input.dispatchEvent(keyDown)
expect(document.activeElement).toEqual(input, 'input still focused')
textarea.focus()
- textarea.dispatchEvent(keydownArrowDown)
+ textarea.dispatchEvent(keyDown)
expect(document.activeElement).toEqual(textarea, 'textarea still focused')
- // Key Escape
+ // Key escape
input.focus()
- input.dispatchEvent(keydownEscape)
+ input.dispatchEvent(keyDownEscape)
expect(triggerDropdown.classList.contains('show')).toEqual(false, 'dropdown menu is not shown')
done()
@@ -1488,29 +1503,29 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = [
'
',
'
',
- ' ',
+ ' ',
' ',
'
',
'
'
]
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
const dropdown = new Dropdown(triggerDropdown)
- const button = fixtureEl.querySelector('button[data-bs-toggle="dropdown"]')
+ const button = fixtureEl.querySelector('button[data-toggle="dropdown"]')
spyOn(dropdown, 'toggle')
// Key escape
button.focus()
// Key escape
- const keydownEscape = createEvent('keydown')
- keydownEscape.key = 'Escape'
- button.dispatchEvent(keydownEscape)
+ const keyDownEscape = createEvent('keydown')
+ keyDownEscape.which = 27
+ button.dispatchEvent(keyDownEscape)
setTimeout(() => {
expect(dropdown.toggle).not.toHaveBeenCalled()
@@ -1557,9 +1572,11 @@ describe('Dropdown', () => {
jQueryMock.fn.dropdown = Dropdown.jQueryInterface
jQueryMock.elements = [div]
- expect(() => {
+ try {
jQueryMock.fn.dropdown.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
+ } catch (error) {
+ expect(error.message).toEqual(`No method named "${action}"`)
+ }
})
})
@@ -1571,7 +1588,6 @@ describe('Dropdown', () => {
const dropdown = new Dropdown(div)
expect(Dropdown.getInstance(div)).toEqual(dropdown)
- expect(Dropdown.getInstance(div)).toBeInstanceOf(Dropdown)
})
it('should return null when there is no dropdown instance', () => {
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
deleted file mode 100644
index 289612df5..000000000
--- a/js/tests/unit/jquery.spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-env jquery */
-import Alert from '../../src/alert'
-import Button from '../../src/button'
-import Carousel from '../../src/carousel'
-import Collapse from '../../src/collapse'
-import Dropdown from '../../src/dropdown'
-import Modal from '../../src/modal'
-import Popover from '../../src/popover'
-import ScrollSpy from '../../src/scrollspy'
-import Tab from '../../src/tab'
-import Toast from '../../src/toast'
-import Tooltip from '../../src/tooltip'
-
-/** Test helpers */
-import { getFixture, clearFixture } from '../helpers/fixture'
-
-describe('jQuery', () => {
- let fixtureEl
-
- beforeAll(() => {
- fixtureEl = getFixture()
- })
-
- afterEach(() => {
- clearFixture()
- })
-
- it('should add all plugins in jQuery', () => {
- expect(Alert.jQueryInterface).toEqual(jQuery.fn.alert)
- expect(Button.jQueryInterface).toEqual(jQuery.fn.button)
- expect(Carousel.jQueryInterface).toEqual(jQuery.fn.carousel)
- expect(Collapse.jQueryInterface).toEqual(jQuery.fn.collapse)
- expect(Dropdown.jQueryInterface).toEqual(jQuery.fn.dropdown)
- expect(Modal.jQueryInterface).toEqual(jQuery.fn.modal)
- expect(Popover.jQueryInterface).toEqual(jQuery.fn.popover)
- expect(ScrollSpy.jQueryInterface).toEqual(jQuery.fn.scrollspy)
- expect(Tab.jQueryInterface).toEqual(jQuery.fn.tab)
- expect(Toast.jQueryInterface).toEqual(jQuery.fn.toast)
- expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
- })
-
- it('should use jQuery event system', done => {
- fixtureEl.innerHTML = [
- '
',
- ' ',
- '
'
- ].join('')
-
- $(fixtureEl).find('.alert')
- .one('closed.bs.alert', () => {
- expect($(fixtureEl).find('.alert').length).toEqual(0)
- done()
- })
-
- $(fixtureEl).find('button').trigger('click')
- })
-})
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 29c90bbf1..52676844f 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -29,7 +29,7 @@ describe('Modal', () => {
document.body.classList.remove('modal-open')
document.body.removeAttribute('style')
- document.body.removeAttribute('data-bs-padding-right')
+ document.body.removeAttribute('data-padding-right')
document.querySelectorAll('.modal-backdrop')
.forEach(backdrop => {
@@ -58,7 +58,7 @@ describe('Modal', () => {
describe('toggle', () => {
it('should toggle a modal', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -67,12 +67,12 @@ describe('Modal', () => {
document.body.style.paddingRight = originalPadding
modalEl.addEventListener('shown.bs.modal', () => {
- expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right')
+ 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-bs-padding-right')).toBeNull()
+ expect(document.body.getAttribute('data-padding-right')).toBeNull()
expect().nothing()
done()
})
@@ -83,27 +83,27 @@ describe('Modal', () => {
it('should adjust the inline padding of fixed elements when opening and restore when closing', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const fixedEl = fixtureEl.querySelector('.fixed-top')
- const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+ 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 = Number.parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
+ const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
- expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
+ 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 = Number.parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
+ const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
- expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+ 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()
})
@@ -114,27 +114,27 @@ describe('Modal', () => {
it('should adjust the inline margin of sticky elements when opening and restore when closing', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ 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 = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
+ 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 = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
+ 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()
})
@@ -143,7 +143,7 @@ describe('Modal', () => {
})
it('should ignore values set via CSS when trying to restore body padding after closing', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const styleTest = document.createElement('style')
styleTest.type = 'text/css'
@@ -167,7 +167,7 @@ describe('Modal', () => {
})
it('should ignore other inline styles when trying to restore body padding after closing', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const styleTest = document.createElement('style')
styleTest.type = 'text/css'
@@ -197,7 +197,7 @@ describe('Modal', () => {
})
it('should properly restore non-pixel inline body padding after closing', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
document.body.style.paddingRight = '5%'
@@ -220,7 +220,7 @@ describe('Modal', () => {
describe('show', () => {
it('should show a modal', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -231,7 +231,6 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeDefined()
@@ -242,7 +241,7 @@ describe('Modal', () => {
})
it('should show a modal without backdrop', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -255,7 +254,6 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeNull()
@@ -286,7 +284,7 @@ describe('Modal', () => {
})
it('should do nothing if a modal is shown', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -300,7 +298,7 @@ describe('Modal', () => {
})
it('should do nothing if a modal is transitioning', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -314,7 +312,7 @@ describe('Modal', () => {
})
it('should not fire shown event when show is prevented', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -338,7 +336,7 @@ describe('Modal', () => {
})
it('should set is transitioning if fade class is present', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -355,19 +353,19 @@ describe('Modal', () => {
modal.show()
})
- it('should close modal when a click occurred on data-bs-dismiss="modal"', done => {
+ it('should close modal when a click occurred on data-dismiss="modal"', done => {
fixtureEl.innerHTML = [
'
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')
+ const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]')
const modal = new Modal(modalEl)
spyOn(modal, 'hide').and.callThrough()
@@ -425,7 +423,7 @@ describe('Modal', () => {
})
it('should not enforce focus if focus equal to false', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -443,7 +441,7 @@ describe('Modal', () => {
})
it('should add listener when escape touch is pressed', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -452,7 +450,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
const keydownEscape = createEvent('keydown')
- keydownEscape.key = 'Escape'
+ keydownEscape.which = 27
modalEl.dispatchEvent(keydownEscape)
})
@@ -466,7 +464,7 @@ describe('Modal', () => {
})
it('should do nothing when the pressed key is not escape', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -481,7 +479,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
const keydownTab = createEvent('keydown')
- keydownTab.key = 'Tab'
+ keydownTab.which = 9
modalEl.dispatchEvent(keydownTab)
setTimeout(expectDone, 30)
@@ -491,7 +489,7 @@ describe('Modal', () => {
})
it('should adjust dialog on resize', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -515,7 +513,7 @@ describe('Modal', () => {
})
it('should not close modal when clicking outside of modal-content if backdrop = false', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -542,7 +540,7 @@ describe('Modal', () => {
})
it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -569,7 +567,7 @@ describe('Modal', () => {
})
it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -586,7 +584,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
const keydownEscape = createEvent('keydown')
- keydownEscape.key = 'Escape'
+ keydownEscape.which = 27
modalEl.dispatchEvent(keydownEscape)
shownCallback()
@@ -595,11 +593,12 @@ describe('Modal', () => {
modal.show()
})
- it('should not close modal when escape key is pressed with keyboard = false', done => {
- fixtureEl.innerHTML = '
'
+ it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
+ backdrop: 'static',
keyboard: false
})
@@ -612,7 +611,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
const keydownEscape = createEvent('keydown')
- keydownEscape.key = 'Escape'
+ keydownEscape.which = 27
modalEl.dispatchEvent(keydownEscape)
shownCallback()
@@ -625,27 +624,8 @@ describe('Modal', () => {
modal.show()
})
- it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
- fixtureEl.innerHTML = '
'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl, {
- backdrop: 'static'
- })
-
- modalEl.addEventListener('shown.bs.modal', () => {
- modalEl.click()
- setTimeout(() => {
- expect(modalEl.clientHeight).toEqual(modalEl.scrollHeight)
- done()
- }, 20)
- })
-
- modal.show()
- })
-
it('should not adjust the inline body padding when it does not overflow', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -669,40 +649,8 @@ describe('Modal', () => {
modal.show()
})
- it('should not adjust the inline body padding when it does not overflow, even on a scaled display', done => {
- fixtureEl.innerHTML = '
'
-
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const originalPadding = window.getComputedStyle(document.body).paddingRight
-
- // Remove body margins as would be done by Bootstrap css
- document.body.style.margin = '0'
-
- // Hide scrollbars to prevent the body overflowing
- document.body.style.overflow = 'hidden'
-
- // Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width
- // as it can occur when zooming or scaling the display to something else than 100%
- document.documentElement.style.paddingRight = '.48px'
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const currentPadding = window.getComputedStyle(document.body).paddingRight
-
- expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
-
- // Restore overridden css
- document.body.style.removeProperty('margin')
- document.body.style.removeProperty('overflow')
- document.documentElement.style.paddingRight = '16px'
- done()
- })
-
- modal.show()
- })
-
it('should enforce focus', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -736,7 +684,7 @@ describe('Modal', () => {
describe('hide', () => {
it('should hide a modal', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -751,7 +699,6 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual(null)
- expect(modalEl.getAttribute('role')).toEqual(null)
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
@@ -762,7 +709,7 @@ describe('Modal', () => {
})
it('should close modal when clicking outside of modal-content', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -773,7 +720,6 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual(null)
- expect(modalEl.getAttribute('role')).toEqual(null)
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
@@ -784,7 +730,7 @@ describe('Modal', () => {
})
it('should do nothing is the modal is not shown', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -795,7 +741,7 @@ describe('Modal', () => {
})
it('should do nothing is the modal is transitioning', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -807,7 +753,7 @@ describe('Modal', () => {
})
it('should not hide a modal if hide is prevented', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -838,7 +784,7 @@ describe('Modal', () => {
describe('dispose', () => {
it('should dispose a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -856,7 +802,7 @@ describe('Modal', () => {
describe('handleUpdate', () => {
it('should call adjust dialog', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -870,30 +816,20 @@ describe('Modal', () => {
})
describe('data-api', () => {
- it('should toggle modal', done => {
+ it('should open modal', done => {
fixtureEl.innerHTML = [
- '
',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+ const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeDefined()
- setTimeout(() => trigger.click(), 10)
- })
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual(null)
- expect(modalEl.getAttribute('role')).toEqual(null)
- expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
- expect(modalEl.style.display).toEqual('none')
- expect(document.querySelector('.modal-backdrop')).toEqual(null)
done()
})
@@ -902,13 +838,13 @@ describe('Modal', () => {
it('should not recreate a new modal', done => {
fixtureEl.innerHTML = [
- '
',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
- const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+ const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
spyOn(modal, 'show').and.callThrough()
@@ -922,18 +858,17 @@ describe('Modal', () => {
it('should prevent default when the trigger is
or ', done => {
fixtureEl.innerHTML = [
- '',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-bs-toggle="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('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeDefined()
@@ -946,12 +881,12 @@ describe('Modal', () => {
it('should focus the trigger on hide', done => {
fixtureEl.innerHTML = [
- '
',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+ const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -977,12 +912,12 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not visible', done => {
fixtureEl.innerHTML = [
- '
',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+ const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -1008,12 +943,12 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not shown', done => {
fixtureEl.innerHTML = [
- '
',
- '
'
+ '
',
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
- const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+ const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
spyOn(trigger, 'focus')
@@ -1035,7 +970,7 @@ describe('Modal', () => {
describe('jQueryInterface', () => {
it('should create a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
@@ -1048,7 +983,7 @@ describe('Modal', () => {
})
it('should not re create a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
@@ -1062,7 +997,7 @@ describe('Modal', () => {
})
it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const action = 'undefinedMethod'
@@ -1070,13 +1005,15 @@ describe('Modal', () => {
jQueryMock.fn.modal = Modal.jQueryInterface
jQueryMock.elements = [div]
- expect(() => {
+ try {
jQueryMock.fn.modal.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
+ } catch (error) {
+ expect(error.message).toEqual(`No method named "${action}"`)
+ }
})
- it('should call show method', () => {
- fixtureEl.innerHTML = '
'
+ it('should should call show method', () => {
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
@@ -1091,8 +1028,8 @@ describe('Modal', () => {
expect(modal.show).toHaveBeenCalled()
})
- it('should not call show method', () => {
- fixtureEl.innerHTML = '
'
+ it('should should not call show method', () => {
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
@@ -1109,17 +1046,16 @@ describe('Modal', () => {
describe('getInstance', () => {
it('should return modal instance', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
expect(Modal.getInstance(div)).toEqual(modal)
- expect(Modal.getInstance(div)).toBeInstanceOf(Modal)
})
it('should return null when there is no modal instance', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index e5c235e2a..acaf0a48c 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -64,7 +64,7 @@ describe('Popover', () => {
describe('show', () => {
it('should show a popover', done => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -116,27 +116,11 @@ describe('Popover', () => {
popover.show()
})
-
- it('should show a popover with provided custom class', done => {
- fixtureEl.innerHTML = '
BS twitter'
-
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
-
- popoverEl.addEventListener('shown.bs.popover', () => {
- const tip = document.querySelector('.popover')
- expect(tip).toBeDefined()
- expect(tip.classList.contains('custom-class')).toBeTrue()
- done()
- })
-
- popover.show()
- })
})
describe('hide', () => {
it('should hide a popover', done => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -156,7 +140,7 @@ describe('Popover', () => {
describe('jQueryInterface', () => {
it('should create a popover', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
@@ -184,7 +168,7 @@ describe('Popover', () => {
})
it('should not re create a popover', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -198,7 +182,7 @@ describe('Popover', () => {
})
it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const action = 'undefinedMethod'
@@ -206,13 +190,15 @@ describe('Popover', () => {
jQueryMock.fn.popover = Popover.jQueryInterface
jQueryMock.elements = [popoverEl]
- expect(() => {
+ try {
jQueryMock.fn.popover.call(jQueryMock, action)
- }).toThrowError(TypeError, `No method named "${action}"`)
+ } catch (error) {
+ expect(error.message).toEqual(`No method named "${action}"`)
+ }
})
it('should should call show method', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
@@ -228,7 +214,7 @@ describe('Popover', () => {
})
it('should do nothing if dipose is called when a popover do not exist', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
@@ -245,17 +231,16 @@ describe('Popover', () => {
describe('getInstance', () => {
it('should return popover instance', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl)
expect(Popover.getInstance(popoverEl)).toEqual(popover)
- expect(Popover.getInstance(popoverEl)).toBeInstanceOf(Popover)
})
it('should return null when there is no popover instance', () => {
- fixtureEl.innerHTML = '
BS twitter'
+ fixtureEl.innerHTML = '
BS twitter'
const popoverEl = fixtureEl.querySelector('a')
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 0d175aafa..9ac02ce99 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -68,7 +68,7 @@ describe('ScrollSpy', () => {
fixtureEl.innerHTML = [
'
+ 