0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/js/tests/unit/toast.spec.js

397 lines
10 KiB
JavaScript
Raw Normal View History

import Toast from '../../src/toast'
2019-03-29 19:43:56 +01:00
/** Test helpers */
import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture'
2019-03-29 19:43:56 +01:00
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-bs-dismiss attribute is set', done => {
2019-03-29 19:43:56 +01:00
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
2019-03-29 19:43:56 +01:00
'</div>'
].join('')
const toastEl = fixtureEl.querySelector('div')
const toast = new Toast(toastEl)
toastEl.addEventListener('shown.bs.toast', () => {
expect(toastEl.classList.contains('show')).toEqual(true)
2020-11-14 07:16:30 +01:00
const button = toastEl.querySelector('.btn-close')
2019-03-29 19:43:56 +01:00
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-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
2019-03-29 19:43:56 +01:00
'</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-bs-delay="1">',
2019-03-29 19:43:56 +01:00
' <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-bs-delay="1" data-bs-animation="false">',
2019-03-29 19:43:56 +01:00
' <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-bs-delay="1" data-bs-animation="false">',
2019-03-29 19:43:56 +01:00
' <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()
})
it('should clear timeout if toast is shown again before it is hidden', done => {
fixtureEl.innerHTML = [
'<div class="toast">',
' <div class="toast-body">',
' a simple toast',
' </div>',
'</div>'
].join('')
const toastEl = fixtureEl.querySelector('.toast')
const toast = new Toast(toastEl)
setTimeout(() => {
toast._config.autohide = false
toastEl.addEventListener('shown.bs.toast', () => {
expect(toast._clearTimeout).toHaveBeenCalled()
expect(toast._timeout).toBeNull()
done()
})
toast.show()
}, toast._config.delay / 2)
spyOn(toast, '_clearTimeout').and.callThrough()
toast.show()
})
2019-03-29 19:43:56 +01:00
})
describe('hide', () => {
it('should allow to hide toast manually', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
2019-03-29 19:43:56 +01:00
' <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-bs-delay="1" data-bs-animation="false">',
2019-03-29 19:43:56 +01:00
' <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)
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(toastEl)).toBeDefined()
2019-03-29 19:43:56 +01:00
toast.dispose()
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(toastEl)).toBeNull()
2019-03-29 19:43:56 +01:00
})
it('should allow to destroy toast and hide it before that', done => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
2019-03-29 19:43:56 +01:00
' <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)
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(toastEl)).toBeDefined()
2019-03-29 19:43:56 +01:00
toast.dispose()
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(toastEl)).toBeNull()
2019-03-29 19:43:56 +01:00
expect(toastEl.classList.contains('show')).toEqual(false)
done()
}
toastEl.addEventListener('shown.bs.toast', () => {
setTimeout(expected, 1)
})
toast.show()
})
})
2019-07-28 15:24:46 +02:00
describe('jQueryInterface', () => {
2019-03-29 19:43:56 +01:00
it('should create a toast', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
2019-07-28 15:24:46 +02:00
jQueryMock.fn.toast = Toast.jQueryInterface
2019-03-29 19:43:56 +01:00
jQueryMock.elements = [div]
jQueryMock.fn.toast.call(jQueryMock)
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(div)).toBeDefined()
2019-03-29 19:43:56 +01:00
})
it('should not re create a toast', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const toast = new Toast(div)
2019-07-28 15:24:46 +02:00
jQueryMock.fn.toast = Toast.jQueryInterface
2019-03-29 19:43:56 +01:00
jQueryMock.elements = [div]
jQueryMock.fn.toast.call(jQueryMock)
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(div)).toEqual(toast)
2019-03-29 19:43:56 +01:00
})
it('should call a toast method', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const toast = new Toast(div)
spyOn(toast, 'show')
2019-07-28 15:24:46 +02:00
jQueryMock.fn.toast = Toast.jQueryInterface
2019-03-29 19:43:56 +01:00
jQueryMock.elements = [div]
jQueryMock.fn.toast.call(jQueryMock, 'show')
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(div)).toEqual(toast)
2019-03-29 19:43:56 +01:00
expect(toast.show).toHaveBeenCalled()
})
it('should throw error on undefined method', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const action = 'undefinedMethod'
2019-07-28 15:24:46 +02:00
jQueryMock.fn.toast = Toast.jQueryInterface
2019-03-29 19:43:56 +01:00
jQueryMock.elements = [div]
expect(() => {
2019-03-29 19:43:56 +01:00
jQueryMock.fn.toast.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
2019-03-29 19:43:56 +01:00
})
})
2019-07-28 15:24:46 +02:00
describe('getInstance', () => {
2020-10-31 08:25:33 +01:00
it('should return a toast instance', () => {
2019-03-29 19:43:56 +01:00
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const toast = new Toast(div)
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(div)).toEqual(toast)
expect(Toast.getInstance(div)).toBeInstanceOf(Toast)
2019-03-29 19:43:56 +01:00
})
2020-10-31 08:25:33 +01:00
it('should return null when there is no toast instance', () => {
2019-03-29 19:43:56 +01:00
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
2019-07-28 15:24:46 +02:00
expect(Toast.getInstance(div)).toEqual(null)
2019-03-29 19:43:56 +01:00
})
})
})