fix: update $props object in setProps (#381)

* fix: update  object in setProps

* fix: only run watchers for expressions that have changed in setData and setProps

Author: eddyerburgh

src/wrappers/vue-wrapper.js

@@ -4,17 +4,26 @@ import Wrapper from './wrapper'
 import addSlots from '../lib/add-slots'
 import cloneDeep from 'lodash/cloneDeep'
 
-function update () {
+function update (changedData) {
   // the only component made by mount()
   if (this.$_originalSlots) {
     this.$slots = cloneDeep(this.$_originalSlots)
   }
   if (this.$_mountingOptionsSlots) {
     addSlots(this, this.$_mountingOptionsSlots)
   }
-  this._watchers.forEach(watcher => {
-    watcher.run()
-  })
+  if (changedData) {
+    Object.keys(changedData).forEach((key) => {
+       // $FlowIgnore : Problem with possibly null this.vm
+      this._watchers.forEach((watcher) => {
+        if (watcher.expression === key) { watcher.run() }
+      })
+    })
+  } else {
+    this._watchers.forEach(watcher => {
+      watcher.run()
+    })
+  }
   const vnodes = this._render()
   this._update(vnodes)
   this.$children.forEach(child => update.call(child))

src/wrappers/wrapper.js

@@ -377,7 +377,7 @@ export default class Wrapper implements BaseWrapper {
       this.vm.$set(this.vm, [key], data[key])
     })
 
-    this.update()
+    this.update(data)
   }
 
   /**
@@ -452,18 +452,23 @@ export default class Wrapper implements BaseWrapper {
     if (!this.isVueComponent || !this.vm) {
       throwError('wrapper.setProps() can only be called on a Vue instance')
     }
-
+    if (!this.vm.$options.propsData) {
+      this.vm.$options.propsData = {}
+    }
     Object.keys(data).forEach((key) => {
       // $FlowIgnore : Problem with possibly null this.vm
       if (this.vm._props) {
         this.vm._props[key] = data[key]
+        this.vm.$props[key] = data[key]
+        this.vm.$options.propsData[key] = data[key]
       } else {
         // $FlowIgnore : Problem with possibly null this.vm
         this.vm[key] = data[key]
+        this.vm.$options.propsData[key] = data[key]
       }
     })
 
-    this.update()
+    this.update(data)
     // $FlowIgnore : Problem with possibly null this.vm
     this.vnode = this.vm._vnode
   }

test/unit/specs/mount/Wrapper/props.spec.js

@@ -18,6 +18,20 @@ describe('props', () => {
     expect(wrapper.props()).to.eql({})
   })
 
+  it('should update after setProps', () => {
+    const prop1 = {}
+    const prop2 = 'val1'
+    const wrapper = mount(ComponentWithProps, {
+      propsData: { prop1, prop2 }
+    })
+
+    expect(wrapper.props()).to.eql({ prop1: {}, prop2: 'val1' })
+    // setProps
+    wrapper.setProps({ prop2: 'val2' })
+    expect(wrapper.vm.prop2).to.eql('val2') // pass
+    expect(wrapper.props()).to.eql({ prop1: {}, prop2: 'val2' }) // fail
+  })
+
   it('throws an error if called on a non vm wrapper', () => {
     const compiled = compileToFunctions('<div><p /></div>')
     const p = mount(compiled).findAll('p').at(0)

test/unit/specs/mount/Wrapper/setData.spec.js

@@ -58,4 +58,26 @@ describe('setData', () => {
     const p = wrapper.find('p')
     expect(() => p.setData({ ready: true })).throw(Error, message)
   })
+
+  it('should not run watchers if data updated is null', () => {
+    const TestComponent = {
+      template: `
+      <div>
+        <div v-if="!message">There is no message yet</div>
+        <div v-else>{{ reversedMessage }}</div>
+      </div>
+      `,
+      data: () => ({
+        message: 'egassem'
+      }),
+      computed: {
+        reversedMessage: function () {
+          return this.message.split('').reverse().join('')
+        }
+      }
+    }
+    const wrapper = mount(TestComponent)
+    wrapper.setData({ message: null })
+    expect(wrapper.text()).to.equal('There is no message yet')
+  })
 })

test/unit/specs/mount/Wrapper/setProps.spec.js

@@ -47,6 +47,30 @@ describe('setProps', () => {
     expect(info.args[0][0]).to.equal(prop1)
   })
 
+  it('should not run watchers if prop updated is null', () => {
+    const TestComponent = {
+      template: `
+      <div>
+        <div v-if="!message">There is no message yet</div>
+        <div v-else>{{ reversedMessage }}</div>
+      </div>
+      `,
+      computed: {
+        reversedMessage: function () {
+          return this.message.split('').reverse().join('')
+        }
+      },
+      props: ['message']
+    }
+    const wrapper = mount(TestComponent, {
+      propsData: {
+        message: 'message'
+      }
+    })
+    wrapper.setProps({ message: null })
+    expect(wrapper.text()).to.equal('There is no message yet')
+  })
+
   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>')