From e90b83600a26d81aa994e598e56b08be98054c54 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 2 Oct 2019 14:03:23 -0400 Subject: [PATCH] test(compiler): tests for RootNode codegen transform --- .../compiler-core/__tests__/transform.spec.ts | 121 +++++++++++++++++- packages/compiler-core/src/transform.ts | 4 +- 2 files changed, 122 insertions(+), 3 deletions(-) diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts index b23340344..aa04c3f0d 100644 --- a/packages/compiler-core/__tests__/transform.spec.ts +++ b/packages/compiler-core/__tests__/transform.spec.ts @@ -7,7 +7,20 @@ import { ExpressionNode } from '../src/ast' import { ErrorCodes, createCompilerError } from '../src/errors' -import { TO_STRING, CREATE_VNODE, COMMENT } from '../src/runtimeConstants' +import { + TO_STRING, + CREATE_VNODE, + COMMENT, + OPEN_BLOCK, + CREATE_BLOCK, + FRAGMENT, + RENDER_SLOT +} from '../src/runtimeConstants' +import { transformIf } from '../src/transforms/vIf' +import { transformFor } from '../src/transforms/vFor' +import { transformElement } from '../src/transforms/transformElement' +import { transformSlotOutlet } from '../src/transforms/transfromSlotOutlet' +import { optimizeText } from '../src/transforms/optimizeText' describe('compiler: transform', () => { test('context state', () => { @@ -221,4 +234,110 @@ describe('compiler: transform', () => { expect(ast.imports).toContain(CREATE_VNODE) expect(ast.imports).toContain(COMMENT) }) + + describe('root codegenNode', () => { + function transformWithCodegen(template: string) { + const ast = parse(template) + transform(ast, { + nodeTransforms: [ + transformIf, + transformFor, + optimizeText, + transformSlotOutlet, + transformElement + ] + }) + return ast + } + + function createBlockMatcher(args: any[]) { + return { + type: NodeTypes.JS_SEQUENCE_EXPRESSION, + expressions: [ + { + type: NodeTypes.JS_CALL_EXPRESSION, + callee: `_${OPEN_BLOCK}` + }, + { + type: NodeTypes.JS_CALL_EXPRESSION, + callee: `_${CREATE_BLOCK}`, + arguments: args + } + ] + } + } + + test('no chidlren', () => { + const ast = transformWithCodegen(``) + expect(ast.codegenNode).toBeUndefined() + }) + + test('single ', () => { + const ast = transformWithCodegen(``) + expect(ast.codegenNode).toMatchObject( + createBlockMatcher([ + `_${FRAGMENT}`, + `null`, + { + type: NodeTypes.JS_CALL_EXPRESSION, + callee: `_${RENDER_SLOT}` + } + ]) + ) + }) + + test('single element', () => { + const ast = transformWithCodegen(`
`) + expect(ast.codegenNode).toMatchObject(createBlockMatcher([`"div"`])) + }) + + test('root v-if', () => { + const ast = transformWithCodegen(`
`) + expect(ast.codegenNode).toMatchObject({ + type: NodeTypes.IF + }) + }) + + test('root v-for', () => { + const ast = transformWithCodegen(`
`) + expect(ast.codegenNode).toMatchObject({ + type: NodeTypes.FOR + }) + }) + + test('single text', () => { + const ast = transformWithCodegen(`hello`) + expect(ast.codegenNode).toMatchObject({ + type: NodeTypes.TEXT + }) + }) + + test('single interpolation', () => { + const ast = transformWithCodegen(`{{ foo }}`) + expect(ast.codegenNode).toMatchObject({ + type: NodeTypes.INTERPOLATION + }) + }) + + test('single CompoundExpression', () => { + const ast = transformWithCodegen(`{{ foo }} bar baz`) + expect(ast.codegenNode).toMatchObject({ + type: NodeTypes.COMPOUND_EXPRESSION + }) + }) + + test('multiple children', () => { + const ast = transformWithCodegen(`
`) + expect(ast.codegenNode).toMatchObject( + createBlockMatcher([ + `_${FRAGMENT}`, + `null`, + [ + { type: NodeTypes.ELEMENT, tag: `div` }, + { type: NodeTypes.ELEMENT, tag: `div` } + ] + ]) + ) + }) + }) }) diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts index 6ac73db54..7931f019b 100644 --- a/packages/compiler-core/src/transform.ts +++ b/packages/compiler-core/src/transform.ts @@ -196,13 +196,13 @@ function finalizeRoot(root: RootNode, context: TransformContext) { // only child is a - it needs to be in a fragment block. if (child.tagType === ElementTypes.SLOT) { root.codegenNode = createBlockExpression( - [helper(FRAGMENT), `null`, child.codegenNode], + [helper(FRAGMENT), `null`, child.codegenNode!], context ) } else { // turn root element into a block root.codegenNode = createBlockExpression( - child.codegenNode.arguments, + child.codegenNode!.arguments, context ) }