feat(create-instance): convert string stubs to template

close #1377  This also fixes the component name being dropped for template stubs

Author: Jamie Stumme

packages/create-instance/create-component-stubs.js

@@ -6,7 +6,8 @@ import {
   camelize,
   capitalize,
   hyphenate,
-  keys
+  keys,
+  warn
 } from '../shared/util'
 import {
   componentNeedsCompiling,
@@ -15,7 +16,7 @@ import {
   isDynamicComponent,
   isConstructor
 } from '../shared/validators'
-import { compileTemplate, compileFromString } from '../shared/compile-template'
+import { compileTemplate } from '../shared/compile-template'
 
 function isVueComponentStub(comp): boolean {
   return (comp && comp.template) || isVueComponent(comp)
@@ -145,24 +146,31 @@ export function createStubFromComponent(
   }
 }
 
-function createStubFromString(
-  templateString: string,
-  originalComponent: Component = {},
-  name: string,
-  _Vue: Component
-): Component {
+// DEPRECATED: converts string stub to template stub.
+function createStubFromString(templateString: string, name: string): Component {
+  warn('String stubs are deprecated and will be removed in future versions')
+
   if (templateContainsComponent(templateString, name)) {
     throwError('options.stub cannot contain a circular reference')
   }
-  const componentOptions = resolveOptions(originalComponent, _Vue)
 
   return {
-    ...getCoreProperties(componentOptions),
-    $_doNotStubChildren: true,
-    ...compileFromString(templateString)
+    template: templateString,
+    $_doNotStubChildren: true
   }
 }
 
+function setStubComponentName(
+  stub: Object,
+  originalComponent: Component = {},
+  _Vue: Component
+) {
+  if (stub.name) return
+
+  const componentOptions = resolveOptions(originalComponent, _Vue)
+  stub.name = getCoreProperties(componentOptions).name
+}
+
 function validateStub(stub) {
   if (!isValidStub(stub)) {
     throwError(`options.stub values must be passed a string or ` + `component`)
@@ -175,26 +183,27 @@ export function createStubsFromStubsObject(
   _Vue: Component
 ): Components {
   return Object.keys(stubs || {}).reduce((acc, stubName) => {
-    const stub = stubs[stubName]
+    let stub = stubs[stubName]
 
     validateStub(stub)
 
     if (stub === false) {
       return acc
     }
 
+    const component = resolveComponent(originalComponents, stubName)
+
     if (stub === true) {
-      const component = resolveComponent(originalComponents, stubName)
       acc[stubName] = createStubFromComponent(component, stubName, _Vue)
       return acc
     }
 
     if (typeof stub === 'string') {
-      const component = resolveComponent(originalComponents, stubName)
-      acc[stubName] = createStubFromString(stub, component, stubName, _Vue)
-      return acc
+      stub = createStubFromString(stub, stubName)
+      stubs[stubName]
     }
 
+    setStubComponentName(stub, component, _Vue)
     if (componentNeedsCompiling(stub)) {
       compileTemplate(stub)
     }

packages/shared/compile-template.js

@@ -4,19 +4,16 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { componentNeedsCompiling } from './validators'
 import { throwError } from './util'
 
-export function compileFromString(str: string) {
-  if (!compileToFunctions) {
-    throwError(
-      `vueTemplateCompiler is undefined, you must pass ` +
-        `precompiled components if vue-template-compiler is ` +
-        `undefined`
-    )
-  }
-  return compileToFunctions(str)
-}
-
 export function compileTemplate(component: Component): void {
   if (component.template) {
+    if (!compileToFunctions) {
+      throwError(
+        `vueTemplateCompiler is undefined, you must pass ` +
+          `precompiled components if vue-template-compiler is ` +
+          `undefined`
+      )
+    }
+
     if (component.template.charAt('#') === '#') {
       var el = document.querySelector(component.template)
       if (!el) {
@@ -27,7 +24,10 @@ export function compileTemplate(component: Component): void {
       component.template = el.innerHTML
     }
 
-    Object.assign(component, compileToFunctions(component.template))
+    Object.assign(component, {
+      ...compileToFunctions(component.template),
+      name: component.name
+    })
   }
 
   if (component.components) {

test/resources/components/component-with-nested-childern-and-attributes.vue

@@ -1,24 +1,22 @@
 <template>
   <div>
     <span>
-      <slot-component>
-        <template v-slot:newSyntax>
-          <child-component prop1="foobar" prop2="fizzbuzz" />
-        </template>
-      </slot-component>
+      <slot-component prop1="foobar" prop2="fizzbuzz" />
+      <child-component prop1="foobar" prop2="fizzbuzz" />
+      <original-component prop1="foobar" prop2="fizzbuzz" />
     </span>
   </div>
 </template>
 
 <script>
 import ComponentWithProps from './component-with-props.vue'
-import ComponentWithSlots from './component-with-v-slot.vue'
 
 export default {
   name: 'component-with-nested-children',
   components: {
     ChildComponent: ComponentWithProps,
-    SlotComponent: ComponentWithSlots
+    SlotComponent: ComponentWithProps,
+    OriginalComponent: ComponentWithProps
   }
 }
 </script>

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

@@ -19,6 +19,7 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     serverConfigSave = serverConfig.stubs
     config.stubs = {}
     serverConfig.stubs = {}
+    sandbox.stub(console, 'error').callThrough()
   })
 
   afterEach(() => {
@@ -33,21 +34,24 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     const ComponentWithoutRender = { template: '<div></div>' }
     const ExtendedComponent = { extends: ComponentWithRender }
     const SubclassedComponent = Vue.extend({ template: '<div></div>' })
+    const StringComponent = '<div></div>'
     mountingMethod(ComponentWithChild, {
       stubs: {
         ChildComponent: ComponentWithRender,
         ChildComponent2: ComponentAsAClass,
         ChildComponent3: ComponentWithoutRender,
         ChildComponent4: ExtendedComponent,
-        ChildComponent5: SubclassedComponent
+        ChildComponent5: SubclassedComponent,
+        ChildComponent6: StringComponent
       }
     })
   })
 
   it('replaces component with template string ', () => {
+    const Stub = { template: '<div class="stub"></div>' }
     const wrapper = mountingMethod(ComponentWithChild, {
       stubs: {
-        ChildComponent: '<div class="stub"></div>'
+        ChildComponent: Stub
       }
     })
     expect(wrapper.findAll('.stub').length).to.equal(1)
@@ -322,7 +326,7 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
 
     const wrapper = mountingMethod(TestComponent, {
       stubs: {
-        'span-component': '<p />'
+        'span-component': { template: '<p />' }
       },
       localVue
     })
@@ -343,7 +347,7 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
 
     const wrapper = mountingMethod(TestComponent, {
       stubs: {
-        'time-component': '<span />'
+        'time-component': { template: '<span />' }
       },
       localVue
     })
@@ -415,7 +419,7 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     expect(wrapper.html()).contains('No render function')
   })
 
-  it('throws an error when passed a circular reference', () => {
+  it('throws an error when passed a circular reference for string stubs', () => {
     const names = ['child-component', 'ChildComponent', 'childComponent']
     const validValues = [
       '<NAME-suffix />',
@@ -592,25 +596,47 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     delete Vue.options.components['child-component']
   })
 
-  it.only('replaces component with a component and inherits attributes', () => {
-    const mounted = sandbox.stub()
-    const Stub = {
-      template: '<div id="SlotComponent"><slot name="newSyntax"/></div>',
-      mounted
-    }
+  it('renders props in the element as attributes', () => {
+    const ComponentStub = { template: '<div id="component-stub" />' }
+    const StringStub = '<div id="string-stub" />'
+    const BooleanStub = true
+
     const wrapper = mountingMethod(ComponentWithNestedChildrenAndAttributes, {
       stubs: {
-        SlotComponent: Stub,
-        ChildComponent: '<div id="child-component"/>'
+        SlotComponent: ComponentStub,
+        ChildComponent: StringStub,
+        OriginalComponent: BooleanStub
       }
     })
 
-    const childStub = wrapper.find('#child-component')
-    expect(wrapper.vm.$el.innerHTML).to.include('prop1="foobar"')
-    expect(wrapper.vm.$el.innerHTML).to.include('prop2="fizzbuzz"')
-    expect(childStub.attributes()).to.eql({
+    expect(wrapper.find('#component-stub').attributes()).to.eql({
+      id: 'component-stub',
+      prop1: 'foobar',
+      prop2: 'fizzbuzz'
+    })
+    expect(wrapper.find('#string-stub').attributes()).to.eql({
+      id: 'string-stub',
+      prop1: 'foobar',
+      prop2: 'fizzbuzz'
+    })
+    expect(wrapper.find('originalcomponent-stub').attributes()).to.eql({
       prop1: 'foobar',
       prop2: 'fizzbuzz'
     })
   })
+
+  it('warns when passing a string', () => {
+    const StringComponent = '<div></div>'
+    mountingMethod(ComponentWithChild, {
+      stubs: {
+        ChildComponent6: StringComponent
+      }
+    })
+
+    expect(console.error).calledWith(
+      sandbox.match(
+        '[vue-test-utils]: String stubs are deprecated and will be removed in future versions'
+      )
+    )
+  })
 })