fix: handle default slots in functional components;2C

Author: eddyerburgh

src/lib/create-instance.js

@@ -12,6 +12,17 @@ import { compileTemplate } from './compile-template'
 import createLocalVue from '../create-local-vue'
 import extractOptions from '../options/extract-options'
 import deleteMountingOptions from '../options/delete-mounting-options'
+import { compileToFunctions } from 'vue-template-compiler'
+
+function createFunctionalSlots (slots = {}, h) {
+  if (Array.isArray(slots.default)) {
+    return slots.default.map(h)
+  }
+
+  if (typeof slots.default === 'string') {
+    return [h(compileToFunctions(slots.default))]
+  }
+}
 
 export default function createConstructor (
   component: Component,
@@ -29,13 +40,14 @@ export default function createConstructor (
     if (mountingOptions.context && typeof mountingOptions.context !== 'object') {
       throwError('mount.context must be an object')
     }
+
     const clonedComponent = cloneDeep(component)
     component = {
       render (h) {
         return h(
           clonedComponent,
           mountingOptions.context || component.FunctionalRenderContext,
-          mountingOptions.context && mountingOptions.context.children
+          (mountingOptions.context && mountingOptions.context.children) || createFunctionalSlots(mountingOptions.slots, h)
         )
       }
     }

test/resources/components/functional-component-with-slots.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+  name: 'component-with-slots',
+  functional: true,
+  render (h, ctx) {
+    return h('div', ctx.data, ctx.slots().default)
+  }
+}
+</script>

test/unit/specs/mount/options/slots.spec.js

@@ -2,19 +2,15 @@ import { compileToFunctions } from 'vue-template-compiler'
 import mount from '~src/mount'
 import Component from '~resources/components/component.vue'
 import ComponentWithSlots from '~resources/components/component-with-slots.vue'
+import FunctionalComponentWithSlots from '~resources/components/functional-component-with-slots.vue'
 
 describe('mount.slots', () => {
   it('mounts component with default slot if passed component in slot object', () => {
-    const wrapper = mount(ComponentWithSlots, { slots: { default: [Component] }})
-    expect(wrapper.contains(Component)).to.equal(true)
-  })
-
-  it('mounts component with default slot if passed object with template prop in slot object', () => {
-    const wrapper = mount(ComponentWithSlots, { slots: { default: [Component] }})
+    const wrapper = mount(ComponentWithSlots, { slots: { default: Component }})
     expect(wrapper.contains(Component)).to.equal(true)
   })
 
-  it('mounts component with default slot if passed component in slot object', () => {
+  it('mounts component with default slot if passed component in array in slot object', () => {
     const wrapper = mount(ComponentWithSlots, { slots: { default: [Component] }})
     expect(wrapper.contains(Component)).to.equal(true)
   })
@@ -86,4 +82,25 @@ describe('mount.slots', () => {
     expect(wrapper.findAll(Component).length).to.equal(1)
     expect(Array.isArray(wrapper.vm.$slots.header)).to.equal(true)
   })
+
+  it.only('mounts functional component with default slot if passed component in slot object', () => {
+    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: [Component] }})
+    expect(wrapper.contains(Component)).to.equal(true)
+  })
+
+  it.only('mounts component with default slot if passed component in slot object', () => {
+    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: [Component] }})
+    expect(wrapper.contains(Component)).to.equal(true)
+  })
+
+  it.only('mounts component with default slot if passed object with template prop in slot object', () => {
+    const compiled = compileToFunctions('<div id="div" />')
+    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: [compiled] }})
+    expect(wrapper.contains('#div')).to.equal(true)
+  })
+
+  it.only('mounts component with default slot if passed string in slot object', () => {
+    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: '<span />' }})
+    expect(wrapper.contains('span')).to.equal(true)
+  })
 })