import Modal from '../../src/modal'
import EventHandler from '../../src/dom/event-handler'
-import { getWidth as getScrollBarWidth } from '../../src/util/scrollbar'
/** Test helpers */
import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
it('should toggle a modal', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
- document.documentElement.style.overflowY = 'scroll'
+ const initialOverFlow = document.body.style.overflow
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
- const originalPadding = '0px'
+ const originalPadding = '10px'
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.style.overflow).toEqual('hidden')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
expect(document.body.getAttribute('data-bs-padding-right')).toBeNull()
- expect().nothing()
- document.documentElement.style.overflowY = 'auto'
- 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></div>'
- ].join('')
-
- document.documentElement.style.overflowY = 'scroll'
- const fixedEl = fixtureEl.querySelector('.fixed-top')
- const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const scrollBarWidth = getScrollBarWidth()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const expectedPadding = originalPadding + scrollBarWidth
- const currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
-
- expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(`${originalPadding}px`, 'original fixed element padding should be stored in data-bs-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(fixedEl).paddingRight, 10)
-
- expect(fixedEl.hasAttribute('data-bs-padding-right')).toEqual(false, 'data-bs-padding-right should be cleared after closing')
- expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
- document.documentElement.style.overflowY = 'auto'
- 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></div>'
- ].join('')
-
- document.documentElement.style.overflowY = 'scroll'
-
- const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
- const scrollBarWidth = getScrollBarWidth()
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const expectedMargin = originalMargin - scrollBarWidth
- const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
-
- expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-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)
-
- expect(stickyTopEl.hasAttribute('data-bs-margin-right')).toEqual(false, 'data-bs-margin-right should be cleared after closing')
- expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
-
- document.documentElement.style.overflowY = 'auto'
- done()
- })
-
- modal.toggle()
- })
-
- it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => {
- fixtureEl.innerHTML = [
- '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: calc(100vw - 50%)"></div>',
- '<div class="modal"><div class="modal-dialog"></div></div>'
- ].join('')
-
- const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
-
- modalEl.addEventListener('shown.bs.modal', () => {
- const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
-
- expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
- expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
- done()
- })
-
- modal.show()
- })
-
- 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></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></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')
+ expect(document.body.style.overflow).toEqual(initialOverFlow)
done()
})
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></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'
- done()
- })
-
- modal.show()
- })
-
- it('should not adjust the inline body padding when it does not overflow, even on a scaled display', done => {
- fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
-
- 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')
- done()
- })
-
- modal.show()
- })
-
it('should enforce focus', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
describe('ScrollBar', () => {
let fixtureEl
+ const doc = document.documentElement
const parseInt = arg => Number.parseInt(arg, 10)
- const getRightPadding = el => parseInt(window.getComputedStyle(el).paddingRight)
+ const getPaddingX = el => parseInt(window.getComputedStyle(el).paddingRight)
+ const getMarginX = el => parseInt(window.getComputedStyle(el).marginRight)
const getOverFlow = el => el.style.overflow
const getPaddingAttr = el => Manipulator.getDataAttribute(el, 'padding-right')
+ const getMarginAttr = el => Manipulator.getDataAttribute(el, 'margin-right')
const getOverFlowAttr = el => Manipulator.getDataAttribute(el, 'overflow')
const windowCalculations = () => {
return {
}
})
- it('should return false if body is overflowing', () => {
- document.documentElement.style.overflowY = 'hidden'
+ it('should return false if body is not overflowing', () => {
+ doc.style.overflowY = 'hidden'
document.body.style.overflowY = 'hidden'
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%"></div>'
describe('getWidth', () => {
it('should return an integer greater than zero, if body is overflowing', () => {
- document.documentElement.style.overflowY = 'scroll'
+ doc.style.overflowY = 'scroll'
document.body.style.overflowY = 'scroll'
fixtureEl.innerHTML = [
'<div style="height: 110vh; width: 100%"></div>'
'<div class="fixed-top" id="fixed2" style="padding-right: 5px; width: 100vw"></div>',
'</div>'
].join('')
- document.documentElement.style.overflowY = 'scroll'
+ doc.style.overflowY = 'scroll'
const fixedEl = fixtureEl.querySelector('#fixed1')
const fixedEl2 = fixtureEl.querySelector('#fixed2')
- const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
- const originalPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+ const originalPadding = getPaddingX(fixedEl)
+ const originalPadding2 = getPaddingX(fixedEl2)
const expectedPadding = originalPadding + Scrollbar.getWidth()
const expectedPadding2 = originalPadding2 + Scrollbar.getWidth()
Scrollbar.hide()
- let currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
- let currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
- expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
- expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual('5px', 'original fixed element padding should be stored in data-bs-padding-right')
+ let currentPadding = getPaddingX(fixedEl)
+ let currentPadding2 = getPaddingX(fixedEl2)
+ expect(getPaddingAttr(fixedEl)).toEqual(`${originalPadding}px`, 'original fixed element padding should be stored in data-bs-padding-right')
+ expect(getPaddingAttr(fixedEl2)).toEqual(`${originalPadding2}px`, 'original fixed element padding should be stored in data-bs-padding-right')
expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
expect(currentPadding2).toEqual(expectedPadding2, 'fixed element padding should be adjusted while opening')
Scrollbar.reset()
- currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
- currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
- expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
- expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+ currentPadding = getPaddingX(fixedEl)
+ currentPadding2 = getPaddingX(fixedEl2)
+ expect(getPaddingAttr(fixedEl)).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+ expect(getPaddingAttr(fixedEl2)).toEqual(null, 'data-bs-padding-right should be cleared after closing')
expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
expect(currentPadding2).toEqual(originalPadding2, 'fixed element padding should be reset after closing')
done()
})
- it('should adjust the inline margin of sticky elements', done => {
+ it('should adjust the inline margin and padding of sticky elements', done => {
fixtureEl.innerHTML = [
'<div style="height: 110vh">' +
- '<div class="sticky-top" style="margin-right: 0px; width: 100vw; height: 10px"></div>',
+ '<div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
'</div>'
].join('')
- document.documentElement.style.overflowY = 'scroll'
+ doc.style.overflowY = 'scroll'
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+ const originalMargin = getMarginX(stickyTopEl)
+ const originalPadding = getPaddingX(stickyTopEl)
+
const expectedMargin = originalMargin - Scrollbar.getWidth()
+ const expectedPadding = originalPadding + Scrollbar.getWidth()
Scrollbar.hide()
- let currentMargin = Number.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(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
+ expect(getMarginAttr(stickyTopEl)).toEqual(`${originalMargin}px`, 'original sticky element margin should be stored in data-bs-margin-right')
+ expect(getMarginX(stickyTopEl)).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
+ expect(getPaddingAttr(stickyTopEl)).toEqual(`${originalPadding}px`, 'original sticky element margin should be stored in data-bs-margin-right')
+ expect(getPaddingX(stickyTopEl)).toEqual(expectedPadding, 'sticky element margin should be adjusted while opening')
Scrollbar.reset()
- currentMargin = Number.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(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+ expect(getMarginAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing')
+ expect(getMarginX(stickyTopEl)).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+ expect(getPaddingAttr(stickyTopEl)).toEqual(null, 'data-bs-margin-right should be cleared after closing')
+ expect(getPaddingX(stickyTopEl)).toEqual(originalPadding, 'sticky element margin should be reset after closing')
done()
})
].join('')
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
- const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+ const originalMargin = getMarginX(stickyTopEl)
+ const originalPadding = getPaddingX(stickyTopEl)
Scrollbar.hide()
- const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
- const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+ const currentMargin = getMarginX(stickyTopEl)
+ const currentPadding = getPaddingX(stickyTopEl)
expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
Scrollbar.reset()
})
+ it('should not put data-attribute if element doesn\'t have the proper style property, should just remove style property if element didn\'t had one', () => {
+ fixtureEl.innerHTML = [
+ '<div style="height: 110vh; width: 100%">' +
+ '<div class="sticky-top" id="sticky" style="width: 100vw"></div>',
+ '</div>'
+ ].join('')
+
+ document.body.style.overflowY = 'scroll'
+
+ const hasPaddingAttr = el => el.hasAttribute('data-bs-padding-right')
+ const hasMarginAttr = el => el.hasAttribute('data-bs-margin-right')
+ const stickyEl = fixtureEl.querySelector('#sticky')
+ const originalPadding = getPaddingX(stickyEl)
+ const originalMargin = getMarginX(stickyEl)
+ const scrollBarWidth = Scrollbar.getWidth()
+
+ Scrollbar.hide()
+
+ expect(getPaddingX(stickyEl)).toEqual(scrollBarWidth + originalPadding)
+ const expectedMargin = scrollBarWidth + originalMargin
+ expect(getMarginX(stickyEl)).toEqual(expectedMargin === 0 ? expectedMargin : -expectedMargin)
+ expect(hasMarginAttr(stickyEl)).toBeFalse() // We do not have to keep css margin
+ expect(hasPaddingAttr(stickyEl)).toBeFalse() // We do not have to keep css padding
+
+ Scrollbar.reset()
+
+ expect(getPaddingX(stickyEl)).toEqual(originalPadding)
+ expect(getPaddingX(stickyEl)).toEqual(originalPadding)
+ })
+
describe('Body Handling', () => {
+ it('should ignore other inline styles when trying to restore body defaults ', () => {
+ document.body.style.color = 'red'
+
+ const scrollBarWidth = Scrollbar.getWidth()
+ Scrollbar.hide()
+
+ expect(getPaddingX(document.body)).toEqual(scrollBarWidth, 'body does not have inline padding set')
+ expect(document.body.style.color).toEqual('red', 'body still has other inline styles set')
+
+ Scrollbar.reset()
+ })
+
it('should hide scrollbar and reset it to its initial value', () => {
const styleSheetPadding = '7px'
fixtureEl.innerHTML = [
const inlineStylePadding = '10px'
el.style.paddingRight = inlineStylePadding
- const originalPadding = getRightPadding(el)
+ const originalPadding = getPaddingX(el)
expect(originalPadding).toEqual(parseInt(inlineStylePadding)) // Respect only the inline style as it has prevails this of css
const originalOverFlow = 'auto'
el.style.overflow = originalOverFlow
Scrollbar.hide()
- const currentPadding = getRightPadding(el)
+ const currentPadding = getPaddingX(el)
expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
expect(currentPadding).toEqual(scrollBarWidth + parseInt(inlineStylePadding))
Scrollbar.reset()
- const currentPadding1 = getRightPadding(el)
+ const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
expect(getPaddingAttr(el)).toEqual(null)
expect(getOverFlow(el)).toEqual(originalOverFlow)
'</style>'
].join('')
const el = document.body
- const originalPadding = getRightPadding(el)
+ const originalPadding = getPaddingX(el)
const originalOverFlow = 'scroll'
el.style.overflow = originalOverFlow
const scrollBarWidth = Scrollbar.getWidth()
Scrollbar.hide()
- const currentPadding = getRightPadding(el)
+ const currentPadding = getPaddingX(el)
expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
expect(currentPadding).toEqual(scrollBarWidth + parseInt(styleSheetPadding))
Scrollbar.reset()
- const currentPadding1 = getRightPadding(el)
+ const currentPadding1 = getPaddingX(el)
expect(currentPadding1).toEqual(originalPadding)
expect(getPaddingAttr(el)).toEqual(null)
expect(getOverFlow(el)).toEqual(originalOverFlow)
expect(getOverFlowAttr(el)).toEqual(null)
})
+
+ it('should not adjust the inline body padding when it does not overflow', () => {
+ const originalPadding = getPaddingX(document.body)
+
+ // Hide scrollbars to prevent the body overflowing
+ doc.style.overflowY = 'hidden'
+ doc.style.paddingRight = '0px'
+
+ Scrollbar.hide()
+ const currentPadding = getPaddingX(document.body)
+
+ expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
+ Scrollbar.reset()
+ })
+
+ it('should not adjust the inline body padding when it does not overflow, even on a scaled display', () => {
+ const originalPadding = getPaddingX(document.body)
+ // Remove body margins as would be done by Bootstrap css
+ document.body.style.margin = '0'
+
+ // Hide scrollbars to prevent the body overflowing
+ doc.style.overflowY = '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%
+ doc.style.paddingRight = '.48px'
+ Scrollbar.hide()
+
+ const currentPadding = getPaddingX(document.body)
+
+ expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
+
+ Scrollbar.reset()
+ })
})
})
})
projects / thirdparty / bootstrap.git / commitdiff
