feat: Add setValue method

flow/wrapper.flow.js

@@ -32,6 +32,8 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     setData(data: Object): void,
     setComputed(computed: Object): void,
     setMethods(methods: Object): void,
+    setValue(value: any): void,
+    setChecked(checked: boolean): void,
     setProps(data: Object): void,
     trigger(type: string, options: Object): void,
     destroy(): void

packages/test-utils/src/error-wrapper.js

@@ -117,6 +117,14 @@ export default class ErrorWrapper implements BaseWrapper {
     throwError(`find did not return ${this.selector}, cannot call setProps() on empty Wrapper`)
   }
 
+  setValue (): void {
+    throwError(`find did not return ${this.selector}, cannot call setValue() on empty Wrapper`)
+  }
+
+  setChecked (): void {
+    throwError(`find did not return ${this.selector}, cannot call setChecked() on empty Wrapper`)
+  }
+
   trigger (): void {
     throwError(`find did not return ${this.selector}, cannot call trigger() on empty Wrapper`)
   }

packages/test-utils/src/wrapper-array.js

@@ -181,6 +181,18 @@ export default class WrapperArray implements BaseWrapper {
     this.wrappers.forEach(wrapper => wrapper.setProps(props))
   }
 
+  setValue (value: any): void {
+    this.throwErrorIfWrappersIsEmpty('setValue')
+
+    this.wrappers.forEach(wrapper => wrapper.setValue(value))
+  }
+
+  setChecked (checked: boolean): void {
+    this.throwErrorIfWrappersIsEmpty('setChecked')
+
+    this.wrappers.forEach(wrapper => wrapper.setChecked(checked))
+  }
+
   trigger (event: string, options: Object): void {
     this.throwErrorIfWrappersIsEmpty('trigger')
 

packages/test-utils/src/wrapper.js

@@ -531,6 +531,81 @@ export default class Wrapper implements BaseWrapper {
     this.vnode = this.vm._vnode
   }
 
+  /**
+   * Sets element value and triggers input event
+   */
+  setValue (value: any) {
+    const el = this.element
+
+    if (!el) {
+      throwError('cannot call wrapper.setValue() on a wrapper without an element')
+    }
+
+    const tag = el.tagName
+    const type = this.attributes().type
+    const event = 'input'
+
+    if (this.isVueComponent) {
+    } else if (tag === 'SELECT') {
+      // event = 'change'
+      // el.value = value
+      throwError('wrapper.setValue() cannot be called on select')
+    } else if (tag === 'INPUT' && type === 'checkbox') {
+      throwError('wrapper.setValue() cannot be called on checkbox. Use wrapper.setChecked() instead')
+    } else if (tag === 'INPUT' && type === 'radio') {
+      throwError('wrapper.setValue() cannot be called on radio. Use wrapper.setChecked() instead')
+    } else if (tag === 'INPUT' || tag === 'textarea') {
+    } else {
+      throwError('wrapper.setValue() cannot be called on this element')
+    }
+
+    el.value = value
+    this.trigger(event)
+  }
+
+  /**
+   * Checks radio button or checkbox element
+   */
+  setChecked (checked: boolean) {
+    console.log(typeof checked)
+    if (typeof checked !== 'undefined') {
+      if (typeof checked !== 'boolean') {
+        throwError('wrapper.setChecked() must be passed a boolean')
+      }
+    } else {
+      checked = true
+    }
+
+    const el = this.element
+
+    if (!el) {
+      throwError('cannot call wrapper.setChecked() on a wrapper without an element')
+    }
+
+    const tag = el.tagName
+    const type = this.attributes().type
+    const event = 'change'
+
+    if (this.isVueComponent) {
+      throwError('wrapper.setChecked() cannot be called on component. Use wrapper.setValue() instead')
+    } else if (tag === 'SELECT') {
+      throwError('wrapper.setChecked() cannot be called on select')
+    } else if (tag === 'INPUT' && type === 'checkbox') {
+      el.checked = checked
+      this.trigger(event)
+    } else if (tag === 'INPUT' && type === 'radio') {
+      if (!checked) {
+        throwError('wrapper.setChecked() cannot be called with parameter false on radio')
+      }
+      el.checked = true
+      this.trigger(event)
+    } else if (tag === 'INPUT' || tag === 'textarea') {
+      throwError('wrapper.setChecked() cannot be called on "text" inputs. Use wrapper.setValue() instead')
+    } else {
+      throwError('wrapper.setChecked() cannot be called on this element')
+    }
+  }
+
   /**
    * Return text of wrapper element
    */

packages/test-utils/types/index.d.ts

@@ -99,6 +99,9 @@ export interface Wrapper<V extends Vue> extends BaseWrapper {
   text (): string
   name (): string
 
+  setValue (value: any): void
+  setChecked (checked: boolean): void
+
   emitted (event?: string): { [name: string]: Array<Array<any>> }
   emittedByOrder (): Array<{ name: string, args: Array<any> }>
 }

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <input type="checkbox" v-model="checkboxVal">
+    <input type="radio" v-model="radioVal" id="radioFoo" value="radioFooResult">
+    <input type="radio" v-model="radioVal" id="radioBar" value="radioBarResult">
+    <input type="text" v-model="textVal">
+    <select v-model="selectVal">
+      <option value="selectA"></option>
+      <option value="selectB"></option>
+      <option value="selectC"></option>
+    </select>
+    <label id="label-el"></label>
+
+    <span class="checkboxResult" v-if="checkboxVal">checkbox checked</span>
+    {{ textVal }}
+    {{ selectVal }}
+    {{ radioVal }}
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'component-with-input',
+    data () {
+      return {
+        checkboxVal: undefined,
+        textVal: undefined,
+        radioVal: undefined,
+        selectVal: undefined
+      }
+    }
+  }
+</script>

test/specs/wrapper/setChecked.spec.js

@@ -0,0 +1,98 @@
+import ComponentWithInput from '~resources/components/component-with-input.vue'
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('setChecked', (mountingMethod) => {
+  it('sets element checked true with no option passed', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="checkbox"]')
+    input.setChecked()
+
+    expect(input.element.checked).to.equal(true)
+  })
+
+  it('sets element checked equal to param passed', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="checkbox"]')
+
+    input.setChecked(true)
+    expect(input.element.checked).to.equal(true)
+
+    input.setChecked(false)
+    expect(input.element.checked).to.equal(false)
+  })
+
+  it('calls trigger with change event', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="checkbox"]')
+    sinon.spy(input, 'trigger')
+
+    input.setChecked()
+
+    expect(input.trigger.called).to.equal(true)
+    expect(input.trigger.args[0][0]).to.equal('change')
+  })
+
+  it('updates dom with checkbox v-model', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="checkbox"]')
+
+    input.setChecked()
+    expect(wrapper.text()).to.contain('checkbox checked')
+
+    input.setChecked(false)
+    expect(wrapper.text()).to.not.contain('checkbox checked')
+  })
+
+  it('updates dom with radio v-model', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+
+    wrapper.find('#radioBar').setChecked()
+    expect(wrapper.text()).to.contain('radioBarResult')
+
+    wrapper.find('#radioFoo').setChecked()
+    expect(wrapper.text()).to.contain('radioFooResult')
+  })
+
+  it('throws error if checked param is not boolean', () => {
+    const message = 'wrapper.setChecked() must be passed a boolean'
+    shouldThrowErrorOnElement('input[type="checkbox"]', message, 'asd')
+  })
+
+  it('throws error if checked param is false on radio element', () => {
+    const message = 'wrapper.setChecked() cannot be called with parameter false on radio'
+    shouldThrowErrorOnElement('#radioFoo', message, false)
+  })
+
+  it('throws error if wrapper does not contain element', () => {
+    const wrapper = mountingMethod({ render: (h) => h('div') })
+    const div = wrapper.find('div')
+    div.element = null
+
+    const fn = () => div.setChecked()
+    const message = '[vue-test-utils]: cannot call wrapper.setChecked() on a wrapper without an element'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws error if element is select', () => {
+    const message = 'wrapper.setChecked() cannot be called on select'
+    shouldThrowErrorOnElement('select', message)
+  })
+
+  it('throws error if element is text like', () => {
+    const message = 'wrapper.setChecked() cannot be called on "text" inputs. Use wrapper.setValue() instead'
+    shouldThrowErrorOnElement('input[type="text"]', message)
+  })
+
+  it('throws error if element is not valid', () => {
+    const message = 'wrapper.setChecked() cannot be called on this element'
+    shouldThrowErrorOnElement('#label-el', message)
+  })
+
+  function shouldThrowErrorOnElement (selector, message, value) {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find(selector)
+
+    const fn = () => input.setChecked(value)
+    expect(fn).to.throw().with.property('message', '[vue-test-utils]: ' + message)
+  }
+})

test/specs/wrapper/setValue.spec.js

@@ -0,0 +1,69 @@
+import ComponentWithInput from '~resources/components/component-with-input.vue'
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('setValue', (mountingMethod) => {
+  it('sets element value', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="text"]')
+    input.setValue('foo')
+
+    expect(input.element.value).to.equal('foo')
+  })
+
+  it('calls trigger with input event', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="text"]')
+    sinon.spy(input, 'trigger')
+
+    input.setValue('foo')
+
+    expect(input.trigger.called).to.equal(true)
+    expect(input.trigger.args[0][0]).to.equal('input')
+  })
+
+  it('updates dom with v-model', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find('input[type="text"]')
+
+    input.setValue('input text awesome binding')
+
+    expect(wrapper.text()).to.contain('input text awesome binding')
+  })
+
+  it('throws error if wrapper does not contain element', () => {
+    const wrapper = mountingMethod({ render: (h) => h('div') })
+    const div = wrapper.find('div')
+    div.element = null
+    const fn = () => div.setValue('')
+    const message = '[vue-test-utils]: cannot call wrapper.setValue() on a wrapper without an element'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws error if element is select', () => {
+    const message = 'wrapper.setValue() cannot be called on select'
+    shouldThrowErrorOnElement('select', message)
+  })
+
+  it('throws error if element is radio', () => {
+    const message = 'wrapper.setValue() cannot be called on radio. Use wrapper.setChecked() instead'
+    shouldThrowErrorOnElement('input[type="radio"]', message)
+  })
+
+  it('throws error if element is checkbox', () => {
+    const message = 'wrapper.setValue() cannot be called on checkbox. Use wrapper.setChecked() instead'
+    shouldThrowErrorOnElement('input[type="checkbox"]', message)
+  })
+
+  it('throws error if element is not valid', () => {
+    const message = 'wrapper.setValue() cannot be called on this element'
+    shouldThrowErrorOnElement('#label-el', message)
+  })
+
+  function shouldThrowErrorOnElement (selector, message) {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const input = wrapper.find(selector)
+
+    const fn = () => input.setValue('')
+    expect(fn).to.throw().with.property('message', '[vue-test-utils]: ' + message)
+  }
+})