2019-10-14 12:33:23 +08:00
|
|
|
import {
|
2019-12-23 08:44:21 +08:00
|
|
|
baseParse as parse,
|
2019-10-14 12:33:23 +08:00
|
|
|
transform,
|
|
|
|
CompilerOptions,
|
|
|
|
ElementNode,
|
|
|
|
ObjectExpression,
|
2020-02-12 07:40:21 +08:00
|
|
|
NodeTypes,
|
|
|
|
VNodeCall
|
2019-10-14 12:33:23 +08:00
|
|
|
} from '@vue/compiler-core'
|
|
|
|
import { transformOn } from '../../src/transforms/vOn'
|
2019-10-19 04:36:42 +08:00
|
|
|
import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../../src/runtimeHelpers'
|
2019-10-14 12:33:23 +08:00
|
|
|
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
|
|
|
|
import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
|
|
|
|
import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
|
|
|
|
|
2019-10-19 09:51:34 +08:00
|
|
|
function parseWithVOn(template: string, options: CompilerOptions = {}) {
|
2019-10-14 12:33:23 +08:00
|
|
|
const ast = parse(template)
|
|
|
|
transform(ast, {
|
|
|
|
nodeTransforms: [transformExpression, transformElement],
|
|
|
|
directiveTransforms: {
|
|
|
|
on: transformOn
|
|
|
|
},
|
|
|
|
...options
|
|
|
|
})
|
2019-10-19 09:51:34 +08:00
|
|
|
return {
|
|
|
|
root: ast,
|
2020-02-12 07:40:21 +08:00
|
|
|
props: (((ast.children[0] as ElementNode).codegenNode as VNodeCall)
|
|
|
|
.props as ObjectExpression).properties
|
2019-10-19 09:51:34 +08:00
|
|
|
}
|
2019-10-14 12:33:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
describe('compiler-dom: transform v-on', () => {
|
2019-10-18 03:01:51 +08:00
|
|
|
it('should support multiple modifiers w/ prefixIdentifiers: true', () => {
|
2019-10-19 09:51:34 +08:00
|
|
|
const {
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @click.stop.prevent="test"/>`, {
|
2019-10-14 12:33:23 +08:00
|
|
|
prefixIdentifiers: true
|
|
|
|
})
|
|
|
|
expect(prop).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
2019-10-15 11:06:51 +08:00
|
|
|
value: {
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_MODIFIERS,
|
2019-10-15 11:06:51 +08:00
|
|
|
arguments: [{ content: '_ctx.test' }, '["stop","prevent"]']
|
|
|
|
}
|
2019-11-16 04:37:02 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should support multiple events and modifiers options w/ prefixIdentifiers: true', () => {
|
|
|
|
const { props } = parseWithVOn(
|
|
|
|
`<div @click.stop="test" @keyup.enter="test" />`,
|
|
|
|
{
|
|
|
|
prefixIdentifiers: true
|
|
|
|
}
|
|
|
|
)
|
|
|
|
const [clickProp, keyUpProp] = props
|
|
|
|
|
|
|
|
expect(props).toHaveLength(2)
|
|
|
|
expect(clickProp).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: {
|
|
|
|
callee: V_ON_WITH_MODIFIERS,
|
|
|
|
arguments: [{ content: '_ctx.test' }, '["stop"]']
|
|
|
|
}
|
|
|
|
})
|
|
|
|
expect(keyUpProp).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: {
|
|
|
|
callee: V_ON_WITH_KEYS,
|
|
|
|
arguments: [{ content: '_ctx.test' }, '["enter"]']
|
|
|
|
}
|
2019-10-14 12:33:23 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
|
2019-10-19 09:51:34 +08:00
|
|
|
const {
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @click.stop.capture.passive="test"/>`, {
|
|
|
|
prefixIdentifiers: true
|
|
|
|
})
|
2019-10-14 12:33:23 +08:00
|
|
|
expect(prop).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: createObjectMatcher({
|
|
|
|
handler: {
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_MODIFIERS,
|
2019-10-14 12:33:23 +08:00
|
|
|
arguments: [{ content: '_ctx.test' }, '["stop"]']
|
|
|
|
},
|
|
|
|
options: createObjectMatcher({
|
|
|
|
capture: { content: 'true', isStatic: false },
|
|
|
|
passive: { content: 'true', isStatic: false }
|
2019-10-19 09:51:34 +08:00
|
|
|
})
|
2019-10-14 12:33:23 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('should wrap keys guard for keyboard events or dynamic events', () => {
|
2019-10-19 09:51:34 +08:00
|
|
|
const {
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @keyDown.stop.capture.ctrl.a="test"/>`, {
|
|
|
|
prefixIdentifiers: true
|
|
|
|
})
|
2019-10-14 12:33:23 +08:00
|
|
|
expect(prop).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: createObjectMatcher({
|
|
|
|
handler: {
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_KEYS,
|
2019-10-14 12:33:23 +08:00
|
|
|
arguments: [
|
|
|
|
{
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_MODIFIERS,
|
2019-10-14 12:33:23 +08:00
|
|
|
arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]']
|
|
|
|
},
|
|
|
|
'["a"]'
|
|
|
|
]
|
|
|
|
},
|
|
|
|
options: createObjectMatcher({
|
|
|
|
capture: { content: 'true', isStatic: false }
|
2019-10-19 09:51:34 +08:00
|
|
|
})
|
2019-10-14 12:33:23 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
2019-10-16 05:08:44 +08:00
|
|
|
|
|
|
|
it('should not wrap keys guard if no key modifier is present', () => {
|
2019-10-19 09:51:34 +08:00
|
|
|
const {
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @keyup.exact="test"/>`, {
|
2019-10-16 05:08:44 +08:00
|
|
|
prefixIdentifiers: true
|
|
|
|
})
|
|
|
|
expect(prop).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: {
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_MODIFIERS,
|
2019-10-16 05:08:44 +08:00
|
|
|
arguments: [{ content: '_ctx.test' }, '["exact"]']
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
2019-10-19 04:20:45 +08:00
|
|
|
|
|
|
|
it('should not wrap normal guard if there is only keys guard', () => {
|
2019-10-19 09:51:34 +08:00
|
|
|
const {
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @keyup.enter="test"/>`, {
|
2019-10-19 04:20:45 +08:00
|
|
|
prefixIdentifiers: true
|
|
|
|
})
|
|
|
|
expect(prop).toMatchObject({
|
|
|
|
type: NodeTypes.JS_PROPERTY,
|
|
|
|
value: {
|
2019-10-19 04:36:42 +08:00
|
|
|
callee: V_ON_WITH_KEYS,
|
2019-10-19 04:20:45 +08:00
|
|
|
arguments: [{ content: '_ctx.test' }, '["enter"]']
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
2019-10-19 09:51:34 +08:00
|
|
|
|
|
|
|
test('cache handler w/ modifiers', () => {
|
|
|
|
const {
|
|
|
|
root,
|
|
|
|
props: [prop]
|
|
|
|
} = parseWithVOn(`<div @keyup.enter.capture="foo" />`, {
|
|
|
|
prefixIdentifiers: true,
|
|
|
|
cacheHandlers: true
|
|
|
|
})
|
|
|
|
expect(root.cached).toBe(1)
|
|
|
|
// should not treat cached handler as dynamicProp, so no flags
|
2020-02-12 07:40:21 +08:00
|
|
|
expect((root as any).children[0].codegenNode.patchFlag).toBeUndefined()
|
2019-10-19 09:51:34 +08:00
|
|
|
expect(prop.value).toMatchObject({
|
|
|
|
type: NodeTypes.JS_CACHE_EXPRESSION,
|
|
|
|
index: 1,
|
|
|
|
value: {
|
|
|
|
type: NodeTypes.JS_OBJECT_EXPRESSION,
|
|
|
|
properties: [
|
|
|
|
{
|
|
|
|
key: { content: 'handler' },
|
|
|
|
value: {
|
|
|
|
type: NodeTypes.JS_CALL_EXPRESSION,
|
|
|
|
callee: V_ON_WITH_KEYS
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: { content: 'options' },
|
|
|
|
value: { type: NodeTypes.JS_OBJECT_EXPRESSION }
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
2019-10-14 12:33:23 +08:00
|
|
|
})
|