Support setProps runs computed and watcher when prop is object (vuejs#761)

Author: mya-ake

packages/create-instance/add-props.js

@@ -0,0 +1,22 @@
+// @flow
+
+// SetProps on object prop child changes trigger computed or watcher
+// https://github.com/vuejs/vue-test-utils/issues/761
+export function createProps (propsData: Object): Object {
+  return Object.keys(propsData).reduce((props, key) => {
+    const data = propsData[key]
+    if (
+      typeof data === 'object' &&
+      data !== null &&
+      !Array.isArray(data)
+    ) {
+      props[key] = Object.assign(
+        Object.create(Object.getPrototypeOf(data)),
+        data
+      )
+    } else {
+      props[key] = data
+    }
+    return props
+  }, {})
+}

packages/create-instance/create-instance.js

@@ -2,6 +2,7 @@
 
 import { createSlotVNodes } from './add-slots'
 import addMocks from './add-mocks'
+import { createProps } from './add-props'
 import { addEventLogger } from './log-events'
 import { createComponentStubs } from 'shared/stub-components'
 import { throwError, warn, vueVersion } from 'shared/util'
@@ -128,11 +129,14 @@ export default function createInstance (
       const slots = options.slots
         ? createSlotVNodes(h, options.slots)
         : undefined
+      const props = options.propsData
+        ? createProps(options.propsData)
+        : undefined
       return h(
         Constructor,
         {
           ref: 'vm',
-          props: options.propsData,
+          props,
           on: options.listeners,
           attrs: options.attrs
         },

test/specs/mount.spec.js

@@ -52,9 +52,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     const wrapper = mount(ComponentWithProps, { propsData: { prop1 }})
     expect(wrapper.vm).to.be.an('object')
     if (wrapper.vm.$props) {
-      expect(wrapper.vm.$props.prop1).to.equal(prop1)
+      expect(wrapper.vm.$props.prop1).to.deep.equal(prop1)
     } else {
-      expect(wrapper.vm.$options.propsData.prop1).to.equal(prop1)
+      expect(wrapper.vm.$options.propsData.prop1).to.deep.equal(prop1)
     }
   })
 

test/specs/wrapper/setProps.spec.js

@@ -169,6 +169,110 @@ describeWithShallowAndMount('setProps', mountingMethod => {
     expect(wrapper.vm.data).to.equal('1,2,3,4,5')
   })
 
+  it('runs computed when prop is object', () => {
+    class TestClass {
+      constructor (text) {
+        this._text = text
+      }
+
+      get text () {
+        return this._text
+      }
+
+      set text (text) {
+        this._text = text
+      }
+    }
+
+    const TestComponent = {
+      template: `<div id="app">
+        <div class="shallow">{{ shallowObjText }}</div>
+        <div class="deep">{{ deepObjText }}</div>
+        <div class="class">{{ classText }}</div>
+      </div>`,
+      props: {
+        shallowObj: Object,
+        deepObj: Object,
+        classInstance: TestClass
+      },
+      computed: {
+        shallowObjText () {
+          return this.shallowObj.text
+        },
+        deepObjText () {
+          return this.deepObj.obj.text
+        },
+        classText () {
+          return this.classInstance.text
+        }
+      }
+    }
+
+    const shallowObj = {
+      text: 'initial shallow'
+    }
+    const deepObj = {
+      obj: {
+        text: 'initial deep'
+      }
+    }
+    const classInstance = new TestClass('initial class')
+    const wrapper = mountingMethod(TestComponent, {
+      propsData: { shallowObj, deepObj, classInstance }
+    })
+    const shallowWraper = wrapper.find('.shallow')
+    const deepWrapper = wrapper.find('.deep')
+    const classWrapper = wrapper.find('.class')
+
+    expect(shallowWraper.text()).to.equal('initial shallow')
+    expect(deepWrapper.text()).to.equal('initial deep')
+    expect(classWrapper.text()).to.equal('initial class')
+
+    shallowObj.text = 'updated shallow'
+    deepObj.obj.text = 'updated deep'
+    classInstance.text = 'updated class'
+    wrapper.setProps({ shallowObj, deepObj, classInstance })
+    expect(shallowWraper.text()).to.equal('updated shallow')
+    expect(deepWrapper.text()).to.equal('updated deep')
+    expect(classWrapper.text()).to.equal('updated class')
+  })
+
+  it('runs watcher when prop is object', () => {
+    const TestComponent = {
+      template: `<div id="app">
+        <div class="watch">{{ watchText }}</div>
+      </div>`,
+      props: {
+        obj: Object
+      },
+      data: () => ({
+        watchText: 'initial'
+      }),
+      watch: {
+        'obj.text': 'execute'
+      },
+      methods: {
+        execute () {
+          this.watchText = 'updated'
+        }
+      }
+    }
+
+    const obj = {
+      text: 'initial shallow'
+    }
+    const wrapper = mountingMethod(TestComponent, {
+      propsData: { obj }
+    })
+    const watchWrapper = wrapper.find('.watch')
+
+    expect(watchWrapper.text()).to.equal('initial')
+
+    obj.text = 'updated shallow'
+    wrapper.setProps({ obj })
+    expect(watchWrapper.text()).to.equal('updated')
+  })
+
   it('throws an error if node is not a Vue instance', () => {
     const message = 'wrapper.setProps() can only be called on a Vue instance'
     const compiled = compileToFunctions('<div><p></p></div>')