-
Johann-S authoredUnverified26d86fce
import Modal from '../../src/modal'
import EventHandler from '../../src/dom/event-handler'
/** Test helpers */
import { getFixture, clearFixture, createEvent, jQueryMock } from '../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')
document.querySelectorAll('.modal-backdrop')
.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')
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
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()
})