380c6792d8
fix #1567 Previously multiple `v-on` handlers with different event attach option modifers (`.once`, `.capture` and `.passive`) are generated as an array of objects in the form of `[{ handler, options }]` - however, this makes it pretty complex for `runtime-dom` to properly handle all possible value permutations, as each handler may need to be attached with different options. With this commit, they are now generated as event props with different keys - e.g. `v-on:click.capture` is now generated as a prop named `onClick.capture`. This allows them to be patched as separate props which makes the runtime handling much simpler.
119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import { patchProp } from '../src/patchProp'
|
|
|
|
const timeout = () => new Promise(r => setTimeout(r))
|
|
|
|
describe(`runtime-dom: events patching`, () => {
|
|
it('should assign event handler', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const fn = jest.fn()
|
|
patchProp(el, 'onClick', null, fn)
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn).toHaveBeenCalledTimes(3)
|
|
})
|
|
|
|
it('should update event handler', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const prevFn = jest.fn()
|
|
const nextFn = jest.fn()
|
|
patchProp(el, 'onClick', null, prevFn)
|
|
el.dispatchEvent(event)
|
|
patchProp(el, 'onClick', prevFn, nextFn)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(prevFn).toHaveBeenCalledTimes(1)
|
|
expect(nextFn).toHaveBeenCalledTimes(2)
|
|
})
|
|
|
|
it('should support multiple event handlers', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const fn1 = jest.fn()
|
|
const fn2 = jest.fn()
|
|
patchProp(el, 'onClick', null, [fn1, fn2])
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn1).toHaveBeenCalledTimes(1)
|
|
expect(fn2).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('should unassign event handler', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const fn = jest.fn()
|
|
patchProp(el, 'onClick', null, fn)
|
|
patchProp(el, 'onClick', fn, null)
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('should support event option modifiers', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const fn = jest.fn()
|
|
patchProp(el, 'onClick.once.capture', null, fn)
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('should unassign event handler with options', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
const fn = jest.fn()
|
|
patchProp(el, 'onClick.capture', null, fn)
|
|
patchProp(el, 'onClick.capture', fn, null)
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('should support native onclick', async () => {
|
|
const el = document.createElement('div')
|
|
const event = new Event('click')
|
|
|
|
// string should be set as attribute
|
|
const fn = ((window as any).__globalSpy = jest.fn())
|
|
patchProp(el, 'onclick', null, '__globalSpy(1)')
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
delete (window as any).__globalSpy
|
|
expect(fn).toHaveBeenCalledWith(1)
|
|
|
|
const fn2 = jest.fn()
|
|
patchProp(el, 'onclick', '__globalSpy(1)', fn2)
|
|
el.dispatchEvent(event)
|
|
await timeout()
|
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
expect(fn2).toHaveBeenCalledWith(event)
|
|
})
|
|
|
|
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)
|
|
})
|
|
})
|