feat: add scoped slots option

docs/en/api/options.md

@@ -75,12 +75,15 @@ Please use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#hea
 
 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 are two limitations.
+There are three limitations.
 
 * This option is only supported in vue@2.5+.
 
 * You can not use `<template>` tag as the root element in the `scopedSlots` option.
 
+* This does not support PhantomJS.  
+Please use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer).
+
 Example:
 
 ```js

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

@@ -9,6 +9,9 @@ export function addScopedSlots (vm: Component, scopedSlots: Object): void {
     if (template.substr(0, 9) === '<template') {
       throwError('the scopedSlots option does not support a template tag as the root element.')
     }
+    const domParser = new window.DOMParser()
+    const document = domParser.parseFromString(template, 'text/html')
     vm.$_vueTestUtils_scopedSlots[key] = compileToFunctions(template).render
+    vm.$_vueTestUtils_slotScopes[key] = document.body.firstChild.getAttribute('slot-scope')
   })
 }

packages/create-instance/add-slots.js

@@ -11,7 +11,7 @@ function addSlotToVm (vm: Component, slotName: string, slotValue: Component | st
       throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
     }
     if (window.navigator.userAgent.match(/PhantomJS/i)) {
-      throwError('option.slots does not support strings in PhantomJS. Please use Puppeteer, or pass a component')
+      throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
     }
     const domParser = new window.DOMParser()
     const document = domParser.parseFromString(slotValue, 'text/html')

packages/create-instance/create-instance.js

@@ -60,20 +60,33 @@ export default function createInstance (
   addListeners(vm, options.listeners)
 
   if (options.scopedSlots) {
+    if (window.navigator.userAgent.match(/PhantomJS/i)) {
+      throwError('the scopedSlots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
+    }
     const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
     if (vueVersion >= 2.5) {
       vm.$_vueTestUtils_scopedSlots = {}
+      vm.$_vueTestUtils_slotScopes = {}
       const renderSlot = vm._renderProxy._t
+
       vm._renderProxy._t = function (name, feedback, props, bindObject) {
         const scopedSlotFn = vm.$_vueTestUtils_scopedSlots[name]
+        const slotScope = vm.$_vueTestUtils_slotScopes[name]
         if (scopedSlotFn) {
           props = { ...bindObject, ...props }
-          vm._renderProxy.props = props
-          return scopedSlotFn.call(vm._renderProxy)
+          const proxy = {}
+          Object.keys(vm._renderProxy).concat(Object.keys(Vue.prototype)).forEach((key) => {
+            if (key[0] === '_') {
+              proxy[key] = vm._renderProxy[key]
+            }
+          })
+          proxy[slotScope] = props
+          return scopedSlotFn.call(proxy)
         } else {
           return renderSlot.call(vm._renderProxy, name, feedback, props, bindObject)
         }
       }
+
       // $FlowIgnore
       addScopedSlots(vm, options.scopedSlots)
     } else {

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

@@ -1,8 +1,15 @@
 <template>
   <div>
-    <div id="scopedSlots">
-      <slot name="item"
-            v-for="(item, index) in items"
+    <div id="foo">
+      <slot name="foo"
+            v-for="(item, index) in foo"
+            :text="item.text"
+            :index="index">
+      </slot>
+    </div>
+    <div id="bar">
+      <slot name="bar"
+            v-for="(item, index) in bar"
             :text="item.text"
             :index="index">
       </slot>
@@ -18,7 +25,8 @@
     name: 'component-with-scoped-slots',
     data () {
       return {
-        items: [{ text: 'a1' }, { text: 'a2' }, { text: 'a3' }]
+        foo: [{ text: 'a1' }, { text: 'a2' }, { text: 'a3' }],
+        bar: [{ text: 'A1' }, { text: 'A2' }, { text: 'A3' }]
       }
     }
   }

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

@@ -2,18 +2,34 @@ import { describeWithShallowAndMount, vueVersion, itDoNotRunIf } from '~resource
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 
 describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
+  let _window
+
+  beforeEach(() => {
+    _window = window
+  })
+
+  afterEach(() => {
+    if (!window.navigator.userAgent.match(/Chrome/i)) {
+      window = _window // eslint-disable-line no-native-reassign
+    }
+  })
+
   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>'
+          'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
+          'bar': '<p slot-scope="bar">{{bar.text}},{{bar.index}}</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>')
+      expect(wrapper.find('#foo').html()).to.equal('<div id="foo"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>')
+      expect(wrapper.find('#bar').html()).to.equal('<div id="bar"><p>A1,0</p><p>A2,1</p><p>A3,2</p></div>')
+      wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
+      wrapper.vm.bar = [{ text: 'B1' }, { text: 'B2' }, { text: 'B3' }]
+      expect(wrapper.find('#foo').html()).to.equal('<div id="foo"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>')
+      expect(wrapper.find('#bar').html()).to.equal('<div id="bar"><p>B1,0</p><p>B2,1</p><p>B3,2</p></div>')
     }
   )
 
@@ -22,7 +38,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            'item': '<template></template>'
+            'foo': '<template></template>'
           }
         })
       }
@@ -36,12 +52,30 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            'item': '<p slot="item" slot-scope="props">{{props.index}},{{props.text}}</p>'
+            'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
           }
         })
       }
       const message = '[vue-test-utils]: the scopedSlots option is only supported in vue@2.5+.'
       expect(fn).to.throw().with.property('message', message)
     }
   )
+
+  itDoNotRunIf(!window.navigator.userAgent.match(/PhantomJS/i),
+    'throws exception when using PhantomJS', () => {
+      if (window.navigator.userAgent.match(/Chrome/i)) {
+        return
+      }
+      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
+      const fn = () => {
+        mountingMethod(ComponentWithScopedSlots, {
+          scopedSlots: {
+            'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+          }
+        })
+      }
+      const message = '[vue-test-utils]: the scopedSlots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.'
+      expect(fn).to.throw().with.property('message', message)
+    }
+  )
 })

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

@@ -76,7 +76,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
       return
     }
     window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
-    const message = '[vue-test-utils]: option.slots does not support strings in PhantomJS. Please use Puppeteer, or pass a component'
+    const message = '[vue-test-utils]: the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.'
     const fn = () => mountingMethod(ComponentWithSlots, { slots: { default: 'foo' }})
     expect(fn).to.throw().with.property('message', message)
   })