feat(slots): enable passing text to slots (#233)

* Passing text to slots

* Add VNode

* Fix message

* Use vueVersion

* Change vueVersion

* Change vueVersion

* Add vueVersion

* Improve test

Author: 38elements

.gitignore

@@ -21,4 +21,7 @@ _book
 .tmp
 tmp*
 
+# Vim
+*.sw[po]
+
 yarn.lock

src/lib/add-slots.js

@@ -1,5 +1,6 @@
 // @flow
 
+import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
 import { throwError } from './util'
 
@@ -8,24 +9,28 @@ function isValidSlot (slot: any): boolean {
 }
 
 function addSlotToVm (vm: Component, slotName: string, slotValue: Component | string | Array<Component> | Array<string>): void {
-  if (Array.isArray(vm.$slots[slotName])) {
-    if (typeof slotValue === 'string') {
-      if (!compileToFunctions) {
-        throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
-      }
-      vm.$slots[slotName].push(vm.$createElement(compileToFunctions(slotValue)))
-    } else {
-      vm.$slots[slotName].push(vm.$createElement(slotValue))
+  let elem
+  const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
+  if (typeof slotValue === 'string') {
+    if (!compileToFunctions) {
+      throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
     }
-  } else {
-    if (typeof slotValue === 'string') {
-      if (!compileToFunctions) {
-        throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
-      }
-      vm.$slots[slotName] = [vm.$createElement(compileToFunctions(slotValue))]
+    if (slotValue.trim()[0] === '<') {
+      elem = vm.$createElement(compileToFunctions(slotValue))
     } else {
-      vm.$slots[slotName] = [vm.$createElement(slotValue)] // eslint-disable-line no-param-reassign
+      if (vueVersion >= 2.2) {
+        elem = vm._v(slotValue)
+      } else {
+        throwError('vue-test-utils support for passing text to slots at vue@2.2+')
+      }
     }
+  } else {
+    elem = vm.$createElement(slotValue)
+  }
+  if (Array.isArray(vm.$slots[slotName])) {
+    vm.$slots[slotName].push(elem)
+  } else {
+    vm.$slots[slotName] = [elem]
   }
 }
 

test/unit/specs/mount.spec.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
 import mount from '~src/mount'
+import Component from '~resources/components/component.vue'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import ComponentWithMixin from '~resources/components/component-with-mixin.vue'
 import createLocalVue from '~src/create-local-vue'
@@ -101,7 +102,7 @@ describe('mount', () => {
         'prop': 'val'
       },
       slots: {
-        'prop': 'val'
+        'prop': Component
       },
       localVue: createLocalVue(),
       stubs: {

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

@@ -2,6 +2,7 @@ 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 { vueVersion } from '~resources/test-utils'
 
 describe('mount.slots', () => {
   it('mounts component with default slot if passed component in slot object', () => {
@@ -25,6 +26,17 @@ describe('mount.slots', () => {
     expect(wrapper.contains('span')).to.equal(true)
   })
 
+  it('mounts component with default slot if passed string in slot object', () => {
+    if (vueVersion >= 2.2) {
+      const wrapper = mount(ComponentWithSlots, { slots: { default: 'foo' }})
+      expect(wrapper.find('main').text()).to.equal('foo')
+    } else {
+      const message = '[vue-test-utils]: vue-test-utils support for passing text to slots at vue@2.2+'
+      const fn = () => mount(ComponentWithSlots, { slots: { default: 'foo' }})
+      expect(fn).to.throw().with.property('message', message)
+    }
+  })
+
   it('throws error if passed string in default slot object and vue-template-compiler is undefined', () => {
     const compilerSave = require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions
     require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = undefined
@@ -46,6 +58,17 @@ describe('mount.slots', () => {
     expect(wrapper.contains('span')).to.equal(true)
   })
 
+  it('mounts component with default slot if passed string in slot text array object', () => {
+    if (vueVersion >= 2.2) {
+      const wrapper = mount(ComponentWithSlots, { slots: { default: ['foo', 'bar'] }})
+      expect(wrapper.find('main').text()).to.equal('foobar')
+    } else {
+      const message = '[vue-test-utils]: vue-test-utils support for passing text to slots at vue@2.2+'
+      const fn = () => mount(ComponentWithSlots, { slots: { default: ['foo', 'bar'] }})
+      expect(fn).to.throw().with.property('message', message)
+    }
+  })
+
   it('throws error if passed string in default slot array vue-template-compiler is undefined', () => {
     const compilerSave = require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions
     require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = undefined