feat: use setValue() on select element (#837)

Author: VictorCazanave

Diff for: .github/CONTRIBUTING.md

@@ -82,7 +82,7 @@ The default test script will do the following: lint with ESLint -> type check wi
 
   - **`create-instance`**: private package that creates an instance and applies mounting options.
 
-  - **`shared`**: private package that contains utilities used by the other packzges.
+  - **`shared`**: private package that contains utilities used by the other packages.
 
 - **`scripts`**: contains build-related scripts and configuration files. In most cases you don't need to touch them.
 

Diff for: docs/api/wrapper/setValue.md

@@ -1,6 +1,6 @@
 ## setValue(value)
 
-Sets value of a text-control input element and updates `v-model` bound data.
+Sets value of a text-control input or select element and updates `v-model` bound data.
 
 - **Arguments:**
   - `{any} value`
@@ -12,15 +12,26 @@ import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
 const wrapper = mount(Foo)
+
 const input = wrapper.find('input[type="text"]')
 input.setValue('some value')
+
+const select = wrapper.find('select')
+select.setValue('option value')
 ```
 
 - **Note:**
 
-`textInput.setValue(value)` is an alias of the following code.
+  - `textInput.setValue(value)` is an alias of the following code.
 
-```js
-textInput.element.value = value
-textInput.trigger('input')
-```
+  ```js
+  textInput.element.value = value
+  textInput.trigger('input')
+  ```
+
+  - `select.setValue(value)` is an alias of the following code.
+
+  ```js
+  select.element.value = value
+  select.trigger('change')
+  ```

Diff for: packages/test-utils/src/wrapper.js

@@ -697,8 +697,12 @@ export default class Wrapper implements BaseWrapper {
     const type = this.attributes().type
 
     if (tagName === 'SELECT') {
+      // $FlowIgnore
+      this.element.value = value
+      this.trigger('change')
+    } else if (tagName === 'OPTION') {
       throwError(
-        `wrapper.setValue() cannot be called on a <select> ` +
+        `wrapper.setValue() cannot be called on an <option> ` +
           `element. Use wrapper.setSelected() instead`
       )
     } else if (tagName === 'INPUT' && type === 'checkbox') {

Diff for: test/specs/wrapper/setValue.spec.js

@@ -18,19 +18,34 @@ describeWithShallowAndMount('setValue', mountingMethod => {
     expect(textarea.element.value).to.equal('foo')
   })
 
-  it('updates dom with v-model', () => {
+  it('updates dom with input 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 element is select', () => {
+  it('sets element of select value', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const select = wrapper.find('select')
+    select.setValue('selectB')
+
+    expect(select.element.value).to.equal('selectB')
+  })
+
+  it('updates dom with select v-model', () => {
+    const wrapper = mountingMethod(ComponentWithInput)
+    const select = wrapper.find('select')
+    select.setValue('selectB')
+
+    expect(wrapper.text()).to.contain('selectB')
+  })
+
+  it('throws error if element is option', () => {
     const message =
-      'wrapper.setValue() cannot be called on a <select> element. Use wrapper.setSelected() instead'
-    shouldThrowErrorOnElement('select', message)
+      'wrapper.setValue() cannot be called on an <option> element. Use wrapper.setSelected() instead'
+    shouldThrowErrorOnElement('option', message)
   })
 
   it('throws error if element is radio', () => {