feat: add scoped slots option

docs/en/README.md

@@ -23,6 +23,7 @@ Vue Test Utils is the official unit testing utility library for Vue.js.
   * [Mounting Options](api/options.md)
     - [context](api/options.md#context)
     - [slots](api/options.md#slots)
+    - [scopedSlots](api/options.md#scopedslots)
     - [stubs](api/options.md#stubs)
     - [mocks](api/options.md#mocks)
     - [localVue](api/options.md#localvue)

docs/en/SUMMARY.md

@@ -19,6 +19,7 @@
   * [Mounting Options](api/options.md)
     - [context](api/options.md#context)
     - [slots](api/options.md#slots)
+    - [scopedSlots](api/options.md#scopedslots)
     - [stubs](api/options.md#stubs)
     - [mocks](api/options.md#mocks)
     - [localVue](api/options.md#localvue)

docs/en/api/README.md

@@ -7,6 +7,7 @@
 * [Mounting Options](./options.md)
   - [context](./options.md#context)
   - [slots](./options.md#slots)
+  - [scopedSlots](./options.md#scopedslots)
   - [stubs](./options.md#stubs)
   - [mocks](./options.md#mocks)
   - [localVue](./options.md#localvue)

docs/en/api/options.md

@@ -6,6 +6,7 @@ Options for `mount` and `shallow`. The options object can contain both Vue Test
 
 - [`context`](#context)
 - [`slots`](#slots)
+- [`scopedSlots`](#scopedslots)
 - [`stubs`](#stubs)
 - [`mocks`](#mocks)
 - [`localVue`](#localvue)
@@ -68,6 +69,29 @@ There is a limitation to this.
 This does not support PhantomJS.  
 Please use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer).
 
+### `scopedSlots`
+
+- type: `{ [name: string]: string }`
+
+Provide an object of scoped slots contents to the component. The key corresponds to the slot name. The value can be a template string.
+
+There is two limitations.  
+
+* This supports [email protected]+.
+
+* You can not set a `template` tag to top of `scopedSlots` option.
+
+Example:
+
+```js
+const wrapper = shallow(Component, {
+  scopedSlots: {
+    foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+  }
+})
+expect(wrapper.find('#fooWrapper').html()).toBe('<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>')
+```
+
 ### `stubs`
 
 - type: `{ [name: string]: Component | boolean } | Array<string>`

flow/options.flow.js

@@ -2,6 +2,7 @@ declare type Options = { // eslint-disable-line no-undef
     attachToDocument?: boolean,
     mocks?: Object,
     slots?: Object,
+    scopedSlots?: Object,
     localVue?: Component,
     provide?: Object,
     stubs?: Object,

packages/create-instance/add-scoped-slots.js

@@ -0,0 +1,14 @@
+// @flow
+
+import { compileToFunctions } from 'vue-template-compiler'
+import { throwError } from 'shared/util'
+
+export function addScopedSlots (vm: Component, scopedSlots: Object): void {
+  Object.keys(scopedSlots).forEach((key) => {
+    const template = scopedSlots[key].trim()
+    if (template.substr(0, 9) === '<template') {
+      throwError('scopedSlots option does not support template tag.')
+    }
+    vm.$_vueTestUtils_scopedSlots[key] = compileToFunctions(template).render
+  })
+}

packages/create-instance/create-instance.js

@@ -1,6 +1,8 @@
 // @flow
 
+import Vue from 'vue'
 import { addSlots } from './add-slots'
+import { addScopedSlots } from './add-scoped-slots'
 import addMocks from './add-mocks'
 import addAttrs from './add-attrs'
 import addListeners from './add-listeners'
@@ -57,6 +59,28 @@ export default function createInstance (
   addAttrs(vm, options.attrs)
   addListeners(vm, options.listeners)
 
+  if (options.scopedSlots) {
+    const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
+    if (vueVersion >= 2.5) {
+      vm.$_vueTestUtils_scopedSlots = {}
+      const renderSlot = vm._renderProxy._t
+      vm._renderProxy._t = function (name, feedback, props, bindObject) {
+        const scopedSlotFn = vm.$_vueTestUtils_scopedSlots[name]
+        if (scopedSlotFn) {
+          props = { ...bindObject, ...props }
+          vm._renderProxy.props = props
+          return scopedSlotFn.call(vm._renderProxy)
+        } else {
+          return renderSlot.call(vm._renderProxy, name, feedback, props, bindObject)
+        }
+      }
+      // $FlowIgnore
+      addScopedSlots(vm, options.scopedSlots)
+    } else {
+      throwError('scopedSlots option supports [email protected]+.')
+    }
+  }
+
   if (options.slots) {
     addSlots(vm, options.slots)
   }

packages/test-utils/types/index.d.ts

@@ -113,6 +113,7 @@ interface MountOptions<V extends Vue> extends ComponentOptions<V> {
   localVue?: typeof Vue
   mocks?: object
   slots?: Slots
+  scopedSlots?: Record<string, string>
   stubs?: Stubs,
   attrs?: object
   listeners?: object

packages/test-utils/types/test/mount.ts

@@ -33,6 +33,9 @@ mount(ClassComponent, {
     foo: [normalOptions, functionalOptions],
     bar: ClassComponent
   },
+  scopedSlots: {
+    baz: `<div>Baz</div>`
+  },
   stubs: {
     foo: normalOptions,
     bar: functionalOptions,

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div id="scopedSlots">
+      <slot name="item"
+            v-for="(item, index) in items"
+            :text="item.text"
+            :index="index">
+      </slot>
+    </div>
+    <div id="slots">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'component-with-scoped-slots',
+    data () {
+      return {
+        items: [{ text: 'a1' }, { text: 'a2' }, { text: 'a3' }]
+      }
+    }
+  }
+</script>

test/specs/mounting-options/scopedSlots.js

@@ -0,0 +1,47 @@
+import { describeWithShallowAndMount, vueVersion, itDoNotRunIf } from '~resources/utils'
+import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
+
+describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
+  itDoNotRunIf(vueVersion < 2.5,
+    'mounts component scoped slots', () => {
+      const wrapper = mountingMethod(ComponentWithScopedSlots, {
+        slots: { default: '<span>123</span>' },
+        scopedSlots: {
+          'item': '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+        }
+      })
+      expect(wrapper.find('#slots').html()).to.equal('<div id="slots"><span>123</span></div>')
+      expect(wrapper.find('#scopedSlots').html()).to.equal('<div id="scopedSlots"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>')
+      wrapper.vm.items = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
+      expect(wrapper.find('#scopedSlots').html()).to.equal('<div id="scopedSlots"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>')
+    }
+  )
+
+  itDoNotRunIf(vueVersion < 2.5,
+    'throws exception when it is seted to template tag at top', () => {
+      const fn = () => {
+        mountingMethod(ComponentWithScopedSlots, {
+          scopedSlots: {
+            'item': '<template></template>'
+          }
+        })
+      }
+      const message = '[vue-test-utils]: scopedSlots option does not support template tag.'
+      expect(fn).to.throw().with.property('message', message)
+    }
+  )
+
+  itDoNotRunIf(vueVersion >= 2.5,
+    'throws exception when vue version < 2.5', () => {
+      const fn = () => {
+        mountingMethod(ComponentWithScopedSlots, {
+          scopedSlots: {
+            'item': '<p slot="item" slot-scope="props">{{props.index}},{{props.text}}</p>'
+          }
+        })
+      }
+      const message = '[vue-test-utils]: scopedSlots option supports [email protected]+.'
+      expect(fn).to.throw().with.property('message', message)
+    }
+  )
+})