fix: stubs extended component correctly (#767)

packages/shared/stub-components.js

@@ -2,7 +2,12 @@
 
 import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
-import { throwError } from './util'
+import {
+ throwError,
+ camelize,
+ capitalize,
+ hyphenate
+} from './util'
 import {
  componentNeedsCompiling,
  templateContainsComponent
@@ -21,28 +26,37 @@ function isValidStub (stub: any) {
  )
 }
 
+function resolveComponent (obj, component) {
+ return obj[component] ||
+ obj[hyphenate(component)] ||
+ obj[camelize(component)] ||
+ obj[capitalize(camelize(component))] ||
+ obj[capitalize(component)] ||
+ {}
+}
+
 function isRequiredComponent (name) {
  return (
  name === 'KeepAlive' || name === 'Transition' || name === 'TransitionGroup'
  )
 }
 
-function getCoreProperties (component: Component): Object {
+function getCoreProperties (componentOptions: Component): Object {
  return {
- attrs: component.attrs,
- name: component.name,
- on: component.on,
- key: component.key,
- ref: component.ref,
- props: component.props,
- domProps: component.domProps,
- class: component.class,
- staticClass: component.staticClass,
- staticStyle: component.staticStyle,
- style: component.style,
- normalizedStyle: component.normalizedStyle,
- nativeOn: component.nativeOn,
- functional: component.functional
+ attrs: componentOptions.attrs,
+ name: componentOptions.name,
+ on: componentOptions.on,
+ key: componentOptions.key,
+ ref: componentOptions.ref,
+ props: componentOptions.props,
+ domProps: componentOptions.domProps,
+ class: componentOptions.class,
+ staticClass: componentOptions.staticClass,
+ staticStyle: componentOptions.staticStyle,
+ style: componentOptions.style,
+ normalizedStyle: componentOptions.normalizedStyle,
+ nativeOn: componentOptions.nativeOn,
+ functional: componentOptions.functional
  }
 }
 function createStubFromString (
@@ -62,24 +76,31 @@ function createStubFromString (
  throwError('options.stub cannot contain a circular reference')
  }
 
+ const componentOptions = typeof originalComponent === 'function'
+ ? originalComponent.extendOptions
+ : originalComponent
+
  return {
- ...getCoreProperties(originalComponent),
+ ...getCoreProperties(componentOptions),
  ...compileToFunctions(templateString)
  }
 }
 
-function createBlankStub (originalComponent: Component) {
- const name = `${originalComponent.name}-stub`
+function createBlankStub (originalComponent: Component, name: string) {
+ const componentOptions = typeof originalComponent === 'function'
+ ? originalComponent.extendOptions
+ : originalComponent
+ const tagName = `${name}-stub`
 
  // ignoreElements does not exist in Vue 2.0.x
  if (Vue.config.ignoredElements) {
- Vue.config.ignoredElements.push(name)
+ Vue.config.ignoredElements.push(tagName)
  }
 
  return {
- ...getCoreProperties(originalComponent),
+ ...getCoreProperties(componentOptions),
  render (h) {
- return h(name)
+ return h(tagName)
  }
  }
 }
@@ -101,7 +122,9 @@ export function createComponentStubs (
  if (typeof stub !== 'string') {
  throwError(`each item in an options.stubs array must be a ` + `string`)
  }
- components[stub] = createBlankStub({ name: stub })
+ const component = resolveComponent(originalComponents, stub)
+
+ components[stub] = createBlankStub(component, stub)
  })
  } else {
  Object.keys(stubs).forEach(stub => {
@@ -114,7 +137,8 @@ export function createComponentStubs (
  )
  }
  if (stubs[stub] === true) {
- components[stub] = createBlankStub({ name: stub })
+ const component = resolveComponent(originalComponents, stub)
+ components[stub] = createBlankStub(component, stub)
  return
  }
 
@@ -162,12 +186,16 @@ export function createComponentStubs (
 
 function stubComponents (components: Object, stubbedComponents: Object) {
  Object.keys(components).forEach(component => {
+ const cmp = components[component]
+ const componentOptions = typeof cmp === 'function'
+ ? cmp.extendOptions
+ : cmp
  // Remove cached constructor
- delete components[component]._Ctor
- if (!components[component].name) {
- components[component].name = component
+ delete componentOptions._Ctor
+ if (!componentOptions.name) {
+ componentOptions.name = component
  }
- stubbedComponents[component] = createBlankStub(components[component])
+ stubbedComponents[component] = createBlankStub(componentOptions, component)
  })
 }
 
@@ -178,7 +206,7 @@ export function createComponentStubsForAll (component: Component): Object {
  stubComponents(component.components, stubbedComponents)
  }
 
- stubbedComponents[component.name] = createBlankStub(component)
+ stubbedComponents[component.name] = createBlankStub(component, component.name)
 
  let extended = component.extends
 
@@ -204,7 +232,7 @@ export function createComponentStubsForGlobals (instance: Component): Object {
  return
  }
 
- components[c] = createBlankStub(instance.options.components[c])
+ components[c] = createBlankStub(instance.options.components[c], c)
  delete instance.options.components[c]._Ctor
  delete components[c]._Ctor
  })

packages/test-utils/src/find-vue-components.js

@@ -106,7 +106,7 @@ export default function findVueComponents (
  )
  }
  const nameSelector =
- typeof selector === 'function' ? selector.options.name : selector.name
+ typeof selector === 'function' ? selector.extendOptions.name : selector.name
  const components = root._isVue
  ? findAllVueComponentsFromVm(root)
  : findAllVueComponentsFromVnode(root)

test/specs/shallow-mount.spec.js

@@ -239,6 +239,23 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
  ).to.equal(3)
  })
 
+ it('handles extended stubs', () => {
+ const ChildComponent = Vue.extend({
+ template: '<div />',
+ props: ['propA']
+ })
+ const TestComponent = {
+ template: '<child-component propA="hey" />',
+ components: { ChildComponent }
+ }
+ const wrapper = shallowMount(TestComponent, {
+ stubs: ['child-component']
+ })
+
+ expect(wrapper.find(ChildComponent).vm.propA)
+ .to.equal('hey')
+ })
+
  it('throws an error when the component fails to mount', () => {
  expect(() =>
  shallowMount({

test/specs/wrapper/find.spec.js

@@ -1,5 +1,6 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import { createLocalVue } from '~vue/test-utils'
+import Vue from 'vue'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
@@ -79,6 +80,19 @@ describeWithShallowAndMount('find', mountingMethod => {
  expect(wrapper.find('#foo').vnode).to.be.an('object')
  })
 
+ it('returns matching extended component', () => {
+ const ChildComponent = Vue.extend({
+ template: '<div />',
+ props: ['propA']
+ })
+ const TestComponent = {
+ template: '<child-component propA="hey" />',
+ components: { ChildComponent }
+ }
+ const wrapper = mountingMethod(TestComponent)
+ expect(wrapper.find(ChildComponent).vnode).to.be.an('object')
+ })
+
  it('returns Wrapper of elements matching attribute selector passed', () => {
  const compiled = compileToFunctions('<div><a href="/"></a></div>')
  const wrapper = mountingMethod(compiled)