fix: stub extended component children in shallow

Author: eddyerburgh

src/lib/stub-components.js

@@ -112,25 +112,44 @@ export function createComponentStubs (originalComponents: Object = {}, stubs: Ob
   return components
 }
 
-export function createComponentStubsForAll (component: Component): Object {
-  const components = {}
-  if (!component.components) {
-    return components
-  }
-  Object.keys(component.components).forEach(c => {
+function stubComponents (components: Object, stubbedComponents: Object) {
+  Object.keys(components).forEach(component => {
     // Remove cached constructor
-    delete component.components[c]._Ctor
-    if (!component.components[c].name) {
-      component.components[c].name = c
+    delete components[component]._Ctor
+    if (!components[component].name) {
+      components[component].name = component
     }
-    components[c] = createBlankStub(component.components[c])
+    stubbedComponents[component] = createBlankStub(components[component])
 
     // ignoreElements does not exist in Vue 2.0.x
     if (Vue.config.ignoredElements) {
-      Vue.config.ignoredElements.push(c)
+      Vue.config.ignoredElements.push(component)
     }
   })
-  return components
+}
+
+export function createComponentStubsForAll (component: Component): Object {
+  const stubbedComponents = {}
+
+  if (component.components) {
+    stubComponents(component.components, stubbedComponents)
+  }
+
+  let extended = component.extends
+
+  // Loop through extended component chains to stub all child components
+  while (extended) {
+    if (extended.components) {
+      stubComponents(extended.components, stubbedComponents)
+    }
+    extended = extended.extends
+  }
+
+  if (component.extendOptions && component.extendOptions.components) {
+    stubComponents(component.extendOptions.components, stubbedComponents)
+  }
+
+  return stubbedComponents
 }
 
 export function createComponentStubsForGlobals (instance: Component): Object {

src/shallow.js

@@ -29,13 +29,13 @@ export default function shallow (
 
   const stubbedComponents = createComponentStubsForAll(component)
   const stubbedGlobalComponents = createComponentStubsForGlobals(vue)
+
   return mount(component, {
     ...options,
     components: {
       // stubbed components are used instead of original components components
       ...stubbedGlobalComponents,
-      ...stubbedComponents,
-      ...options
+      ...stubbedComponents
     }
   })
 }

test/resources/components/component-as-a-class-with-child.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <a-component />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import AComponent from './component.vue'
+
+@Component({
+  components: {
+    AComponent
+  }
+})
+export default class CogPage extends Vue {}
+</script>

test/unit/specs/shallow.spec.js

@@ -6,7 +6,9 @@ import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue'
 import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
+import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
+import { vueVersion } from '~resources/test-utils'
 
 describe('shallow', () => {
   let info
@@ -75,6 +77,67 @@ describe('shallow', () => {
     expect(info.called).to.equal(false)
   })
 
+  it('stubs extended components', () => {
+    const ComponentWithPTag = {
+      template: `<p></p>`
+    }
+    const BaseComponent = {
+      template: `
+        <div>
+          <component-with-p-tag />
+        </div>
+      `,
+      components: {
+        ComponentWithPTag
+      }
+    }
+
+    const TestComponent = {
+      extends: BaseComponent
+    }
+
+    const wrapper = shallow(TestComponent)
+    expect(wrapper.find(ComponentWithPTag).exists()).to.equal(true)
+    expect(wrapper.find('p').exists()).to.equal(false)
+  })
+
+  it('stubs nested extended components', () => {
+    const ComponentWithPTag = {
+      template: `<p></p>`
+    }
+    const BaseComponent = {
+      template: `
+        <div>
+          <component-with-p-tag />
+        </div>
+      `,
+      components: {
+        ComponentWithPTag
+      }
+    }
+
+    const ExtendedBaseComponent = {
+      extends: BaseComponent
+    }
+
+    const TestComponent = {
+      extends: ExtendedBaseComponent
+    }
+
+    const wrapper = shallow(TestComponent)
+    expect(wrapper.find(ComponentWithPTag).exists()).to.equal(true)
+    expect(wrapper.find('p').exists()).to.equal(false)
+  })
+
+  it('stubs Vue class component children', () => {
+    if(vueVersion < 2.3) {
+      return
+    }
+    const wrapper = shallow(ComponentAsAClassWithChild)
+    expect(wrapper.find(Component).exists()).to.equal(true)
+    expect(wrapper.findAll('div').length).to.equal(1)
+  })
+
   it('works correctly with find, contains, findAll, and is on unnamed components', () => {
     const TestComponent = {
       template: `