feat: support lazily added components (#1005)

vuejs · Oct 18, 2018 · 3653c60 · 3653c60
1 parent 1576284
commit 3653c60
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 7 deletions.
diff --git a/flow/options.flow.js b/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>;

diff --git a/packages/create-instance/add-stubs.js b/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)

diff --git a/packages/create-instance/create-instance.js b/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) ||

diff --git a/packages/create-instance/extract-instance-options.js b/packages/create-instance/extract-instance-options.js
@@ -12,7 +12,8 @@ const MOUNTING_OPTIONS = [
  'listeners',
  'propsData',
  'logModifiedComponents',
- 'sync'
+ 'sync',
+ 'shouldProxy'
 ]
 
 export default function extractInstanceOptions (

diff --git a/packages/shared/create-component-stubs.js b/packages/shared/create-component-stubs.js
@@ -102,7 +102,7 @@ export function createStubFromComponent (
  }
 }
 
-function createStubFromString (
+export function createStubFromString (
  templateString: string,
  originalComponent: Component = {},
  name: string

diff --git a/packages/test-utils/src/shallow-mount.js b/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)

diff --git a/test/specs/shallow-mount.spec.js b/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', () => {