feat: render component name in stub (#606)

Author: eddyerburgh

packages/shared/stub-components.js

@@ -60,7 +60,9 @@ function createStubFromString (templateString: string, originalComponent: Compon
 function createBlankStub (originalComponent: Component) {
   return {
     ...getCoreProperties(originalComponent),
-    render: h => h('')
+    render (h) {
+      return h(`${originalComponent.name}-stub`)
+    }
   }
 }
 
@@ -78,7 +80,7 @@ export function createComponentStubs (originalComponents: Object = {}, stubs: Ob
       if (typeof stub !== 'string') {
         throwError('each item in an options.stubs array must be a string')
       }
-      components[stub] = createBlankStub({})
+      components[stub] = createBlankStub({ name: stub })
     })
   } else {
     Object.keys(stubs).forEach(stub => {
@@ -89,7 +91,7 @@ export function createComponentStubs (originalComponents: Object = {}, stubs: Ob
         throwError('options.stub values must be passed a string or component')
       }
       if (stubs[stub] === true) {
-        components[stub] = createBlankStub({})
+        components[stub] = createBlankStub({ name: stub })
         return
       }
 
@@ -124,7 +126,7 @@ export function createComponentStubs (originalComponents: Object = {}, stubs: Ob
       }
       // ignoreElements does not exist in Vue 2.0.x
       if (Vue.config.ignoredElements) {
-        Vue.config.ignoredElements.push(stub)
+        Vue.config.ignoredElements.push(`${stub}-stub`)
       }
     })
   }
@@ -142,7 +144,7 @@ function stubComponents (components: Object, stubbedComponents: Object) {
 
     // ignoreElements does not exist in Vue 2.0.x
     if (Vue.config.ignoredElements) {
-      Vue.config.ignoredElements.push(component)
+      Vue.config.ignoredElements.push(`${components[component].name}-stub`)
     }
   })
 }

packages/test-utils/src/wrapper.js

@@ -413,7 +413,7 @@ export default class Wrapper implements BaseWrapper {
    */
   setData (data: Object) {
     if (this.isFunctionalComponent) {
-      throwError('wrapper.setData() canot be called on a functional component')
+      throwError('wrapper.setData() cannot be called on a functional component')
     }
 
     if (!this.vm) {
@@ -506,7 +506,7 @@ export default class Wrapper implements BaseWrapper {
    */
   setProps (data: Object) {
     if (this.isFunctionalComponent) {
-      throwError('wrapper.setProps() canot be called on a functional component')
+      throwError('wrapper.setProps() cannot be called on a functional component')
     }
     if (!this.isVueComponent || !this.vm) {
       throwError('wrapper.setProps() can only be called on a Vue instance')

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

@@ -123,7 +123,7 @@ describeWithMountingMethods('options.stub', (mountingMethod) => {
     const HTML = mountingMethod.name === 'renderToString'
       ? wrapper
       : wrapper.html()
-    expect(HTML).to.contain('<!---->')
+    expect(HTML).to.contain('<registered-component-stub>')
   })
 
   it('stubs components with dummy when passed a boolean', () => {
@@ -138,7 +138,7 @@ describeWithMountingMethods('options.stub', (mountingMethod) => {
     const HTML = mountingMethod.name === 'renderToString'
       ? wrapper
       : wrapper.html()
-    expect(HTML).to.contain('<!---->')
+    expect(HTML).to.contain('<registered-component-stub>')
   })
 
   it('stubs components with dummy when passed as an array', () => {
@@ -287,7 +287,7 @@ describeWithMountingMethods('options.stub', (mountingMethod) => {
     const HTML = mountingMethod.name === 'renderToString'
       ? wrapper
       : wrapper.html()
-    expect(HTML).to.contain('<!----></div>')
+    expect(HTML).to.contain('<time-component-stub>')
   })
 
   it('handles components without a render function', () => {

test/specs/wrapper/setData.spec.js

@@ -66,7 +66,7 @@ describeWithShallowAndMount('setData', (mountingMethod) => {
       render: (h, context) => h('div', context.prop1),
       functional: true
     }
-    const message = '[vue-test-utils]: wrapper.setData() canot be called on a functional component'
+    const message = '[vue-test-utils]: wrapper.setData() cannot be called on a functional component'
     const fn = () => mountingMethod(AFunctionalComponent).setData({ data1: 'data' })
     expect(fn).to.throw().with.property('message', message)
     // find on functional components isn't supported in Vue < 2.3

test/specs/wrapper/setProps.spec.js

@@ -41,7 +41,7 @@ describeWithShallowAndMount('setProps', (mountingMethod) => {
       render: (h, context) => h('div', context.prop1),
       functional: true
     }
-    const message = '[vue-test-utils]: wrapper.setProps() canot be called on a functional component'
+    const message = '[vue-test-utils]: wrapper.setProps() cannot be called on a functional component'
     const fn = () => mountingMethod(AFunctionalComponent).setProps({ prop1: 'prop' })
     expect(fn).to.throw().with.property('message', message)
     // find on functional components isn't supported in Vue < 2.3