2020-04-11 03:37:30 +08:00
|
|
|
import { patchProp } from '../src/patchProp'
|
2020-04-02 09:59:42 +08:00
|
|
|
|
|
|
|
const timeout = () => new Promise(r => setTimeout(r))
|
2019-10-10 03:05:21 +08:00
|
|
|
|
2020-04-11 03:23:01 +08:00
|
|
|
describe(`runtime-dom: events patching`, () => {
|
2019-10-11 10:02:41 +08:00
|
|
|
it('should assign event handler', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn = jest.fn()
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onClick', null, fn)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
expect(fn).toHaveBeenCalledTimes(3)
|
|
|
|
})
|
|
|
|
|
2019-10-11 10:02:41 +08:00
|
|
|
it('should update event handler', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const prevFn = jest.fn()
|
|
|
|
const nextFn = jest.fn()
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onClick', null, prevFn)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onClick', prevFn, nextFn)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
expect(prevFn).toHaveBeenCalledTimes(1)
|
|
|
|
expect(nextFn).toHaveBeenCalledTimes(2)
|
|
|
|
})
|
|
|
|
|
2019-11-27 07:06:55 +08:00
|
|
|
it('should support multiple event handlers', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn1 = jest.fn()
|
|
|
|
const fn2 = jest.fn()
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onClick', null, [fn1, fn2])
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
expect(fn1).toHaveBeenCalledTimes(1)
|
|
|
|
expect(fn2).toHaveBeenCalledTimes(1)
|
|
|
|
})
|
|
|
|
|
2019-11-27 07:06:55 +08:00
|
|
|
it('should unassign event handler', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn = jest.fn()
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onClick', null, fn)
|
|
|
|
patchProp(el, 'onClick', fn, null)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
expect(fn).not.toHaveBeenCalled()
|
|
|
|
})
|
|
|
|
|
2020-07-14 23:48:05 +08:00
|
|
|
it('should support event option modifiers', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn = jest.fn()
|
2020-07-15 01:20:59 +08:00
|
|
|
patchProp(el, 'onClickOnceCapture', null, fn)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2019-10-10 03:05:21 +08:00
|
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
|
|
})
|
|
|
|
|
2019-10-11 10:02:41 +08:00
|
|
|
it('should unassign event handler with options', async () => {
|
2019-10-10 03:05:21 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn = jest.fn()
|
2020-07-15 01:20:59 +08:00
|
|
|
patchProp(el, 'onClickCapture', null, fn)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2020-07-15 01:20:59 +08:00
|
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
|
|
|
|
|
|
patchProp(el, 'onClickCapture', fn, null)
|
2019-10-10 03:05:21 +08:00
|
|
|
el.dispatchEvent(event)
|
2020-04-02 09:59:42 +08:00
|
|
|
await timeout()
|
2020-07-15 01:20:59 +08:00
|
|
|
el.dispatchEvent(event)
|
|
|
|
await timeout()
|
|
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
2019-10-10 03:05:21 +08:00
|
|
|
})
|
2020-04-07 23:34:54 +08:00
|
|
|
|
2020-04-10 23:57:07 +08:00
|
|
|
it('should support native onclick', async () => {
|
2020-04-07 23:34:54 +08:00
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
|
2020-04-10 23:57:07 +08:00
|
|
|
// string should be set as attribute
|
|
|
|
const fn = ((window as any).__globalSpy = jest.fn())
|
|
|
|
patchProp(el, 'onclick', null, '__globalSpy(1)')
|
2020-04-07 23:34:54 +08:00
|
|
|
el.dispatchEvent(event)
|
|
|
|
await timeout()
|
2020-04-10 23:57:07 +08:00
|
|
|
delete (window as any).__globalSpy
|
|
|
|
expect(fn).toHaveBeenCalledWith(1)
|
2020-04-07 23:34:54 +08:00
|
|
|
|
|
|
|
const fn2 = jest.fn()
|
2020-04-10 23:57:07 +08:00
|
|
|
patchProp(el, 'onclick', '__globalSpy(1)', fn2)
|
2020-04-07 23:34:54 +08:00
|
|
|
el.dispatchEvent(event)
|
|
|
|
await timeout()
|
|
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
2020-04-10 23:57:07 +08:00
|
|
|
expect(fn2).toHaveBeenCalledWith(event)
|
2020-04-07 23:34:54 +08:00
|
|
|
})
|
2020-04-15 22:35:34 +08:00
|
|
|
|
|
|
|
it('should support stopImmediatePropagation on multiple listeners', async () => {
|
|
|
|
const el = document.createElement('div')
|
|
|
|
const event = new Event('click')
|
|
|
|
const fn1 = jest.fn((e: Event) => {
|
|
|
|
e.stopImmediatePropagation()
|
|
|
|
})
|
|
|
|
const fn2 = jest.fn()
|
|
|
|
patchProp(el, 'onClick', null, [fn1, fn2])
|
|
|
|
el.dispatchEvent(event)
|
|
|
|
await timeout()
|
|
|
|
expect(fn1).toHaveBeenCalledTimes(1)
|
|
|
|
expect(fn2).toHaveBeenCalledTimes(0)
|
|
|
|
})
|
2019-10-10 03:05:21 +08:00
|
|
|
})
|