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>
vuejs · Aug 19, 2020 · f94a62d · f94a62d
1 parent 8af56d2
commit f94a62d
Show file tree

Hide file tree

Showing 24 changed files with 208 additions and 88 deletions.
diff --git a/docs/api/wrapper/setChecked.md b/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:**

diff --git a/docs/api/wrapper/setData.md b/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')
+})
 ```
diff --git a/docs/api/wrapper/setProps.md b/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.

diff --git a/docs/api/wrapper/setSelected.md b/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:**

diff --git a/docs/api/wrapper/setValue.md b/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:**

diff --git a/docs/guides/common-tips.md b/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

diff --git a/docs/ja/api/wrapper/setChecked.md b/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()
+})
 ```
 
 - **注:**

diff --git a/docs/ja/api/wrapper/setData.md b/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')
+})
 ```
diff --git a/docs/ja/api/wrapper/setProps.md b/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` オブジェクトを渡すことができます。

diff --git a/docs/ja/api/wrapper/setSelected.md b/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')
+})
 ```
 
 - **注:**

diff --git a/docs/ja/api/wrapper/setValue.md b/docs/ja/api/wrapper/setValue.md
@@ -12,17 +12,28 @@ text コントロールの input 要素の 値をセットします。そして
 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'])
+})
 ```
 
 - **注:**

diff --git a/docs/ja/guides/common-tips.md b/docs/ja/guides/common-tips.md
@@ -63,9 +63,11 @@ expect(wrapper.emitted().foo[1]).toEqual([123])
 ラッパの `setData` メソッドまたは `setProps` メソッドを使って、コンポーネントの状態を直接操作することができます。:
 
 ```js
-wrapper.setData({ count: 10 })
+it('manipulates state', async () => {
+  await wrapper.setData({ count: 10 })
 
-wrapper.setProps({ foo: 'bar' })
+  await wrapper.setProps({ foo: 'bar' })
+})
 ```
 
 ### プロパティをモックする

diff --git a/docs/ru/api/wrapper/setChecked.md b/docs/ru/api/wrapper/setChecked.md
@@ -12,9 +12,14 @@
 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()
+})
 ```
 
 - **Примечание:**

diff --git a/docs/ru/api/wrapper/setData.md b/docs/ru/api/wrapper/setData.md
@@ -18,7 +18,11 @@ setData работает путём слияния существующих св
 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')
+})
 ```
diff --git a/docs/ru/api/wrapper/setProps.md b/docs/ru/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')
+})
 ```
 
 Вы также можете передать объект `propsData`, который инициализирует экземпляр Vue с переданными значениями.

diff --git a/docs/ru/api/wrapper/setSelected.md b/docs/ru/api/wrapper/setSelected.md
@@ -8,10 +8,14 @@
 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')
+})
 ```
 
 - **Примечание:**

diff --git a/docs/ru/api/wrapper/setValue.md b/docs/ru/api/wrapper/setValue.md
@@ -12,17 +12,28 @@
 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')
 
-// требует <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'])
+})
 ```
 
 - **Примечание:**

diff --git a/docs/ru/guides/common-tips.md b/docs/ru/guides/common-tips.md
@@ -113,9 +113,11 @@ describe('ParentComponent', () => {
 Вы можете напрямую манипулировать состоянием компонента с помощью методов `setData` или `setProps` на обёртке:
 
 ```js
-wrapper.setData({ count: 10 })
+it('manipulates state', async () => {
+  await wrapper.setData({ count: 10 })
 
-wrapper.setProps({ foo: 'bar' })
+  await wrapper.setProps({ foo: 'bar' })
+})
 ```
 
 ### Моки входных параметров

diff --git a/docs/zh/api/wrapper/setChecked.md b/docs/zh/api/wrapper/setChecked.md
@@ -12,9 +12,14 @@
 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()
+})
 ```
 
 - **注意：**

diff --git a/docs/zh/api/wrapper/setData.md b/docs/zh/api/wrapper/setData.md
@@ -16,7 +16,11 @@
 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')
+})
 ```