feat: support component slot string (#633)

Author: eddyerburgh

packages/create-instance/add-slots.js

@@ -4,16 +4,6 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { throwError } from 'shared/util'
 import { validateSlots } from './validate-slots'
 
-function isSingleElement (slotValue: string): boolean {
-  const _slotValue = slotValue.trim()
-  if (_slotValue[0] !== '<' || _slotValue[_slotValue.length - 1] !== '>') {
-    return false
-  }
-  const domParser = new window.DOMParser()
-  const _document = domParser.parseFromString(slotValue, 'text/html')
-  return _document.body.childElementCount === 1
-}
-
 // see https://github.com/vuejs/vue-test-utils/pull/274
 function createVNodes (vm: Component, slotValue: string) {
   const compiledResult = compileToFunctions(`<div>${slotValue}{{ }}</div>`)
@@ -40,11 +30,7 @@ function addSlotToVm (vm: Component, slotName: string, slotValue: SlotValue): vo
   let elem
   if (typeof slotValue === 'string') {
     validateEnvironment()
-    if (isSingleElement(slotValue)) {
-      elem = vm.$createElement(compileToFunctions(slotValue))
-    } else {
-      elem = createVNodes(vm, slotValue)
-    }
+    elem = createVNodes(vm, slotValue)
   } else {
     elem = vm.$createElement(slotValue)
   }

packages/create-instance/create-instance.js

@@ -86,6 +86,9 @@ export default function createInstance (
 
   const vm = new Constructor(instanceOptions)
 
+  // Workaround for Vue < 2.5
+  vm._staticTrees = []
+
   addAttrs(vm, options.attrs)
   addListeners(vm, options.listeners)
 

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

@@ -36,6 +36,35 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     }
   })
 
+  itDoNotRunIf(
+    mountingMethod.name === 'shallowMount' ||
+    isRunningPhantomJS ||
+    process.env.TEST_ENV === 'node',
+    'mounts component with default slot if passed component as string in slot object', () => {
+      const CustomComponent = {
+        render: h => h('time')
+      }
+      const TestComponent = {
+        template: '<div><slot /></div>',
+        components: {
+          'custom-component': CustomComponent
+        }
+      }
+      const wrapper = mountingMethod(TestComponent, {
+        slots: {
+          default: '<custom-component />'
+        },
+        components: {
+          'custom-component': CustomComponent
+        }
+      })
+      if (mountingMethod.name === 'renderToString') {
+        expect(wrapper).contains('<time>')
+      } else {
+        expect(wrapper.contains('time')).to.equal(true)
+      }
+    })
+
   it('mounts component with default slot if passed component in array in slot object', () => {
     const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [Component] }})
     if (mountingMethod.name === 'renderToString') {