feat: support lazily added components (#1005)

Author: eddyerburgh

flow/options.flow.js

@@ -14,7 +14,8 @@ declare type Options = {
   listeners?: { [key: string]: Function | Array<Function> },
   parentComponent?: Object,
   logModifiedComponents?: boolean,
-  sync?: boolean
+  sync?: boolean,
+  shouldProxy?: boolean
 };
 
 declare type SlotValue = Component | string | Array<Component | string>;

packages/create-instance/add-stubs.js

@@ -1,7 +1,10 @@
-import { createStubsFromStubsObject } from 'shared/create-component-stubs'
+import {
+  createStubsFromStubsObject,
+  createStubFromComponent
+} from 'shared/create-component-stubs'
 import { addHook } from './add-hook'
 
-export function addStubs (component, stubs, _Vue) {
+export function addStubs (component, stubs, _Vue, shouldProxy) {
   const stubComponents = createStubsFromStubsObject(
     component.components,
     stubs
@@ -12,6 +15,16 @@ export function addStubs (component, stubs, _Vue) {
       this.$options.components,
       stubComponents
     )
+    if (typeof Proxy !== 'undefined' && shouldProxy) {
+      this.$options.components = new Proxy(this.$options.components, {
+        set (target, prop, value) {
+          if (!target[prop]) {
+            target[prop] = createStubFromComponent(value, prop)
+          }
+          return true
+        }
+      })
+    }
   }
 
   addHook(_Vue.options, 'beforeMount', addStubComponentsMixin)

packages/create-instance/create-instance.js

@@ -59,7 +59,7 @@ export default function createInstance (
 
   addEventLogger(_Vue)
   addMocks(options.mocks, _Vue)
-  addStubs(component, options.stubs, _Vue)
+  addStubs(component, options.stubs, _Vue, options.shouldProxy)
 
   if (
     (component.options && component.options.functional) ||

packages/create-instance/extract-instance-options.js

@@ -12,7 +12,8 @@ const MOUNTING_OPTIONS = [
   'listeners',
   'propsData',
   'logModifiedComponents',
-  'sync'
+  'sync',
+  'shouldProxy'
 ]
 
 export default function extractInstanceOptions (

packages/shared/create-component-stubs.js

@@ -102,7 +102,7 @@ export function createStubFromComponent (
   }
 }
 
-function createStubFromString (
+export function createStubFromString (
   templateString: string,
   originalComponent: Component = {},
   name: string

packages/test-utils/src/shallow-mount.js

@@ -31,6 +31,7 @@ export default function shallowMount (
 
   return mount(component, {
     ...options,
+    shouldProxy: true,
     components: {
       ...createStubsForComponent(_Vue),
       ...createStubsForComponent(component)

test/specs/shallow-mount.spec.js

@@ -9,7 +9,7 @@ import ComponentWithoutName from '~resources/components/component-without-name.v
 import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
 import { vueVersion } from '~resources/utils'
-import { describeRunIf, itDoNotRunIf } from 'conditional-specs'
+import { describeRunIf, itDoNotRunIf, itSkipIf } from 'conditional-specs'
 
 describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
   beforeEach(() => {
@@ -389,6 +389,25 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       .to.equal('hey')
   })
 
+  itSkipIf(
+    typeof Proxy === 'undefined',
+    'stubs lazily registered components', () => {
+      const Child = {
+        render: h => h('p')
+      }
+      const TestComponent = {
+        template: '<div><child /></div>',
+        beforeCreate () {
+          this.$options.components.Child = Child
+        }
+      }
+      const wrapper = shallowMount(TestComponent)
+
+      expect(wrapper.findAll('p').length)
+        .to.equal(0)
+      expect(wrapper.findAll(Child).length).to.equal(1)
+    })
+
   itDoNotRunIf(
     vueVersion < 2.4, // auto resolve of default export added in 2.4
     'handles component as dynamic import', () => {