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

vuejs · Aug 16, 2020 · 49b4cb9 · 49b4cb9
1 parent 235d493
commit 49b4cb9
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 36 deletions.
diff --git a/docs/api/wrapper/setChecked.md b/docs/api/wrapper/setChecked.md
@@ -12,9 +12,11 @@ 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()
+})
 ```
 
 - **Note:**
@@ -24,7 +26,10 @@ When you try to set the value to state via `v-model` by `radioInput.element.chec
 `checkboxInput.setChecked(checked)` is an alias of the following code.
 
 ```js
-checkboxInput.element.checked = checked
-checkboxInput.trigger('click')
-checkboxInput.trigger('change')
+async function alias() {
+  checkboxInput.element.checked = checked
+  await Vue.nextTick()
+  await checkboxInput.trigger('click')
+  await checkboxInput.trigger('change')
+}
 ```
diff --git a/docs/api/wrapper/setData.md b/docs/api/wrapper/setData.md
@@ -16,7 +16,9 @@ setData works by recursively calling Vue.set.
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-await 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/setChecked.md b/docs/ja/api/wrapper/setChecked.md
@@ -11,9 +11,11 @@ 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()
+})
 ```
 
 - **注:**
@@ -23,7 +25,10 @@ radioInput.setChecked()
 `checkboxInput.setChecked(checked)` は以下のコードのエイリアスです。
 
 ```js
-checkboxInput.element.checked = checked
-checkboxInput.trigger('click')
-checkboxInput.trigger('change')
+async function alias() {
+  checkboxInput.element.checked = checked
+  await Vue.nextTick()
+  await checkboxInput.trigger('click')
+  await checkboxInput.trigger('change')
+}
 ```
diff --git a/docs/ja/api/wrapper/setData.md b/docs/ja/api/wrapper/setData.md
@@ -16,7 +16,9 @@ setData は再帰的に Vue.set を実行することで動作します。
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-await 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/setChecked.md b/docs/ru/api/wrapper/setChecked.md
@@ -12,9 +12,11 @@
 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()
+})
 ```
 
 - **Примечание:**
@@ -24,7 +26,10 @@ radioInput.setChecked()
 `checkboxInput.setChecked(checked)` — псевдоним для следующего кода.
 
 ```js
-checkboxInput.element.checked = checked
-checkboxInput.trigger('click')
-checkboxInput.trigger('change')
+async function alias() {
+  checkboxInput.element.checked = checked
+  await Vue.nextTick()
+  await checkboxInput.trigger('click')
+  await checkboxInput.trigger('change')
+}
 ```
diff --git a/docs/ru/api/wrapper/setData.md b/docs/ru/api/wrapper/setData.md
@@ -18,7 +18,9 @@ setData работает путём слияния существующих св
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-await 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/zh/api/wrapper/setChecked.md b/docs/zh/api/wrapper/setChecked.md
@@ -12,9 +12,11 @@
 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()
+})
 ```
 
 - **注意：**
@@ -24,7 +26,10 @@ radioInput.setChecked()
 `checkboxInput.setChecked(checked)` 是接下来这段代码的别名。
 
 ```js
-checkboxInput.element.checked = checked
-checkboxInput.trigger('click')
-checkboxInput.trigger('change')
+async function alias() {
+  checkboxInput.element.checked = checked
+  await Vue.nextTick()
+  await checkboxInput.trigger('click')
+  await checkboxInput.trigger('change')
+}
 ```
diff --git a/docs/zh/api/wrapper/setData.md b/docs/zh/api/wrapper/setData.md
@@ -16,7 +16,9 @@
 import { mount } from '@vue/test-utils'
 import Foo from './Foo.vue'
 
-const wrapper = mount(Foo)
-await 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')
+})
 ```