fix: prototype methods being discarded when using setData (#2166)

Currently, when calling setData on a wrapper it will not retain methods on any constructed objects passed in. These methods reside in the prototype which the current logic does not persist across. These changes will ensure that any prototype properties/methods are copied over to the proxied data object.

fixes #1851

Author: rory-instil

src/utils.ts

@@ -80,20 +80,22 @@ export const mergeDeep = (
   if (!isObject(target) || !isObject(source)) {
     return source
   }
-  Object.keys(source).forEach((key) => {
-    const targetValue = target[key]
-    const sourceValue = source[key]
-
-    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-      target[key] = sourceValue
-    } else if (sourceValue instanceof Date) {
-      target[key] = sourceValue
-    } else if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue)
-    } else {
-      target[key] = sourceValue
-    }
-  })
+  Object.keys(source)
+    .concat(Object.getOwnPropertyNames(Object.getPrototypeOf(source) ?? {}))
+    .forEach((key) => {
+      const targetValue = target[key]
+      const sourceValue = source[key]
+
+      if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+        target[key] = sourceValue
+      } else if (sourceValue instanceof Date) {
+        target[key] = sourceValue
+      } else if (isObject(targetValue) && isObject(sourceValue)) {
+        target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue)
+      } else {
+        target[key] = sourceValue
+      }
+    })
 
   return target
 }

tests/setData.spec.ts

@@ -214,4 +214,36 @@ describe('setData', () => {
     expect(wrapper.vm.value).toBeInstanceOf(Date)
     expect(wrapper.vm.value!.toISOString()).toBe('2022-08-11T12:15:54.000Z')
   })
+
+  it('should retain prototype methods for constructed objects when calling setData', async () => {
+    const expectedResult = 'success!'
+    class TestClass {
+      constructor(readonly name: string) {}
+      getResult(): string {
+        return expectedResult
+      }
+    }
+
+    const wrapper = mount(
+      defineComponent({
+        template: '<div/>',
+        data() {
+          return { value: new TestClass('test1') }
+        },
+        methods: {
+          getResult() {
+            return `${this.value.name}: ${this.value.getResult()}`
+          }
+        }
+      })
+    )
+
+    expect(wrapper.vm.getResult()).toStrictEqual(`test1: ${expectedResult}`)
+
+    await wrapper.setData({
+      value: new TestClass('test2')
+    })
+
+    expect(wrapper.vm.getResult()).toStrictEqual(`test2: ${expectedResult}`)
+  })
 })