feat(context option): add context option to mount

Add option to pass context to functional components

Author: eddyerburgh

docs/en/api/mount.md

@@ -1,15 +1,40 @@
 # mount(component,{,options}])
 
-Create a fully rendered Vue component. Returns a Wrapper that includes methods to test the component renders and reacts as expected.
+- **Arguments:**
+
+  - `{Component} component`
+  - `{Object} options`
+    - `{boolean} attachToDocument`
+    - `{Object} context`
+    - `{Object} slots`  
+        - `{Array<Componet|Object>|Component|String} default`  
+        - `{Array<Componet|Object>|Component|String} named`  
+    - `{Object} globals`
+    - `{Object} instance`
+    - `{Object} stub` 
+    
+- **Arguments:**
+
+- **Returns:** `{Wrapper}`
+
+
+Returns [`Wrapper`](/api/wrapper/README.md) of first DOM node or Vue component matching selector. 
 
-### Arguments
+Use any valid [selector](/api/selectors.md).
 
-`component` (`Component`): A vue component
 
-`options` (`Object`) [optional]: a Vue options object. Vue options are passed to the component when a new instance is created. , e.g. `store`, `propsData`. For full list, see the [Vue API](https://vuejs.org/v2/api/). Also takes vue-test-utils options:
+- **See also:** [Wrapper](/api/wrapper/README.md)
+
+Create a fully rendered Vue component. Returns a Wrapper that includes methods to test the component renders and reacts as expected.
+
+- **Options:**
+
+`options` (`Object`): a Vue options object. Vue options are passed to the component when a new instance is created. , e.g. `store`, `propsData`. For full list, see the [Vue API](https://vuejs.org/v2/api/). Also takes vue-test-utils options:
 
 `options.attachToDocument` (`Boolean`): Component will attach to DOM when rendered. This can be used with [`hasStyle`](/api/wrapper/hasStyle.md) to check multi element CSS selectors
 
+`options.context` (`Object`): Passes context to functional component. Can only be used with functional components
+
 `options.slots` (`Object`): Render component with slots.
 
 `options.slots.default` (`Array[Component]|Component|String`): Default slot object to render, can be a Vue component or array of Vue components
@@ -22,7 +47,7 @@ Create a fully rendered Vue component. Returns a Wrapper that includes methods t
 
 `options.stub` ('Object): Stubs components matchng the name passed with a string 
 
-### Examples
+- **Usage:**
 
 #### Without options
 

src/lib/find-vue-components.js

@@ -10,8 +10,9 @@ function findAllVueComponents (vm: Component, components: Array<Component> = [])
   return components
 }
 
-function vmCtorMatchesName (vm: Component, name: string): boolean {
-  return vm.$vnode.componentOptions.Ctor.options.name === name
+export function vmCtorMatchesName (vm: Component, name: string): boolean {
+  return (vm.$vnode && vm.$vnode.componentOptions && vm.$vnode.componentOptions.Ctor.options.name === name) ||
+        (vm._vnode && vm._vnode.functionalOptions && vm._vnode.functionalOptions.name === name)
 }
 
 export default function findVueComponents (vm: Component, componentName: string): Array<Component> {

src/mount.js

@@ -6,6 +6,7 @@ import addSlots from './lib/add-slots'
 import addGlobals from './lib/add-globals'
 import addProvide from './lib/add-provide'
 import { stubComponents } from './lib/stub-components'
+import { cloneDeep } from 'lodash'
 
 Vue.config.productionTip = false
 
@@ -25,7 +26,8 @@ type MountOptions = {
     intercept?: Object,
     slots?: Object,
     instance?: Component,
-    stub?: Object
+    stub?: Object,
+    context?: Object
 }
 
 export default function mount (component: Component, options: MountOptions = {}): VueWrapper {
@@ -35,15 +37,27 @@ export default function mount (component: Component, options: MountOptions = {})
 
   if (attachToDocument) {
     elem = createElem()
-    delete options.attachToDocument // eslint-disable-line no-param-reassign
-  }
-
-  if (options.stub) {
-    stubComponents(component, options.stub)
+    delete options.attachToDocument
   }
 
   // Remove cached constructor
-  delete component._Ctor // eslint-disable-line no-param-reassign
+  delete component._Ctor
+
+  if (options.context) {
+    if (!component.functional) {
+      throw new Error('mount.context can only be used when mounting a functional component')
+    }
+
+    if (typeof options.context !== 'object') {
+      throw new Error('mount.context must be an object')
+    }
+    const clonedComponent = cloneDeep(component)
+    component = {
+      render (h) {
+        return h(clonedComponent, options.context)
+      }
+    }
+  }
 
   if (options.provide) {
     addProvide(component, options)
@@ -54,6 +68,9 @@ export default function mount (component: Component, options: MountOptions = {})
   if (options.instance) {
     Constructor = options.instance.extend(component)
   } else {
+    if (options.stub) {
+      stubComponents(component, options.stub)
+    }
     Constructor = Vue.extend(component)
   }
 

src/wrappers/wrapper.js

@@ -2,7 +2,7 @@
 
 import { matchesSelector } from 'sizzle'
 import { isValidSelector } from '../lib/validators'
-import findVueComponents from '../lib/find-vue-components'
+import findVueComponents, { vmCtorMatchesName } from '../lib/find-vue-components'
 import findMatchingVNodes from '../lib/find-matching-vnodes'
 import VueWrapper from './vue-wrapper'
 import WrapperArray from './wrapper-array'
@@ -199,8 +199,8 @@ export default class Wrapper implements BaseWrapper {
       if (!this.isVueComponent) {
         return false
       }
-            // TODO: Throw error if component does not have name
-      return !!this.vm && this.vm.$vnode.componentOptions.Ctor.options.name === selector.name
+      // TODO: Throw error if component does not have name
+      return vmCtorMatchesName(this.vm, selector.name)
     }
     return this.element.getAttribute && matchesSelector(this.element, selector)
   }

test/integration/specs/mount/options/context.spec.js

@@ -0,0 +1,39 @@
+import mount from '~src/mount'
+
+describe('context', () => {
+  it('mounts functional component when passed context object', () => {
+    const Component = {
+      functional: true,
+      render (h, { props }) {
+        return h('div')
+      },
+      name: 'common'
+    }
+    const context = {
+      data: { hellpo: true },
+      props: { show: true }
+    }
+
+    const wrapper = mount(Component, { context })
+    expect(wrapper.is(Component)).to.equal(true)
+  })
+
+  it('throws error if non functional component is passed with context option', () => {
+    const Component = {
+      render: h => h('div')
+    }
+    const context = {}
+    const message = 'mount.context can only be used when mounting a functional component'
+    expect(() => mount(Component, { context })).to.throw(Error, message)
+  })
+
+  it('throws error if context option is not an object', () => {
+    const Component = {
+      functional: true,
+      render: h => h('div')
+    }
+    const context = 'string'
+    const message = 'mount.context must be an object'
+    expect(() => mount(Component, { context })).to.throw(Error, message)
+  })
+})