refactor: Update setData method (address #563)

flow/modules.flow.js

@@ -12,6 +12,10 @@ declare module 'lodash/cloneDeep' {
   declare module.exports: any;
 }
 
+declare module 'lodash/merge' {
+  declare module.exports: any;
+}
+
 declare module 'vue-template-compiler' {
   declare module.exports: any;
 }

packages/test-utils/src/wrapper.js

@@ -1,6 +1,7 @@
 // @flow
 
 import Vue from 'vue'
+import merge from 'lodash/merge'
 import getSelectorTypeOrThrow from './get-selector-type'
 import {
   REF_SELECTOR,
@@ -420,8 +421,15 @@ export default class Wrapper implements BaseWrapper {
     }
 
     Object.keys(data).forEach((key) => {
-      // $FlowIgnore : Problem with possibly null this.vm
-      this.vm.$set(this.vm, [key], data[key])
+      if (typeof data[key] === 'object' && data[key] !== null) {
+        // $FlowIgnore : Problem with possibly null this.vm
+        const newObj = merge(this.vm[key], data[key])
+        // $FlowIgnore : Problem with possibly null this.vm
+        this.vm.$set(this.vm, [key], newObj)
+      } else {
+        // $FlowIgnore : Problem with possibly null this.vm
+        this.vm.$set(this.vm, [key], data[key])
+      }
     })
   }
 

test/specs/wrapper/setData.spec.js

@@ -132,4 +132,50 @@ describeWithShallowAndMount('setData', (mountingMethod) => {
     wrapper.setData({ message: null })
     expect(wrapper.text()).to.equal('There is no message yet')
   })
+
+  it('should update an existing property in a data object', () => {
+    const TestComponent = {
+      data: () => ({
+        anObject: {
+          propA: {
+            prop1: 'a'
+          },
+          propB: 'b'
+        }
+      })
+    }
+    const wrapper = mountingMethod(TestComponent)
+    wrapper.setData({
+      anObject: {
+        propA: {
+          prop1: 'c'
+        }
+      }
+    })
+    expect(wrapper.vm.anObject.propB).to.equal('b')
+    expect(wrapper.vm.anObject.propA.prop1).to.equal('c')
+  })
+
+  it('should append a new property to an object without removing existing properties', () => {
+    const TestComponent = {
+      data: () => ({
+        anObject: {
+          propA: {
+            prop1: 'a'
+          },
+          propB: 'b'
+        }
+      })
+    }
+    const wrapper = mountingMethod(TestComponent)
+    wrapper.setData({
+      anObject: {
+        propA: {
+          prop2: 'b'
+        }
+      }
+    })
+    expect(wrapper.vm.anObject.propA.prop1).to.equal('a')
+    expect(wrapper.vm.anObject.propA.prop2).to.equal('b')
+  })
 })