mirror of https://github.com/twbs/bootstrap.git
tests: replace 'done' callback with 'Promise' to fix deprecation errors (#35659)
Reference: https://jasmine.github.io/tutorials/async 'DEPRECATION: An asynchronous function called its 'done' callback more than once. This is a bug in the spec, beforeAll, beforeEach, afterAll, or afterEach function in question. This will be treated as an error in a future version. See<https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#deprecations-due-to-calling-done-multiple-times> for more information.
This commit is contained in:
GeoSot
GitHub
parent
d092817059
commit
aa650f0f1e
|
|
@ -50,22 +50,24 @@ describe('getInstance', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
// Asynchronous test
|
// Asynchronous test
|
||||||
it('should show a tooltip without the animation', done => {
|
it('should show a tooltip without the animation', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
|
||||||
|
|
||||||
const tooltipEl = fixtureEl.querySelector('a')
|
const tooltipEl = fixtureEl.querySelector('a')
|
||||||
const tooltip = new Tooltip(tooltipEl, {
|
const tooltip = new Tooltip(tooltipEl, {
|
||||||
animation: false
|
animation: false
|
||||||
|
})
|
||||||
|
|
||||||
|
tooltipEl.addEventListener('shown.bs.tooltip', () => {
|
||||||
|
const tip = document.querySelector('.tooltip')
|
||||||
|
|
||||||
|
expect(tip).not.toBeNull()
|
||||||
|
expect(tip.classList.contains('fade')).toEqual(false)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
tooltip.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
tooltipEl.addEventListener('shown.bs.tooltip', () => {
|
|
||||||
const tip = document.querySelector('.tooltip')
|
|
||||||
|
|
||||||
expect(tip).not.toBeNull()
|
|
||||||
expect(tip.classList.contains('fade')).toEqual(false)
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
tooltip.show()
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -63,60 +63,66 @@ describe('Alert', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('close', () => {
|
describe('close', () => {
|
||||||
it('should close an alert', done => {
|
it('should close an alert', () => {
|
||||||
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
return new Promise(resolve => {
|
||||||
fixtureEl.innerHTML = '<div class="alert"></div>'
|
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
||||||
|
fixtureEl.innerHTML = '<div class="alert"></div>'
|
||||||
|
|
||||||
const alertEl = document.querySelector('.alert')
|
const alertEl = document.querySelector('.alert')
|
||||||
const alert = new Alert(alertEl)
|
const alert = new Alert(alertEl)
|
||||||
|
|
||||||
alertEl.addEventListener('closed.bs.alert', () => {
|
alertEl.addEventListener('closed.bs.alert', () => {
|
||||||
expect(document.querySelectorAll('.alert')).toHaveSize(0)
|
expect(document.querySelectorAll('.alert')).toHaveSize(0)
|
||||||
expect(spy).not.toHaveBeenCalled()
|
expect(spy).not.toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
alert.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
alert.close()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should close alert with fade class', done => {
|
it('should close alert with fade class', () => {
|
||||||
fixtureEl.innerHTML = '<div class="alert fade"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="alert fade"></div>'
|
||||||
|
|
||||||
const alertEl = document.querySelector('.alert')
|
const alertEl = document.querySelector('.alert')
|
||||||
const alert = new Alert(alertEl)
|
const alert = new Alert(alertEl)
|
||||||
|
|
||||||
alertEl.addEventListener('transitionend', () => {
|
alertEl.addEventListener('transitionend', () => {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
|
})
|
||||||
|
|
||||||
|
alertEl.addEventListener('closed.bs.alert', () => {
|
||||||
|
expect(document.querySelectorAll('.alert')).toHaveSize(0)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
alert.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
alertEl.addEventListener('closed.bs.alert', () => {
|
|
||||||
expect(document.querySelectorAll('.alert')).toHaveSize(0)
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
alert.close()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not remove alert if close event is prevented', done => {
|
it('should not remove alert if close event is prevented', () => {
|
||||||
fixtureEl.innerHTML = '<div class="alert"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="alert"></div>'
|
||||||
|
|
||||||
const getAlert = () => document.querySelector('.alert')
|
const getAlert = () => document.querySelector('.alert')
|
||||||
const alertEl = getAlert()
|
const alertEl = getAlert()
|
||||||
const alert = new Alert(alertEl)
|
const alert = new Alert(alertEl)
|
||||||
|
|
||||||
alertEl.addEventListener('close.bs.alert', event => {
|
alertEl.addEventListener('close.bs.alert', event => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(getAlert()).not.toBeNull()
|
expect(getAlert()).not.toBeNull()
|
||||||
done()
|
resolve()
|
||||||
}, 10)
|
}, 10)
|
||||||
|
})
|
||||||
|
|
||||||
|
alertEl.addEventListener('closed.bs.alert', () => {
|
||||||
|
throw new Error('should not fire closed event')
|
||||||
|
})
|
||||||
|
|
||||||
|
alert.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
alertEl.addEventListener('closed.bs.alert', () => {
|
|
||||||
throw new Error('should not fire closed event')
|
|
||||||
})
|
|
||||||
|
|
||||||
alert.close()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,6 @@
|
||||||
import EventHandler from '../../../src/dom/event-handler'
|
import EventHandler from '../../../src/dom/event-handler'
|
||||||
import { getFixture, clearFixture } from '../../helpers/fixture'
|
import { clearFixture, getFixture } from '../../helpers/fixture'
|
||||||
|
import { noop } from '../../../src/util'
|
||||||
|
|
||||||
describe('EventHandler', () => {
|
describe('EventHandler', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -18,176 +19,190 @@ describe('EventHandler', () => {
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
EventHandler.on(div, null, () => {})
|
EventHandler.on(div, null, noop)
|
||||||
EventHandler.on(null, 'click', () => {})
|
EventHandler.on(null, 'click', noop)
|
||||||
|
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add event listener', done => {
|
it('should add event listener', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
EventHandler.on(div, 'click', () => {
|
EventHandler.on(div, 'click', () => {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
div.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
div.click()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add namespaced event listener', done => {
|
it('should add namespaced event listener', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
EventHandler.on(div, 'bs.namespace', () => {
|
EventHandler.on(div, 'bs.namespace', () => {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
EventHandler.trigger(div, 'bs.namespace')
|
||||||
})
|
})
|
||||||
|
|
||||||
EventHandler.trigger(div, 'bs.namespace')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add native namespaced event listener', done => {
|
it('should add native namespaced event listener', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
EventHandler.on(div, 'click.namespace', () => {
|
EventHandler.on(div, 'click.namespace', () => {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
EventHandler.trigger(div, 'click')
|
||||||
})
|
})
|
||||||
|
|
||||||
EventHandler.trigger(div, 'click')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle event delegation', done => {
|
it('should handle event delegation', () => {
|
||||||
EventHandler.on(document, 'click', '.test', () => {
|
return new Promise(resolve => {
|
||||||
expect().nothing()
|
EventHandler.on(document, 'click', '.test', () => {
|
||||||
done()
|
expect().nothing()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
fixtureEl.innerHTML = '<div class="test"></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
|
div.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
fixtureEl.innerHTML = '<div class="test"></div>'
|
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
|
||||||
|
|
||||||
div.click()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle mouseenter/mouseleave like the native counterpart', done => {
|
it('should handle mouseenter/mouseleave like the native counterpart', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="outer">',
|
fixtureEl.innerHTML = [
|
||||||
'<div class="inner">',
|
'<div class="outer">',
|
||||||
'<div class="nested">',
|
'<div class="inner">',
|
||||||
'<div class="deep"></div>',
|
'<div class="nested">',
|
||||||
'</div>',
|
'<div class="deep"></div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div class="sibling"></div>',
|
'</div>',
|
||||||
'</div>'
|
'<div class="sibling"></div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const outer = fixtureEl.querySelector('.outer')
|
const outer = fixtureEl.querySelector('.outer')
|
||||||
const inner = fixtureEl.querySelector('.inner')
|
const inner = fixtureEl.querySelector('.inner')
|
||||||
const nested = fixtureEl.querySelector('.nested')
|
const nested = fixtureEl.querySelector('.nested')
|
||||||
const deep = fixtureEl.querySelector('.deep')
|
const deep = fixtureEl.querySelector('.deep')
|
||||||
const sibling = fixtureEl.querySelector('.sibling')
|
const sibling = fixtureEl.querySelector('.sibling')
|
||||||
|
|
||||||
const enterSpy = jasmine.createSpy('mouseenter')
|
const enterSpy = jasmine.createSpy('mouseenter')
|
||||||
const leaveSpy = jasmine.createSpy('mouseleave')
|
const leaveSpy = jasmine.createSpy('mouseleave')
|
||||||
const delegateEnterSpy = jasmine.createSpy('mouseenter')
|
const delegateEnterSpy = jasmine.createSpy('mouseenter')
|
||||||
const delegateLeaveSpy = jasmine.createSpy('mouseleave')
|
const delegateLeaveSpy = jasmine.createSpy('mouseleave')
|
||||||
|
|
||||||
EventHandler.on(inner, 'mouseenter', enterSpy)
|
EventHandler.on(inner, 'mouseenter', enterSpy)
|
||||||
EventHandler.on(inner, 'mouseleave', leaveSpy)
|
EventHandler.on(inner, 'mouseleave', leaveSpy)
|
||||||
EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
|
EventHandler.on(outer, 'mouseenter', '.inner', delegateEnterSpy)
|
||||||
EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
|
EventHandler.on(outer, 'mouseleave', '.inner', delegateLeaveSpy)
|
||||||
|
|
||||||
EventHandler.on(sibling, 'mouseenter', () => {
|
EventHandler.on(sibling, 'mouseenter', () => {
|
||||||
expect(enterSpy.calls.count()).toEqual(2)
|
expect(enterSpy.calls.count()).toEqual(2)
|
||||||
expect(leaveSpy.calls.count()).toEqual(2)
|
expect(leaveSpy.calls.count()).toEqual(2)
|
||||||
expect(delegateEnterSpy.calls.count()).toEqual(2)
|
expect(delegateEnterSpy.calls.count()).toEqual(2)
|
||||||
expect(delegateLeaveSpy.calls.count()).toEqual(2)
|
expect(delegateLeaveSpy.calls.count()).toEqual(2)
|
||||||
done()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
const moveMouse = (from, to) => {
|
const moveMouse = (from, to) => {
|
||||||
from.dispatchEvent(new MouseEvent('mouseout', {
|
from.dispatchEvent(new MouseEvent('mouseout', {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
relatedTarget: to
|
relatedTarget: to
|
||||||
}))
|
}))
|
||||||
|
|
||||||
to.dispatchEvent(new MouseEvent('mouseover', {
|
to.dispatchEvent(new MouseEvent('mouseover', {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
relatedTarget: from
|
relatedTarget: from
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
// from outer to deep and back to outer (nested)
|
// from outer to deep and back to outer (nested)
|
||||||
moveMouse(outer, inner)
|
|
||||||
moveMouse(inner, nested)
|
|
||||||
moveMouse(nested, deep)
|
|
||||||
moveMouse(deep, nested)
|
|
||||||
moveMouse(nested, inner)
|
|
||||||
moveMouse(inner, outer)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(enterSpy.calls.count()).toEqual(1)
|
|
||||||
expect(leaveSpy.calls.count()).toEqual(1)
|
|
||||||
expect(delegateEnterSpy.calls.count()).toEqual(1)
|
|
||||||
expect(delegateLeaveSpy.calls.count()).toEqual(1)
|
|
||||||
|
|
||||||
// from outer to inner to sibling (adjacent)
|
|
||||||
moveMouse(outer, inner)
|
moveMouse(outer, inner)
|
||||||
moveMouse(inner, sibling)
|
moveMouse(inner, nested)
|
||||||
}, 20)
|
moveMouse(nested, deep)
|
||||||
|
moveMouse(deep, nested)
|
||||||
|
moveMouse(nested, inner)
|
||||||
|
moveMouse(inner, outer)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(enterSpy.calls.count()).toEqual(1)
|
||||||
|
expect(leaveSpy.calls.count()).toEqual(1)
|
||||||
|
expect(delegateEnterSpy.calls.count()).toEqual(1)
|
||||||
|
expect(delegateLeaveSpy.calls.count()).toEqual(1)
|
||||||
|
|
||||||
|
// from outer to inner to sibling (adjacent)
|
||||||
|
moveMouse(outer, inner)
|
||||||
|
moveMouse(inner, sibling)
|
||||||
|
}, 20)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('one', () => {
|
describe('one', () => {
|
||||||
it('should call listener just once', done => {
|
it('should call listener just once', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
const obj = {
|
const obj = {
|
||||||
oneListener() {
|
oneListener() {
|
||||||
called++
|
called++
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.one(div, 'bootstrap', obj.oneListener)
|
EventHandler.one(div, 'bootstrap', obj.oneListener)
|
||||||
|
|
||||||
EventHandler.trigger(div, 'bootstrap')
|
EventHandler.trigger(div, 'bootstrap')
|
||||||
EventHandler.trigger(div, 'bootstrap')
|
EventHandler.trigger(div, 'bootstrap')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(called).toEqual(1)
|
expect(called).toEqual(1)
|
||||||
done()
|
resolve()
|
||||||
}, 20)
|
}, 20)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should call delegated listener just once', done => {
|
it('should call delegated listener just once', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
const obj = {
|
const obj = {
|
||||||
oneListener() {
|
oneListener() {
|
||||||
called++
|
called++
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)
|
EventHandler.one(fixtureEl, 'bootstrap', 'div', obj.oneListener)
|
||||||
|
|
||||||
EventHandler.trigger(div, 'bootstrap')
|
EventHandler.trigger(div, 'bootstrap')
|
||||||
EventHandler.trigger(div, 'bootstrap')
|
EventHandler.trigger(div, 'bootstrap')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(called).toEqual(1)
|
expect(called).toEqual(1)
|
||||||
done()
|
resolve()
|
||||||
}, 20)
|
}, 20)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -196,171 +211,185 @@ describe('EventHandler', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
EventHandler.off(div, null, () => {})
|
EventHandler.off(div, null, noop)
|
||||||
EventHandler.off(null, 'click', () => {})
|
EventHandler.off(null, 'click', noop)
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove a listener', done => {
|
it('should remove a listener', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
const handler = () => {
|
const handler = () => {
|
||||||
called++
|
called++
|
||||||
}
|
}
|
||||||
|
|
||||||
EventHandler.on(div, 'foobar', handler)
|
EventHandler.on(div, 'foobar', handler)
|
||||||
EventHandler.trigger(div, 'foobar')
|
EventHandler.trigger(div, 'foobar')
|
||||||
|
|
||||||
EventHandler.off(div, 'foobar', handler)
|
EventHandler.off(div, 'foobar', handler)
|
||||||
EventHandler.trigger(div, 'foobar')
|
EventHandler.trigger(div, 'foobar')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(called).toEqual(1)
|
expect(called).toEqual(1)
|
||||||
done()
|
resolve()
|
||||||
}, 20)
|
}, 20)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove all the events', done => {
|
it('should remove all the events', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
|
|
||||||
EventHandler.on(div, 'foobar', () => {
|
EventHandler.on(div, 'foobar', () => {
|
||||||
called++
|
called++
|
||||||
|
})
|
||||||
|
EventHandler.on(div, 'foobar', () => {
|
||||||
|
called++
|
||||||
|
})
|
||||||
|
EventHandler.trigger(div, 'foobar')
|
||||||
|
|
||||||
|
EventHandler.off(div, 'foobar')
|
||||||
|
EventHandler.trigger(div, 'foobar')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(called).toEqual(2)
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
})
|
})
|
||||||
EventHandler.on(div, 'foobar', () => {
|
|
||||||
called++
|
|
||||||
})
|
|
||||||
EventHandler.trigger(div, 'foobar')
|
|
||||||
|
|
||||||
EventHandler.off(div, 'foobar')
|
|
||||||
EventHandler.trigger(div, 'foobar')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(called).toEqual(2)
|
|
||||||
done()
|
|
||||||
}, 20)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove all the namespaced listeners if namespace is passed', done => {
|
it('should remove all the namespaced listeners if namespace is passed', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
|
|
||||||
EventHandler.on(div, 'foobar.namespace', () => {
|
EventHandler.on(div, 'foobar.namespace', () => {
|
||||||
called++
|
called++
|
||||||
|
})
|
||||||
|
EventHandler.on(div, 'foofoo.namespace', () => {
|
||||||
|
called++
|
||||||
|
})
|
||||||
|
EventHandler.trigger(div, 'foobar.namespace')
|
||||||
|
EventHandler.trigger(div, 'foofoo.namespace')
|
||||||
|
|
||||||
|
EventHandler.off(div, '.namespace')
|
||||||
|
EventHandler.trigger(div, 'foobar.namespace')
|
||||||
|
EventHandler.trigger(div, 'foofoo.namespace')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(called).toEqual(2)
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
})
|
})
|
||||||
EventHandler.on(div, 'foofoo.namespace', () => {
|
|
||||||
called++
|
|
||||||
})
|
|
||||||
EventHandler.trigger(div, 'foobar.namespace')
|
|
||||||
EventHandler.trigger(div, 'foofoo.namespace')
|
|
||||||
|
|
||||||
EventHandler.off(div, '.namespace')
|
|
||||||
EventHandler.trigger(div, 'foobar.namespace')
|
|
||||||
EventHandler.trigger(div, 'foofoo.namespace')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(called).toEqual(2)
|
|
||||||
done()
|
|
||||||
}, 20)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove the namespaced listeners', done => {
|
it('should remove the namespaced listeners', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let calledCallback1 = 0
|
let calledCallback1 = 0
|
||||||
let calledCallback2 = 0
|
let calledCallback2 = 0
|
||||||
|
|
||||||
EventHandler.on(div, 'foobar.namespace', () => {
|
EventHandler.on(div, 'foobar.namespace', () => {
|
||||||
calledCallback1++
|
calledCallback1++
|
||||||
|
})
|
||||||
|
EventHandler.on(div, 'foofoo.namespace', () => {
|
||||||
|
calledCallback2++
|
||||||
|
})
|
||||||
|
|
||||||
|
EventHandler.trigger(div, 'foobar.namespace')
|
||||||
|
EventHandler.off(div, 'foobar.namespace')
|
||||||
|
EventHandler.trigger(div, 'foobar.namespace')
|
||||||
|
|
||||||
|
EventHandler.trigger(div, 'foofoo.namespace')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(calledCallback1).toEqual(1)
|
||||||
|
expect(calledCallback2).toEqual(1)
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
})
|
})
|
||||||
EventHandler.on(div, 'foofoo.namespace', () => {
|
|
||||||
calledCallback2++
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.trigger(div, 'foobar.namespace')
|
|
||||||
EventHandler.off(div, 'foobar.namespace')
|
|
||||||
EventHandler.trigger(div, 'foobar.namespace')
|
|
||||||
|
|
||||||
EventHandler.trigger(div, 'foofoo.namespace')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(calledCallback1).toEqual(1)
|
|
||||||
expect(calledCallback2).toEqual(1)
|
|
||||||
done()
|
|
||||||
}, 20)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove the all the namespaced listeners for native events', done => {
|
it('should remove the all the namespaced listeners for native events', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let called = 0
|
let called = 0
|
||||||
|
|
||||||
EventHandler.on(div, 'click.namespace', () => {
|
EventHandler.on(div, 'click.namespace', () => {
|
||||||
called++
|
called++
|
||||||
|
})
|
||||||
|
EventHandler.on(div, 'click.namespace2', () => {
|
||||||
|
called++
|
||||||
|
})
|
||||||
|
|
||||||
|
EventHandler.trigger(div, 'click')
|
||||||
|
EventHandler.off(div, 'click')
|
||||||
|
EventHandler.trigger(div, 'click')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(called).toEqual(2)
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
})
|
})
|
||||||
EventHandler.on(div, 'click.namespace2', () => {
|
|
||||||
called++
|
|
||||||
})
|
|
||||||
|
|
||||||
EventHandler.trigger(div, 'click')
|
|
||||||
EventHandler.off(div, 'click')
|
|
||||||
EventHandler.trigger(div, 'click')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(called).toEqual(2)
|
|
||||||
done()
|
|
||||||
}, 20)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove the specified namespaced listeners for native events', done => {
|
it('should remove the specified namespaced listeners for native events', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
const div = fixtureEl.querySelector('div')
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
let called1 = 0
|
let called1 = 0
|
||||||
let called2 = 0
|
let called2 = 0
|
||||||
|
|
||||||
EventHandler.on(div, 'click.namespace', () => {
|
EventHandler.on(div, 'click.namespace', () => {
|
||||||
called1++
|
called1++
|
||||||
|
})
|
||||||
|
EventHandler.on(div, 'click.namespace2', () => {
|
||||||
|
called2++
|
||||||
|
})
|
||||||
|
EventHandler.trigger(div, 'click')
|
||||||
|
|
||||||
|
EventHandler.off(div, 'click.namespace')
|
||||||
|
EventHandler.trigger(div, 'click')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(called1).toEqual(1)
|
||||||
|
expect(called2).toEqual(2)
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
})
|
})
|
||||||
EventHandler.on(div, 'click.namespace2', () => {
|
|
||||||
called2++
|
|
||||||
})
|
|
||||||
EventHandler.trigger(div, 'click')
|
|
||||||
|
|
||||||
EventHandler.off(div, 'click.namespace')
|
|
||||||
EventHandler.trigger(div, 'click')
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(called1).toEqual(1)
|
|
||||||
expect(called2).toEqual(2)
|
|
||||||
done()
|
|
||||||
}, 20)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove a listener registered by .one', done => {
|
it('should remove a listener registered by .one', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
const handler = () => {
|
const handler = () => {
|
||||||
throw new Error('called')
|
throw new Error('called')
|
||||||
}
|
}
|
||||||
|
|
||||||
EventHandler.one(div, 'foobar', handler)
|
EventHandler.one(div, 'foobar', handler)
|
||||||
EventHandler.off(div, 'foobar', handler)
|
EventHandler.off(div, 'foobar', handler)
|
||||||
|
|
||||||
EventHandler.trigger(div, 'foobar')
|
EventHandler.trigger(div, 'foobar')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
resolve()
|
||||||
}, 20)
|
}, 20)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove the correct delegated event listener', () => {
|
it('should remove the correct delegated event listener', () => {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import Manipulator from '../../../src/dom/manipulator'
|
import Manipulator from '../../../src/dom/manipulator'
|
||||||
import { getFixture, clearFixture } from '../../helpers/fixture'
|
import { clearFixture, getFixture } from '../../helpers/fixture'
|
||||||
|
|
||||||
describe('Manipulator', () => {
|
describe('Manipulator', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -134,42 +134,44 @@ describe('Manipulator', () => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not change offset when viewport is scrolled', done => {
|
it('should not change offset when viewport is scrolled', () => {
|
||||||
const top = 500
|
return new Promise(resolve => {
|
||||||
const left = 1000
|
const top = 500
|
||||||
const scrollY = 200
|
const left = 1000
|
||||||
const scrollX = 400
|
const scrollY = 200
|
||||||
|
const scrollX = 400
|
||||||
|
|
||||||
fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
|
fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
|
||||||
|
|
||||||
const div = fixtureEl.querySelector('div')
|
const div = fixtureEl.querySelector('div')
|
||||||
const offset = Manipulator.offset(div)
|
const offset = Manipulator.offset(div)
|
||||||
|
|
||||||
// append an element that forces scrollbars on the window so we can scroll
|
// append an element that forces scrollbars on the window so we can scroll
|
||||||
const { defaultView: win, body } = fixtureEl.ownerDocument
|
const { defaultView: win, body } = fixtureEl.ownerDocument
|
||||||
const forceScrollBars = document.createElement('div')
|
const forceScrollBars = document.createElement('div')
|
||||||
forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
|
forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
|
||||||
body.append(forceScrollBars)
|
body.append(forceScrollBars)
|
||||||
|
|
||||||
const scrollHandler = () => {
|
const scrollHandler = () => {
|
||||||
expect(window.pageYOffset).toEqual(scrollY)
|
expect(window.pageYOffset).toEqual(scrollY)
|
||||||
expect(window.pageXOffset).toEqual(scrollX)
|
expect(window.pageXOffset).toEqual(scrollX)
|
||||||
|
|
||||||
const newOffset = Manipulator.offset(div)
|
const newOffset = Manipulator.offset(div)
|
||||||
|
|
||||||
expect(newOffset).toEqual({
|
expect(newOffset).toEqual({
|
||||||
top: offset.top,
|
top: offset.top,
|
||||||
left: offset.left
|
left: offset.left
|
||||||
})
|
})
|
||||||
|
|
||||||
win.removeEventListener('scroll', scrollHandler)
|
win.removeEventListener('scroll', scrollHandler)
|
||||||
forceScrollBars.remove()
|
forceScrollBars.remove()
|
||||||
win.scrollTo(0, 0)
|
win.scrollTo(0, 0)
|
||||||
done()
|
resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
win.addEventListener('scroll', scrollHandler)
|
win.addEventListener('scroll', scrollHandler)
|
||||||
win.scrollTo(scrollX, scrollY)
|
win.scrollTo(scrollX, scrollY)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,7 +12,7 @@ import ScrollSpy from '../../src/scrollspy'
|
||||||
import Tab from '../../src/tab'
|
import Tab from '../../src/tab'
|
||||||
import Toast from '../../src/toast'
|
import Toast from '../../src/toast'
|
||||||
import Tooltip from '../../src/tooltip'
|
import Tooltip from '../../src/tooltip'
|
||||||
import { getFixture, clearFixture } from '../helpers/fixture'
|
import { clearFixture, getFixture } from '../helpers/fixture'
|
||||||
|
|
||||||
describe('jQuery', () => {
|
describe('jQuery', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -40,19 +40,21 @@ describe('jQuery', () => {
|
||||||
expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
|
expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should use jQuery event system', done => {
|
it('should use jQuery event system', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="alert">',
|
fixtureEl.innerHTML = [
|
||||||
' <button type="button" data-bs-dismiss="alert">x</button>',
|
'<div class="alert">',
|
||||||
'</div>'
|
' <button type="button" data-bs-dismiss="alert">x</button>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
$(fixtureEl).find('.alert')
|
$(fixtureEl).find('.alert')
|
||||||
.one('closed.bs.alert', () => {
|
.one('closed.bs.alert', () => {
|
||||||
expect($(fixtureEl).find('.alert')).toHaveSize(0)
|
expect($(fixtureEl).find('.alert')).toHaveSize(0)
|
||||||
done()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
$(fixtureEl).find('button').trigger('click')
|
$(fixtureEl).find('button').trigger('click')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -147,83 +147,91 @@ describe('Offcanvas', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('options', () => {
|
describe('options', () => {
|
||||||
it('if scroll is enabled, should allow body to scroll while offcanvas is open', done => {
|
it('if scroll is enabled, should allow body to scroll while offcanvas is open', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
|
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
|
||||||
spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
|
spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })
|
const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(ScrollBarHelper.prototype.hide).not.toHaveBeenCalled()
|
expect(ScrollBarHelper.prototype.hide).not.toHaveBeenCalled()
|
||||||
offCanvas.hide()
|
offCanvas.hide()
|
||||||
|
})
|
||||||
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', done => {
|
it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
|
spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
|
||||||
spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
|
spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })
|
const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
|
expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
|
||||||
offCanvas.hide()
|
offCanvas.hide()
|
||||||
|
})
|
||||||
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should hide a shown element if user click on backdrop', done => {
|
it('should hide a shown element if user click on backdrop', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })
|
const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })
|
||||||
|
|
||||||
const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
|
const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
|
||||||
spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()
|
spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(offCanvas._backdrop._config.clickCallback).toEqual(jasmine.any(Function))
|
expect(offCanvas._backdrop._config.clickCallback).toEqual(jasmine.any(Function))
|
||||||
|
|
||||||
offCanvas._backdrop._getElement().dispatchEvent(clickEvent)
|
offCanvas._backdrop._getElement().dispatchEvent(clickEvent)
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not trap focus if scroll is allowed', done => {
|
it('should not trap focus if scroll is allowed', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl, {
|
const offCanvas = new Offcanvas(offCanvasEl, {
|
||||||
scroll: true
|
scroll: true
|
||||||
|
})
|
||||||
|
|
||||||
|
spyOn(offCanvas._focustrap, 'activate').and.callThrough()
|
||||||
|
|
||||||
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
|
expect(offCanvas._focustrap.activate).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
spyOn(offCanvas._focustrap, 'activate').and.callThrough()
|
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
|
||||||
expect(offCanvas._focustrap.activate).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -241,44 +249,48 @@ describe('Offcanvas', () => {
|
||||||
expect(offCanvas.show).toHaveBeenCalled()
|
expect(offCanvas.show).toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should call hide method if show class is present', done => {
|
it('should call hide method if show class is present', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).toHaveClass('show')
|
expect(offCanvasEl).toHaveClass('show')
|
||||||
spyOn(offCanvas, 'hide')
|
spyOn(offCanvas, 'hide')
|
||||||
|
|
||||||
offCanvas.toggle()
|
offCanvas.toggle()
|
||||||
|
|
||||||
expect(offCanvas.hide).toHaveBeenCalled()
|
expect(offCanvas.hide).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('show', () => {
|
describe('show', () => {
|
||||||
it('should add `showing` class during opening and `show` class on end', done => {
|
it('should add `showing` class during opening and `show` class on end', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
|
|
||||||
offCanvasEl.addEventListener('show.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('show.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).not.toHaveClass('show')
|
expect(offCanvasEl).not.toHaveClass('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
|
expect(offCanvasEl).not.toHaveClass('showing')
|
||||||
|
expect(offCanvasEl).toHaveClass('show')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
|
expect(offCanvasEl).toHaveClass('showing')
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
|
||||||
expect(offCanvasEl).not.toHaveClass('showing')
|
|
||||||
expect(offCanvasEl).toHaveClass('show')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
expect(offCanvasEl).toHaveClass('showing')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should do nothing if already shown', () => {
|
it('should do nothing if already shown', () => {
|
||||||
|
|
@ -298,104 +310,114 @@ describe('Offcanvas', () => {
|
||||||
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
|
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should show a hidden element', done => {
|
it('should show a hidden element', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
spyOn(offCanvas._backdrop, 'show').and.callThrough()
|
spyOn(offCanvas._backdrop, 'show').and.callThrough()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).toHaveClass('show')
|
expect(offCanvasEl).toHaveClass('show')
|
||||||
expect(offCanvas._backdrop.show).toHaveBeenCalled()
|
expect(offCanvas._backdrop.show).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not fire shown when show is prevented', done => {
|
it('should not fire shown when show is prevented', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
spyOn(offCanvas._backdrop, 'show').and.callThrough()
|
spyOn(offCanvas._backdrop, 'show').and.callThrough()
|
||||||
|
|
||||||
const expectEnd = () => {
|
const expectEnd = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
|
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
}, 10)
|
}, 10)
|
||||||
}
|
}
|
||||||
|
|
||||||
offCanvasEl.addEventListener('show.bs.offcanvas', event => {
|
offCanvasEl.addEventListener('show.bs.offcanvas', event => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
expectEnd()
|
expectEnd()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
|
throw new Error('should not fire shown event')
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
|
||||||
throw new Error('should not fire shown event')
|
|
||||||
})
|
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('on window load, should make visible an offcanvas element, if its markup contains class "show"', done => {
|
it('on window load, should make visible an offcanvas element, if its markup contains class "show"', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
spyOn(Offcanvas.prototype, 'show').and.callThrough()
|
spyOn(Offcanvas.prototype, 'show').and.callThrough()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
window.dispatchEvent(createEvent('load'))
|
||||||
|
|
||||||
|
const instance = Offcanvas.getInstance(offCanvasEl)
|
||||||
|
expect(instance).not.toBeNull()
|
||||||
|
expect(Offcanvas.prototype.show).toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
window.dispatchEvent(createEvent('load'))
|
|
||||||
|
|
||||||
const instance = Offcanvas.getInstance(offCanvasEl)
|
|
||||||
expect(instance).not.toBeNull()
|
|
||||||
expect(Offcanvas.prototype.show).toHaveBeenCalled()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should trap focus', done => {
|
it('should trap focus', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
|
|
||||||
spyOn(offCanvas._focustrap, 'activate').and.callThrough()
|
spyOn(offCanvas._focustrap, 'activate').and.callThrough()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(offCanvas._focustrap.activate).toHaveBeenCalled()
|
expect(offCanvas._focustrap.activate).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('hide', () => {
|
describe('hide', () => {
|
||||||
it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', done => {
|
it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
|
||||||
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hide.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('hide.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).not.toHaveClass('showing')
|
expect(offCanvasEl).not.toHaveClass('showing')
|
||||||
expect(offCanvasEl).toHaveClass('show')
|
expect(offCanvasEl).toHaveClass('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).not.toHaveClass('hiding')
|
expect(offCanvasEl).not.toHaveClass('hiding')
|
||||||
expect(offCanvasEl).not.toHaveClass('show')
|
expect(offCanvasEl).not.toHaveClass('show')
|
||||||
done()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.show()
|
offCanvas.show()
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
offCanvas.hide()
|
offCanvas.hide()
|
||||||
expect(offCanvasEl).not.toHaveClass('showing')
|
expect(offCanvasEl).not.toHaveClass('showing')
|
||||||
expect(offCanvasEl).toHaveClass('hiding')
|
expect(offCanvasEl).toHaveClass('hiding')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -413,65 +435,71 @@ describe('Offcanvas', () => {
|
||||||
expect(EventHandler.trigger).not.toHaveBeenCalled()
|
expect(EventHandler.trigger).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should hide a shown element', done => {
|
it('should hide a shown element', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
spyOn(offCanvas._backdrop, 'hide').and.callThrough()
|
spyOn(offCanvas._backdrop, 'hide').and.callThrough()
|
||||||
offCanvas.show()
|
offCanvas.show()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).not.toHaveClass('show')
|
expect(offCanvasEl).not.toHaveClass('show')
|
||||||
expect(offCanvas._backdrop.hide).toHaveBeenCalled()
|
expect(offCanvas._backdrop.hide).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.hide()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.hide()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not fire hidden when hide is prevented', done => {
|
it('should not fire hidden when hide is prevented', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
spyOn(offCanvas._backdrop, 'hide').and.callThrough()
|
spyOn(offCanvas._backdrop, 'hide').and.callThrough()
|
||||||
|
|
||||||
offCanvas.show()
|
offCanvas.show()
|
||||||
|
|
||||||
const expectEnd = () => {
|
const expectEnd = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
|
expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
}, 10)
|
}, 10)
|
||||||
}
|
}
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hide.bs.offcanvas', event => {
|
offCanvasEl.addEventListener('hide.bs.offcanvas', event => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
expectEnd()
|
expectEnd()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
throw new Error('should not fire hidden event')
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.hide()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
throw new Error('should not fire hidden event')
|
|
||||||
})
|
|
||||||
|
|
||||||
offCanvas.hide()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should release focus trap', done => {
|
it('should release focus trap', () => {
|
||||||
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
|
||||||
|
|
||||||
const offCanvasEl = fixtureEl.querySelector('div')
|
const offCanvasEl = fixtureEl.querySelector('div')
|
||||||
const offCanvas = new Offcanvas(offCanvasEl)
|
const offCanvas = new Offcanvas(offCanvasEl)
|
||||||
spyOn(offCanvas._focustrap, 'deactivate').and.callThrough()
|
spyOn(offCanvas._focustrap, 'deactivate').and.callThrough()
|
||||||
offCanvas.show()
|
offCanvas.show()
|
||||||
|
|
||||||
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
expect(offCanvas._focustrap.deactivate).toHaveBeenCalled()
|
expect(offCanvas._focustrap.deactivate).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
offCanvas.hide()
|
||||||
})
|
})
|
||||||
|
|
||||||
offCanvas.hide()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -501,22 +529,24 @@ describe('Offcanvas', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('data-api', () => {
|
describe('data-api', () => {
|
||||||
it('should not prevent event for input', done => {
|
it('should not prevent event for input', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<input type="checkbox" data-bs-toggle="offcanvas" data-bs-target="#offcanvasdiv1" />',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="offcanvasdiv1" class="offcanvas"></div>'
|
'<input type="checkbox" data-bs-toggle="offcanvas" data-bs-target="#offcanvasdiv1" />',
|
||||||
].join('')
|
'<div id="offcanvasdiv1" class="offcanvas"></div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const target = fixtureEl.querySelector('input')
|
const target = fixtureEl.querySelector('input')
|
||||||
const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')
|
const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')
|
||||||
|
|
||||||
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
expect(offCanvasEl).toHaveClass('show')
|
expect(offCanvasEl).toHaveClass('show')
|
||||||
expect(target.checked).toBeTrue()
|
expect(target.checked).toBeTrue()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
target.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
target.click()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not call toggle on disabled elements', () => {
|
it('should not call toggle on disabled elements', () => {
|
||||||
|
|
@ -534,76 +564,82 @@ describe('Offcanvas', () => {
|
||||||
expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
|
expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should call hide first, if another offcanvas is open', done => {
|
it('should call hide first, if another offcanvas is open', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="btn2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2"></button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="offcanvas1" class="offcanvas"></div>',
|
'<button id="btn2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas2"></button>',
|
||||||
'<div id="offcanvas2" class="offcanvas"></div>'
|
'<div id="offcanvas1" class="offcanvas"></div>',
|
||||||
].join('')
|
'<div id="offcanvas2" class="offcanvas"></div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const trigger2 = fixtureEl.querySelector('#btn2')
|
const trigger2 = fixtureEl.querySelector('#btn2')
|
||||||
const offcanvasEl1 = document.querySelector('#offcanvas1')
|
const offcanvasEl1 = document.querySelector('#offcanvas1')
|
||||||
const offcanvasEl2 = document.querySelector('#offcanvas2')
|
const offcanvasEl2 = document.querySelector('#offcanvas2')
|
||||||
const offcanvas1 = new Offcanvas(offcanvasEl1)
|
const offcanvas1 = new Offcanvas(offcanvasEl1)
|
||||||
|
|
||||||
offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {
|
offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {
|
||||||
trigger2.click()
|
trigger2.click()
|
||||||
|
})
|
||||||
|
offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
offcanvas1.show()
|
||||||
})
|
})
|
||||||
offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
offcanvas1.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should focus on trigger element after closing offcanvas', done => {
|
it('should focus on trigger element after closing offcanvas', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="offcanvas" class="offcanvas"></div>'
|
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
|
||||||
].join('')
|
'<div id="offcanvas" class="offcanvas"></div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const trigger = fixtureEl.querySelector('#btn')
|
const trigger = fixtureEl.querySelector('#btn')
|
||||||
const offcanvasEl = fixtureEl.querySelector('#offcanvas')
|
const offcanvasEl = fixtureEl.querySelector('#offcanvas')
|
||||||
const offcanvas = new Offcanvas(offcanvasEl)
|
const offcanvas = new Offcanvas(offcanvasEl)
|
||||||
spyOn(trigger, 'focus')
|
spyOn(trigger, 'focus')
|
||||||
|
|
||||||
offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
offcanvas.hide()
|
offcanvas.hide()
|
||||||
|
})
|
||||||
|
offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(trigger.focus).toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 5)
|
||||||
|
})
|
||||||
|
|
||||||
|
trigger.click()
|
||||||
})
|
})
|
||||||
offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(trigger.focus).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 5)
|
|
||||||
})
|
|
||||||
|
|
||||||
trigger.click()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not focus on trigger element after closing offcanvas, if it is not visible', done => {
|
it('should not focus on trigger element after closing offcanvas, if it is not visible', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="offcanvas" class="offcanvas"></div>'
|
'<button id="btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></button>',
|
||||||
].join('')
|
'<div id="offcanvas" class="offcanvas"></div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const trigger = fixtureEl.querySelector('#btn')
|
const trigger = fixtureEl.querySelector('#btn')
|
||||||
const offcanvasEl = fixtureEl.querySelector('#offcanvas')
|
const offcanvasEl = fixtureEl.querySelector('#offcanvas')
|
||||||
const offcanvas = new Offcanvas(offcanvasEl)
|
const offcanvas = new Offcanvas(offcanvasEl)
|
||||||
spyOn(trigger, 'focus')
|
spyOn(trigger, 'focus')
|
||||||
|
|
||||||
offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
|
||||||
trigger.style.display = 'none'
|
trigger.style.display = 'none'
|
||||||
offcanvas.hide()
|
offcanvas.hide()
|
||||||
|
})
|
||||||
|
offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(isVisible(trigger)).toBeFalse()
|
||||||
|
expect(trigger.focus).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 5)
|
||||||
|
})
|
||||||
|
|
||||||
|
trigger.click()
|
||||||
})
|
})
|
||||||
offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(isVisible(trigger)).toBeFalse()
|
|
||||||
expect(trigger.focus).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 5)
|
|
||||||
})
|
|
||||||
|
|
||||||
trigger.click()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,113 +62,125 @@ describe('Popover', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('show', () => {
|
describe('show', () => {
|
||||||
it('should show a popover', done => {
|
it('should show a popover', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl)
|
const popover = new Popover(popoverEl)
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
expect(document.querySelector('.popover')).not.toBeNull()
|
expect(document.querySelector('.popover')).not.toBeNull()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should set title and content from functions', done => {
|
it('should set title and content from functions', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl, {
|
const popover = new Popover(popoverEl, {
|
||||||
title: () => 'Bootstrap',
|
title: () => 'Bootstrap',
|
||||||
content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
|
content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
|
||||||
|
})
|
||||||
|
|
||||||
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
|
const popoverDisplayed = document.querySelector('.popover')
|
||||||
|
|
||||||
|
expect(popoverDisplayed).not.toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
||||||
const popoverDisplayed = document.querySelector('.popover')
|
|
||||||
|
|
||||||
expect(popoverDisplayed).not.toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should show a popover with just content without having header', done => {
|
it('should show a popover with just content without having header', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl, {
|
const popover = new Popover(popoverEl, {
|
||||||
content: 'Some beautiful content :)'
|
content: 'Some beautiful content :)'
|
||||||
|
})
|
||||||
|
|
||||||
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
|
const popoverDisplayed = document.querySelector('.popover')
|
||||||
|
|
||||||
|
expect(popoverDisplayed).not.toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
||||||
const popoverDisplayed = document.querySelector('.popover')
|
|
||||||
|
|
||||||
expect(popoverDisplayed).not.toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should show a popover with just title without having body', done => {
|
it('should show a popover with just title without having body', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#">Nice link</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl, {
|
const popover = new Popover(popoverEl, {
|
||||||
title: 'Title which does not require content'
|
title: 'Title which does not require content'
|
||||||
|
})
|
||||||
|
|
||||||
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
|
const popoverDisplayed = document.querySelector('.popover')
|
||||||
|
|
||||||
|
expect(popoverDisplayed).not.toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
||||||
const popoverDisplayed = document.querySelector('.popover')
|
|
||||||
|
|
||||||
expect(popoverDisplayed).not.toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should show a popover with just title without having body using data-attribute to get config', done => {
|
it('should show a popover with just title without having body using data-attribute to get config', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl)
|
const popover = new Popover(popoverEl)
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
const popoverDisplayed = document.querySelector('.popover')
|
const popoverDisplayed = document.querySelector('.popover')
|
||||||
|
|
||||||
expect(popoverDisplayed).not.toBeNull()
|
expect(popoverDisplayed).not.toBeNull()
|
||||||
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
|
expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
|
||||||
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
|
expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should NOT show a popover without `title` and `content`', done => {
|
it('should NOT show a popover without `title` and `content`', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl, { animation: false })
|
const popover = new Popover(popoverEl, { animation: false })
|
||||||
spyOn(EventHandler, 'trigger').and.callThrough()
|
spyOn(EventHandler, 'trigger').and.callThrough()
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(EventHandler.trigger).not.toHaveBeenCalled()
|
expect(EventHandler.trigger).not.toHaveBeenCalled()
|
||||||
expect(document.querySelector('.popover')).toBeNull()
|
expect(document.querySelector('.popover')).toBeNull()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('"setContent" should keep the initial template', () => {
|
it('"setContent" should keep the initial template', () => {
|
||||||
|
|
@ -187,72 +199,78 @@ describe('Popover', () => {
|
||||||
expect(tip.querySelector('.popover-body')).not.toBeNull()
|
expect(tip.querySelector('.popover-body')).not.toBeNull()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should call setContent once', done => {
|
it('should call setContent once', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl, {
|
const popover = new Popover(popoverEl, {
|
||||||
content: 'Popover content'
|
content: 'Popover content'
|
||||||
})
|
})
|
||||||
expect(popover._templateFactory).toBeNull()
|
expect(popover._templateFactory).toBeNull()
|
||||||
let spy = null
|
let spy = null
|
||||||
let times = 1
|
let times = 1
|
||||||
|
|
||||||
popoverEl.addEventListener('hidden.bs.popover', () => {
|
popoverEl.addEventListener('hidden.bs.popover', () => {
|
||||||
|
popover.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
|
spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
|
||||||
|
const popoverDisplayed = document.querySelector('.popover')
|
||||||
|
|
||||||
|
expect(popoverDisplayed).not.toBeNull()
|
||||||
|
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
|
||||||
|
expect(spy).toHaveBeenCalledTimes(0)
|
||||||
|
if (times > 1) {
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
times++
|
||||||
|
popover.hide()
|
||||||
|
})
|
||||||
popover.show()
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
|
||||||
spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
|
|
||||||
const popoverDisplayed = document.querySelector('.popover')
|
|
||||||
|
|
||||||
expect(popoverDisplayed).not.toBeNull()
|
|
||||||
expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
|
|
||||||
expect(spy).toHaveBeenCalledTimes(0)
|
|
||||||
if (times > 1) {
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
|
|
||||||
times++
|
|
||||||
popover.hide()
|
|
||||||
})
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should show a popover with provided custom class', done => {
|
it('should show a popover with provided custom class', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl)
|
const popover = new Popover(popoverEl)
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
const tip = document.querySelector('.popover')
|
const tip = document.querySelector('.popover')
|
||||||
expect(tip).not.toBeNull()
|
expect(tip).not.toBeNull()
|
||||||
expect(tip).toHaveClass('custom-class')
|
expect(tip).toHaveClass('custom-class')
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('hide', () => {
|
describe('hide', () => {
|
||||||
it('should hide a popover', done => {
|
it('should hide a popover', () => {
|
||||||
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
|
||||||
|
|
||||||
const popoverEl = fixtureEl.querySelector('a')
|
const popoverEl = fixtureEl.querySelector('a')
|
||||||
const popover = new Popover(popoverEl)
|
const popover = new Popover(popoverEl)
|
||||||
|
|
||||||
popoverEl.addEventListener('shown.bs.popover', () => {
|
popoverEl.addEventListener('shown.bs.popover', () => {
|
||||||
popover.hide()
|
popover.hide()
|
||||||
|
})
|
||||||
|
|
||||||
|
popoverEl.addEventListener('hidden.bs.popover', () => {
|
||||||
|
expect(document.querySelector('.popover')).toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
popover.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
popoverEl.addEventListener('hidden.bs.popover', () => {
|
|
||||||
expect(document.querySelector('.popover')).toBeNull()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
popover.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import ScrollSpy from '../../src/scrollspy'
|
import ScrollSpy from '../../src/scrollspy'
|
||||||
import Manipulator from '../../src/dom/manipulator'
|
import Manipulator from '../../src/dom/manipulator'
|
||||||
import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
|
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
|
||||||
|
|
||||||
describe('ScrollSpy', () => {
|
describe('ScrollSpy', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -85,418 +85,436 @@ describe('ScrollSpy', () => {
|
||||||
expect(scrollSpy._targets).toHaveSize(2)
|
expect(scrollSpy._targets).toHaveSize(2)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should only switch "active" class on current target', done => {
|
it('should only switch "active" class on current target', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div id="root" class="active" style="display: block">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="topbar">',
|
'<div id="root" class="active" style="display: block">',
|
||||||
' <div class="topbar-inner">',
|
' <div class="topbar">',
|
||||||
' <div class="container" id="ss-target">',
|
' <div class="topbar-inner">',
|
||||||
' <ul class="nav">',
|
' <div class="container" id="ss-target">',
|
||||||
' <li class="nav-item"><a href="#masthead">Overview</a></li>',
|
' <ul class="nav">',
|
||||||
' <li class="nav-item"><a href="#detail">Detail</a></li>',
|
' <li class="nav-item"><a href="#masthead">Overview</a></li>',
|
||||||
' </ul>',
|
' <li class="nav-item"><a href="#detail">Detail</a></li>',
|
||||||
' </div>',
|
' </ul>',
|
||||||
' </div>',
|
' </div>',
|
||||||
' </div>',
|
' </div>',
|
||||||
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
' </div>',
|
||||||
' <div style="height: 200px;">',
|
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
||||||
' <h4 id="masthead">Overview</h4>',
|
' <div style="height: 200px;">',
|
||||||
' <p style="height: 200px;"></p>',
|
' <h4 id="masthead">Overview</h4>',
|
||||||
' </div>',
|
' <p style="height: 200px;"></p>',
|
||||||
' <div style="height: 200px;">',
|
' </div>',
|
||||||
' <h4 id="detail">Detail</h4>',
|
' <div style="height: 200px;">',
|
||||||
' <p style="height: 200px;"></p>',
|
' <h4 id="detail">Detail</h4>',
|
||||||
' </div>',
|
' <p style="height: 200px;"></p>',
|
||||||
' </div>',
|
' </div>',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
|
const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
|
||||||
const rootEl = fixtureEl.querySelector('#root')
|
const rootEl = fixtureEl.querySelector('#root')
|
||||||
const scrollSpy = new ScrollSpy(scrollSpyEl, {
|
const scrollSpy = new ScrollSpy(scrollSpyEl, {
|
||||||
target: 'ss-target'
|
target: 'ss-target'
|
||||||
})
|
})
|
||||||
|
|
||||||
spyOn(scrollSpy, '_process').and.callThrough()
|
spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
scrollSpyEl.addEventListener('scroll', () => {
|
scrollSpyEl.addEventListener('scroll', () => {
|
||||||
expect(rootEl).toHaveClass('active')
|
expect(rootEl).toHaveClass('active')
|
||||||
expect(scrollSpy._process).toHaveBeenCalled()
|
expect(scrollSpy._process).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
scrollSpyEl.scrollTop = 350
|
scrollSpyEl.scrollTop = 350
|
||||||
})
|
|
||||||
|
|
||||||
it('should only switch "active" class on current target specified w element', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<div id="root" class="active" style="display: block">',
|
|
||||||
' <div class="topbar">',
|
|
||||||
' <div class="topbar-inner">',
|
|
||||||
' <div class="container" id="ss-target">',
|
|
||||||
' <ul class="nav">',
|
|
||||||
' <li class="nav-item"><a href="#masthead">Overview</a></li>',
|
|
||||||
' <li class="nav-item"><a href="#detail">Detail</a></li>',
|
|
||||||
' </ul>',
|
|
||||||
' </div>',
|
|
||||||
' </div>',
|
|
||||||
' </div>',
|
|
||||||
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
|
||||||
' <div style="height: 200px;">',
|
|
||||||
' <h4 id="masthead">Overview</h4>',
|
|
||||||
' <p style="height: 200px;"></p>',
|
|
||||||
' </div>',
|
|
||||||
' <div style="height: 200px;">',
|
|
||||||
' <h4 id="detail">Detail</h4>',
|
|
||||||
' <p style="height: 200px;"></p>',
|
|
||||||
' </div>',
|
|
||||||
' </div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
|
|
||||||
const rootEl = fixtureEl.querySelector('#root')
|
|
||||||
const scrollSpy = new ScrollSpy(scrollSpyEl, {
|
|
||||||
target: fixtureEl.querySelector('#ss-target')
|
|
||||||
})
|
|
||||||
|
|
||||||
spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
scrollSpyEl.addEventListener('scroll', () => {
|
|
||||||
expect(rootEl).toHaveClass('active')
|
|
||||||
expect(scrollSpy._process).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
scrollSpyEl.scrollTop = 350
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should correctly select middle navigation option when large offset is used', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<div id="header" style="height: 500px;"></div>',
|
|
||||||
'<nav id="navigation" class="navbar">',
|
|
||||||
' <ul class="navbar-nav">',
|
|
||||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
|
||||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
|
||||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
|
||||||
' </ul>',
|
|
||||||
'</nav>',
|
|
||||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
|
||||||
' <div id="one" style="height: 500px;"></div>',
|
|
||||||
' <div id="two" style="height: 300px;"></div>',
|
|
||||||
' <div id="three" style="height: 10px;"></div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('#content')
|
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
|
||||||
target: '#navigation',
|
|
||||||
offset: Manipulator.position(contentEl).top
|
|
||||||
})
|
|
||||||
|
|
||||||
spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
contentEl.addEventListener('scroll', () => {
|
|
||||||
expect(fixtureEl.querySelector('#one-link')).not.toHaveClass('active')
|
|
||||||
expect(fixtureEl.querySelector('#two-link')).toHaveClass('active')
|
|
||||||
expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active')
|
|
||||||
expect(scrollSpy._process).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
contentEl.scrollTop = 550
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should add the active class to the correct element', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<nav class="navbar">',
|
|
||||||
' <ul class="nav">',
|
|
||||||
' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
|
|
||||||
' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
|
|
||||||
' </ul>',
|
|
||||||
'</nav>',
|
|
||||||
'<div class="content" style="overflow: auto; height: 50px">',
|
|
||||||
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
|
||||||
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('.content')
|
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
|
||||||
offset: 0,
|
|
||||||
target: '.navbar'
|
|
||||||
})
|
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
testElementIsActiveAfterScroll({
|
|
||||||
elementSelector: '#a-1',
|
|
||||||
targetSelector: '#div-1',
|
|
||||||
contentEl,
|
|
||||||
scrollSpy,
|
|
||||||
spy,
|
|
||||||
cb: () => {
|
|
||||||
testElementIsActiveAfterScroll({
|
|
||||||
elementSelector: '#a-2',
|
|
||||||
targetSelector: '#div-2',
|
|
||||||
contentEl,
|
|
||||||
scrollSpy,
|
|
||||||
spy,
|
|
||||||
cb: () => done()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add the active class to the correct element (nav markup)', done => {
|
it('should only switch "active" class on current target specified w element', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<nav class="navbar">',
|
fixtureEl.innerHTML = [
|
||||||
' <nav class="nav">',
|
'<div id="root" class="active" style="display: block">',
|
||||||
' <a class="nav-link" id="a-1" href="#div-1">div 1</a>',
|
' <div class="topbar">',
|
||||||
' <a class="nav-link" id="a-2" href="#div-2">div 2</a>',
|
' <div class="topbar-inner">',
|
||||||
' </nav>',
|
' <div class="container" id="ss-target">',
|
||||||
'</nav>',
|
' <ul class="nav">',
|
||||||
'<div class="content" style="overflow: auto; height: 50px">',
|
' <li class="nav-item"><a href="#masthead">Overview</a></li>',
|
||||||
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
' <li class="nav-item"><a href="#detail">Detail</a></li>',
|
||||||
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
' </ul>',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
' </div>',
|
||||||
|
' </div>',
|
||||||
|
' <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
|
||||||
|
' <div style="height: 200px;">',
|
||||||
|
' <h4 id="masthead">Overview</h4>',
|
||||||
|
' <p style="height: 200px;"></p>',
|
||||||
|
' </div>',
|
||||||
|
' <div style="height: 200px;">',
|
||||||
|
' <h4 id="detail">Detail</h4>',
|
||||||
|
' <p style="height: 200px;"></p>',
|
||||||
|
' </div>',
|
||||||
|
' </div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('.content')
|
const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
const rootEl = fixtureEl.querySelector('#root')
|
||||||
offset: 0,
|
const scrollSpy = new ScrollSpy(scrollSpyEl, {
|
||||||
target: '.navbar'
|
target: fixtureEl.querySelector('#ss-target')
|
||||||
})
|
})
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
testElementIsActiveAfterScroll({
|
spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
elementSelector: '#a-1',
|
|
||||||
targetSelector: '#div-1',
|
scrollSpyEl.addEventListener('scroll', () => {
|
||||||
contentEl,
|
expect(rootEl).toHaveClass('active')
|
||||||
scrollSpy,
|
expect(scrollSpy._process).toHaveBeenCalled()
|
||||||
spy,
|
resolve()
|
||||||
cb: () => {
|
})
|
||||||
testElementIsActiveAfterScroll({
|
|
||||||
elementSelector: '#a-2',
|
scrollSpyEl.scrollTop = 350
|
||||||
targetSelector: '#div-2',
|
|
||||||
contentEl,
|
|
||||||
scrollSpy,
|
|
||||||
spy,
|
|
||||||
cb: () => done()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add the active class to the correct element (list-group markup)', done => {
|
it('should correctly select middle navigation option when large offset is used', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<nav class="navbar">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="list-group">',
|
'<div id="header" style="height: 500px;"></div>',
|
||||||
' <a class="list-group-item" id="a-1" href="#div-1">div 1</a>',
|
'<nav id="navigation" class="navbar">',
|
||||||
' <a class="list-group-item" id="a-2" href="#div-2">div 2</a>',
|
' <ul class="navbar-nav">',
|
||||||
' </div>',
|
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
||||||
'</nav>',
|
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||||
'<div class="content" style="overflow: auto; height: 50px">',
|
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||||
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
' </ul>',
|
||||||
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
'</nav>',
|
||||||
'</div>'
|
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||||
].join('')
|
' <div id="one" style="height: 500px;"></div>',
|
||||||
|
' <div id="two" style="height: 300px;"></div>',
|
||||||
|
' <div id="three" style="height: 10px;"></div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('.content')
|
const contentEl = fixtureEl.querySelector('#content')
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
offset: 0,
|
target: '#navigation',
|
||||||
target: '.navbar'
|
offset: Manipulator.position(contentEl).top
|
||||||
})
|
})
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
testElementIsActiveAfterScroll({
|
spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
elementSelector: '#a-1',
|
|
||||||
targetSelector: '#div-1',
|
contentEl.addEventListener('scroll', () => {
|
||||||
contentEl,
|
expect(fixtureEl.querySelector('#one-link')).not.toHaveClass('active')
|
||||||
scrollSpy,
|
expect(fixtureEl.querySelector('#two-link')).toHaveClass('active')
|
||||||
spy,
|
expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active')
|
||||||
cb: () => {
|
expect(scrollSpy._process).toHaveBeenCalled()
|
||||||
testElementIsActiveAfterScroll({
|
resolve()
|
||||||
elementSelector: '#a-2',
|
})
|
||||||
targetSelector: '#div-2',
|
|
||||||
contentEl,
|
contentEl.scrollTop = 550
|
||||||
scrollSpy,
|
|
||||||
spy,
|
|
||||||
cb: () => done()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should clear selection if above the first section', done => {
|
it('should add the active class to the correct element', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div id="header" style="height: 500px;"></div>',
|
fixtureEl.innerHTML = [
|
||||||
'<nav id="navigation" class="navbar">',
|
'<nav class="navbar">',
|
||||||
' <ul class="navbar-nav">',
|
' <ul class="nav">',
|
||||||
' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
|
' <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
|
||||||
' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
|
' <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
|
||||||
' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
|
' </ul>',
|
||||||
' </ul>',
|
'</nav>',
|
||||||
'</nav>',
|
'<div class="content" style="overflow: auto; height: 50px">',
|
||||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
||||||
' <div id="spacer" style="height: 100px;"></div>',
|
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
||||||
' <div id="one" style="height: 100px;"></div>',
|
'</div>'
|
||||||
' <div id="two" style="height: 100px;"></div>',
|
].join('')
|
||||||
' <div id="three" style="height: 100px;"></div>',
|
|
||||||
' <div id="spacer" style="height: 100px;"></div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('#content')
|
const contentEl = fixtureEl.querySelector('.content')
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
target: '#navigation',
|
offset: 0,
|
||||||
offset: Manipulator.position(contentEl).top
|
target: '.navbar'
|
||||||
|
})
|
||||||
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-1',
|
||||||
|
targetSelector: '#div-1',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: () => {
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-2',
|
||||||
|
targetSelector: '#div-2',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: resolve
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
let firstTime = true
|
|
||||||
|
|
||||||
contentEl.addEventListener('scroll', () => {
|
|
||||||
const active = fixtureEl.querySelector('.active')
|
|
||||||
|
|
||||||
expect(spy).toHaveBeenCalled()
|
|
||||||
spy.calls.reset()
|
|
||||||
if (firstTime) {
|
|
||||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
|
||||||
expect(active.getAttribute('id')).toEqual('two-link')
|
|
||||||
firstTime = false
|
|
||||||
contentEl.scrollTop = 0
|
|
||||||
} else {
|
|
||||||
expect(active).toBeNull()
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
contentEl.scrollTop = 201
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not clear selection if above the first section and first section is at the top', done => {
|
it('should add the active class to the correct element (nav markup)', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div id="header" style="height: 500px;"></div>',
|
fixtureEl.innerHTML = [
|
||||||
'<nav id="navigation" class="navbar">',
|
'<nav class="navbar">',
|
||||||
' <ul class="navbar-nav">',
|
' <nav class="nav">',
|
||||||
' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
|
' <a class="nav-link" id="a-1" href="#div-1">div 1</a>',
|
||||||
' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
|
' <a class="nav-link" id="a-2" href="#div-2">div 2</a>',
|
||||||
' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
|
' </nav>',
|
||||||
' </ul>',
|
'</nav>',
|
||||||
'</nav>',
|
'<div class="content" style="overflow: auto; height: 50px">',
|
||||||
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
||||||
' <div id="one" style="height: 100px;"></div>',
|
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
||||||
' <div id="two" style="height: 100px;"></div>',
|
'</div>'
|
||||||
' <div id="three" style="height: 100px;"></div>',
|
].join('')
|
||||||
' <div id="spacer" style="height: 100px;"></div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const negativeHeight = -10
|
const contentEl = fixtureEl.querySelector('.content')
|
||||||
const startOfSectionTwo = 101
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
const contentEl = fixtureEl.querySelector('#content')
|
offset: 0,
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
target: '.navbar'
|
||||||
target: '#navigation',
|
})
|
||||||
offset: contentEl.offsetTop
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-1',
|
||||||
|
targetSelector: '#div-1',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: () => {
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-2',
|
||||||
|
targetSelector: '#div-2',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: resolve
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
|
||||||
|
|
||||||
let firstTime = true
|
|
||||||
|
|
||||||
contentEl.addEventListener('scroll', () => {
|
|
||||||
const active = fixtureEl.querySelector('.active')
|
|
||||||
|
|
||||||
expect(spy).toHaveBeenCalled()
|
|
||||||
spy.calls.reset()
|
|
||||||
if (firstTime) {
|
|
||||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
|
||||||
expect(active.getAttribute('id')).toEqual('two-link')
|
|
||||||
firstTime = false
|
|
||||||
contentEl.scrollTop = negativeHeight
|
|
||||||
} else {
|
|
||||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
|
||||||
expect(active.getAttribute('id')).toEqual('one-link')
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
contentEl.scrollTop = startOfSectionTwo
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should correctly select navigation element on backward scrolling when each target section height is 100%', done => {
|
it('should add the active class to the correct element (list-group markup)', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<nav class="navbar">',
|
fixtureEl.innerHTML = [
|
||||||
' <ul class="nav">',
|
'<nav class="navbar">',
|
||||||
' <li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>',
|
' <div class="list-group">',
|
||||||
' <li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>',
|
' <a class="list-group-item" id="a-1" href="#div-1">div 1</a>',
|
||||||
' <li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>',
|
' <a class="list-group-item" id="a-2" href="#div-2">div 2</a>',
|
||||||
' <li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>',
|
' </div>',
|
||||||
' <li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>',
|
'</nav>',
|
||||||
' </ul>',
|
'<div class="content" style="overflow: auto; height: 50px">',
|
||||||
'</nav>',
|
' <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
|
||||||
'<div class="content" style="position: relative; overflow: auto; height: 100px">',
|
' <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
|
||||||
' <div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>',
|
'</div>'
|
||||||
' <div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>',
|
].join('')
|
||||||
' <div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>',
|
|
||||||
' <div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>',
|
|
||||||
' <div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const contentEl = fixtureEl.querySelector('.content')
|
const contentEl = fixtureEl.querySelector('.content')
|
||||||
const scrollSpy = new ScrollSpy(contentEl, {
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
offset: 0,
|
offset: 0,
|
||||||
target: '.navbar'
|
target: '.navbar'
|
||||||
|
})
|
||||||
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-1',
|
||||||
|
targetSelector: '#div-1',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: () => {
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#a-2',
|
||||||
|
targetSelector: '#div-2',
|
||||||
|
contentEl,
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
cb: resolve
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
})
|
||||||
|
|
||||||
testElementIsActiveAfterScroll({
|
it('should clear selection if above the first section', () => {
|
||||||
elementSelector: '#li-100-5',
|
return new Promise(resolve => {
|
||||||
targetSelector: '#div-100-5',
|
fixtureEl.innerHTML = [
|
||||||
scrollSpy,
|
'<div id="header" style="height: 500px;"></div>',
|
||||||
spy,
|
'<nav id="navigation" class="navbar">',
|
||||||
contentEl,
|
' <ul class="navbar-nav">',
|
||||||
cb() {
|
' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
|
||||||
contentEl.scrollTop = 0
|
' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
|
||||||
testElementIsActiveAfterScroll({
|
' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
|
||||||
elementSelector: '#li-100-4',
|
' </ul>',
|
||||||
targetSelector: '#div-100-4',
|
'</nav>',
|
||||||
scrollSpy,
|
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||||
spy,
|
' <div id="spacer" style="height: 100px;"></div>',
|
||||||
contentEl,
|
' <div id="one" style="height: 100px;"></div>',
|
||||||
cb() {
|
' <div id="two" style="height: 100px;"></div>',
|
||||||
contentEl.scrollTop = 0
|
' <div id="three" style="height: 100px;"></div>',
|
||||||
testElementIsActiveAfterScroll({
|
' <div id="spacer" style="height: 100px;"></div>',
|
||||||
elementSelector: '#li-100-3',
|
'</div>'
|
||||||
targetSelector: '#div-100-3',
|
].join('')
|
||||||
scrollSpy,
|
|
||||||
spy,
|
const contentEl = fixtureEl.querySelector('#content')
|
||||||
contentEl,
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
cb() {
|
target: '#navigation',
|
||||||
contentEl.scrollTop = 0
|
offset: Manipulator.position(contentEl).top
|
||||||
testElementIsActiveAfterScroll({
|
})
|
||||||
elementSelector: '#li-100-2',
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
targetSelector: '#div-100-2',
|
|
||||||
scrollSpy,
|
let firstTime = true
|
||||||
spy,
|
|
||||||
contentEl,
|
contentEl.addEventListener('scroll', () => {
|
||||||
cb() {
|
const active = fixtureEl.querySelector('.active')
|
||||||
contentEl.scrollTop = 0
|
|
||||||
testElementIsActiveAfterScroll({
|
expect(spy).toHaveBeenCalled()
|
||||||
elementSelector: '#li-100-1',
|
spy.calls.reset()
|
||||||
targetSelector: '#div-100-1',
|
if (firstTime) {
|
||||||
scrollSpy,
|
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||||
spy,
|
expect(active.getAttribute('id')).toEqual('two-link')
|
||||||
contentEl,
|
firstTime = false
|
||||||
cb: done
|
contentEl.scrollTop = 0
|
||||||
})
|
} else {
|
||||||
}
|
expect(active).toBeNull()
|
||||||
})
|
resolve()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
|
||||||
})
|
contentEl.scrollTop = 201
|
||||||
}
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should not clear selection if above the first section and first section is at the top', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<div id="header" style="height: 500px;"></div>',
|
||||||
|
'<nav id="navigation" class="navbar">',
|
||||||
|
' <ul class="navbar-nav">',
|
||||||
|
' <li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>',
|
||||||
|
' <li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>',
|
||||||
|
' <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
|
||||||
|
' </ul>',
|
||||||
|
'</nav>',
|
||||||
|
'<div id="content" style="height: 200px; overflow-y: auto;">',
|
||||||
|
' <div id="one" style="height: 100px;"></div>',
|
||||||
|
' <div id="two" style="height: 100px;"></div>',
|
||||||
|
' <div id="three" style="height: 100px;"></div>',
|
||||||
|
' <div id="spacer" style="height: 100px;"></div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
const negativeHeight = -10
|
||||||
|
const startOfSectionTwo = 101
|
||||||
|
const contentEl = fixtureEl.querySelector('#content')
|
||||||
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
|
target: '#navigation',
|
||||||
|
offset: contentEl.offsetTop
|
||||||
|
})
|
||||||
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
|
let firstTime = true
|
||||||
|
|
||||||
|
contentEl.addEventListener('scroll', () => {
|
||||||
|
const active = fixtureEl.querySelector('.active')
|
||||||
|
|
||||||
|
expect(spy).toHaveBeenCalled()
|
||||||
|
spy.calls.reset()
|
||||||
|
if (firstTime) {
|
||||||
|
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||||
|
expect(active.getAttribute('id')).toEqual('two-link')
|
||||||
|
firstTime = false
|
||||||
|
contentEl.scrollTop = negativeHeight
|
||||||
|
} else {
|
||||||
|
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||||
|
expect(active.getAttribute('id')).toEqual('one-link')
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
contentEl.scrollTop = startOfSectionTwo
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should correctly select navigation element on backward scrolling when each target section height is 100%', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<nav class="navbar">',
|
||||||
|
' <ul class="nav">',
|
||||||
|
' <li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>',
|
||||||
|
' <li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>',
|
||||||
|
' <li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>',
|
||||||
|
' <li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>',
|
||||||
|
' <li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>',
|
||||||
|
' </ul>',
|
||||||
|
'</nav>',
|
||||||
|
'<div class="content" style="position: relative; overflow: auto; height: 100px">',
|
||||||
|
' <div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>',
|
||||||
|
' <div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>',
|
||||||
|
' <div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>',
|
||||||
|
' <div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>',
|
||||||
|
' <div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
const contentEl = fixtureEl.querySelector('.content')
|
||||||
|
const scrollSpy = new ScrollSpy(contentEl, {
|
||||||
|
offset: 0,
|
||||||
|
target: '.navbar'
|
||||||
|
})
|
||||||
|
const spy = spyOn(scrollSpy, '_process').and.callThrough()
|
||||||
|
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#li-100-5',
|
||||||
|
targetSelector: '#div-100-5',
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
contentEl,
|
||||||
|
cb() {
|
||||||
|
contentEl.scrollTop = 0
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#li-100-4',
|
||||||
|
targetSelector: '#div-100-4',
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
contentEl,
|
||||||
|
cb() {
|
||||||
|
contentEl.scrollTop = 0
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#li-100-3',
|
||||||
|
targetSelector: '#div-100-3',
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
contentEl,
|
||||||
|
cb() {
|
||||||
|
contentEl.scrollTop = 0
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#li-100-2',
|
||||||
|
targetSelector: '#div-100-2',
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
contentEl,
|
||||||
|
cb() {
|
||||||
|
contentEl.scrollTop = 0
|
||||||
|
testElementIsActiveAfterScroll({
|
||||||
|
elementSelector: '#li-100-1',
|
||||||
|
targetSelector: '#div-100-1',
|
||||||
|
scrollSpy,
|
||||||
|
spy,
|
||||||
|
contentEl,
|
||||||
|
cb: resolve
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,5 @@
|
||||||
import Toast from '../../src/toast'
|
import Toast from '../../src/toast'
|
||||||
import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
|
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
|
||||||
|
|
||||||
describe('Toast', () => {
|
describe('Toast', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -36,52 +36,56 @@ describe('Toast', () => {
|
||||||
expect(toastByElement._element).toEqual(toastEl)
|
expect(toastByElement._element).toEqual(toastEl)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should allow to config in js', done => {
|
it('should allow to config in js', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('div')
|
const toastEl = fixtureEl.querySelector('div')
|
||||||
const toast = new Toast(toastEl, {
|
const toast = new Toast(toastEl, {
|
||||||
delay: 1
|
delay: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
|
expect(toastEl).toHaveClass('show')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
toast.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
|
||||||
expect(toastEl).toHaveClass('show')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should close toast when close element with data-bs-dismiss attribute is set', done => {
|
it('should close toast when close element with data-bs-dismiss attribute is set', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
|
fixtureEl.innerHTML = [
|
||||||
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
|
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
|
||||||
'</div>'
|
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('div')
|
const toastEl = fixtureEl.querySelector('div')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
expect(toastEl).toHaveClass('show')
|
expect(toastEl).toHaveClass('show')
|
||||||
|
|
||||||
const button = toastEl.querySelector('.btn-close')
|
const button = toastEl.querySelector('.btn-close')
|
||||||
|
|
||||||
button.click()
|
button.click()
|
||||||
|
})
|
||||||
|
|
||||||
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
||||||
|
expect(toastEl).not.toHaveClass('show')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
toast.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
||||||
expect(toastEl).not.toHaveClass('show')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -111,304 +115,324 @@ describe('Toast', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('show', () => {
|
describe('show', () => {
|
||||||
it('should auto hide', done => {
|
it('should auto hide', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast" data-bs-delay="1">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast" data-bs-delay="1">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
toastEl.addEventListener('hidden.bs.toast', () => {
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
||||||
expect(toastEl).not.toHaveClass('show')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should not add fade class', done => {
|
|
||||||
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)
|
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
|
||||||
expect(toastEl).not.toHaveClass('fade')
|
|
||||||
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">',
|
|
||||||
' <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')
|
expect(toastEl).not.toHaveClass('show')
|
||||||
done()
|
resolve()
|
||||||
}, 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.show()
|
||||||
}, toast._config.delay / 2)
|
})
|
||||||
|
|
||||||
spyOn(toast, '_clearTimeout').and.callThrough()
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should clear timeout if toast is interacted with mouse', done => {
|
it('should not add fade class', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
|
||||||
|
|
||||||
setTimeout(() => {
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
spy.calls.reset()
|
expect(toastEl).not.toHaveClass('fade')
|
||||||
|
resolve()
|
||||||
toastEl.addEventListener('mouseover', () => {
|
|
||||||
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
|
||||||
expect(toast._timeout).toBeNull()
|
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const mouseOverEvent = createEvent('mouseover')
|
toast.show()
|
||||||
toastEl.dispatchEvent(mouseOverEvent)
|
})
|
||||||
}, toast._config.delay / 2)
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should clear timeout if toast is interacted with keyboard', done => {
|
it('should not trigger shown if show is prevented', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="outside-focusable">outside focusable</button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div class="toast">',
|
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
|
||||||
' <div class="toast-body">',
|
' <div class="toast-body">',
|
||||||
' a simple toast',
|
' a simple toast',
|
||||||
' <button>with a button</button>',
|
' </div>',
|
||||||
' </div>',
|
'</div>'
|
||||||
'</div>'
|
].join('')
|
||||||
].join('')
|
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
|
||||||
|
|
||||||
setTimeout(() => {
|
const assertDone = () => {
|
||||||
spy.calls.reset()
|
setTimeout(() => {
|
||||||
|
expect(toastEl).not.toHaveClass('show')
|
||||||
|
resolve()
|
||||||
|
}, 20)
|
||||||
|
}
|
||||||
|
|
||||||
toastEl.addEventListener('focusin', () => {
|
toastEl.addEventListener('show.bs.toast', event => {
|
||||||
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
event.preventDefault()
|
||||||
expect(toast._timeout).toBeNull()
|
assertDone()
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const insideFocusable = toastEl.querySelector('button')
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
insideFocusable.focus()
|
throw new Error('shown event should not be triggered if show is prevented')
|
||||||
}, toast._config.delay / 2)
|
})
|
||||||
|
|
||||||
toast.show()
|
toast.show()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should still auto hide after being interacted with mouse and keyboard', done => {
|
it('should clear timeout if toast is shown again before it is hidden', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="outside-focusable">outside focusable</button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div class="toast">',
|
'<div class="toast">',
|
||||||
' <div class="toast-body">',
|
' <div class="toast-body">',
|
||||||
' a simple toast',
|
' a simple toast',
|
||||||
' <button>with a button</button>',
|
' </div>',
|
||||||
' </div>',
|
'</div>'
|
||||||
'</div>'
|
].join('')
|
||||||
].join('')
|
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
toast._config.autohide = false
|
||||||
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
|
expect(toast._clearTimeout).toHaveBeenCalled()
|
||||||
|
expect(toast._timeout).toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
toast.show()
|
||||||
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
|
spyOn(toast, '_clearTimeout').and.callThrough()
|
||||||
|
|
||||||
|
toast.show()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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('')
|
||||||
|
|
||||||
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
|
const toast = new Toast(toastEl)
|
||||||
|
const spy = spyOn(toast, '_clearTimeout').and.callThrough()
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
spy.calls.reset()
|
||||||
|
|
||||||
|
toastEl.addEventListener('mouseover', () => {
|
||||||
|
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
||||||
|
expect(toast._timeout).toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
const mouseOverEvent = createEvent('mouseover')
|
||||||
|
toastEl.dispatchEvent(mouseOverEvent)
|
||||||
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
|
toast.show()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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()
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
spy.calls.reset()
|
||||||
|
|
||||||
|
toastEl.addEventListener('focusin', () => {
|
||||||
|
expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
|
||||||
|
expect(toast._timeout).toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
toastEl.addEventListener('mouseover', () => {
|
|
||||||
const insideFocusable = toastEl.querySelector('button')
|
const insideFocusable = toastEl.querySelector('button')
|
||||||
insideFocusable.focus()
|
insideFocusable.focus()
|
||||||
})
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
toastEl.addEventListener('focusin', () => {
|
toast.show()
|
||||||
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()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
const mouseOverEvent = createEvent('mouseover')
|
|
||||||
toastEl.dispatchEvent(mouseOverEvent)
|
|
||||||
}, toast._config.delay / 2)
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not auto hide if focus leaves but mouse pointer remains inside', done => {
|
it('should still auto hide after being interacted with mouse and keyboard', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="outside-focusable">outside focusable</button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div class="toast">',
|
'<button id="outside-focusable">outside focusable</button>',
|
||||||
' <div class="toast-body">',
|
'<div class="toast">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' <button>with a button</button>',
|
' a simple toast',
|
||||||
' </div>',
|
' <button>with a button</button>',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
toastEl.addEventListener('mouseover', () => {
|
toastEl.addEventListener('mouseover', () => {
|
||||||
const insideFocusable = toastEl.querySelector('button')
|
const insideFocusable = toastEl.querySelector('button')
|
||||||
insideFocusable.focus()
|
insideFocusable.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('focusin', () => {
|
toastEl.addEventListener('focusin', () => {
|
||||||
const outsideFocusable = document.getElementById('outside-focusable')
|
const mouseOutEvent = createEvent('mouseout')
|
||||||
outsideFocusable.focus()
|
toastEl.dispatchEvent(mouseOutEvent)
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('focusout', () => {
|
toastEl.addEventListener('mouseout', () => {
|
||||||
expect(toast._timeout).toBeNull()
|
const outsideFocusable = document.getElementById('outside-focusable')
|
||||||
done()
|
outsideFocusable.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
const mouseOverEvent = createEvent('mouseover')
|
toastEl.addEventListener('focusout', () => {
|
||||||
toastEl.dispatchEvent(mouseOverEvent)
|
expect(toast._timeout).not.toBeNull()
|
||||||
}, toast._config.delay / 2)
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
toast.show()
|
const mouseOverEvent = createEvent('mouseover')
|
||||||
|
toastEl.dispatchEvent(mouseOverEvent)
|
||||||
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
|
toast.show()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not auto hide if mouse pointer leaves but focus remains inside', done => {
|
it('should not auto hide if focus leaves but mouse pointer remains inside', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<button id="outside-focusable">outside focusable</button>',
|
fixtureEl.innerHTML = [
|
||||||
'<div class="toast">',
|
'<button id="outside-focusable">outside focusable</button>',
|
||||||
' <div class="toast-body">',
|
'<div class="toast">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' <button>with a button</button>',
|
' a simple toast',
|
||||||
' </div>',
|
' <button>with a button</button>',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
toastEl.addEventListener('mouseover', () => {
|
toastEl.addEventListener('mouseover', () => {
|
||||||
const insideFocusable = toastEl.querySelector('button')
|
const insideFocusable = toastEl.querySelector('button')
|
||||||
insideFocusable.focus()
|
insideFocusable.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('focusin', () => {
|
toastEl.addEventListener('focusin', () => {
|
||||||
const mouseOutEvent = createEvent('mouseout')
|
const outsideFocusable = document.getElementById('outside-focusable')
|
||||||
toastEl.dispatchEvent(mouseOutEvent)
|
outsideFocusable.focus()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('mouseout', () => {
|
toastEl.addEventListener('focusout', () => {
|
||||||
expect(toast._timeout).toBeNull()
|
expect(toast._timeout).toBeNull()
|
||||||
done()
|
resolve()
|
||||||
})
|
})
|
||||||
|
|
||||||
const mouseOverEvent = createEvent('mouseover')
|
const mouseOverEvent = createEvent('mouseover')
|
||||||
toastEl.dispatchEvent(mouseOverEvent)
|
toastEl.dispatchEvent(mouseOverEvent)
|
||||||
}, toast._config.delay / 2)
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
toast.show()
|
toast.show()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
toastEl.addEventListener('mouseover', () => {
|
||||||
|
const insideFocusable = toastEl.querySelector('button')
|
||||||
|
insideFocusable.focus()
|
||||||
|
})
|
||||||
|
|
||||||
|
toastEl.addEventListener('focusin', () => {
|
||||||
|
const mouseOutEvent = createEvent('mouseout')
|
||||||
|
toastEl.dispatchEvent(mouseOutEvent)
|
||||||
|
})
|
||||||
|
|
||||||
|
toastEl.addEventListener('mouseout', () => {
|
||||||
|
expect(toast._timeout).toBeNull()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
const mouseOverEvent = createEvent('mouseover')
|
||||||
|
toastEl.dispatchEvent(mouseOverEvent)
|
||||||
|
}, toast._config.delay / 2)
|
||||||
|
|
||||||
|
toast.show()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('hide', () => {
|
describe('hide', () => {
|
||||||
it('should allow to hide toast manually', done => {
|
it('should allow to hide toast manually', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
toast.hide()
|
toast.hide()
|
||||||
|
})
|
||||||
|
|
||||||
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
||||||
|
expect(toastEl).not.toHaveClass('show')
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
toast.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
||||||
expect(toastEl).not.toHaveClass('show')
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should do nothing when we call hide on a non shown toast', () => {
|
it('should do nothing when we call hide on a non shown toast', () => {
|
||||||
|
|
@ -424,39 +448,41 @@ describe('Toast', () => {
|
||||||
expect(toastEl.classList.contains).toHaveBeenCalled()
|
expect(toastEl.classList.contains).toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not trigger hidden if hide is prevented', done => {
|
it('should not trigger hidden if hide is prevented', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast" data-bs-delay="1" data-bs-animation="false">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('.toast')
|
const toastEl = fixtureEl.querySelector('.toast')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
|
|
||||||
const assertDone = () => {
|
const assertDone = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(toastEl).toHaveClass('show')
|
expect(toastEl).toHaveClass('show')
|
||||||
done()
|
resolve()
|
||||||
}, 20)
|
}, 20)
|
||||||
}
|
}
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
toast.hide()
|
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()
|
||||||
})
|
})
|
||||||
|
|
||||||
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()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -475,34 +501,36 @@ describe('Toast', () => {
|
||||||
expect(Toast.getInstance(toastEl)).toBeNull()
|
expect(Toast.getInstance(toastEl)).toBeNull()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should allow to destroy toast and hide it before that', done => {
|
it('should allow to destroy toast and hide it before that', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
|
fixtureEl.innerHTML = [
|
||||||
' <div class="toast-body">',
|
'<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
|
||||||
' a simple toast',
|
' <div class="toast-body">',
|
||||||
' </div>',
|
' a simple toast',
|
||||||
'</div>'
|
' </div>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const toastEl = fixtureEl.querySelector('div')
|
const toastEl = fixtureEl.querySelector('div')
|
||||||
const toast = new Toast(toastEl)
|
const toast = new Toast(toastEl)
|
||||||
const expected = () => {
|
const expected = () => {
|
||||||
expect(toastEl).toHaveClass('show')
|
expect(toastEl).toHaveClass('show')
|
||||||
expect(Toast.getInstance(toastEl)).not.toBeNull()
|
expect(Toast.getInstance(toastEl)).not.toBeNull()
|
||||||
|
|
||||||
toast.dispose()
|
toast.dispose()
|
||||||
|
|
||||||
expect(Toast.getInstance(toastEl)).toBeNull()
|
expect(Toast.getInstance(toastEl)).toBeNull()
|
||||||
expect(toastEl).not.toHaveClass('show')
|
expect(toastEl).not.toHaveClass('show')
|
||||||
|
|
||||||
done()
|
resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
toastEl.addEventListener('shown.bs.toast', () => {
|
toastEl.addEventListener('shown.bs.toast', () => {
|
||||||
setTimeout(expected, 1)
|
setTimeout(expected, 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
toast.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
toast.show()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -23,267 +23,297 @@ describe('Backdrop', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('show', () => {
|
describe('show', () => {
|
||||||
it('should append the backdrop html once on show and include the "show" class if it is "shown"', done => {
|
it('should append the backdrop html once on show and include the "show" class if it is "shown"', () => {
|
||||||
const instance = new Backdrop({
|
return new Promise(resolve => {
|
||||||
isVisible: true,
|
const instance = new Backdrop({
|
||||||
isAnimated: false
|
isVisible: true,
|
||||||
})
|
isAnimated: false
|
||||||
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
})
|
||||||
|
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
|
||||||
expect(getElements()).toHaveSize(0)
|
|
||||||
|
|
||||||
instance.show()
|
|
||||||
instance.show(() => {
|
|
||||||
expect(getElements()).toHaveSize(1)
|
|
||||||
for (const el of getElements()) {
|
|
||||||
expect(el).toHaveClass(CLASS_NAME_SHOW)
|
|
||||||
}
|
|
||||||
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should not append the backdrop html if it is not "shown"', done => {
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: false,
|
|
||||||
isAnimated: true
|
|
||||||
})
|
|
||||||
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
|
||||||
|
|
||||||
expect(getElements()).toHaveSize(0)
|
|
||||||
instance.show(() => {
|
|
||||||
expect(getElements()).toHaveSize(0)
|
expect(getElements()).toHaveSize(0)
|
||||||
done()
|
|
||||||
|
instance.show()
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElements()).toHaveSize(1)
|
||||||
|
for (const el of getElements()) {
|
||||||
|
expect(el).toHaveClass(CLASS_NAME_SHOW)
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', done => {
|
it('should not append the backdrop html if it is not "shown"', () => {
|
||||||
const instance = new Backdrop({
|
return new Promise(resolve => {
|
||||||
isVisible: true,
|
const instance = new Backdrop({
|
||||||
isAnimated: true
|
isVisible: false,
|
||||||
|
isAnimated: true
|
||||||
|
})
|
||||||
|
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
|
||||||
|
expect(getElements()).toHaveSize(0)
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElements()).toHaveSize(0)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
})
|
||||||
|
|
||||||
expect(getElements()).toHaveSize(0)
|
it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true,
|
||||||
|
isAnimated: true
|
||||||
|
})
|
||||||
|
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
|
||||||
instance.show(() => {
|
expect(getElements()).toHaveSize(0)
|
||||||
expect(getElements()).toHaveSize(1)
|
|
||||||
for (const el of getElements()) {
|
|
||||||
expect(el).toHaveClass(CLASS_NAME_FADE)
|
|
||||||
}
|
|
||||||
|
|
||||||
done()
|
instance.show(() => {
|
||||||
|
expect(getElements()).toHaveSize(1)
|
||||||
|
for (const el of getElements()) {
|
||||||
|
expect(el).toHaveClass(CLASS_NAME_FADE)
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('hide', () => {
|
describe('hide', () => {
|
||||||
it('should remove the backdrop html', done => {
|
it('should remove the backdrop html', () => {
|
||||||
const instance = new Backdrop({
|
return new Promise(resolve => {
|
||||||
isVisible: true,
|
const instance = new Backdrop({
|
||||||
isAnimated: true
|
isVisible: true,
|
||||||
})
|
isAnimated: true
|
||||||
|
})
|
||||||
|
|
||||||
const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
|
const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
|
||||||
expect(getElements()).toHaveSize(0)
|
expect(getElements()).toHaveSize(0)
|
||||||
instance.show(() => {
|
instance.show(() => {
|
||||||
expect(getElements()).toHaveSize(1)
|
expect(getElements()).toHaveSize(1)
|
||||||
instance.hide(() => {
|
instance.hide(() => {
|
||||||
expect(getElements()).toHaveSize(0)
|
expect(getElements()).toHaveSize(0)
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove the "show" class', done => {
|
it('should remove the "show" class', () => {
|
||||||
const instance = new Backdrop({
|
return new Promise(resolve => {
|
||||||
isVisible: true,
|
const instance = new Backdrop({
|
||||||
isAnimated: true
|
isVisible: true,
|
||||||
})
|
isAnimated: true
|
||||||
const elem = instance._getElement()
|
})
|
||||||
|
const elem = instance._getElement()
|
||||||
|
|
||||||
instance.show()
|
instance.show()
|
||||||
instance.hide(() => {
|
|
||||||
expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should not try to remove Node on remove method if it is not "shown"', done => {
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: false,
|
|
||||||
isAnimated: true
|
|
||||||
})
|
|
||||||
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
|
||||||
const spy = spyOn(instance, 'dispose').and.callThrough()
|
|
||||||
|
|
||||||
expect(getElements()).toHaveSize(0)
|
|
||||||
expect(instance._isAppended).toBeFalse()
|
|
||||||
instance.show(() => {
|
|
||||||
instance.hide(() => {
|
instance.hide(() => {
|
||||||
expect(getElements()).toHaveSize(0)
|
expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
|
||||||
expect(spy).not.toHaveBeenCalled()
|
resolve()
|
||||||
expect(instance._isAppended).toBeFalse()
|
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not error if the backdrop no longer has a parent', done => {
|
it('should not try to remove Node on remove method if it is not "shown"', () => {
|
||||||
fixtureEl.innerHTML = '<div id="wrapper"></div>'
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: false,
|
||||||
|
isAnimated: true
|
||||||
|
})
|
||||||
|
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
const spy = spyOn(instance, 'dispose').and.callThrough()
|
||||||
|
|
||||||
const wrapper = fixtureEl.querySelector('#wrapper')
|
expect(getElements()).toHaveSize(0)
|
||||||
const instance = new Backdrop({
|
expect(instance._isAppended).toBeFalse()
|
||||||
isVisible: true,
|
instance.show(() => {
|
||||||
isAnimated: true,
|
instance.hide(() => {
|
||||||
rootElement: wrapper
|
expect(getElements()).toHaveSize(0)
|
||||||
|
expect(spy).not.toHaveBeenCalled()
|
||||||
|
expect(instance._isAppended).toBeFalse()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
it('should not error if the backdrop no longer has a parent', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div id="wrapper"></div>'
|
||||||
|
|
||||||
instance.show(() => {
|
const wrapper = fixtureEl.querySelector('#wrapper')
|
||||||
wrapper.remove()
|
const instance = new Backdrop({
|
||||||
instance.hide(() => {
|
isVisible: true,
|
||||||
expect(getElements()).toHaveSize(0)
|
isAnimated: true,
|
||||||
done()
|
rootElement: wrapper
|
||||||
|
})
|
||||||
|
|
||||||
|
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
|
||||||
|
|
||||||
|
instance.show(() => {
|
||||||
|
wrapper.remove()
|
||||||
|
instance.hide(() => {
|
||||||
|
expect(getElements()).toHaveSize(0)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('click callback', () => {
|
describe('click callback', () => {
|
||||||
it('should execute callback on click', done => {
|
it('should execute callback on click', () => {
|
||||||
const spy = jasmine.createSpy('spy')
|
return new Promise(resolve => {
|
||||||
|
const spy = jasmine.createSpy('spy')
|
||||||
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: true,
|
|
||||||
isAnimated: false,
|
|
||||||
clickCallback: () => spy()
|
|
||||||
})
|
|
||||||
const endTest = () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(spy).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 10)
|
|
||||||
}
|
|
||||||
|
|
||||||
instance.show(() => {
|
|
||||||
const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
|
|
||||||
document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
|
|
||||||
endTest()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('animation callbacks', () => {
|
|
||||||
it('should show and hide backdrop after counting transition duration if it is animated', done => {
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: true,
|
|
||||||
isAnimated: true
|
|
||||||
})
|
|
||||||
const spy2 = jasmine.createSpy('spy2')
|
|
||||||
|
|
||||||
const execDone = () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(spy2).toHaveBeenCalledTimes(2)
|
|
||||||
done()
|
|
||||||
}, 10)
|
|
||||||
}
|
|
||||||
|
|
||||||
instance.show(spy2)
|
|
||||||
instance.hide(() => {
|
|
||||||
spy2()
|
|
||||||
execDone()
|
|
||||||
})
|
|
||||||
expect(spy2).not.toHaveBeenCalled()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should show and hide backdrop without a delay if it is not animated', done => {
|
|
||||||
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: true,
|
|
||||||
isAnimated: false
|
|
||||||
})
|
|
||||||
const spy2 = jasmine.createSpy('spy2')
|
|
||||||
|
|
||||||
instance.show(spy2)
|
|
||||||
instance.hide(spy2)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(spy2).toHaveBeenCalled()
|
|
||||||
expect(spy).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 10)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should not call delay callbacks if it is not "shown"', done => {
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: false,
|
|
||||||
isAnimated: true
|
|
||||||
})
|
|
||||||
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
|
||||||
|
|
||||||
instance.show()
|
|
||||||
instance.hide(() => {
|
|
||||||
expect(spy).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('Config', () => {
|
|
||||||
describe('rootElement initialization', () => {
|
|
||||||
it('should be appended on "document.body" by default', done => {
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: true
|
|
||||||
})
|
|
||||||
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
|
||||||
instance.show(() => {
|
|
||||||
expect(getElement().parentElement).toEqual(document.body)
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should find the rootElement if passed as a string', done => {
|
|
||||||
const instance = new Backdrop({
|
const instance = new Backdrop({
|
||||||
isVisible: true,
|
isVisible: true,
|
||||||
rootElement: 'body'
|
isAnimated: false,
|
||||||
|
clickCallback: () => spy()
|
||||||
})
|
})
|
||||||
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
const endTest = () => {
|
||||||
instance.show(() => {
|
setTimeout(() => {
|
||||||
expect(getElement().parentElement).toEqual(document.body)
|
expect(spy).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
})
|
}, 10)
|
||||||
})
|
}
|
||||||
|
|
||||||
it('should be appended on any element given by the proper config', done => {
|
|
||||||
fixtureEl.innerHTML = '<div id="wrapper"></div>'
|
|
||||||
|
|
||||||
const wrapper = fixtureEl.querySelector('#wrapper')
|
|
||||||
const instance = new Backdrop({
|
|
||||||
isVisible: true,
|
|
||||||
rootElement: wrapper
|
|
||||||
})
|
|
||||||
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
|
||||||
instance.show(() => {
|
instance.show(() => {
|
||||||
expect(getElement().parentElement).toEqual(wrapper)
|
const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
|
||||||
done()
|
document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
|
||||||
|
endTest()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('ClassName', () => {
|
describe('animation callbacks', () => {
|
||||||
it('should allow configuring className', done => {
|
it('should show and hide backdrop after counting transition duration if it is animated', () => {
|
||||||
const instance = new Backdrop({
|
return new Promise(resolve => {
|
||||||
isVisible: true,
|
const instance = new Backdrop({
|
||||||
className: 'foo'
|
isVisible: true,
|
||||||
|
isAnimated: true
|
||||||
|
})
|
||||||
|
const spy2 = jasmine.createSpy('spy2')
|
||||||
|
|
||||||
|
const execDone = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(spy2).toHaveBeenCalledTimes(2)
|
||||||
|
resolve()
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
|
||||||
|
instance.show(spy2)
|
||||||
|
instance.hide(() => {
|
||||||
|
spy2()
|
||||||
|
execDone()
|
||||||
|
})
|
||||||
|
expect(spy2).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
const getElement = () => document.querySelector('.foo')
|
})
|
||||||
instance.show(() => {
|
|
||||||
expect(getElement()).toEqual(instance._getElement())
|
it('should show and hide backdrop without a delay if it is not animated', () => {
|
||||||
instance.dispose()
|
return new Promise(resolve => {
|
||||||
done()
|
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true,
|
||||||
|
isAnimated: false
|
||||||
|
})
|
||||||
|
const spy2 = jasmine.createSpy('spy2')
|
||||||
|
|
||||||
|
instance.show(spy2)
|
||||||
|
instance.hide(spy2)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(spy2).toHaveBeenCalled()
|
||||||
|
expect(spy).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 10)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should not call delay callbacks if it is not "shown"', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: false,
|
||||||
|
isAnimated: true
|
||||||
|
})
|
||||||
|
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
|
||||||
|
|
||||||
|
instance.show()
|
||||||
|
instance.hide(() => {
|
||||||
|
expect(spy).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('Config', () => {
|
||||||
|
describe('rootElement initialization', () => {
|
||||||
|
it('should be appended on "document.body" by default', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true
|
||||||
|
})
|
||||||
|
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElement().parentElement).toEqual(document.body)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should find the rootElement if passed as a string', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true,
|
||||||
|
rootElement: 'body'
|
||||||
|
})
|
||||||
|
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElement().parentElement).toEqual(document.body)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should be appended on any element given by the proper config', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div id="wrapper"></div>'
|
||||||
|
|
||||||
|
const wrapper = fixtureEl.querySelector('#wrapper')
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true,
|
||||||
|
rootElement: wrapper
|
||||||
|
})
|
||||||
|
const getElement = () => document.querySelector(CLASS_BACKDROP)
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElement().parentElement).toEqual(wrapper)
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('ClassName', () => {
|
||||||
|
it('should allow configuring className', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const instance = new Backdrop({
|
||||||
|
isVisible: true,
|
||||||
|
className: 'foo'
|
||||||
|
})
|
||||||
|
const getElement = () => document.querySelector('.foo')
|
||||||
|
instance.show(() => {
|
||||||
|
expect(getElement()).toEqual(instance._getElement())
|
||||||
|
instance.dispose()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import FocusTrap from '../../../src/util/focustrap'
|
import FocusTrap from '../../../src/util/focustrap'
|
||||||
import EventHandler from '../../../src/dom/event-handler'
|
import EventHandler from '../../../src/dom/event-handler'
|
||||||
import SelectorEngine from '../../../src/dom/selector-engine'
|
import SelectorEngine from '../../../src/dom/selector-engine'
|
||||||
import { clearFixture, getFixture, createEvent } from '../../helpers/fixture'
|
import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
|
||||||
|
|
||||||
describe('FocusTrap', () => {
|
describe('FocusTrap', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -41,140 +41,148 @@ describe('FocusTrap', () => {
|
||||||
expect(trapElement.focus).not.toHaveBeenCalled()
|
expect(trapElement.focus).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should force focus inside focus trap if it can', done => {
|
it('should force focus inside focus trap if it can', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<a href="#" id="outside">outside</a>',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="focustrap" tabindex="-1">',
|
'<a href="#" id="outside">outside</a>',
|
||||||
' <a href="#" id="inside">inside</a>',
|
'<div id="focustrap" tabindex="-1">',
|
||||||
'</div>'
|
' <a href="#" id="inside">inside</a>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const trapElement = fixtureEl.querySelector('div')
|
const trapElement = fixtureEl.querySelector('div')
|
||||||
const focustrap = new FocusTrap({ trapElement })
|
const focustrap = new FocusTrap({ trapElement })
|
||||||
focustrap.activate()
|
focustrap.activate()
|
||||||
|
|
||||||
const inside = document.getElementById('inside')
|
const inside = document.getElementById('inside')
|
||||||
|
|
||||||
const focusInListener = () => {
|
const focusInListener = () => {
|
||||||
expect(inside.focus).toHaveBeenCalled()
|
expect(inside.focus).toHaveBeenCalled()
|
||||||
document.removeEventListener('focusin', focusInListener)
|
document.removeEventListener('focusin', focusInListener)
|
||||||
done()
|
resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
spyOn(inside, 'focus')
|
spyOn(inside, 'focus')
|
||||||
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
|
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
|
||||||
|
|
||||||
document.addEventListener('focusin', focusInListener)
|
document.addEventListener('focusin', focusInListener)
|
||||||
|
|
||||||
const focusInEvent = createEvent('focusin', { bubbles: true })
|
const focusInEvent = createEvent('focusin', { bubbles: true })
|
||||||
Object.defineProperty(focusInEvent, 'target', {
|
Object.defineProperty(focusInEvent, 'target', {
|
||||||
value: document.getElementById('outside')
|
value: document.getElementById('outside')
|
||||||
|
})
|
||||||
|
|
||||||
|
document.dispatchEvent(focusInEvent)
|
||||||
})
|
})
|
||||||
|
|
||||||
document.dispatchEvent(focusInEvent)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should wrap focus around forward on tab', done => {
|
it('should wrap focus around forward on tab', () => {
|
||||||
fixtureEl.innerHTML = [
|
return new Promise(resolve => {
|
||||||
'<a href="#" id="outside">outside</a>',
|
fixtureEl.innerHTML = [
|
||||||
'<div id="focustrap" tabindex="-1">',
|
'<a href="#" id="outside">outside</a>',
|
||||||
' <a href="#" id="first">first</a>',
|
'<div id="focustrap" tabindex="-1">',
|
||||||
' <a href="#" id="inside">inside</a>',
|
' <a href="#" id="first">first</a>',
|
||||||
' <a href="#" id="last">last</a>',
|
' <a href="#" id="inside">inside</a>',
|
||||||
'</div>'
|
' <a href="#" id="last">last</a>',
|
||||||
].join('')
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
const trapElement = fixtureEl.querySelector('div')
|
const trapElement = fixtureEl.querySelector('div')
|
||||||
const focustrap = new FocusTrap({ trapElement })
|
const focustrap = new FocusTrap({ trapElement })
|
||||||
focustrap.activate()
|
focustrap.activate()
|
||||||
|
|
||||||
const first = document.getElementById('first')
|
const first = document.getElementById('first')
|
||||||
const inside = document.getElementById('inside')
|
const inside = document.getElementById('inside')
|
||||||
const last = document.getElementById('last')
|
const last = document.getElementById('last')
|
||||||
const outside = document.getElementById('outside')
|
const outside = document.getElementById('outside')
|
||||||
|
|
||||||
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
|
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
|
||||||
spyOn(first, 'focus').and.callThrough()
|
spyOn(first, 'focus').and.callThrough()
|
||||||
|
|
||||||
const focusInListener = () => {
|
const focusInListener = () => {
|
||||||
expect(first.focus).toHaveBeenCalled()
|
expect(first.focus).toHaveBeenCalled()
|
||||||
first.removeEventListener('focusin', focusInListener)
|
first.removeEventListener('focusin', focusInListener)
|
||||||
done()
|
resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
first.addEventListener('focusin', focusInListener)
|
first.addEventListener('focusin', focusInListener)
|
||||||
|
|
||||||
const keydown = createEvent('keydown')
|
const keydown = createEvent('keydown')
|
||||||
keydown.key = 'Tab'
|
keydown.key = 'Tab'
|
||||||
|
|
||||||
document.dispatchEvent(keydown)
|
document.dispatchEvent(keydown)
|
||||||
outside.focus()
|
outside.focus()
|
||||||
})
|
|
||||||
|
|
||||||
it('should wrap focus around backwards on shift-tab', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<a href="#" id="outside">outside</a>',
|
|
||||||
'<div id="focustrap" tabindex="-1">',
|
|
||||||
' <a href="#" id="first">first</a>',
|
|
||||||
' <a href="#" id="inside">inside</a>',
|
|
||||||
' <a href="#" id="last">last</a>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const trapElement = fixtureEl.querySelector('div')
|
|
||||||
const focustrap = new FocusTrap({ trapElement })
|
|
||||||
focustrap.activate()
|
|
||||||
|
|
||||||
const first = document.getElementById('first')
|
|
||||||
const inside = document.getElementById('inside')
|
|
||||||
const last = document.getElementById('last')
|
|
||||||
const outside = document.getElementById('outside')
|
|
||||||
|
|
||||||
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
|
|
||||||
spyOn(last, 'focus').and.callThrough()
|
|
||||||
|
|
||||||
const focusInListener = () => {
|
|
||||||
expect(last.focus).toHaveBeenCalled()
|
|
||||||
last.removeEventListener('focusin', focusInListener)
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
|
|
||||||
last.addEventListener('focusin', focusInListener)
|
|
||||||
|
|
||||||
const keydown = createEvent('keydown')
|
|
||||||
keydown.key = 'Tab'
|
|
||||||
keydown.shiftKey = true
|
|
||||||
|
|
||||||
document.dispatchEvent(keydown)
|
|
||||||
outside.focus()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should force focus on itself if there is no focusable content', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<a href="#" id="outside">outside</a>',
|
|
||||||
'<div id="focustrap" tabindex="-1"></div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const trapElement = fixtureEl.querySelector('div')
|
|
||||||
const focustrap = new FocusTrap({ trapElement })
|
|
||||||
focustrap.activate()
|
|
||||||
|
|
||||||
const focusInListener = () => {
|
|
||||||
expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
|
|
||||||
document.removeEventListener('focusin', focusInListener)
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
|
|
||||||
spyOn(focustrap._config.trapElement, 'focus')
|
|
||||||
|
|
||||||
document.addEventListener('focusin', focusInListener)
|
|
||||||
|
|
||||||
const focusInEvent = createEvent('focusin', { bubbles: true })
|
|
||||||
Object.defineProperty(focusInEvent, 'target', {
|
|
||||||
value: document.getElementById('outside')
|
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
document.dispatchEvent(focusInEvent)
|
it('should wrap focus around backwards on shift-tab', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<a href="#" id="outside">outside</a>',
|
||||||
|
'<div id="focustrap" tabindex="-1">',
|
||||||
|
' <a href="#" id="first">first</a>',
|
||||||
|
' <a href="#" id="inside">inside</a>',
|
||||||
|
' <a href="#" id="last">last</a>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
const trapElement = fixtureEl.querySelector('div')
|
||||||
|
const focustrap = new FocusTrap({ trapElement })
|
||||||
|
focustrap.activate()
|
||||||
|
|
||||||
|
const first = document.getElementById('first')
|
||||||
|
const inside = document.getElementById('inside')
|
||||||
|
const last = document.getElementById('last')
|
||||||
|
const outside = document.getElementById('outside')
|
||||||
|
|
||||||
|
spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
|
||||||
|
spyOn(last, 'focus').and.callThrough()
|
||||||
|
|
||||||
|
const focusInListener = () => {
|
||||||
|
expect(last.focus).toHaveBeenCalled()
|
||||||
|
last.removeEventListener('focusin', focusInListener)
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
last.addEventListener('focusin', focusInListener)
|
||||||
|
|
||||||
|
const keydown = createEvent('keydown')
|
||||||
|
keydown.key = 'Tab'
|
||||||
|
keydown.shiftKey = true
|
||||||
|
|
||||||
|
document.dispatchEvent(keydown)
|
||||||
|
outside.focus()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should force focus on itself if there is no focusable content', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<a href="#" id="outside">outside</a>',
|
||||||
|
'<div id="focustrap" tabindex="-1"></div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
const trapElement = fixtureEl.querySelector('div')
|
||||||
|
const focustrap = new FocusTrap({ trapElement })
|
||||||
|
focustrap.activate()
|
||||||
|
|
||||||
|
const focusInListener = () => {
|
||||||
|
expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
|
||||||
|
document.removeEventListener('focusin', focusInListener)
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
spyOn(focustrap._config.trapElement, 'focus')
|
||||||
|
|
||||||
|
document.addEventListener('focusin', focusInListener)
|
||||||
|
|
||||||
|
const focusInEvent = createEvent('focusin', { bubbles: true })
|
||||||
|
Object.defineProperty(focusInEvent, 'target', {
|
||||||
|
value: document.getElementById('outside')
|
||||||
|
})
|
||||||
|
|
||||||
|
document.dispatchEvent(focusInEvent)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import * as Util from '../../../src/util/index'
|
import * as Util from '../../../src/util/index'
|
||||||
import { clearFixture, getFixture } from '../../helpers/fixture'
|
import { clearFixture, getFixture } from '../../helpers/fixture'
|
||||||
|
import { noop } from '../../../src/util/index'
|
||||||
|
|
||||||
describe('Util', () => {
|
describe('Util', () => {
|
||||||
let fixtureEl
|
let fixtureEl
|
||||||
|
|
@ -154,18 +155,20 @@ describe('Util', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('triggerTransitionEnd', () => {
|
describe('triggerTransitionEnd', () => {
|
||||||
it('should trigger transitionend event', done => {
|
it('should trigger transitionend event', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
const el = fixtureEl.querySelector('div')
|
const el = fixtureEl.querySelector('div')
|
||||||
const spy = spyOn(el, 'dispatchEvent').and.callThrough()
|
const spy = spyOn(el, 'dispatchEvent').and.callThrough()
|
||||||
|
|
||||||
el.addEventListener('transitionend', () => {
|
el.addEventListener('transitionend', () => {
|
||||||
expect(spy).toHaveBeenCalled()
|
expect(spy).toHaveBeenCalled()
|
||||||
done()
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
Util.triggerTransitionEnd(el)
|
||||||
})
|
})
|
||||||
|
|
||||||
Util.triggerTransitionEnd(el)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -611,9 +614,9 @@ describe('Util', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should define a plugin on the jQuery instance', () => {
|
it('should define a plugin on the jQuery instance', () => {
|
||||||
const pluginMock = function () {}
|
const pluginMock = Util.noop
|
||||||
pluginMock.NAME = 'test'
|
pluginMock.NAME = 'test'
|
||||||
pluginMock.jQueryInterface = function () {}
|
pluginMock.jQueryInterface = Util.noop
|
||||||
|
|
||||||
Util.defineJQueryPlugin(pluginMock)
|
Util.defineJQueryPlugin(pluginMock)
|
||||||
expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
|
expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
|
||||||
|
|
@ -658,96 +661,104 @@ describe('Util', () => {
|
||||||
expect(callbackSpy).toHaveBeenCalled()
|
expect(callbackSpy).toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', done => {
|
it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', () => {
|
||||||
const el = document.createElement('div')
|
return new Promise(resolve => {
|
||||||
const callbackSpy = jasmine.createSpy('callback spy')
|
const el = document.createElement('div')
|
||||||
|
const callbackSpy = jasmine.createSpy('callback spy')
|
||||||
|
|
||||||
spyOn(window, 'getComputedStyle').and.returnValue({
|
spyOn(window, 'getComputedStyle').and.returnValue({
|
||||||
transitionDuration: '0.05s',
|
transitionDuration: '0.05s',
|
||||||
transitionDelay: '0s'
|
transitionDelay: '0s'
|
||||||
|
})
|
||||||
|
|
||||||
|
Util.executeAfterTransition(callbackSpy, el)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(callbackSpy).toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 70)
|
||||||
})
|
})
|
||||||
|
|
||||||
Util.executeAfterTransition(callbackSpy, el)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(callbackSpy).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 70)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', done => {
|
it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', () => {
|
||||||
const el = document.createElement('div')
|
return new Promise(resolve => {
|
||||||
const callbackSpy = jasmine.createSpy('callback spy')
|
const el = document.createElement('div')
|
||||||
|
const callbackSpy = jasmine.createSpy('callback spy')
|
||||||
|
|
||||||
spyOn(window, 'getComputedStyle').and.returnValue({
|
spyOn(window, 'getComputedStyle').and.returnValue({
|
||||||
transitionDuration: '0.05s',
|
transitionDuration: '0.05s',
|
||||||
transitionDelay: '0s'
|
transitionDelay: '0s'
|
||||||
|
})
|
||||||
|
|
||||||
|
Util.executeAfterTransition(callbackSpy, el)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
el.dispatchEvent(new TransitionEvent('transitionend'))
|
||||||
|
}, 50)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(callbackSpy).toHaveBeenCalledTimes(1)
|
||||||
|
resolve()
|
||||||
|
}, 70)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
Util.executeAfterTransition(callbackSpy, el)
|
it('should not trigger a transitionend event if another transitionend event had already happened', () => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const el = document.createElement('div')
|
||||||
|
|
||||||
setTimeout(() => {
|
spyOn(window, 'getComputedStyle').and.returnValue({
|
||||||
|
transitionDuration: '0.05s',
|
||||||
|
transitionDelay: '0s'
|
||||||
|
})
|
||||||
|
|
||||||
|
Util.executeAfterTransition(noop, el)
|
||||||
|
|
||||||
|
// simulate a event dispatched by the browser
|
||||||
el.dispatchEvent(new TransitionEvent('transitionend'))
|
el.dispatchEvent(new TransitionEvent('transitionend'))
|
||||||
}, 50)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
|
||||||
expect(callbackSpy).toHaveBeenCalledTimes(1)
|
|
||||||
done()
|
setTimeout(() => {
|
||||||
}, 70)
|
// setTimeout should not have triggered another transitionend event.
|
||||||
|
expect(dispatchSpy).not.toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 70)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not trigger a transitionend event if another transitionend event had already happened', done => {
|
it('should ignore transitionend events from nested elements', () => {
|
||||||
const el = document.createElement('div')
|
return new Promise(resolve => {
|
||||||
|
fixtureEl.innerHTML = [
|
||||||
|
'<div class="outer">',
|
||||||
|
' <div class="nested"></div>',
|
||||||
|
'</div>'
|
||||||
|
].join('')
|
||||||
|
|
||||||
spyOn(window, 'getComputedStyle').and.returnValue({
|
const outer = fixtureEl.querySelector('.outer')
|
||||||
transitionDuration: '0.05s',
|
const nested = fixtureEl.querySelector('.nested')
|
||||||
transitionDelay: '0s'
|
const callbackSpy = jasmine.createSpy('callback spy')
|
||||||
|
|
||||||
|
spyOn(window, 'getComputedStyle').and.returnValue({
|
||||||
|
transitionDuration: '0.05s',
|
||||||
|
transitionDelay: '0s'
|
||||||
|
})
|
||||||
|
|
||||||
|
Util.executeAfterTransition(callbackSpy, outer)
|
||||||
|
|
||||||
|
nested.dispatchEvent(new TransitionEvent('transitionend', {
|
||||||
|
bubbles: true
|
||||||
|
}))
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(callbackSpy).not.toHaveBeenCalled()
|
||||||
|
}, 20)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(callbackSpy).toHaveBeenCalled()
|
||||||
|
resolve()
|
||||||
|
}, 70)
|
||||||
})
|
})
|
||||||
|
|
||||||
Util.executeAfterTransition(() => {}, el)
|
|
||||||
|
|
||||||
// simulate a event dispatched by the browser
|
|
||||||
el.dispatchEvent(new TransitionEvent('transitionend'))
|
|
||||||
|
|
||||||
const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
// setTimeout should not have triggered another transitionend event.
|
|
||||||
expect(dispatchSpy).not.toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 70)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should ignore transitionend events from nested elements', done => {
|
|
||||||
fixtureEl.innerHTML = [
|
|
||||||
'<div class="outer">',
|
|
||||||
' <div class="nested"></div>',
|
|
||||||
'</div>'
|
|
||||||
].join('')
|
|
||||||
|
|
||||||
const outer = fixtureEl.querySelector('.outer')
|
|
||||||
const nested = fixtureEl.querySelector('.nested')
|
|
||||||
const callbackSpy = jasmine.createSpy('callback spy')
|
|
||||||
|
|
||||||
spyOn(window, 'getComputedStyle').and.returnValue({
|
|
||||||
transitionDuration: '0.05s',
|
|
||||||
transitionDelay: '0s'
|
|
||||||
})
|
|
||||||
|
|
||||||
Util.executeAfterTransition(callbackSpy, outer)
|
|
||||||
|
|
||||||
nested.dispatchEvent(new TransitionEvent('transitionend', {
|
|
||||||
bubbles: true
|
|
||||||
}))
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(callbackSpy).not.toHaveBeenCalled()
|
|
||||||
}, 20)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(callbackSpy).toHaveBeenCalled()
|
|
||||||
done()
|
|
||||||
}, 70)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,7 @@ describe('ScrollBar', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('hide - reset', () => {
|
describe('hide - reset', () => {
|
||||||
it('should adjust the inline padding of fixed elements which are full-width', done => {
|
it('should adjust the inline padding of fixed elements which are full-width', () => {
|
||||||
fixtureEl.innerHTML = [
|
fixtureEl.innerHTML = [
|
||||||
'<div style="height: 110vh; width: 100%">',
|
'<div style="height: 110vh; width: 100%">',
|
||||||
' <div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
|
' <div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
|
||||||
|
|
@ -134,10 +134,9 @@ describe('ScrollBar', () => {
|
||||||
expect(getPaddingAttr(fixedEl2)).toBeNull()
|
expect(getPaddingAttr(fixedEl2)).toBeNull()
|
||||||
expect(currentPadding).toEqual(originalPadding)
|
expect(currentPadding).toEqual(originalPadding)
|
||||||
expect(currentPadding2).toEqual(originalPadding2)
|
expect(currentPadding2).toEqual(originalPadding2)
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should remove padding & margin if not existed before adjustment', done => {
|
it('should remove padding & margin if not existed before adjustment', () => {
|
||||||
fixtureEl.innerHTML = [
|
fixtureEl.innerHTML = [
|
||||||
'<div style="height: 110vh; width: 100%">',
|
'<div style="height: 110vh; width: 100%">',
|
||||||
' <div class="fixed" id="fixed" style="width: 100vw;"></div>',
|
' <div class="fixed" id="fixed" style="width: 100vw;"></div>',
|
||||||
|
|
@ -155,10 +154,9 @@ describe('ScrollBar', () => {
|
||||||
|
|
||||||
expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
|
expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
|
||||||
expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
|
expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should adjust the inline margin and padding of sticky elements', done => {
|
it('should adjust the inline margin and padding of sticky elements', () => {
|
||||||
fixtureEl.innerHTML = [
|
fixtureEl.innerHTML = [
|
||||||
'<div style="height: 110vh">',
|
'<div style="height: 110vh">',
|
||||||
' <div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
|
' <div class="sticky-top" style="margin-right: 10px; padding-right: 20px; width: 100vw; height: 10px"></div>',
|
||||||
|
|
@ -184,7 +182,6 @@ describe('ScrollBar', () => {
|
||||||
expect(getMarginX(stickyTopEl)).toEqual(originalMargin)
|
expect(getMarginX(stickyTopEl)).toEqual(originalMargin)
|
||||||
expect(getPaddingAttr(stickyTopEl)).toBeNull()
|
expect(getPaddingAttr(stickyTopEl)).toBeNull()
|
||||||
expect(getPaddingX(stickyTopEl)).toEqual(originalPadding)
|
expect(getPaddingX(stickyTopEl)).toEqual(originalPadding)
|
||||||
done()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
|
it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
|
||||||
|
|
|
||||||
|
|
@ -78,74 +78,80 @@ describe('Swipe', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('Config', () => {
|
describe('Config', () => {
|
||||||
it('Test leftCallback', done => {
|
it('Test leftCallback', () => {
|
||||||
const spyRight = jasmine.createSpy('spy')
|
return new Promise(resolve => {
|
||||||
clearPointerEvents()
|
const spyRight = jasmine.createSpy('spy')
|
||||||
defineDocumentElementOntouchstart()
|
clearPointerEvents()
|
||||||
// eslint-disable-next-line no-new
|
defineDocumentElementOntouchstart()
|
||||||
new Swipe(swipeEl, {
|
// eslint-disable-next-line no-new
|
||||||
leftCallback: () => {
|
new Swipe(swipeEl, {
|
||||||
expect(spyRight).not.toHaveBeenCalled()
|
leftCallback: () => {
|
||||||
restorePointerEvents()
|
expect(spyRight).not.toHaveBeenCalled()
|
||||||
done()
|
restorePointerEvents()
|
||||||
},
|
resolve()
|
||||||
rightCallback: spyRight
|
},
|
||||||
})
|
rightCallback: spyRight
|
||||||
|
})
|
||||||
|
|
||||||
mockSwipeGesture(swipeEl, {
|
mockSwipeGesture(swipeEl, {
|
||||||
pos: [300, 10],
|
pos: [300, 10],
|
||||||
deltaX: -300
|
deltaX: -300
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Test rightCallback', done => {
|
it('Test rightCallback', () => {
|
||||||
const spyLeft = jasmine.createSpy('spy')
|
return new Promise(resolve => {
|
||||||
clearPointerEvents()
|
const spyLeft = jasmine.createSpy('spy')
|
||||||
defineDocumentElementOntouchstart()
|
clearPointerEvents()
|
||||||
// eslint-disable-next-line no-new
|
defineDocumentElementOntouchstart()
|
||||||
new Swipe(swipeEl, {
|
// eslint-disable-next-line no-new
|
||||||
rightCallback: () => {
|
new Swipe(swipeEl, {
|
||||||
expect(spyLeft).not.toHaveBeenCalled()
|
rightCallback: () => {
|
||||||
restorePointerEvents()
|
expect(spyLeft).not.toHaveBeenCalled()
|
||||||
done()
|
restorePointerEvents()
|
||||||
},
|
resolve()
|
||||||
leftCallback: spyLeft
|
},
|
||||||
})
|
leftCallback: spyLeft
|
||||||
|
})
|
||||||
|
|
||||||
mockSwipeGesture(swipeEl, {
|
mockSwipeGesture(swipeEl, {
|
||||||
pos: [10, 10],
|
pos: [10, 10],
|
||||||
deltaX: 300
|
deltaX: 300
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Test endCallback', done => {
|
it('Test endCallback', () => {
|
||||||
clearPointerEvents()
|
return new Promise(resolve => {
|
||||||
defineDocumentElementOntouchstart()
|
clearPointerEvents()
|
||||||
let isFirstTime = true
|
defineDocumentElementOntouchstart()
|
||||||
|
let isFirstTime = true
|
||||||
|
|
||||||
const callback = () => {
|
const callback = () => {
|
||||||
if (isFirstTime) {
|
if (isFirstTime) {
|
||||||
isFirstTime = false
|
isFirstTime = false
|
||||||
return
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
expect().nothing()
|
||||||
|
restorePointerEvents()
|
||||||
|
resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
expect().nothing()
|
// eslint-disable-next-line no-new
|
||||||
restorePointerEvents()
|
new Swipe(swipeEl, {
|
||||||
done()
|
endCallback: callback
|
||||||
}
|
})
|
||||||
|
mockSwipeGesture(swipeEl, {
|
||||||
|
pos: [10, 10],
|
||||||
|
deltaX: 300
|
||||||
|
})
|
||||||
|
|
||||||
// eslint-disable-next-line no-new
|
mockSwipeGesture(swipeEl, {
|
||||||
new Swipe(swipeEl, {
|
pos: [300, 10],
|
||||||
endCallback: callback
|
deltaX: -300
|
||||||
})
|
})
|
||||||
mockSwipeGesture(swipeEl, {
|
|
||||||
pos: [10, 10],
|
|
||||||
deltaX: 300
|
|
||||||
})
|
|
||||||
|
|
||||||
mockSwipeGesture(swipeEl, {
|
|
||||||
pos: [300, 10],
|
|
||||||
deltaX: -300
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -170,53 +176,57 @@ describe('Swipe', () => {
|
||||||
expect(swipe._handleSwipe).not.toHaveBeenCalled()
|
expect(swipe._handleSwipe).not.toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should allow swipeRight and call "rightCallback" with pointer events', done => {
|
it('should allow swipeRight and call "rightCallback" with pointer events', () => {
|
||||||
if (!supportPointerEvent) {
|
return new Promise(resolve => {
|
||||||
expect().nothing()
|
if (!supportPointerEvent) {
|
||||||
done()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const style = '#fixture .pointer-event { touch-action: none !important; }'
|
|
||||||
fixtureEl.innerHTML += style
|
|
||||||
|
|
||||||
defineDocumentElementOntouchstart()
|
|
||||||
// eslint-disable-next-line no-new
|
|
||||||
new Swipe(swipeEl, {
|
|
||||||
rightCallback: () => {
|
|
||||||
deleteDocumentElementOntouchstart()
|
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
done()
|
resolve()
|
||||||
|
return
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
|
const style = '#fixture .pointer-event { touch-action: none !important; }'
|
||||||
|
fixtureEl.innerHTML += style
|
||||||
|
|
||||||
|
defineDocumentElementOntouchstart()
|
||||||
|
// eslint-disable-next-line no-new
|
||||||
|
new Swipe(swipeEl, {
|
||||||
|
rightCallback: () => {
|
||||||
|
deleteDocumentElementOntouchstart()
|
||||||
|
expect().nothing()
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should allow swipeLeft and call "leftCallback" with pointer events', done => {
|
it('should allow swipeLeft and call "leftCallback" with pointer events', () => {
|
||||||
if (!supportPointerEvent) {
|
return new Promise(resolve => {
|
||||||
expect().nothing()
|
if (!supportPointerEvent) {
|
||||||
done()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const style = '#fixture .pointer-event { touch-action: none !important; }'
|
|
||||||
fixtureEl.innerHTML += style
|
|
||||||
|
|
||||||
defineDocumentElementOntouchstart()
|
|
||||||
// eslint-disable-next-line no-new
|
|
||||||
new Swipe(swipeEl, {
|
|
||||||
leftCallback: () => {
|
|
||||||
expect().nothing()
|
expect().nothing()
|
||||||
deleteDocumentElementOntouchstart()
|
resolve()
|
||||||
done()
|
return
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
mockSwipeGesture(swipeEl, {
|
const style = '#fixture .pointer-event { touch-action: none !important; }'
|
||||||
pos: [300, 10],
|
fixtureEl.innerHTML += style
|
||||||
deltaX: -300
|
|
||||||
}, 'pointer')
|
defineDocumentElementOntouchstart()
|
||||||
|
// eslint-disable-next-line no-new
|
||||||
|
new Swipe(swipeEl, {
|
||||||
|
leftCallback: () => {
|
||||||
|
expect().nothing()
|
||||||
|
deleteDocumentElementOntouchstart()
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
mockSwipeGesture(swipeEl, {
|
||||||
|
pos: [300, 10],
|
||||||
|
deltaX: -300
|
||||||
|
}, 'pointer')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue