test: tests for v-on transform

packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap

@@ -76,9 +76,9 @@ return function render() {
 exports[`compiler: codegen ifNode 1`] = `
 "return function render() {
   with (this) {
-    return (foo)
+    return foo
       ? \\"foo\\"
-      : (bar)
+      : (a + b)
         ? toString(bye)
         : createVNode(Comment, 0, \\"foo\\")
   }
@@ -88,9 +88,9 @@ exports[`compiler: codegen ifNode 1`] = `
 exports[`compiler: codegen ifNode with no v-else 1`] = `
 "return function render() {
   with (this) {
-    return (foo)
+    return foo
       ? \\"foo\\"
-      : (bar)
+      : (a + b)
         ? toString(bye)
         : null
   }

packages/compiler-core/__tests__/codegen.spec.ts

@@ -191,7 +191,7 @@ describe('compiler: codegen', () => {
               },
               {
                 type: NodeTypes.IF_BRANCH,
-                condition: createExpression('bar', false, mockLoc),
+                condition: createExpression('a + b', false, mockLoc),
                 loc: mockLoc,
                 isRoot: true,
                 children: [createExpression(`bye`, false, mockLoc, true)]
@@ -215,9 +215,9 @@ describe('compiler: codegen', () => {
       })
     )
     expect(code).toMatch(`
-    return (foo)
+    return foo
       ? "foo"
-      : (bar)
+      : (a + b)
         ? ${TO_STRING}(bye)
         : ${CREATE_VNODE}(${COMMENT}, 0, "foo")`)
     expect(code).toMatchSnapshot()
@@ -248,7 +248,7 @@ describe('compiler: codegen', () => {
               },
               {
                 type: NodeTypes.IF_BRANCH,
-                condition: createExpression('bar', false, mockLoc),
+                condition: createExpression('a + b', false, mockLoc),
                 loc: mockLoc,
                 isRoot: true,
                 children: [createExpression(`bye`, false, mockLoc, true)]
@@ -259,9 +259,9 @@ describe('compiler: codegen', () => {
       })
     )
     expect(code).toMatch(`
-    return (foo)
+    return foo
       ? "foo"
-      : (bar)
+      : (a + b)
         ? ${TO_STRING}(bye)
         : null`)
     expect(code).toMatchSnapshot()

packages/compiler-core/__tests__/transforms/vOn.spec.ts

@@ -1 +1,125 @@
-test.todo('v-on')
+import {
+  parse,
+  transform,
+  ElementNode,
+  ObjectExpression,
+  CompilerOptions,
+  ErrorCodes
+} from '../../src'
+import { transformOn } from '../../src/transforms/vOn'
+import { transformElement } from '../../src/transforms/transformElement'
+import { transformExpression } from '../../src/transforms/transformExpression'
+
+function parseWithVOn(
+  template: string,
+  options: CompilerOptions = {}
+): ElementNode {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformExpression, transformElement],
+    directiveTransforms: {
+      on: transformOn
+    },
+    ...options
+  })
+  return ast.children[0] as ElementNode
+}
+
+describe('compiler: transform v-bind', () => {
+  test('basic', () => {
+    const node = parseWithVOn(`<div v-on:click="onClick"/>`)
+    const props = node.codegenNode!.arguments[1] as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `onClick`,
+        isStatic: true,
+        loc: {
+          start: {
+            line: 1,
+            column: 11
+          },
+          end: {
+            line: 1,
+            column: 16
+          }
+        }
+      },
+      value: {
+        content: `onClick`,
+        isStatic: false,
+        loc: {
+          start: {
+            line: 1,
+            column: 17
+          },
+          end: {
+            line: 1,
+            column: 26
+          }
+        }
+      },
+      loc: {
+        start: {
+          line: 1,
+          column: 6
+        },
+        end: {
+          line: 1,
+          column: 26
+        }
+      }
+    })
+  })
+
+  test('dynamic arg', () => {
+    const node = parseWithVOn(`<div v-on:[event]="handler"/>`)
+    const props = node.codegenNode!.arguments[1] as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `"on" + event`,
+        isStatic: false
+      },
+      value: {
+        content: `handler`,
+        isStatic: false
+      }
+    })
+  })
+
+  test('dynamic arg with prefixing', () => {
+    const node = parseWithVOn(`<div v-on:[event]="handler"/>`, {
+      prefixIdentifiers: true
+    })
+    const props = node.codegenNode!.arguments[1] as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        isStatic: false,
+        children: [`"on" + `, `_ctx.`, { content: `event` }]
+      },
+      value: {
+        content: `handler`,
+        isStatic: false
+      }
+    })
+  })
+
+  test('should error if no expression', () => {
+    const onError = jest.fn()
+    parseWithVOn(`<div v-on />`, { onError })
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_V_ON_NO_EXPRESSION,
+      loc: {
+        start: {
+          line: 1,
+          column: 6
+        },
+        end: {
+          line: 1,
+          column: 10
+        }
+      }
+    })
+  })
+
+  test.todo('.once modifier')
+})