rewrite toast unit tests

build/build-plugins.js

@@ -41,7 +41,7 @@ const bsPlugins = {
   Popover: path.resolve(__dirname, '../js/src/popover.js'),
   ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
   Tab: path.resolve(__dirname, '../js/src/tab.js'),
-  Toast: path.resolve(__dirname, '../js/src/toast.js'),
+  Toast: path.resolve(__dirname, '../js/src/toast/toast.js'),
   Tooltip: path.resolve(__dirname, '../js/src/tooltip.js')
 }
 const rootPath = '../js/dist/'

js/index.esm.js

@@ -14,7 +14,7 @@ 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 Toast from './src/toast/toast'
 import Tooltip from './src/tooltip'
 
 export {

js/index.umd.js

@@ -14,7 +14,7 @@ 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 Toast from './src/toast/toast'
 import Tooltip from './src/tooltip'
 
 export default {

js/src/toast.js → js/src/toast/toast.js

@@ -11,10 +11,10 @@ import {
   emulateTransitionEnd,
   getTransitionDurationFromElement,
   typeCheckConfig
-} from './util/index'
-import Data from './dom/data'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
+} from '../util/index'
+import Data from '../dom/data'
+import EventHandler from '../dom/event-handler'
+import Manipulator from '../dom/manipulator'
 
 /**
  * ------------------------------------------------------------------------
@@ -226,7 +226,7 @@ class Toast {
  * ------------------------------------------------------------------------
  *  add .toast to jQuery only if jQuery is present
  */
-
+/* istanbul ignore if */
 if (typeof $ !== 'undefined') {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Toast._jQueryInterface

js/src/toast/toast.spec.js

+import Toast from './toast'
+
+/** Test helpers */
+import { getFixture, clearFixture, jQueryMock } from '../../tests/helpers/fixture'
+
+describe('Toast', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+  })
+
+  describe('VERSION', () => {
+    it('should return plugin version', () => {
+      expect(Toast.VERSION).toEqual(jasmine.any(String))
+    })
+  })
+
+  describe('constructor', () => {
+    it('should allow to config in js', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl, {
+        delay: 1
+      })
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        expect(toastEl.classList.contains('show')).toEqual(true)
+        done()
+      })
+
+      toast.show()
+    })
+
+    it('should close toast when close element with data-dismiss attribute is set', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">',
+        '  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
+        '    close',
+        '  </button>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl)
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        expect(toastEl.classList.contains('show')).toEqual(true)
+
+        const button = toastEl.querySelector('.close')
+
+        button.click()
+      })
+
+      toastEl.addEventListener('hidden.bs.toast', () => {
+        expect(toastEl.classList.contains('show')).toEqual(false)
+        done()
+      })
+
+      toast.show()
+    })
+  })
+
+  describe('Default', () => {
+    it('should expose default setting to allow to override them', () => {
+      const defaultDelay = 1000
+
+      Toast.Default.delay = defaultDelay
+
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-autohide="false" data-animation="false">',
+        '  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
+        '    close',
+        '  </button>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl)
+
+      expect(toast._config.delay).toEqual(defaultDelay)
+    })
+  })
+
+  describe('DefaultType', () => {
+    it('should expose default setting types for read', () => {
+      expect(Toast.DefaultType).toEqual(jasmine.any(Object))
+    })
+  })
+
+  describe('show', () => {
+    it('should auto hide', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      toastEl.addEventListener('hidden.bs.toast', () => {
+        expect(toastEl.classList.contains('show')).toEqual(false)
+        done()
+      })
+
+      toast.show()
+    })
+
+    it('should not add fade class', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1" data-animation="false">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        expect(toastEl.classList.contains('fade')).toEqual(false)
+        done()
+      })
+
+      toast.show()
+    })
+
+    it('should not trigger shown if show is prevented', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1" data-animation="false">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      const assertDone = () => {
+        setTimeout(() => {
+          expect(toastEl.classList.contains('show')).toEqual(false)
+          done()
+        }, 20)
+      }
+
+      toastEl.addEventListener('show.bs.toast', event => {
+        event.preventDefault()
+        assertDone()
+      })
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        throw new Error('shown event should not be triggered if show is prevented')
+      })
+
+      toast.show()
+    })
+  })
+
+  describe('hide', () => {
+    it('should allow to hide toast manually', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1" data-autohide="false">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '  </div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        toast.hide()
+      })
+
+      toastEl.addEventListener('hidden.bs.toast', () => {
+        expect(toastEl.classList.contains('show')).toEqual(false)
+        done()
+      })
+
+      toast.show()
+    })
+
+    it('should do nothing when we call hide on a non shown toast', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl)
+
+      spyOn(toastEl.classList, 'contains')
+
+      toast.hide()
+
+      expect(toastEl.classList.contains).toHaveBeenCalled()
+    })
+
+    it('should not trigger hidden if hide is prevented', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="1" data-animation="false">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      const assertDone = () => {
+        setTimeout(() => {
+          expect(toastEl.classList.contains('show')).toEqual(true)
+          done()
+        }, 20)
+      }
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        toast.hide()
+      })
+
+      toastEl.addEventListener('hide.bs.toast', event => {
+        event.preventDefault()
+        assertDone()
+      })
+
+      toastEl.addEventListener('hidden.bs.toast', () => {
+        throw new Error('hidden event should not be triggered if hide is prevented')
+      })
+
+      toast.show()
+    })
+  })
+
+  describe('dispose', () => {
+    it('should allow to destroy toast', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl)
+
+      expect(Toast._getInstance(toastEl)).toBeDefined()
+
+      toast.dispose()
+
+      expect(Toast._getInstance(toastEl)).toBeNull()
+    })
+
+    it('should allow to destroy toast and hide it before that', done => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" data-delay="0" data-autohide="false">',
+        '  <div class="toast-body">',
+        '    a simple toast',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const toastEl = fixtureEl.querySelector('div')
+      const toast = new Toast(toastEl)
+      const expected = () => {
+        expect(toastEl.classList.contains('show')).toEqual(true)
+        expect(Toast._getInstance(toastEl)).toBeDefined()
+
+        toast.dispose()
+
+        expect(Toast._getInstance(toastEl)).toBeNull()
+        expect(toastEl.classList.contains('show')).toEqual(false)
+
+        done()
+      }
+
+      toastEl.addEventListener('shown.bs.toast', () => {
+        setTimeout(expected, 1)
+      })
+
+      toast.show()
+    })
+  })
+
+  describe('_jQueryInterface', () => {
+    it('should create a toast', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      jQueryMock.fn.toast = Toast._jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.toast.call(jQueryMock)
+
+      expect(Toast._getInstance(div)).toBeDefined()
+    })
+
+    it('should not re create a toast', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const toast = new Toast(div)
+
+      jQueryMock.fn.toast = Toast._jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.toast.call(jQueryMock)
+
+      expect(Toast._getInstance(div)).toEqual(toast)
+    })
+
+    it('should call a toast method', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const toast = new Toast(div)
+
+      spyOn(toast, 'show')
+
+      jQueryMock.fn.toast = Toast._jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.toast.call(jQueryMock, 'show')
+
+      expect(Toast._getInstance(div)).toEqual(toast)
+      expect(toast.show).toHaveBeenCalled()
+    })
+
+    it('should throw error on undefined method', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const action = 'undefinedMethod'
+
+      jQueryMock.fn.toast = Toast._jQueryInterface
+      jQueryMock.elements = [div]
+
+      try {
+        jQueryMock.fn.toast.call(jQueryMock, action)
+      } catch (error) {
+        expect(error.message).toEqual(`No method named "${action}"`)
+      }
+    })
+  })
+
+  describe('_getInstance', () => {
+    it('should return collapse instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+      const toast = new Toast(div)
+
+      expect(Toast._getInstance(div)).toEqual(toast)
+    })
+
+    it('should return null when there is no collapse instance', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Toast._getInstance(div)).toEqual(null)
+    })
+  })
+})

js/tests/unit/toast.js

-$(function () {
-  'use strict'
-
-  if (typeof bootstrap !== 'undefined') {
-    window.Toast = bootstrap.Toast
-  }
-
-  QUnit.module('toast plugin')
-
-  QUnit.test('should be defined on jquery object', function (assert) {
-    assert.expect(1)
-    assert.ok($(document.body).toast, 'toast method is defined')
-  })
-
-  QUnit.module('toast', {
-    beforeEach: function () {
-      // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
-      $.fn.bootstrapToast = $.fn.toast.noConflict()
-    },
-    afterEach: function () {
-      $.fn.toast = $.fn.bootstrapToast
-      delete $.fn.bootstrapToast
-      $('#qunit-fixture').html('')
-    }
-  })
-
-  QUnit.test('should provide no conflict', function (assert) {
-    assert.expect(1)
-    assert.strictEqual(typeof $.fn.toast, 'undefined', 'toast was set back to undefined (org value)')
-  })
-
-  QUnit.test('should return the current version', function (assert) {
-    assert.expect(1)
-    assert.strictEqual(typeof Toast.VERSION, 'string')
-  })
-
-  QUnit.test('should throw explicit error on undefined method', function (assert) {
-    assert.expect(1)
-    var $el = $('<div/>')
-    $el.bootstrapToast()
-
-    try {
-      $el.bootstrapToast('noMethod')
-    } catch (error) {
-      assert.strictEqual(error.message, 'No method named "noMethod"')
-    }
-  })
-
-  QUnit.test('should return jquery collection containing the element', function (assert) {
-    assert.expect(2)
-
-    var $el = $('<div/>')
-    var $toast = $el.bootstrapToast()
-    assert.ok($toast instanceof $, 'returns jquery collection')
-    assert.strictEqual($toast[0], $el[0], 'collection contains element')
-  })
-
-  QUnit.test('should auto hide', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    $toast.on('hidden.bs.toast', function () {
-      assert.strictEqual($toast.hasClass('show'), false)
-      done()
-    })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should not add fade class', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1" data-animation="false">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    $toast.on('shown.bs.toast', function () {
-      assert.strictEqual($toast.hasClass('fade'), false)
-      done()
-    })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should allow to hide toast manually', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1" data-autohide="false">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    $toast
-      .on('shown.bs.toast', function () {
-        $toast.bootstrapToast('hide')
-      })
-      .on('hidden.bs.toast', function () {
-        assert.strictEqual($toast.hasClass('show'), false)
-        done()
-      })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should do nothing when we call hide on a non shown toast', function (assert) {
-    assert.expect(1)
-
-    var $toast = $('<div />')
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    var spy = sinon.spy($toast[0].classList, 'contains')
-
-    $toast.bootstrapToast('hide')
-
-    assert.strictEqual(spy.called, true)
-  })
-
-  QUnit.test('should allow to destroy toast', function (assert) {
-    assert.expect(2)
-
-    var $toast = $('<div />')
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    assert.ok(typeof Toast._getInstance($toast[0]) !== 'undefined')
-
-    $toast.bootstrapToast('dispose')
-
-    assert.ok(Toast._getInstance($toast[0]) === null)
-  })
-
-  QUnit.test('should allow to destroy toast and hide it before that', function (assert) {
-    assert.expect(4)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="0" data-autohide="false">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    $toast.one('shown.bs.toast', function () {
-      setTimeout(function () {
-        assert.ok($toast.hasClass('show'))
-        assert.ok(typeof Toast._getInstance($toast[0]) !== 'undefined')
-
-        $toast.bootstrapToast('dispose')
-
-        assert.ok(Toast._getInstance($toast[0]) === null)
-        assert.ok($toast.hasClass('show') === false)
-
-        done()
-      }, 1)
-    })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should allow to config in js', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast({
-        delay: 1
-      })
-      .appendTo($('#qunit-fixture'))
-
-    $toast.on('shown.bs.toast', function () {
-      assert.strictEqual($toast.hasClass('show'), true)
-      done()
-    })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should close toast when close element with data-dismiss attribute is set', function (assert) {
-    assert.expect(2)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">' +
-        '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">' +
-          'close' +
-        '</button>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    $toast
-      .on('shown.bs.toast', function () {
-        assert.strictEqual($toast.hasClass('show'), true)
-        var button = $toast.find('.close')
-        button.trigger('click')
-      })
-      .on('hidden.bs.toast', function () {
-        assert.strictEqual($toast.hasClass('show'), false)
-        done()
-      })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should expose default setting to allow to override them', function (assert) {
-    assert.expect(1)
-
-    var defaultDelay = 1000
-    Toast.Default.delay = defaultDelay
-
-    var toastHtml =
-      '<div class="toast" data-autohide="false" data-animation="false">' +
-        '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">' +
-          'close' +
-        '</button>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-
-    var toast = Toast._getInstance($toast[0])
-    assert.strictEqual(toast._config.delay, defaultDelay)
-  })
-
-  QUnit.test('should not trigger shown if show is prevented', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1" data-autohide="false">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    var shownCalled = false
-    function assertDone() {
-      setTimeout(function () {
-        assert.strictEqual(shownCalled, false)
-        done()
-      }, 20)
-    }
-
-    $toast
-      .on('show.bs.toast', function (event) {
-        event.preventDefault()
-        assertDone()
-      })
-      .on('shown.bs.toast', function () {
-        shownCalled = true
-      })
-      .bootstrapToast('show')
-  })
-
-  QUnit.test('should not trigger hidden if hide is prevented', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    var toastHtml =
-      '<div class="toast" data-delay="1" data-autohide="false">' +
-        '<div class="toast-body">' +
-          'a simple toast' +
-        '</div>' +
-      '</div>'
-
-    var $toast = $(toastHtml)
-      .bootstrapToast()
-      .appendTo($('#qunit-fixture'))
-
-    var hiddenCalled = false
-    function assertDone() {
-      setTimeout(function () {
-        assert.strictEqual(hiddenCalled, false)
-        done()
-      }, 20)
-    }
-
-    $toast
-      .on('shown.bs.toast', function () {
-        $toast.bootstrapToast('hide')
-      })
-      .on('hide.bs.toast', function (event) {
-        event.preventDefault()
-        assertDone()
-      })
-      .on('hidden.bs.toast', function () {
-        hiddenCalled = true
-      })
-      .bootstrapToast('show')
-  })
-})