2019-10-02 11:43:54 +02:00
|
|
|
import Toast from '../../src/toast'
|
2022-01-30 13:30:04 +01:00
|
|
|
import { clearFixture, createEvent, getFixture, 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))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2021-02-16 07:58:08 +01:00
|
|
|
describe('DATA_KEY', () => {
|
|
|
|
it('should return plugin data key', () => {
|
|
|
|
expect(Toast.DATA_KEY).toEqual('bs.toast')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2019-03-29 19:43:56 +01:00
|
|
|
describe('constructor', () => {
|
2021-02-22 08:01:04 +01:00
|
|
|
it('should take care of element either passed as a CSS selector or DOM element', () => {
|
|
|
|
fixtureEl.innerHTML = '<div class="toast"></div>'
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toastBySelector = new Toast('.toast')
|
|
|
|
const toastByElement = new Toast(toastEl)
|
|
|
|
|
|
|
|
expect(toastBySelector._element).toEqual(toastEl)
|
|
|
|
expect(toastByElement._element).toEqual(toastEl)
|
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should allow to config in js', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
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
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
expect(toastEl).toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should close toast when close element with data-bs-dismiss attribute is set', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
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>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const toastEl = fixtureEl.querySelector('div')
|
|
|
|
const toast = new Toast(toastEl)
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
expect(toastEl).toHaveClass('show')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const button = toastEl.querySelector('.btn-close')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
button.click()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
|
|
expect(toastEl).not.toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('Default', () => {
|
|
|
|
it('should expose default setting to allow to override them', () => {
|
|
|
|
const defaultDelay = 1000
|
|
|
|
|
|
|
|
Toast.Default.delay = defaultDelay
|
|
|
|
|
|
|
|
fixtureEl.innerHTML = [
|
2020-07-22 21:33:11 +02:00
|
|
|
'<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
|
2020-06-26 16:06:20 +02:00
|
|
|
' <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', () => {
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should auto hide', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-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).not.toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should not add fade class', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
expect(toastEl).not.toHaveClass('fade')
|
|
|
|
resolve()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
2020-07-11 20:51:04 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should not trigger shown if show is prevented', () => {
|
2022-02-19 15:08:16 +01:00
|
|
|
return new Promise((resolve, reject) => {
|
2022-01-30 13:30:04 +01:00
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-delay="1" data-bs-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).not.toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
}, 20)
|
|
|
|
}
|
|
|
|
|
|
|
|
toastEl.addEventListener('show.bs.toast', event => {
|
|
|
|
event.preventDefault()
|
|
|
|
assertDone()
|
|
|
|
})
|
2020-07-11 20:51:04 +02:00
|
|
|
|
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
2022-02-19 15:08:16 +01:00
|
|
|
reject(new Error('shown event should not be triggered if show is prevented'))
|
2020-07-11 20:51:04 +02:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2020-07-11 20:51:04 +02:00
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should clear timeout if toast is shown again before it is hidden', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
toast._config.autohide = false
|
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
2022-05-31 10:18:32 +02:00
|
|
|
expect(spy).toHaveBeenCalled()
|
2022-01-30 13:30:04 +01:00
|
|
|
expect(toast._timeout).toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
|
|
|
toast.show()
|
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should clear timeout if toast is interacted with mouse', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
|
|
|
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
spy.calls.reset()
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('mouseover', () => {
|
|
|
|
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
|
|
|
expect(toast._timeout).toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const mouseOverEvent = createEvent('mouseover')
|
|
|
|
toastEl.dispatchEvent(mouseOverEvent)
|
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should clear timeout if toast is interacted with keyboard', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<button id="outside-focusable">outside focusable</button>',
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' <button>with a button</button>',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
|
|
|
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
spy.calls.reset()
|
|
|
|
|
|
|
|
toastEl.addEventListener('focusin', () => {
|
|
|
|
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
|
|
|
expect(toast._timeout).toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
|
|
|
const insideFocusable = toastEl.querySelector('button')
|
|
|
|
insideFocusable.focus()
|
2022-01-30 13:30:04 +01:00
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should still auto hide after being interacted with mouse and keyboard', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<button id="outside-focusable">outside focusable</button>',
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' <button>with a button</button>',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
toastEl.addEventListener('mouseover', () => {
|
|
|
|
const insideFocusable = toastEl.querySelector('button')
|
|
|
|
insideFocusable.focus()
|
|
|
|
})
|
|
|
|
|
|
|
|
toastEl.addEventListener('focusin', () => {
|
|
|
|
const mouseOutEvent = createEvent('mouseout')
|
|
|
|
toastEl.dispatchEvent(mouseOutEvent)
|
|
|
|
})
|
|
|
|
|
|
|
|
toastEl.addEventListener('mouseout', () => {
|
|
|
|
const outsideFocusable = document.getElementById('outside-focusable')
|
|
|
|
outsideFocusable.focus()
|
|
|
|
})
|
|
|
|
|
|
|
|
toastEl.addEventListener('focusout', () => {
|
|
|
|
expect(toast._timeout).not.toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
|
|
|
|
|
|
|
const mouseOverEvent = createEvent('mouseover')
|
|
|
|
toastEl.dispatchEvent(mouseOverEvent)
|
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should not auto hide if focus leaves but mouse pointer remains inside', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<button id="outside-focusable">outside focusable</button>',
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' <button>with a button</button>',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
toastEl.addEventListener('mouseover', () => {
|
|
|
|
const insideFocusable = toastEl.querySelector('button')
|
|
|
|
insideFocusable.focus()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('focusin', () => {
|
|
|
|
const outsideFocusable = document.getElementById('outside-focusable')
|
|
|
|
outsideFocusable.focus()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('focusout', () => {
|
|
|
|
expect(toast._timeout).toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const mouseOverEvent = createEvent('mouseover')
|
|
|
|
toastEl.dispatchEvent(mouseOverEvent)
|
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should not auto hide if mouse pointer leaves but focus remains inside', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<button id="outside-focusable">outside focusable</button>',
|
|
|
|
'<div class="toast">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' <button>with a button</button>',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
toastEl.addEventListener('mouseover', () => {
|
|
|
|
const insideFocusable = toastEl.querySelector('button')
|
|
|
|
insideFocusable.focus()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('focusin', () => {
|
|
|
|
const mouseOutEvent = createEvent('mouseout')
|
|
|
|
toastEl.dispatchEvent(mouseOutEvent)
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('mouseout', () => {
|
|
|
|
expect(toast._timeout).toBeNull()
|
|
|
|
resolve()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
const mouseOverEvent = createEvent('mouseover')
|
|
|
|
toastEl.dispatchEvent(mouseOverEvent)
|
|
|
|
}, toast._config.delay / 2)
|
2021-05-11 07:37:57 +02:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
|
|
|
})
|
2021-05-11 07:37:57 +02:00
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
describe('hide', () => {
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should allow to hide toast manually', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
|
|
|
|
' <div class="toast-body">',
|
|
|
|
' a simple toast',
|
|
|
|
' </div>',
|
|
|
|
'</div>'
|
|
|
|
].join('')
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('.toast')
|
|
|
|
const toast = new Toast(toastEl)
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
toast.hide()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
|
|
expect(toastEl).not.toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
const spy = spyOn(toastEl.classList, 'contains')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
|
|
|
toast.hide()
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
expect(spy).toHaveBeenCalled()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should not trigger hidden if hide is prevented', () => {
|
2022-02-19 15:08:16 +01:00
|
|
|
return new Promise((resolve, reject) => {
|
2022-01-30 13:30:04 +01:00
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-delay="1" data-bs-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).toHaveClass('show')
|
|
|
|
resolve()
|
|
|
|
}, 20)
|
|
|
|
}
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
toast.hide()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('hide.bs.toast', event => {
|
|
|
|
event.preventDefault()
|
|
|
|
assertDone()
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
2022-02-19 15:08:16 +01:00
|
|
|
reject(new Error('hidden event should not be triggered if hide is prevented'))
|
2022-01-30 13:30:04 +01:00
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('dispose', () => {
|
|
|
|
it('should allow to destroy toast', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const toastEl = fixtureEl.querySelector('div')
|
2021-02-12 06:51:34 +01:00
|
|
|
|
2019-03-29 19:43:56 +01:00
|
|
|
const toast = new Toast(toastEl)
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Toast.getInstance(toastEl)).not.toBeNull()
|
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
|
|
|
})
|
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
it('should allow to destroy toast and hide it before that', () => {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
fixtureEl.innerHTML = [
|
|
|
|
'<div class="toast" data-bs-delay="0" data-bs-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).toHaveClass('show')
|
|
|
|
expect(Toast.getInstance(toastEl)).not.toBeNull()
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.dispose()
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
expect(Toast.getInstance(toastEl)).toBeNull()
|
|
|
|
expect(toastEl).not.toHaveClass('show')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
resolve()
|
|
|
|
}
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toastEl.addEventListener('shown.bs.toast', () => {
|
|
|
|
setTimeout(expected, 1)
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
|
2022-01-30 13:30:04 +01:00
|
|
|
toast.show()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
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)
|
|
|
|
|
2021-05-11 07:45:57 +02:00
|
|
|
expect(Toast.getInstance(div)).not.toBeNull()
|
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)
|
|
|
|
|
2022-05-31 10:18:32 +02:00
|
|
|
const spy = spyOn(toast, 'show')
|
2019-03-29 19:43:56 +01:00
|
|
|
|
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)
|
2022-05-31 10:18:32 +02:00
|
|
|
expect(spy).toHaveBeenCalled()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
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]
|
|
|
|
|
2021-01-13 21:13:30 +01:00
|
|
|
expect(() => {
|
2019-03-29 19:43:56 +01:00
|
|
|
jQueryMock.fn.toast.call(jQueryMock, action)
|
2021-01-13 21:13:30 +01:00
|
|
|
}).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)
|
2020-11-16 16:23:09 +01:00
|
|
|
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')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(Toast.getInstance(div)).toBeNull()
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|
|
|
|
})
|
2021-06-03 17:53:27 +02:00
|
|
|
|
|
|
|
describe('getOrCreateInstance', () => {
|
|
|
|
it('should return toast instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const toast = new Toast(div)
|
|
|
|
|
|
|
|
expect(Toast.getOrCreateInstance(div)).toEqual(toast)
|
|
|
|
expect(Toast.getInstance(div)).toEqual(Toast.getOrCreateInstance(div, {}))
|
|
|
|
expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return new instance when there is no toast instance', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(Toast.getInstance(div)).toBeNull()
|
2021-06-03 17:53:27 +02:00
|
|
|
expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return new instance when there is no toast instance with given configuration', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
|
2021-10-14 17:16:54 +02:00
|
|
|
expect(Toast.getInstance(div)).toBeNull()
|
2021-06-03 17:53:27 +02:00
|
|
|
const toast = Toast.getOrCreateInstance(div, {
|
|
|
|
delay: 1
|
|
|
|
})
|
|
|
|
expect(toast).toBeInstanceOf(Toast)
|
|
|
|
|
|
|
|
expect(toast._config.delay).toEqual(1)
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should return the instance when exists without given configuration', () => {
|
|
|
|
fixtureEl.innerHTML = '<div></div>'
|
|
|
|
|
|
|
|
const div = fixtureEl.querySelector('div')
|
|
|
|
const toast = new Toast(div, {
|
|
|
|
delay: 1
|
|
|
|
})
|
|
|
|
expect(Toast.getInstance(div)).toEqual(toast)
|
|
|
|
|
|
|
|
const toast2 = Toast.getOrCreateInstance(div, {
|
|
|
|
delay: 2
|
|
|
|
})
|
|
|
|
expect(toast).toBeInstanceOf(Toast)
|
|
|
|
expect(toast2).toEqual(toast)
|
|
|
|
|
|
|
|
expect(toast2._config.delay).toEqual(1)
|
|
|
|
})
|
|
|
|
})
|
2019-03-29 19:43:56 +01:00
|
|
|
})
|