From: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Date: Fri, 24 Nov 2023 12:03:28 +0000 (+0800)
Subject: test: add unit tests for directives
X-Git-Tag: v3.6.0-alpha.1~16^2~821
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=acec2409c7694c5dd37a3f173fe432899549866e;p=thirdparty%2Fvuejs%2Fcore.git

test: add unit tests for directives
---

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index b83f0dea60..b469ea52de 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
@@ -13,9 +13,101 @@ return root
 }"
 `;
 
+exports[`comile > directives > v-bind > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setAttr } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setAttr(n0, \\"id\\", undefined, id.value)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-html > no expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setHtml } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setHtml(n0, undefined, \\"\\")
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-html > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setHtml } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setHtml(n0, undefined, code.value)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-on > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, on } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+on(n0, \\"click\\", handleClick)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-once 1`] = `
+"import { template, children, insert, setText, setAttr } from 'vue/vapor'
+const t0 = template(\`<div> <span></span></div>\`)
+export function render() {
+const root = t0()
+const { 1: [n2],} = children(root)
+const n1 = document.createTextNode(msg.value)
+insert(n1, n0, 0 /* InsertPosition.FIRST */)
+setText(n1, undefined, msg.value)
+setAttr(n2, \\"class\\", undefined, clz.value)
+return root
+}"
+`;
+
+exports[`comile > directives > v-text > no expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setText } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setText(n0, undefined, \\"\\")
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-text > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setText } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setText(n0, undefined, str.value)
+})
+return root
+}"
+`;
+
 exports[`comile > static template 1`] = `
 "import { template } from 'vue/vapor'
-const t0 = template(\`<div><p>hello</p><input></div>\`)
+const t0 = template(\`<div><p>hello</p><input><span></span></div>\`)
 export function render() {
 const root = t0()
 return root
diff --git a/packages/compiler-vapor/__tests__/compile.test.ts b/packages/compiler-vapor/__tests__/compile.test.ts
index 2e02f28de0..3092f731be 100644
--- a/packages/compiler-vapor/__tests__/compile.test.ts
+++ b/packages/compiler-vapor/__tests__/compile.test.ts
@@ -2,18 +2,18 @@ import { BindingTypes } from '@vue/compiler-dom'
 import { compile } from '../src'
 
 describe('comile', () => {
-  it('static template', () => {
+  test('static template', () => {
     const { code } = compile(
       `<div>
         <p>hello</p>
         <input />
+        <span />
       </div>`,
-      {},
     )
     expect(code).matchSnapshot()
   })
 
-  it('bindings', () => {
+  test('bindings', () => {
     const { code } = compile(`<div>{{ count }}</div>`, {
       bindingMetadata: {
         count: BindingTypes.SETUP_REF,
@@ -21,4 +21,76 @@ describe('comile', () => {
     })
     expect(code).matchSnapshot()
   })
+
+  describe('directives', () => {
+    describe('v-bind', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div :id="id"></div>`, {
+          bindingMetadata: {
+            id: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-on', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div @click="handleClick"></div>`, {
+          bindingMetadata: {
+            handleClick: BindingTypes.SETUP_CONST,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-html', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div v-html="code"></div>`, {
+          bindingMetadata: {
+            code: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+
+      test('no expression', () => {
+        const { code } = compile(`<div v-html></div>`)
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-text', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div v-text="str"></div>`, {
+          bindingMetadata: {
+            str: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+
+      test('no expression', () => {
+        const { code } = compile(`<div v-text></div>`)
+        expect(code).matchSnapshot()
+      })
+    })
+
+    test('v-once', () => {
+      const { code } = compile(
+        `<div v-once>
+          {{ msg }}
+          <span :class="clz" />
+        </div>`,
+        {
+          bindingMetadata: {
+            msg: BindingTypes.SETUP_REF,
+            clz: BindingTypes.SETUP_REF,
+          },
+        },
+      )
+      expect(code).matchSnapshot()
+    })
+  })
 })
diff --git a/packages/compiler-vapor/src/compile.ts b/packages/compiler-vapor/src/compile.ts
index d31dad374e..3ad874e8a0 100644
--- a/packages/compiler-vapor/src/compile.ts
+++ b/packages/compiler-vapor/src/compile.ts
@@ -11,7 +11,7 @@ import { generate } from './generate'
 // code/AST -> IR -> JS codegen
 export function compile(
   template: string | RootNode,
-  options: CompilerOptions,
+  options: CompilerOptions = {},
 ): CodegenResult {
   const ast = isString(template) ? baseParse(template, options) : template
   const ir = transform(ast, options)