Update wrapper async mode docs (#1648)

* docs(setvalue): update setValue documentation to reflect async mode

* docs(setselected): update setSelected docs to reflect async mode

* docs(setprops): update setProps docs to reflect async mode

* docs: update setData docs to reflect async mode

* docs(setchecked): update setChecked docs to reflect async mode

* docs(setchecked): add assertions

* docs(setdata): add whitespace to AAA

* docs(setprops): add whitespace to AAA

* docs(setselected): add assertion

* docs(setvalue): add assertions

Co-authored-by: Jordy Schreuders <3071062+99linesofcode@users.noreply.github.com>

Author: AtofStryker

docs/api/wrapper/setChecked.md

@@ -12,9 +12,14 @@ Sets checked value for input element of type checkbox or radio and updates `v-mo
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-const radioInput = wrapper.find('input[type="radio"]')
-radioInput.setChecked()
+test('setChecked demo', async () => {
+  const wrapper = mount(Foo)
+  const radioInput = wrapper.find('input[type="radio"]')
+
+  await radioInput.setChecked()
+
+  expect(radioInput.element.checked).toBeTruthy()
+})
 ```
 
 - **Note:**

docs/api/wrapper/setData.md

@@ -16,7 +16,11 @@ setData works by recursively calling Vue.set.
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-wrapper.setData({ foo: 'bar' })
-expect(wrapper.vm.foo).toBe('bar')
+test('setData demo', async () => {
+  const wrapper = mount(Foo)
+
+  await wrapper.setData({ foo: 'bar' })
+
+  expect(wrapper.vm.foo).toBe('bar')
+})
 ```

docs/api/wrapper/setProps.md

@@ -14,9 +14,13 @@ Sets `Wrapper` `vm` props and forces update.
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-wrapper.setProps({ foo: 'bar' })
-expect(wrapper.vm.foo).toBe('bar')
+test('setProps demo', async () => {
+  const wrapper = mount(Foo)
+
+  await wrapper.setProps({ foo: 'bar' })
+
+  expect(wrapper.vm.foo).toBe('bar')
+})
 ```
 
 You can also pass a `propsData` object, which will initialize the Vue instance with passed values.

docs/api/wrapper/setSelected.md

@@ -8,10 +8,14 @@ Selects an option element and updates `v-model` bound data.
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-const options = wrapper.find('select').findAll('option')
+test('setSelected demo', async () => {
+  const wrapper = mount(Foo)
+  const options = wrapper.find('select').findAll('option')
 
-options.at(1).setSelected()
+  await options.at(1).setSelected()
+
+  expect(wrapper.find('option:checked').element.value).toBe('bar')
+})
 ```
 
 - **Note:**

docs/api/wrapper/setValue.md

@@ -12,17 +12,28 @@ Sets value of a text-control input or select element and updates `v-model` bound
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
+test('setValue demo', async () => {
+  const wrapper = mount(Foo)
 
-const textInput = wrapper.find('input[type="text"]')
-textInput.setValue('some value')
+  const textInput = wrapper.find('input[type="text"]')
+  await textInput.setValue('some value')
 
-const select = wrapper.find('select')
-select.setValue('option value')
+  expect(wrapper.find('input[type="text"]').element.value).toBe('some value')
 
-// requires <select multiple>
-const multiselect = wrapper.find('select')
-multiselect.setValue(['value1', 'value3'])
+  const select = wrapper.find('select')
+  await select.setValue('option value')
+
+  expect(wrapper.find('select').element.value).toBe('option value')
+
+  // requires <select multiple>
+  const multiselect = wrapper.find('select')
+  await multiselect.setValue(['value1', 'value3'])
+
+  const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
+    o => o.value
+  )
+  expect(selectedOptions).toEqual(['value1', 'value3'])
+})
 ```
 
 - **Note:**

docs/guides/common-tips.md

@@ -153,9 +153,11 @@ describe('ParentComponent', () => {
 You can directly manipulate the state of the component using the `setData` or `setProps` method on the wrapper:
 
 ```js
-wrapper.setData({ count: 10 })
+it('manipulates state', async () => {
+  await wrapper.setData({ count: 10 })
 
-wrapper.setProps({ foo: 'bar' })
+  await wrapper.setProps({ foo: 'bar' })
+})
 ```
 
 ### Mocking Props

docs/ja/api/wrapper/setChecked.md

@@ -11,9 +11,14 @@ checkbox 型もしくは radio 型の input 要素の checked の値をセット
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-const radioInput = wrapper.find('input[type="radio"]')
-radioInput.setChecked()
+test('setChecked demo', async () => {
+  const wrapper = mount(Foo)
+  const radioInput = wrapper.find('input[type="radio"]')
+
+  await radioInput.setChecked()
+
+  expect(radioInput.element.checked).toBeTruthy()
+})
 ```
 
 - **注:**

docs/ja/api/wrapper/setData.md

@@ -16,7 +16,11 @@ setData は再帰的に Vue.set を実行することで動作します。
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-wrapper.setData({ foo: 'bar' })
-expect(wrapper.vm.foo).toBe('bar')
+test('setData demo', async () => {
+  const wrapper = mount(Foo)
+
+  await wrapper.setData({ foo: 'bar' })
+
+  expect(wrapper.vm.foo).toBe('bar')
+})
 ```

docs/ja/api/wrapper/setProps.md

@@ -14,9 +14,13 @@
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-wrapper.setProps({ foo: 'bar' })
-expect(wrapper.vm.foo).toBe('bar')
+test('setProps demo', async () => {
+  const wrapper = mount(Foo)
+
+  await wrapper.setProps({ foo: 'bar' })
+
+  expect(wrapper.vm.foo).toBe('bar')
+})
 ```
 
 渡された値で Vue インスタンス を初期化する `propsData` オブジェクトを渡すことができます。

docs/ja/api/wrapper/setSelected.md

@@ -8,10 +8,14 @@ option 要素を選択します。そして、 `v-model` に束縛されてい
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-const options = wrapper.find('select').findAll('option')
+test('setSelected demo', async () => {
+  const wrapper = mount(Foo)
+  const options = wrapper.find('select').findAll('option')
 
-options.at(1).setSelected()
+  await options.at(1).setSelected()
+
+  expect(wrapper.find('option:checked').element.value).toBe('bar')
+})
 ```
 
 - **注:**