fix: support named functional slots

Author: eddyerburgh

src/lib/create-instance.js

@@ -14,6 +14,10 @@ import extractOptions from '../options/extract-options'
 import deleteMountingOptions from '../options/delete-mounting-options'
 import { compileToFunctions } from 'vue-template-compiler'
 
+function isValidSlot (slot: any): boolean {
+  return Array.isArray(slot) || (slot !== null && typeof slot === 'object') || typeof slot === 'string'
+}
+
 function createFunctionalSlots (slots = {}, h) {
   if (Array.isArray(slots.default)) {
     return slots.default.map(h)
@@ -26,12 +30,18 @@ function createFunctionalSlots (slots = {}, h) {
   Object.keys(slots).forEach(slotType => {
     if (Array.isArray(slots[slotType])) {
       slots[slotType].forEach(slot => {
+        if (!isValidSlot(slot)) {
+          throwError('slots[key] must be a Component, string or an array of Components')
+        }
         const component = typeof slot === 'string' ? compileToFunctions(slot) : slot
         const newSlot = h(component)
         newSlot.data.slot = slotType
         children.push(newSlot)
       })
     } else {
+      if (!isValidSlot(slots[slotType])) {
+        throwError('slots[key] must be a Component, string or an array of Components')
+      }
       const component = typeof slots[slotType] === 'string' ? compileToFunctions(slots[slotType]) : slots[slotType]
       const slot = h(component)
       slot.data.slot = slotType

src/lib/error-handler.js

@@ -1,17 +1,8 @@
-function errorMessage (message, info) {
-  if (info) {
-    return `${message} : additional info ${info}`
-  }
-
-  return message
-}
-
-export default function errorHandler (errorOrString, vm, info) {
+export default function errorHandler (errorOrString, vm) {
   const error = (typeof errorOrString === 'object')
     ? errorOrString
     : new Error(errorOrString)
 
-  error.message = errorMessage(error.message, info)
   vm._error = error
 
   throw error

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

@@ -1,44 +1,34 @@
 import errorHandler from '../../../../src/lib/error-handler'
 
+const errorString = 'errorString'
+const errorObject = new Error(errorString)
+
 describe('errorHandler', () => {
-  const errorString = 'errorString'
-  const info = 'additional info provided by vue'
-  const errorObject = new Error(errorString)
-  it('when error object: rethrows error', () => {
+  it('throws error', () => {
     expect(() => errorHandler(errorObject, {})).to.throw().with.property('message', errorString)
   })
 
-  it('when error object: rethrown error contains vue info when provided', () => {
-    expect(() => errorHandler(errorObject, {}, info)).to.throw().that.satisfies(function (err) {
-      const errorMessage = err.message
-
-      return errorMessage.includes(errorString) && errorMessage.includes(info)
+  it('throws error with vue info when provided', () => {
+    expect(() => errorHandler(errorObject, {})).to.throw().that.satisfies(function (err) {
+      return err.message.includes(errorString)
     })
   })
 
-  it('when error object: sets vm_error to the error that is thrown', () => {
+  it('sets vm_error to the error that is thrown', () => {
     const vm = {}
-    expect(() => errorHandler(errorObject, vm, info)).to.throw().that.satisfies(function (err) {
+    expect(() => errorHandler(errorObject, vm)).to.throw().that.satisfies(function (err) {
       return err === vm._error
     })
   })
 
-  it('when error string: throws error with string', () => {
+  it('throws error with string', () => {
     expect(() => errorHandler(errorString, {})).to.throw().with.property('message', errorString)
   })
 
-  it('throws error with string and appends info when provided', () => {
-    expect(() => errorHandler(errorString, {}, info)).to.throw().that.satisfies(function (err) {
-      const errorMessage = err.message
-
-      return errorMessage.includes(errorString) && errorMessage.includes(info)
-    })
-  })
-
-  it('when error string: sets vm_error to the error that is thrown', () => {
+  it('sets vm_error to the error that is thrown', () => {
     const vm = {}
 
-    expect(() => errorHandler(errorObject, vm, info)).to.throw().that.satisfies(function (err) {
+    expect(() => errorHandler(errorObject, vm)).to.throw().that.satisfies(function (err) {
       return err === vm._error
     })
   })

test/unit/specs/lib/error-handler.spec.js

@@ -2,7 +2,6 @@ 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', () => {
@@ -84,32 +83,50 @@ describe('mount.slots', () => {
   })
 
   it('mounts functional component with default slot if passed component in slot object', () => {
-    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: Component }})
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const wrapper = mount(TestComponent, { slots: { default: Component }})
     expect(wrapper.contains(Component)).to.equal(true)
   })
 
   it('mounts component with default slot if passed component in slot object', () => {
-    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: [Component] }})
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const wrapper = mount(TestComponent, { 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 TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
     const compiled = compileToFunctions('<div id="div" />')
-    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: [compiled] }})
+    const wrapper = mount(TestComponent, { slots: { default: [compiled] }})
     expect(wrapper.contains('#div')).to.equal(true)
   })
 
   it('mounts component with default slot if passed string in slot object', () => {
-    const wrapper = mount(FunctionalComponentWithSlots, { slots: { default: '<span />' }})
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const wrapper = mount(TestComponent, { slots: { default: '<span />' }})
     expect(wrapper.contains('span')).to.equal(true)
   })
 
   it('mounts component with named slot if passed string in slot object', () => {
     const TestComponent = {
       functional: true,
-      render (h, ctx) {
-        return h('div', {}, ctx.slots().named)
-      }
+      render: (h, ctx) => h('div', {}, ctx.slots().named)
     }
     const wrapper = mount(TestComponent, { slots: { named: Component }})
     expect(wrapper.contains(Component)).to.equal(true)
@@ -118,9 +135,7 @@ describe('mount.slots', () => {
   it('mounts component with named slot if passed string in slot object in array', () => {
     const TestComponent = {
       functional: true,
-      render (h, ctx) {
-        return h('div', {}, ctx.slots().named)
-      }
+      render: (h, ctx) => h('div', {}, ctx.slots().named)
     }
     const wrapper = mount(TestComponent, { slots: { named: [Component] }})
     expect(wrapper.contains(Component)).to.equal(true)
@@ -129,9 +144,7 @@ describe('mount.slots', () => {
   it('mounts component with named slot if passed string in slot object in array', () => {
     const TestComponent = {
       functional: true,
-      render (h, ctx) {
-        return h('div', {}, ctx.slots().named)
-      }
+      render: (h, ctx) => h('div', {}, ctx.slots().named)
     }
     const wrapper = mount(TestComponent, { slots: { named: '<span />' }})
     expect(wrapper.contains('span')).to.equal(true)
@@ -140,11 +153,72 @@ describe('mount.slots', () => {
   it('mounts component with named slot if passed string in slot object in array', () => {
     const TestComponent = {
       functional: true,
-      render (h, ctx) {
-        return h('div', {}, ctx.slots().named)
-      }
+      render: (h, ctx) => h('div', {}, ctx.slots().named)
     }
     const wrapper = mount(TestComponent, { slots: { named: ['<span />'] }})
     expect(wrapper.contains('span')).to.equal(true)
   })
+
+  it('throws error if passed false for named slots', () => {
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const fn = () => mount(TestComponent, { slots: { named: [false] }})
+    const message = '[vue-test-utils]: slots[key] must be a Component, string or an array of Components'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws error if passed a number for named slots', () => {
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const fn = () => mount(TestComponent, { slots: { named: [1] }})
+    const message = '[vue-test-utils]: slots[key] must be a Component, string or an array of Components'
+    expect(fn).to.throw().with.property('message', message)
+  })
+  it('throws error if passed false for named slots', () => {
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const fn = () => mount(TestComponent, { slots: { named: false }})
+    const message = '[vue-test-utils]: slots[key] must be a Component, string or an array of Components'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws error if passed a number for named slots', () => {
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const fn = () => mount(TestComponent, { slots: { named: 1 }})
+    const message = '[vue-test-utils]: slots[key] must be a Component, string or an array of Components'
+    expect(fn).to.throw().with.property('message', message)
+  })
+  it('throws error if passed string in default slot array when vue-template-compiler is undefined', () => {
+    const TestComponent = {
+      name: 'component-with-slots',
+      functional: true,
+      render: (h, ctx) => h('div', ctx.data, ctx.slots().default)
+    }
+    const compilerSave = require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions
+    require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = undefined
+    delete require.cache[require.resolve('../../../../../src/mount')]
+    const mountFresh = require('../../../../../src/mount').default
+    const message = '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined'
+    const fn = () => mountFresh(TestComponent, { slots: { default: ['<span />'] }})
+    try {
+      expect(fn).to.throw().with.property('message', message)
+    } catch (err) {
+      require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = compilerSave
+      throw err
+    }
+    require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = compilerSave
+  })
 })