test: restructure v-if & v-for tests

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`compiler: transform v-if codegen basic v-if 1`] = `
+exports[`compiler: v-if codegen basic v-if 1`] = `
 "const _Vue = Vue
 
 return function render() {
@@ -14,7 +14,7 @@ return function render() {
 }"
 `;
 
-exports[`compiler: transform v-if codegen template v-if 1`] = `
+exports[`compiler: v-if codegen template v-if 1`] = `
 "const _Vue = Vue
 
 return function render() {
@@ -32,7 +32,7 @@ return function render() {
 }"
 `;
 
-exports[`compiler: transform v-if codegen v-if + v-else 1`] = `
+exports[`compiler: v-if codegen v-if + v-else 1`] = `
 "const _Vue = Vue
 
 return function render() {
@@ -46,7 +46,7 @@ return function render() {
 }"
 `;
 
-exports[`compiler: transform v-if codegen v-if + v-else-if + v-else 1`] = `
+exports[`compiler: v-if codegen v-if + v-else-if + v-else 1`] = `
 "const _Vue = Vue
 
 return function render() {
@@ -62,7 +62,7 @@ return function render() {
 }"
 `;
 
-exports[`compiler: transform v-if codegen v-if + v-else-if 1`] = `
+exports[`compiler: v-if codegen v-if + v-else-if 1`] = `
 "const _Vue = Vue
 
 return function render() {

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

@@ -27,221 +27,225 @@ function parseWithForTransform(
   return node.children[0]
 }
 
-describe('compiler: transform v-for', () => {
-  test('number expression', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="index in 5" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('index')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('5')
+describe('compiler: v-for', () => {
+  describe('transform', () => {
+    test('number expression', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="index in 5" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('index')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('5')
+    })
+
+    test('value', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="(item) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('object de-structured value', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="({ id, value }) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
+        '{ id, value }'
+      )
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('array de-structured value', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="([ id, value ]) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
+        '[ id, value ]'
+      )
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('value and key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="(item, key) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).not.toBeUndefined()
+      expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('value, key and index', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="(value, key, index) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).not.toBeUndefined()
+      expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('skipped key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="(value,,index) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('skipped value and key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="(,,index) in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect(forNode.valueAlias).toBeUndefined()
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('unbracketed value', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="item in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('unbracketed value and key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="item, key in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).not.toBeUndefined()
+      expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('unbracketed value, key and index', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="value, key, index in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).not.toBeUndefined()
+      expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('unbracketed skipped key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for="value, , index in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
+
+    test('unbracketed skipped value and key', () => {
+      const forNode = parseWithForTransform(
+        '<span v-for=", , index in items" />'
+      ) as ForNode
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).not.toBeUndefined()
+      expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
+        'index'
+      )
+      expect(forNode.valueAlias).toBeUndefined()
+      expect((forNode.source as SimpleExpressionNode).content).toBe('items')
+    })
   })
 
-  test('value', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="(item) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+  describe('errors', () => {
+    test('missing expression', () => {
+      const onError = jest.fn()
+      parseWithForTransform('<span v-for />', { onError })
 
-  test('object de-structured value', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="({ id, value }) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-      '{ id, value }'
-    )
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_FOR_NO_EXPRESSION
+        })
+      )
+    })
 
-  test('array de-structured value', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="([ id, value ]) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-      '[ id, value ]'
-    )
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+    test('empty expression', () => {
+      const onError = jest.fn()
+      parseWithForTransform('<span v-for="" />', { onError })
 
-  test('value and key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="(item, key) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).not.toBeUndefined()
-    expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
 
-  test('value, key and index', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="(value, key, index) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).not.toBeUndefined()
-    expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+    test('invalid expression', () => {
+      const onError = jest.fn()
+      parseWithForTransform('<span v-for="items" />', { onError })
 
-  test('skipped key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="(value,,index) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
 
-  test('skipped value and key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="(,,index) in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect(forNode.valueAlias).toBeUndefined()
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+    test('missing source', () => {
+      const onError = jest.fn()
+      parseWithForTransform('<span v-for="item in" />', { onError })
 
-  test('unbracketed value', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="item in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
 
-  test('unbracketed value and key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="item, key in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).not.toBeUndefined()
-    expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
-    expect(forNode.objectIndexAlias).toBeUndefined()
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
+    test('missing value', () => {
+      const onError = jest.fn()
+      parseWithForTransform('<span v-for="in items" />', { onError })
 
-  test('unbracketed value, key and index', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="value, key, index in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).not.toBeUndefined()
-    expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
-
-  test('unbracketed skipped key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for="value, , index in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
-
-  test('unbracketed skipped value and key', () => {
-    const forNode = parseWithForTransform(
-      '<span v-for=", , index in items" />'
-    ) as ForNode
-    expect(forNode.keyAlias).toBeUndefined()
-    expect(forNode.objectIndexAlias).not.toBeUndefined()
-    expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-      'index'
-    )
-    expect(forNode.valueAlias).toBeUndefined()
-    expect((forNode.source as SimpleExpressionNode).content).toBe('items')
-  })
-
-  test('missing expression', () => {
-    const onError = jest.fn()
-    parseWithForTransform('<span v-for />', { onError })
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        code: ErrorCodes.X_FOR_NO_EXPRESSION
-      })
-    )
-  })
-
-  test('empty expression', () => {
-    const onError = jest.fn()
-    parseWithForTransform('<span v-for="" />', { onError })
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
-      })
-    )
-  })
-
-  test('invalid expression', () => {
-    const onError = jest.fn()
-    parseWithForTransform('<span v-for="items" />', { onError })
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
-      })
-    )
-  })
-
-  test('missing source', () => {
-    const onError = jest.fn()
-    parseWithForTransform('<span v-for="item in" />', { onError })
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
-      })
-    )
-  })
-
-  test('missing value', () => {
-    const onError = jest.fn()
-    parseWithForTransform('<span v-for="in items" />', { onError })
-
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
-      })
-    )
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
   })
 
   describe('source location', () => {
@@ -534,4 +538,10 @@ describe('compiler: transform v-for', () => {
       })
     })
   })
+
+  describe('codegen', () => {
+    test('basic v-for', () => {})
+
+    test('', () => {})
+  })
 })

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

@@ -45,142 +45,144 @@ function parseWithIfTransform(
   }
 }
 
-describe('compiler: transform v-if', () => {
-  test('basic v-if', () => {
-    const { node } = parseWithIfTransform(`<div v-if="ok"/>`)
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(1)
-    expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-      `ok`
-    )
-    expect(node.branches[0].children.length).toBe(1)
-    expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((node.branches[0].children[0] as ElementNode).tag).toBe(`div`)
-  })
-
-  test('template v-if', () => {
-    const { node } = parseWithIfTransform(
-      `<template v-if="ok"><div/>hello<p/></template>`
-    )
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(1)
-    expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-      `ok`
-    )
-    expect(node.branches[0].children.length).toBe(3)
-    expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((node.branches[0].children[0] as ElementNode).tag).toBe(`div`)
-    expect(node.branches[0].children[1].type).toBe(NodeTypes.TEXT)
-    expect((node.branches[0].children[1] as TextNode).content).toBe(`hello`)
-    expect(node.branches[0].children[2].type).toBe(NodeTypes.ELEMENT)
-    expect((node.branches[0].children[2] as ElementNode).tag).toBe(`p`)
-  })
-
-  test('v-if + v-else', () => {
-    const { node } = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(2)
-
-    const b1 = node.branches[0]
-    expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
-    expect(b1.children.length).toBe(1)
-    expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b1.children[0] as ElementNode).tag).toBe(`div`)
-
-    const b2 = node.branches[1]
-    expect(b2.condition).toBeUndefined()
-    expect(b2.children.length).toBe(1)
-    expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b2.children[0] as ElementNode).tag).toBe(`p`)
-  })
-
-  test('v-if + v-else-if', () => {
-    const { node } = parseWithIfTransform(
-      `<div v-if="ok"/><p v-else-if="orNot"/>`
-    )
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(2)
-
-    const b1 = node.branches[0]
-    expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
-    expect(b1.children.length).toBe(1)
-    expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b1.children[0] as ElementNode).tag).toBe(`div`)
-
-    const b2 = node.branches[1]
-    expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
-    expect(b2.children.length).toBe(1)
-    expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b2.children[0] as ElementNode).tag).toBe(`p`)
-  })
-
-  test('v-if + v-else-if + v-else', () => {
-    const { node } = parseWithIfTransform(
-      `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
-    )
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(3)
-
-    const b1 = node.branches[0]
-    expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
-    expect(b1.children.length).toBe(1)
-    expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b1.children[0] as ElementNode).tag).toBe(`div`)
-
-    const b2 = node.branches[1]
-    expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
-    expect(b2.children.length).toBe(1)
-    expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b2.children[0] as ElementNode).tag).toBe(`p`)
-
-    const b3 = node.branches[2]
-    expect(b3.condition).toBeUndefined()
-    expect(b3.children.length).toBe(1)
-    expect(b3.children[0].type).toBe(NodeTypes.TEXT)
-    expect((b3.children[0] as TextNode).content).toBe(`fine`)
-  })
-
-  test('comment between branches', () => {
-    const { node } = parseWithIfTransform(`
-      <div v-if="ok"/>
-      <!--foo-->
-      <p v-else-if="orNot"/>
-      <!--bar-->
-      <template v-else>fine</template>
-    `)
-    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.branches.length).toBe(3)
-
-    const b1 = node.branches[0]
-    expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
-    expect(b1.children.length).toBe(1)
-    expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
-    expect((b1.children[0] as ElementNode).tag).toBe(`div`)
-
-    const b2 = node.branches[1]
-    expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
-    expect(b2.children.length).toBe(2)
-    expect(b2.children[0].type).toBe(NodeTypes.COMMENT)
-    expect((b2.children[0] as CommentNode).content).toBe(`foo`)
-    expect(b2.children[1].type).toBe(NodeTypes.ELEMENT)
-    expect((b2.children[1] as ElementNode).tag).toBe(`p`)
-
-    const b3 = node.branches[2]
-    expect(b3.condition).toBeUndefined()
-    expect(b3.children.length).toBe(2)
-    expect(b3.children[0].type).toBe(NodeTypes.COMMENT)
-    expect((b3.children[0] as CommentNode).content).toBe(`bar`)
-    expect(b3.children[1].type).toBe(NodeTypes.TEXT)
-    expect((b3.children[1] as TextNode).content).toBe(`fine`)
-  })
-
-  test('should prefix v-if condition', () => {
-    const { node } = parseWithIfTransform(`<div v-if="ok"/>`, {
-      prefixIdentifiers: true
+describe('compiler: v-if', () => {
+  describe('transform', () => {
+    test('basic v-if', () => {
+      const { node } = parseWithIfTransform(`<div v-if="ok"/>`)
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(1)
+      expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
+        `ok`
+      )
+      expect(node.branches[0].children.length).toBe(1)
+      expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.branches[0].children[0] as ElementNode).tag).toBe(`div`)
     })
-    expect(node.branches[0].condition).toMatchObject({
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.ok`
+
+    test('template v-if', () => {
+      const { node } = parseWithIfTransform(
+        `<template v-if="ok"><div/>hello<p/></template>`
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(1)
+      expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
+        `ok`
+      )
+      expect(node.branches[0].children.length).toBe(3)
+      expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((node.branches[0].children[0] as ElementNode).tag).toBe(`div`)
+      expect(node.branches[0].children[1].type).toBe(NodeTypes.TEXT)
+      expect((node.branches[0].children[1] as TextNode).content).toBe(`hello`)
+      expect(node.branches[0].children[2].type).toBe(NodeTypes.ELEMENT)
+      expect((node.branches[0].children[2] as ElementNode).tag).toBe(`p`)
+    })
+
+    test('v-if + v-else', () => {
+      const { node } = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(2)
+
+      const b1 = node.branches[0]
+      expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect(b1.children.length).toBe(1)
+      expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b1.children[0] as ElementNode).tag).toBe(`div`)
+
+      const b2 = node.branches[1]
+      expect(b2.condition).toBeUndefined()
+      expect(b2.children.length).toBe(1)
+      expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b2.children[0] as ElementNode).tag).toBe(`p`)
+    })
+
+    test('v-if + v-else-if', () => {
+      const { node } = parseWithIfTransform(
+        `<div v-if="ok"/><p v-else-if="orNot"/>`
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(2)
+
+      const b1 = node.branches[0]
+      expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect(b1.children.length).toBe(1)
+      expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b1.children[0] as ElementNode).tag).toBe(`div`)
+
+      const b2 = node.branches[1]
+      expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
+      expect(b2.children.length).toBe(1)
+      expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b2.children[0] as ElementNode).tag).toBe(`p`)
+    })
+
+    test('v-if + v-else-if + v-else', () => {
+      const { node } = parseWithIfTransform(
+        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
+      )
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(3)
+
+      const b1 = node.branches[0]
+      expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect(b1.children.length).toBe(1)
+      expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b1.children[0] as ElementNode).tag).toBe(`div`)
+
+      const b2 = node.branches[1]
+      expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
+      expect(b2.children.length).toBe(1)
+      expect(b2.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b2.children[0] as ElementNode).tag).toBe(`p`)
+
+      const b3 = node.branches[2]
+      expect(b3.condition).toBeUndefined()
+      expect(b3.children.length).toBe(1)
+      expect(b3.children[0].type).toBe(NodeTypes.TEXT)
+      expect((b3.children[0] as TextNode).content).toBe(`fine`)
+    })
+
+    test('comment between branches', () => {
+      const { node } = parseWithIfTransform(`
+        <div v-if="ok"/>
+        <!--foo-->
+        <p v-else-if="orNot"/>
+        <!--bar-->
+        <template v-else>fine</template>
+      `)
+      expect(node.type).toBe(NodeTypes.IF)
+      expect(node.branches.length).toBe(3)
+
+      const b1 = node.branches[0]
+      expect((b1.condition as SimpleExpressionNode).content).toBe(`ok`)
+      expect(b1.children.length).toBe(1)
+      expect(b1.children[0].type).toBe(NodeTypes.ELEMENT)
+      expect((b1.children[0] as ElementNode).tag).toBe(`div`)
+
+      const b2 = node.branches[1]
+      expect((b2.condition as SimpleExpressionNode).content).toBe(`orNot`)
+      expect(b2.children.length).toBe(2)
+      expect(b2.children[0].type).toBe(NodeTypes.COMMENT)
+      expect((b2.children[0] as CommentNode).content).toBe(`foo`)
+      expect(b2.children[1].type).toBe(NodeTypes.ELEMENT)
+      expect((b2.children[1] as ElementNode).tag).toBe(`p`)
+
+      const b3 = node.branches[2]
+      expect(b3.condition).toBeUndefined()
+      expect(b3.children.length).toBe(2)
+      expect(b3.children[0].type).toBe(NodeTypes.COMMENT)
+      expect((b3.children[0] as CommentNode).content).toBe(`bar`)
+      expect(b3.children[1].type).toBe(NodeTypes.TEXT)
+      expect((b3.children[1] as TextNode).content).toBe(`fine`)
+    })
+
+    test('should prefix v-if condition', () => {
+      const { node } = parseWithIfTransform(`<div v-if="ok"/>`, {
+        prefixIdentifiers: true
+      })
+      expect(node.branches[0].condition).toMatchObject({
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `_ctx.ok`
+      })
     })
   })