feat(setComputed): add setComputed method (#84)

Author: eddyerburgh

flow/wrapper.js

@@ -24,6 +24,7 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     name(): string | void,
     text(): string | void,
     setData(data: Object): void,
+    setComputed(computed: Object): void,
     setMethods(methods: Object): void,
     setProps(data: Object): void,
     trigger(type: string, options: Object): void,

src/wrappers/error-wrapper.js

@@ -76,6 +76,10 @@ export default class ErrorWrapper implements BaseWrapper {
     throwError(`find did not return ${this.selector}, cannot call text() on empty Wrapper`)
   }
 
+  setComputed (): void {
+    throwError(`find did not return ${this.selector}, cannot call setComputed() on empty Wrapper`)
+  }
+
   setData (): void {
     throwError(`find did not return ${this.selector}, cannot call setData() on empty Wrapper`)
   }

src/wrappers/wrapper-array.js

@@ -119,6 +119,12 @@ export default class WrapperArray implements BaseWrapper {
     }
   }
 
+  setComputed (computed: Object): void {
+    this.throwErrorIfWrappersIsEmpty('setComputed')
+
+    this.wrappers.forEach(wrapper => wrapper.setComputed(computed))
+  }
+
   setData (data: Object): void {
     this.throwErrorIfWrappersIsEmpty('setData')
 

src/wrappers/wrapper.js

@@ -283,7 +283,26 @@ export default class Wrapper implements BaseWrapper {
   }
 
   /**
-   * Sets vm data
+   * Sets vm computed
+   */
+  setComputed (computed: Object) {
+    if (!this.isVueComponent) {
+      throwError('wrapper.setComputed() can only be called on a Vue instance')
+    }
+
+    Object.keys(computed).forEach((key) => {
+      // $FlowIgnore : Problem with possibly null this.vm
+      if (!this.vm._computedWatchers[key]) {
+        throwError(`wrapper.setComputed() was passed a value that does not exist as a computed property on the Vue instance. Property ${key} does not exist on the Vue instance`)
+      }
+      // $FlowIgnore : Problem with possibly null this.vm
+      this.vm._computedWatchers[key].value = computed[key]
+    })
+    this.update()
+  }
+
+  /**
+   * Sets vm methods
    */
   setMethods (methods: Object) {
     if (!this.isVueComponent) {

test/resources/components/component-with-computed.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        {{reversedMessage}}
+    </div>
+</template>
+
+<script>
+    export default{
+      name: 'component-with-child',
+      data: () => ({
+        message: 'egassem'
+      }),
+      computed: {
+        reversedMessage: function () {
+          return this.message.split('').reverse().join('')
+        }
+      }
+    }
+</script>

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

@@ -0,0 +1,26 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import mount from '~src/mount'
+import ComponentWithComputed from '~resources/components/component-with-computed.vue'
+
+describe('setComputed', () => {
+  it('sets component computed props and updates when called on Vue instance', () => {
+    const wrapper = mount(ComponentWithComputed)
+    expect(wrapper.text()).to.contain('message')
+    wrapper.setComputed({ reversedMessage: 'custom' })
+    expect(wrapper.text()).to.contain('custom')
+  })
+
+  it('throws an error if computed watcher does not exist', () => {
+    const message = 'wrapper.setComputed() was passed a value that does not exist as a computed property on the Vue instance. Property noExist does not exist on the Vue instance'
+    const wrapper = mount(ComponentWithComputed)
+    expect(() => wrapper.setComputed({ noExist: '' })).throw(Error, message)
+  })
+
+  it('throws an error if node is not a Vue instance', () => {
+    const message = 'wrapper.setComputed() can only be called on a Vue instance'
+    const compiled = compileToFunctions('<div><p></p></div>')
+    const wrapper = mount(compiled)
+    const p = wrapper.find('p')
+    expect(() => p.setComputed({ ready: true })).throw(Error, message)
+  })
+})

test/unit/specs/wrappers/error-wrapper.spec.js

@@ -113,6 +113,13 @@ describe('ErrorWrapper', () => {
     expect(() => error.text()).to.throw().with.property('message', message)
   })
 
+  it('setComputed throws error when called', () => {
+    const selector = 'div'
+    const message = `[vue-test-utils]: find did not return ${selector}, cannot call setComputed() on empty Wrapper`
+    const error = new ErrorWrapper(selector)
+    expect(() => error.setComputed()).to.throw().with.property('message', message)
+  })
+
   it('setData throws error when called', () => {
     const selector = 'div'
     const message = `[vue-test-utils]: find did not return ${selector}, cannot call setData() on empty Wrapper`

test/unit/specs/wrappers/wrapper-array.spec.js

@@ -206,7 +206,16 @@ describe('WrapperArray', () => {
     expect(() => wrapperArray.text()).to.throw().with.property('message', message)
   })
 
-  it('setData calls setMethods on each wrapper', () => {
+  it('setComputed calls setMethods on each wrapper', () => {
+    const setComputed = sinon.stub()
+    const computed = {}
+    const wrapperArray = new WrapperArray([{ setComputed }, { setComputed }])
+    wrapperArray.setComputed(computed)
+    expect(setComputed.calledTwice).to.equal(true)
+    expect(setComputed.calledWith(computed)).to.equal(true)
+  })
+
+  it('setMethods calls setMethods on each wrapper', () => {
     const setMethods = sinon.stub()
     const methods = {}
     const wrapperArray = new WrapperArray([{ setMethods }, { setMethods }])

types/index.d.ts

@@ -43,6 +43,7 @@ interface BaseWrapper {
   isVueInstance (): boolean
 
   update (): void
+  setComputed (computed: object): void
   setData (data: object): void
   setMethods (data: object): void
   setProps (props: object): void

types/test/wrapper.ts

@@ -30,6 +30,7 @@ const emittedByOrder = wrapper.emittedByOrder()
 const name: string = emittedByOrder[0].name
 
 wrapper.update()
+wrapper.setComputed({computedProp: true})
 wrapper.setData({ foo: 'bar' })
 wrapper.setMethods({checked: true})
 wrapper.setProps({ checked: true })