test: test runtime compilation error warning

diff --git a/packages/runtime-core/__tests__/apiApp.spec.ts b/packages/runtime-core/__tests__/apiApp.spec.ts
index a559f5ed4eef1f5f7544640ede128611ebf65744..3eb340206caf75947946ba0857d9b8dbacf7a21d 100644 (file)
--- a/packages/runtime-core/__tests__/apiApp.spec.ts
+++ b/packages/runtime-core/__tests__/apiApp.spec.ts
@@ -270,7 +270,7 @@ describe('api: createApp', () => {
 
     const handler = (app.config.warnHandler = jest.fn(
       (msg, instance, trace) => {
-        expect(msg).toMatch(`Component is missing render function`)
+        expect(msg).toMatch(`Component is missing template or render function`)
         expect(instance).toBe(ctx.renderProxy)
         expect(trace).toMatch(`Hello`)
       }

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 0b6da59c54577d21f4e3081d42298396c27dc5e2..c0583746b8fa4c1b46a08630c0c8c7e40571c2a7 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -348,37 +348,40 @@ function finishComponentSetup(
   const Component = instance.type as ComponentOptions
   if (!instance.render) {
     if (__RUNTIME_COMPILE__ && Component.template && !Component.render) {
-      if (compile) {
-        Component.render = compile(Component.template, {
-          isCustomElement: instance.appContext.config.isCustomElement || NO,
-          onError(err: CompilerError) {
-            if (__DEV__) {
-              const message = `Template compilation error: ${err.message}`
-              const codeFrame =
-                err.loc &&
-                generateCodeFrame(
-                  Component.template!,
-                  err.loc.start.offset,
-                  err.loc.end.offset
-                )
-              warn(codeFrame ? `${message}\n${codeFrame}` : message)
-            }
+      // __RUNTIME_COMPILE__ ensures `compile` is provided
+      Component.render = compile!(Component.template, {
+        isCustomElement: instance.appContext.config.isCustomElement || NO,
+        onError(err: CompilerError) {
+          if (__DEV__) {
+            const message = `Template compilation error: ${err.message}`
+            const codeFrame =
+              err.loc &&
+              generateCodeFrame(
+                Component.template!,
+                err.loc.start.offset,
+                err.loc.end.offset
+              )
+            warn(codeFrame ? `${message}\n${codeFrame}` : message)
           }
-        })
-      } else if (__DEV__) {
+        }
+      })
+    }
+    if (__DEV__ && !Component.render) {
+      /* istanbul ignore if */
+      if (!__RUNTIME_COMPILE__ && Component.template) {
         warn(
           `Component provides template but the build of Vue you are running ` +
             `does not support on-the-fly template compilation. Either use the ` +
             `full build or pre-compile the template using Vue CLI.`
         )
+      } else {
+        warn(
+          `Component is missing${
+            __RUNTIME_COMPILE__ ? ` template or` : ``
+          } render function.`
+        )
       }
     }
-    if (__DEV__ && !Component.render) {
-      warn(
-        `Component is missing render function. Either provide a template or ` +
-          `return a render function from setup().`
-      )
-    }
     instance.render = (Component.render || NOOP) as RenderFunction
   }
 

diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index d121360dbc8989ed7406f4f2b0aa54604136a488..b6676b1fe8aa8490d3d042e93b06ba5ba58fdc19 100644 (file)
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -1,42 +1,48 @@
 import { createApp } from '../src'
+import { mockWarn } from '@vue/runtime-test'
 
-it('should support on-the-fly template compilation', () => {
-  const container = document.createElement('div')
-  const App = {
-    template: `{{ count }}`,
-    data() {
-      return {
-        count: 0
+describe('compiler + runtime integration', () => {
+  mockWarn()
+
+  it('should support on-the-fly template compilation', () => {
+    const container = document.createElement('div')
+    const App = {
+      template: `{{ count }}`,
+      data() {
+        return {
+          count: 0
+        }
       }
     }
-  }
-  createApp().mount(App, container)
-  expect(container.innerHTML).toBe(`0`)
-})
+    createApp().mount(App, container)
+    expect(container.innerHTML).toBe(`0`)
+  })
 
-it('should correctly normalize class with on-the-fly template compilation', () => {
-  const container = document.createElement('div')
-  const App = {
-    template: `<div :class="{ test: demoValue, test2: !demoValue }"></div>`,
-    data() {
-      return {
-        demoValue: true
-      }
+  it('should warn template compilation errors with codeframe', () => {
+    const container = document.createElement('div')
+    const App = {
+      template: `<div v-if>`
     }
-  }
-  createApp().mount(App, container)
-  const classes = container.firstElementChild!.classList
-  expect(classes.contains('test')).toBe(true)
-  expect(classes.contains('test2')).toBe(false)
-})
+    createApp().mount(App, container)
+    expect(
+      `Template compilation error: End tag was not found`
+    ).toHaveBeenWarned()
+    expect(`v-if/v-else-if is missing expression`).toHaveBeenWarned()
+    expect(
+      `
+1  |  <div v-if>
+   |       ^^^^`.trim()
+    ).toHaveBeenWarned()
+  })
 
-it('should support custom element', () => {
-  const app = createApp()
-  const container = document.createElement('div')
-  const App = {
-    template: '<custom></custom>'
-  }
-  app.config.isCustomElement = tag => tag === 'custom'
-  app.mount(App, container)
-  expect(container.innerHTML).toBe('<custom></custom>')
+  it('should support custom element', () => {
+    const app = createApp()
+    const container = document.createElement('div')
+    const App = {
+      template: '<custom></custom>'
+    }
+    app.config.isCustomElement = tag => tag === 'custom'
+    app.mount(App, container)
+    expect(container.innerHTML).toBe('<custom></custom>')
+  })
 })