modal.spec.js

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')