test(compiler-vapor): add test for component v-if handling

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap

@@ -44,6 +44,19 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: v-if > component v-if 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf } from 'vue';
+
+export function render(_ctx) {
+  const _component_Component = _resolveComponent("Component")
+  const n0 = _createIf(() => (_ctx.ok), () => {
+    const n2 = _createComponentWithFallback(_component_Component, null, null, true)
+    return n2
+  })
+  return n0
+}"
+`;
+
 exports[`compiler: v-if > dedupe same template 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div>hello</div>")

packages/compiler-vapor/__tests__/transforms/vIf.spec.ts

@@ -205,7 +205,33 @@ describe('compiler: v-if', () => {
   })
 
   test.todo('v-if with v-once')
-  test.todo('component v-if')
+
+  test('component v-if', () => {
+    const { code, ir, helpers } = compileWithVIf(
+      `<Component v-if="ok"></Component>`,
+    )
+    expect(code).matchSnapshot()
+    expect(helpers).contains('createIf')
+    expect(ir.block.effect).lengthOf(0)
+    expect(ir.block.dynamic.children[0].operation).toMatchObject({
+      type: IRNodeTypes.IF,
+      id: 0,
+      condition: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: 'ok',
+        isStatic: false,
+      },
+      positive: {
+        type: IRNodeTypes.BLOCK,
+        dynamic: {
+          children: [
+            { operation: { asset: true, tag: 'Component', type: 11 } },
+          ],
+        },
+      },
+    })
+    expect(ir.block.returns).toEqual([0])
+  })
 
   test('v-if + v-else', () => {
     const { code, ir, helpers } = compileWithVIf(`<div v-if="ok"/><p v-else/>`)