fix: wrap extended child components

packages/create-instance/create-instance.js

@@ -4,13 +4,14 @@ import { createSlotVNodes } from './add-slots'
 import addMocks from './add-mocks'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
-import { throwError, warn, vueVersion } from 'shared/util'
+import { throwError, vueVersion } from 'shared/util'
 import { compileTemplate } from 'shared/compile-template'
 import extractInstanceOptions from './extract-instance-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling } from 'shared/validators'
 import { validateSlots } from './validate-slots'
 import createScopedSlots from './create-scoped-slots'
+import { extendExtendedComponents } from './extend-extended-components'
 
 export default function createInstance (
   component: Component,
@@ -27,9 +28,6 @@ export default function createInstance (
   // root instance when it's instantiated
   //
   // component options are the root components options
-  const componentOptions = typeof component === 'function'
-    ? component.extendOptions
-    : component
 
   const instanceOptions = extractInstanceOptions(options)
 
@@ -59,13 +57,15 @@ export default function createInstance (
     // $FlowIgnore
     options.stubs
   )
-  if (options.stubs) {
-    instanceOptions.components = {
-      ...instanceOptions.components,
-      // $FlowIgnore
-      ...stubComponents
-    }
-  }
+
+  extendExtendedComponents(
+    component,
+    _Vue,
+    options.logModifiedComponents,
+    instanceOptions.components
+  )
+
+  // stub components should override every component defined in a component
   _Vue.mixin({
     created () {
       Object.assign(
@@ -74,26 +74,6 @@ export default function createInstance (
       )
     }
   })
-  Object.keys(componentOptions.components || {}).forEach(c => {
-    if (
-      componentOptions.components[c].extendOptions &&
-      !instanceOptions.components[c]
-    ) {
-      if (options.logModifiedComponents) {
-        warn(
-          `an extended child component <${c}> has been modified ` +
-          `to ensure it has the correct instance properties. ` +
-          `This means it is not possible to find the component ` +
-          `with a component selector. To find the component, ` +
-          `you must stub it manually using the stubs mounting ` +
-          `option.`
-        )
-      }
-      instanceOptions.components[c] = _Vue.extend(
-        componentOptions.components[c]
-      )
-    }
-  })
 
   if (component.options) {
     component.options._base = _Vue
@@ -103,9 +83,10 @@ export default function createInstance (
     ? component.extend(instanceOptions)
     : _Vue.extend(component).extend(instanceOptions)
 
-  Object.keys(instanceOptions.components || {}).forEach(key => {
-    Constructor.component(key, instanceOptions.components[key])
-    _Vue.component(key, instanceOptions.components[key])
+  Constructor._vueTestUtilsRoot = component
+
+  Object.keys(instanceOptions.components || {}).forEach(c => {
+    Constructor.component(c, instanceOptions.components[c])
   })
 
   if (options.slots) {

packages/create-instance/extend-extended-components.js

@@ -0,0 +1,100 @@
+import { warn } from 'shared/util'
+
+function createdFrom (extendOptions, componentOptions) {
+  while (extendOptions) {
+    if (extendOptions === componentOptions) {
+      return true
+    }
+    if (extendOptions._vueTestUtilsRoot === componentOptions) {
+      return true
+    }
+    extendOptions = extendOptions.extendOptions
+  }
+}
+
+function resolveComponents (options = {}, components = {}) {
+  let extendOptions = options.extendOptions
+  while (extendOptions) {
+    resolveComponents(extendOptions, components)
+    extendOptions = extendOptions.extendOptions
+  }
+  let extendsFrom = options.extends
+  while (extendsFrom) {
+    resolveComponents(extendsFrom, components)
+    extendsFrom = extendsFrom.extends
+  }
+  Object.keys(options.components || {}).forEach((c) => {
+    components[c] = options.components[c]
+  })
+  return components
+}
+
+function shouldExtend (component) {
+  while (component) {
+    if (component.extendOptions) {
+      return true
+    }
+    component = component.extends
+  }
+}
+
+// Components created with Vue.extend will not inherit from
+// a localVue constructor by default. To make sure they inherit
+// from a localVue constructor, we must create new components by
+// extending the original extended components from the localVue constructor.
+// The registered original extended components should only be
+// overwritten in the component that they are registered on.
+// We apply a global mixin that overwrites the components original
+// components with the extended components when they are created.
+export function extendExtendedComponents (
+  component,
+  _Vue,
+  logModifiedComponents,
+  excludedComponents = { },
+  stubAllComponents = false
+) {
+  const extendedComponents = Object.create(null)
+  const components = resolveComponents(component)
+
+  Object.keys(components).forEach(c => {
+    const comp = components[c]
+    const shouldExtendComponent =
+      (shouldExtend(comp) &&
+      !excludedComponents[c]) ||
+      stubAllComponents
+    if (shouldExtendComponent) {
+      if (logModifiedComponents) {
+        warn(
+          `an extended child component <${c}> has been modified ` +
+          `to ensure it has the correct instance properties. ` +
+          `This means it is not possible to find the component ` +
+          `with a component selector. To find the component, ` +
+          `you must stub it manually using the stubs mounting ` +
+          `option.`
+        )
+      }
+      extendedComponents[c] = _Vue.extend(comp)
+    }
+    // If a component has been replaced with an extended component
+    // all its child components must also be replaced.
+    extendExtendedComponents(
+      comp,
+      _Vue,
+      logModifiedComponents,
+      {},
+      shouldExtendComponent
+    )
+  })
+  if (extendedComponents) {
+    _Vue.mixin({
+      created () {
+        if (createdFrom(this.constructor, component)) {
+          Object.assign(
+            this.$options.components,
+            extendedComponents
+          )
+        }
+      }
+    })
+  }
+}

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

@@ -10,13 +10,18 @@ const MOUNTING_OPTIONS = [
   'clone',
   'attrs',
   'listeners',
-  'propsData'
+  'propsData',
+  'logModifiedComponents',
+  'sync'
 ]
 
 export default function extractInstanceOptions (
   options: Object
 ): Object {
-  const instanceOptions = { ...options }
+  const instanceOptions = {
+    ...options,
+    _vueTestUtilsRootExtendOptions: true
+  }
   MOUNTING_OPTIONS.forEach(mountingOption => {
     delete instanceOptions[mountingOption]
   })

packages/shared/stub-components.js

@@ -235,8 +235,12 @@ export function createComponentStubsForAll (component: Component): Components {
     extended = extended.extends
   }
 
-  if (component.extendOptions && component.extendOptions.components) {
-    stubComponents(component.extendOptions.components, stubbedComponents)
+  let extendOptions = component.extendOptions
+  while (extendOptions) {
+    if (extendOptions && extendOptions.components) {
+      stubComponents(extendOptions.components, stubbedComponents)
+    }
+    extendOptions = extendOptions.extendOptions
   }
 
   return stubbedComponents

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

@@ -14,7 +14,7 @@ export default function shallowMount (
   component: Component,
   options: Options = {}
 ): VueWrapper {
-  const vue = options.localVue || Vue
+  const _Vue = options.localVue || Vue
 
   // remove any recursive components added to the constructor
   // in vm._init from previous tests
@@ -26,7 +26,7 @@ export default function shallowMount (
   return mount(component, {
     ...options,
     components: {
-      ...createComponentStubsForGlobals(vue),
+      ...createComponentStubsForGlobals(_Vue),
       ...createComponentStubsForAll(component)
     }
   })

test/specs/mounting-options/localVue.spec.js

@@ -28,54 +28,115 @@ describeWithMountingMethods('options.localVue', mountingMethod => {
     }
   )
 
-  itSkipIf(vueVersion < 2.3, 'works correctly with extended children', () => {
-    const localVue = createLocalVue()
-    localVue.use(Vuex)
-    const store = new Vuex.Store({
-      state: { val: 2 }
-    })
-    const ChildComponent = Vue.extend({
-      template: '<span>{{val}}</span>',
-      computed: {
-        val () {
-          return this.$store.state.val
+  itSkipIf(
+    vueVersion < 2.3,
+    'works correctly with extended children', () => {
+      const localVue = createLocalVue()
+      localVue.use(Vuex)
+      const store = new Vuex.Store({
+        state: { val: 2 }
+      })
+      const ChildComponent = Vue.extend({
+        template: '<span>{{val}}</span>',
+        computed: {
+          val () {
+            return this.$store.state.val
+          }
+        }
+      })
+      const TestComponent = {
+        template: '<div><child-component /></div>',
+        components: {
+          ChildComponent
         }
       }
-    })
-    const TestComponent = {
-      template: '<div><child-component /></div>',
-      components: {
-        ChildComponent
+      const wrapper = mountingMethod(TestComponent, {
+        localVue,
+        store
+      })
+      const HTML =
+      mountingMethod.name === 'renderToString' ? wrapper : wrapper.html()
+      if (mountingMethod.name === 'shallowMount') {
+        expect(HTML).to.not.contain('2')
+      } else {
+        expect(HTML).to.contain('2')
       }
-    }
-    const wrapper = mountingMethod(TestComponent, {
-      localVue,
-      store
     })
-    const HTML =
-      mountingMethod.name === 'renderToString' ? wrapper : wrapper.html()
-    if (mountingMethod.name === 'shallowMount') {
-      expect(HTML).to.not.contain('2')
-    } else {
-      expect(HTML).to.contain('2')
-    }
-  })
 
-  it('is applies to child extended components', () => {
-    const ChildComponent = Vue.extend({
-      template: '<div>{{$route.params}}</div>'
-    })
-    const TestComponent = Vue.extend({
-      template: '<child-component />',
-      components: { ChildComponent }
+  itSkipIf(
+    vueVersion < 2.3,
+    'is applied to deeply extended components', () => {
+      const GrandChildComponent = Vue.extend(Vue.extend({
+        template: '<div>{{$route.params}}</div>'
+      }))
+      const ChildComponent = Vue.extend(Vue.extend(Vue.extend({
+        template: '<div><grand-child-component />{{$route.params}}</div>',
+        components: {
+          GrandChildComponent
+        }
+      })))
+      const TestComponent = Vue.extend(Vue.extend({
+        template: '<child-component />',
+        components: { ChildComponent }
+      }))
+      const localVue = createLocalVue()
+      localVue.prototype.$route = {}
+
+      mountingMethod(TestComponent, {
+        localVue
+      })
     })
+
+  it('is applied to components that extend from other components', () => {
     const localVue = createLocalVue()
     localVue.prototype.$route = {}
+
+    const Extends = {
+      created () {
+        console.log(this.$route.params)
+      }
+    }
+    const TestComponent = {
+      extends: Extends
+    }
     mountingMethod(TestComponent, {
       localVue
     })
   })
 
+  itSkipIf(
+    vueVersion < 2.3,
+    'is applied to mixed extended components', () => {
+      const BaseGrandChildComponent = {
+        created () {
+          this.$route.params
+        }
+      }
+      const GrandChildComponent = {
+        created () {
+          this.$route.params
+        },
+        template: '<div/>',
+        extends: BaseGrandChildComponent
+      }
+      const ChildComponent = Vue.extend(({
+        template: '<div><grand-child-component />{{$route.params}}</div>',
+        components: {
+          GrandChildComponent
+        }
+      }))
+      const TestComponent = Vue.extend(Vue.extend({
+        template: '<div><child-component /></div>',
+        components: { ChildComponent }
+      }))
+      const localVue = createLocalVue()
+      localVue.prototype.$route = {}
+
+      mountingMethod(TestComponent, {
+        localVue
+      })
+    })
+
   it('does not add created mixin to localVue', () => {
     const localVue = createLocalVue()
     mountingMethod({ render: () => {} }, {