fix: support async components in stubs (#1039)

Fixes #1026
vuejs · Nov 25, 2018 · 6a4e19d · 6a4e19d
1 parent e1fd705
commit 6a4e19d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 13 deletions.
diff --git a/packages/shared/create-component-stubs.js → ...create-instance/create-component-stubs.js b/packages/shared/create-component-stubs.js → ...create-instance/create-component-stubs.js
@@ -6,16 +6,16 @@ import {
   camelize,
   capitalize,
   hyphenate
-} from './util'
+} from '../shared/util'
 import {
   componentNeedsCompiling,
   templateContainsComponent,
   isVueComponent
-} from './validators'
+} from '../shared/validators'
 import {
   compileTemplate,
   compileFromString
-} from './compile-template'
+} from '../shared/compile-template'
 
 function isVueComponentStub (comp): boolean {
   return comp && comp.template || isVueComponent(comp)
@@ -68,10 +68,12 @@ export function createStubFromComponent (
   originalComponent: Component,
   name: string
 ): Component {
-  const componentOptions = typeof originalComponent === 'function'
-    ? originalComponent.extendOptions
-    : originalComponent
-  const tagName = `${name}-stub`
+  const componentOptions =
+    typeof originalComponent === 'function' && originalComponent.cid
+      ? originalComponent.extendOptions
+      : originalComponent
+
+  const tagName = `${name || 'anonymous'}-stub`
 
   // ignoreElements does not exist in Vue 2.0.x
   if (Vue.config.ignoredElements) {
@@ -112,9 +114,10 @@ export function createStubFromString (
     throwError('options.stub cannot contain a circular reference')
   }
 
-  const componentOptions = typeof originalComponent === 'function'
-    ? originalComponent.extendOptions
-    : originalComponent
+  const componentOptions =
+    typeof originalComponent === 'function' && originalComponent.cid
+      ? originalComponent.extendOptions
+      : originalComponent
 
   return {
     ...getCoreProperties(componentOptions),
@@ -152,9 +155,10 @@ export function createStubsFromStubsObject (
     }
 
     if (typeof stub === 'string') {
+      const component = resolveComponent(originalComponents, stubName)
       acc[stubName] = createStubFromString(
         stub,
-        originalComponents[stubName],
+        component,
         stubName
       )
       return acc

diff --git a/packages/create-instance/create-instance.js b/packages/create-instance/create-instance.js
@@ -14,7 +14,7 @@ import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling, isPlainObject } from 'shared/validators'
 import { validateSlots } from './validate-slots'
 import createScopedSlots from './create-scoped-slots'
-import { createStubsFromStubsObject } from 'shared/create-component-stubs'
+import { createStubsFromStubsObject } from './create-component-stubs'
 import { patchRender } from './patch-render'
 
 function vueExtendUnsupportedOption (option: string) {

diff --git a/packages/create-instance/patch-render.js b/packages/create-instance/patch-render.js
@@ -1,4 +1,4 @@
-import { createStubFromComponent } from 'shared/create-component-stubs'
+import { createStubFromComponent } from './create-component-stubs'
 import { resolveComponent, semVerGreaterThan } from 'shared/util'
 import { isReservedTag } from 'shared/validators'
 import { addHook } from './add-hook'

diff --git a/test/specs/mounting-options/stubs.spec.js b/test/specs/mounting-options/stubs.spec.js
@@ -532,4 +532,39 @@ describeWithMountingMethods('options.stub', mountingMethod => {
       expect(fn).to.throw()
         .with.property('message', message)
     })
+
+  it('works with async components', () => {
+    const StubComponent = {
+      template: '<h1 />'
+    }
+    const TestComponent = {
+      template: `<div>
+      <dynamic-hello />
+      <dynamic-hello-2 />
+      <dynamic-hello-3 />
+      </div>`,
+      components: {
+        DynamicHello: () => import('~resources/components/component.vue'),
+        DynamicHello2: () => import('~resources/components/component.vue'),
+        DynamicHello3: () => import('~resources/components/component.vue')
+      }
+    }
+    const wrapper = mountingMethod(TestComponent, {
+      stubs: {
+        DynamicHello: '<span />',
+        DynamicHello2: true,
+        DynamicHello3: StubComponent
+      }
+    })
+    const HTML =
+    mountingMethod.name === 'renderToString' ? wrapper : wrapper.html()
+
+    expect(HTML).to.contain('span')
+    expect(HTML).to.contain(
+      mountingMethod.name === 'renderToString'
+        ? 'DynamicHello2-stub'
+        : 'dynamichello2-stub'
+    )
+    expect(HTML).to.contain('h1')
+  })
 })