fix: throw errors in setData and setProps for functional components (#438)

Author: eddyerburgh

src/lib/create-functional-component.js

@@ -53,6 +53,7 @@ export default function createFunctionalComponent (component: Component, mountin
         (mountingOptions.context && mountingOptions.context.children && mountingOptions.context.children.map(x => typeof x === 'function' ? x(h) : x)) || createFunctionalSlots(mountingOptions.slots, h)
       )
     },
-    name: component.name
+    name: component.name,
+    _isFunctionalContainer: true
   }
 }

src/wrappers/vue-wrapper.js

@@ -45,6 +45,7 @@ export default class VueWrapper extends Wrapper implements BaseWrapper {
     }))
     this.vm = vm
     this.isVueComponent = true
+    this.isFunctionalComponent = vm.$options._isFunctionalContainer
     this._emitted = vm.__emitted
     this._emittedByOrder = vm.__emittedByOrder
   }

src/wrappers/wrapper.js

@@ -5,7 +5,8 @@ import getSelectorTypeOrThrow from '../lib/get-selector-type'
 import {
   REF_SELECTOR,
   COMPONENT_SELECTOR,
-  NAME_SELECTOR
+  NAME_SELECTOR,
+  FUNCTIONAL_OPTIONS
 } from '../lib/consts'
 import {
   vmCtorMatchesName,
@@ -29,6 +30,7 @@ export default class Wrapper implements BaseWrapper {
   update: Function;
   options: WrapperOptions;
   version: number
+  isFunctionalComponent: boolean
 
   constructor (node: VNode | Element, update: Function, options: WrapperOptions) {
     if (node instanceof Element) {
@@ -38,6 +40,9 @@ export default class Wrapper implements BaseWrapper {
       this.vnode = node
       this.element = node.elm
     }
+    if (this.vnode && (this.vnode[FUNCTIONAL_OPTIONS] || this.vnode.functionalContext)) {
+      this.isFunctionalComponent = true
+    }
     this.update = update
     this.options = options
     this.version = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
@@ -394,6 +399,10 @@ export default class Wrapper implements BaseWrapper {
    * Sets vm data
    */
   setData (data: Object) {
+    if (this.isFunctionalComponent) {
+      throwError('wrapper.setData() canot be called on a functional component')
+    }
+
     if (!this.vm) {
       throwError('wrapper.setData() can only be called on a Vue instance')
     }
@@ -475,6 +484,9 @@ export default class Wrapper implements BaseWrapper {
    * Sets vm props
    */
   setProps (data: Object) {
+    if (this.isFunctionalComponent) {
+      throwError('wrapper.setProps() canot be called on a functional component')
+    }
     if (!this.isVueComponent || !this.vm) {
       throwError('wrapper.setProps() can only be called on a Vue instance')
     }
@@ -484,8 +496,8 @@ export default class Wrapper implements BaseWrapper {
     Object.keys(data).forEach((key) => {
       // Ignore properties that were not specified in the component options
       // $FlowIgnore : Problem with possibly null this.vm
-      if (!this.vm.$options._propKeys.includes(key)) {
-        return
+      if (!this.vm.$options._propKeys || !this.vm.$options._propKeys.includes(key)) {
+        throwError(`wrapper.setProps() called with ${key} property which is not defined on component`)
       }
 
       // $FlowIgnore : Problem with possibly null this.vm

test/specs/wrapper/setData.spec.js

@@ -1,9 +1,12 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import ComponentWithVIf from '~resources/components/component-with-v-if.vue'
 import ComponentWithWatch from '~resources/components/component-with-watch.vue'
-import { describeWithShallowAndMount } from '~resources/test-utils'
+import {
+  describeWithShallowAndMount,
+  vueVersion
+ } from '~resources/test-utils'
 
-describeWithShallowAndMount('setData', (method) => {
+describeWithShallowAndMount('setData', (mountingMethod) => {
   let info
 
   beforeEach(() => {
@@ -15,7 +18,7 @@ describeWithShallowAndMount('setData', (method) => {
   })
 
   it('sets component data and updates nested vm nodes when called on Vue instance', () => {
-    const wrapper = method(ComponentWithVIf)
+    const wrapper = mountingMethod(ComponentWithVIf)
     expect(wrapper.findAll('.child.ready').length).to.equal(0)
     wrapper.setData({ ready: true })
     expect(wrapper.findAll('.child.ready').length).to.equal(1)
@@ -30,35 +33,57 @@ describeWithShallowAndMount('setData', (method) => {
         }
       }
     }
-    const wrapper = method(Component)
+    const wrapper = mountingMethod(Component)
     wrapper.setData({ show: true })
     wrapper.update()
     expect(wrapper.element).to.equal(wrapper.vm.$el)
     expect(wrapper.hasClass('some-class')).to.be.true
   })
 
   it('runs watch function when data is updated', () => {
-    const wrapper = method(ComponentWithWatch)
+    const wrapper = mountingMethod(ComponentWithWatch)
     const data1 = 'testest'
     wrapper.setData({ data1 })
     expect(wrapper.vm.data2).to.equal(data1)
   })
 
   it('runs watch function after all props are updated', () => {
-    const wrapper = method(ComponentWithWatch)
+    const wrapper = mountingMethod(ComponentWithWatch)
     const data1 = 'testest'
     wrapper.setData({ data2: 'newProp', data1 })
     expect(info.args[0][0]).to.equal(data1)
   })
 
-  it('throws an error if node is not a Vue instance', () => {
+  it('throws error if node is not a Vue instance', () => {
     const message = 'wrapper.setData() can only be called on a Vue instance'
     const compiled = compileToFunctions('<div><p></p></div>')
-    const wrapper = method(compiled)
+    const wrapper = mountingMethod(compiled)
     const p = wrapper.find('p')
     expect(() => p.setData({ ready: true })).throw(Error, message)
   })
 
+  it('throws error when called on functional vnode', () => {
+    const AFunctionalComponent = {
+      render: (h, context) => h('div', context.prop1),
+      functional: true
+    }
+    const message = '[vue-test-utils]: wrapper.setData() canot be called on a functional component'
+    const fn = () => mountingMethod(AFunctionalComponent).setData({ data1: 'data' })
+    expect(fn).to.throw().with.property('message', message)
+    // find on functional components isn't supported in Vue < 2.3
+    if (vueVersion < 2.3) {
+      return
+    }
+    const TestComponent = {
+      template: '<div><a-functional-component /></div>',
+      components: {
+        AFunctionalComponent
+      }
+    }
+    const fn2 = () => mountingMethod(TestComponent).find(AFunctionalComponent).setData({ data1: 'data' })
+    expect(fn2).to.throw().with.property('message', message)
+  })
+
   it('should not run watchers if data updated is null', () => {
     const TestComponent = {
       template: `
@@ -76,7 +101,7 @@ describeWithShallowAndMount('setData', (method) => {
         }
       }
     }
-    const wrapper = method(TestComponent)
+    const wrapper = mountingMethod(TestComponent)
     wrapper.setData({ message: null })
     expect(wrapper.text()).to.equal('There is no message yet')
   })

test/specs/wrapper/setProps.spec.js

@@ -1,7 +1,10 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import ComponentWithWatch from '~resources/components/component-with-watch.vue'
-import { describeWithShallowAndMount } from '~resources/test-utils'
+import {
+  describeWithShallowAndMount,
+  vueVersion
+} from '~resources/test-utils'
 
 describeWithShallowAndMount('setProps', (mountingMethod) => {
   let info
@@ -24,6 +27,37 @@ describeWithShallowAndMount('setProps', (mountingMethod) => {
     expect(wrapper.find('.prop-2').element.textContent).to.equal(prop2)
   })
 
+  it('throws error if component does not include props key', () => {
+    const TestComponent = {
+      template: '<div></div>'
+    }
+    const message = '[vue-test-utils]: wrapper.setProps() called with prop1 property which is not defined on component'
+    const fn = () => mountingMethod(TestComponent).setProps({ prop1: 'prop' })
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws error when called on functional vnode', () => {
+    const AFunctionalComponent = {
+      render: (h, context) => h('div', context.prop1),
+      functional: true
+    }
+    const message = '[vue-test-utils]: wrapper.setProps() canot be called on a functional component'
+    const fn = () => mountingMethod(AFunctionalComponent).setProps({ prop1: 'prop' })
+    expect(fn).to.throw().with.property('message', message)
+    // find on functional components isn't supported in Vue < 2.3
+    if (vueVersion < 2.3) {
+      return
+    }
+    const TestComponent = {
+      template: '<div><a-functional-component /></div>',
+      components: {
+        AFunctionalComponent
+      }
+    }
+    const fn2 = () => mountingMethod(TestComponent).find(AFunctionalComponent).setProps({ prop1: 'prop' })
+    expect(fn2).to.throw().with.property('message', message)
+  })
+
   it('sets component props, and updates DOM when propsData was not initially passed', () => {
     const prop1 = 'prop 1'
     const prop2 = 'prop s'
@@ -33,13 +67,6 @@ describeWithShallowAndMount('setProps', (mountingMethod) => {
     expect(wrapper.find('.prop-2').element.textContent).to.equal(prop2)
   })
 
-  it('does not add properties not defined in component', () => {
-    const undefinedProp = 'some value'
-    const wrapper = mountingMethod(ComponentWithProps)
-    wrapper.setProps({ undefinedProp })
-    expect(wrapper.props().undefinedProp).to.be.undefined
-  })
-
   it('runs watch function when prop is updated', () => {
     const wrapper = mountingMethod(ComponentWithWatch)
     const prop1 = 'testest'