feat(mocks): add property as reactive when mocked

Author: eddyerburgh

package-lock.json

@@ -86,7 +86,7 @@
     "vue": "^2.5.2",
     "vue-loader": "^13.0.5",
     "vue-router": "^2.7.0",
-    "vue-template-compiler": "^2.4.4",
+    "vue-template-compiler": "^2.5.2",
     "vuex": "^2.4.1",
     "webpack": "^3.6.0",
     "webpack-node-externals": "^1.6.0"

package.json

@@ -1,7 +1,9 @@
 // @flow
+import $$Vue from 'vue'
 
 export default function addMocks (mockedProperties: Object, Vue: Component) {
   Object.keys(mockedProperties).forEach((key) => {
     Vue.prototype[key] = mockedProperties[key]
+    $$Vue.util.defineReactive(Vue, key, mockedProperties[key])
   })
 }

src/lib/add-mocks.js

@@ -15,6 +15,34 @@ describe('mount.mocks', () => {
     expect(wrapper.vm.$route).to.equal($route)
   })
 
+  it('adds variables to vm when passed as mocks object', () => {
+    const stub = sinon.stub()
+    const $reactiveMock = { value: 'value' }
+    const wrapper = mount({
+      template: `
+        <div>
+          {{value}}
+        </div>
+      `,
+      computed: {
+        value () {
+          return this.$reactiveMock.value
+        }
+      },
+      watch: {
+        value () {
+          stub()
+        }
+      }
+    }, {
+      mocks: { $reactiveMock }
+    })
+    expect(wrapper.text()).to.contain('value')
+    $reactiveMock.value = 'changed value'
+    wrapper.update()
+    expect(wrapper.text()).to.contain('changed value')
+  })
+
   it('does not affect global vue class when passed as mocks object', () => {
     const $store = { store: true }
     const wrapper = mount(Component, {