Skip to content

Commit f94a62d

Browse files
AtofStryker99linesofcode
AtofStryker
and
99linesofcode
authored
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 <[email protected]>
1 parent 8af56d2 commit f94a62d

24 files changed

+208
-88
lines changed

Diff for: ‎docs/api/wrapper/setChecked.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@ Sets checked value for input element of type checkbox or radio and updates `v-mo
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
16-
const radioInput = wrapper.find('input[type="radio"]')
17-
radioInput.setChecked()
15+
test('setChecked demo', async () => {
16+
const wrapper = mount(Foo)
17+
const radioInput = wrapper.find('input[type="radio"]')
18+
19+
await radioInput.setChecked()
20+
21+
expect(radioInput.element.checked).toBeTruthy()
22+
})
1823
```
1924

2025
- **Note:**

Diff for: ‎docs/api/wrapper/setData.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ setData works by recursively calling Vue.set.
1616
import { mount } from '@vue/test-utils'
1717
import Foo from './Foo.vue'
1818

19-
const wrapper = mount(Foo)
20-
wrapper.setData({ foo: 'bar' })
21-
expect(wrapper.vm.foo).toBe('bar')
19+
test('setData demo', async () => {
20+
const wrapper = mount(Foo)
21+
22+
await wrapper.setData({ foo: 'bar' })
23+
24+
expect(wrapper.vm.foo).toBe('bar')
25+
})
2226
```

Diff for: ‎docs/api/wrapper/setProps.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,13 @@ Sets `Wrapper` `vm` props and forces update.
1414
import { mount } from '@vue/test-utils'
1515
import Foo from './Foo.vue'
1616

17-
const wrapper = mount(Foo)
18-
wrapper.setProps({ foo: 'bar' })
19-
expect(wrapper.vm.foo).toBe('bar')
17+
test('setProps demo', async () => {
18+
const wrapper = mount(Foo)
19+
20+
await wrapper.setProps({ foo: 'bar' })
21+
22+
expect(wrapper.vm.foo).toBe('bar')
23+
})
2024
```
2125

2226
You can also pass a `propsData` object, which will initialize the Vue instance with passed values.

Diff for: ‎docs/api/wrapper/setSelected.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ Selects an option element and updates `v-model` bound data.
88
import { mount } from '@vue/test-utils'
99
import Foo from './Foo.vue'
1010

11-
const wrapper = mount(Foo)
12-
const options = wrapper.find('select').findAll('option')
11+
test('setSelected demo', async () => {
12+
const wrapper = mount(Foo)
13+
const options = wrapper.find('select').findAll('option')
1314

14-
options.at(1).setSelected()
15+
await options.at(1).setSelected()
16+
17+
expect(wrapper.find('option:checked').element.value).toBe('bar')
18+
})
1519
```
1620

1721
- **Note:**

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

+19-8
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,28 @@ Sets value of a text-control input or select element and updates `v-model` bound
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
15+
test('setValue demo', async () => {
16+
const wrapper = mount(Foo)
1617

17-
const textInput = wrapper.find('input[type="text"]')
18-
textInput.setValue('some value')
18+
const textInput = wrapper.find('input[type="text"]')
19+
await textInput.setValue('some value')
1920

20-
const select = wrapper.find('select')
21-
select.setValue('option value')
21+
expect(wrapper.find('input[type="text"]').element.value).toBe('some value')
2222

23-
// requires <select multiple>
24-
const multiselect = wrapper.find('select')
25-
multiselect.setValue(['value1', 'value3'])
23+
const select = wrapper.find('select')
24+
await select.setValue('option value')
25+
26+
expect(wrapper.find('select').element.value).toBe('option value')
27+
28+
// requires <select multiple>
29+
const multiselect = wrapper.find('select')
30+
await multiselect.setValue(['value1', 'value3'])
31+
32+
const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
33+
o => o.value
34+
)
35+
expect(selectedOptions).toEqual(['value1', 'value3'])
36+
})
2637
```
2738

2839
- **Note:**

Diff for: ‎docs/guides/common-tips.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,11 @@ describe('ParentComponent', () => {
153153
You can directly manipulate the state of the component using the `setData` or `setProps` method on the wrapper:
154154

155155
```js
156-
wrapper.setData({ count: 10 })
156+
it('manipulates state', async () => {
157+
await wrapper.setData({ count: 10 })
157158

158-
wrapper.setProps({ foo: 'bar' })
159+
await wrapper.setProps({ foo: 'bar' })
160+
})
159161
```
160162

161163
### Mocking Props

Diff for: ‎docs/ja/api/wrapper/setChecked.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ checkbox 型もしくは radio 型の input 要素の checked の値をセット
1111
import { mount } from '@vue/test-utils'
1212
import Foo from './Foo.vue'
1313

14-
const wrapper = mount(Foo)
15-
const radioInput = wrapper.find('input[type="radio"]')
16-
radioInput.setChecked()
14+
test('setChecked demo', async () => {
15+
const wrapper = mount(Foo)
16+
const radioInput = wrapper.find('input[type="radio"]')
17+
18+
await radioInput.setChecked()
19+
20+
expect(radioInput.element.checked).toBeTruthy()
21+
})
1722
```
1823

1924
- **注:**

Diff for: ‎docs/ja/api/wrapper/setData.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ setData は再帰的に Vue.set を実行することで動作します。
1616
import { mount } from '@vue/test-utils'
1717
import Foo from './Foo.vue'
1818

19-
const wrapper = mount(Foo)
20-
wrapper.setData({ foo: 'bar' })
21-
expect(wrapper.vm.foo).toBe('bar')
19+
test('setData demo', async () => {
20+
const wrapper = mount(Foo)
21+
22+
await wrapper.setData({ foo: 'bar' })
23+
24+
expect(wrapper.vm.foo).toBe('bar')
25+
})
2226
```

Diff for: ‎docs/ja/api/wrapper/setProps.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,13 @@
1414
import { mount } from '@vue/test-utils'
1515
import Foo from './Foo.vue'
1616

17-
const wrapper = mount(Foo)
18-
wrapper.setProps({ foo: 'bar' })
19-
expect(wrapper.vm.foo).toBe('bar')
17+
test('setProps demo', async () => {
18+
const wrapper = mount(Foo)
19+
20+
await wrapper.setProps({ foo: 'bar' })
21+
22+
expect(wrapper.vm.foo).toBe('bar')
23+
})
2024
```
2125

2226
渡された値で Vue インスタンス を初期化する `propsData` オブジェクトを渡すことができます。

Diff for: ‎docs/ja/api/wrapper/setSelected.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ option 要素を選択します。そして、 `v-model` に束縛されてい
88
import { mount } from '@vue/test-utils'
99
import Foo from './Foo.vue'
1010

11-
const wrapper = mount(Foo)
12-
const options = wrapper.find('select').findAll('option')
11+
test('setSelected demo', async () => {
12+
const wrapper = mount(Foo)
13+
const options = wrapper.find('select').findAll('option')
1314

14-
options.at(1).setSelected()
15+
await options.at(1).setSelected()
16+
17+
expect(wrapper.find('option:checked').element.value).toBe('bar')
18+
})
1519
```
1620

1721
- **注:**

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

+19-8
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,28 @@ text コントロールの input 要素の 値をセットします。そして
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
15+
test('setValue demo', async () => {
16+
const wrapper = mount(Foo)
1617

17-
const textInput = wrapper.find('input[type="text"]')
18-
textInput.setValue('some value')
18+
const textInput = wrapper.find('input[type="text"]')
19+
await textInput.setValue('some value')
1920

20-
const select = wrapper.find('select')
21-
select.setValue('option value')
21+
expect(wrapper.find('input[type="text"]').element.value).toBe('some value')
2222

23-
// requires <select multiple>
24-
const multiselect = wrapper.find('select')
25-
multiselect.setValue(['value1', 'value3'])
23+
const select = wrapper.find('select')
24+
await select.setValue('option value')
25+
26+
expect(wrapper.find('select').element.value).toBe('option value')
27+
28+
// requires <select multiple>
29+
const multiselect = wrapper.find('select')
30+
await multiselect.setValue(['value1', 'value3'])
31+
32+
const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
33+
o => o.value
34+
)
35+
expect(selectedOptions).toEqual(['value1', 'value3'])
36+
})
2637
```
2738

2839
- **注:**

Diff for: ‎docs/ja/guides/common-tips.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,11 @@ expect(wrapper.emitted().foo[1]).toEqual([123])
6363
ラッパの `setData` メソッドまたは `setProps` メソッドを使って、コンポーネントの状態を直接操作することができます。:
6464

6565
```js
66-
wrapper.setData({ count: 10 })
66+
it('manipulates state', async () => {
67+
await wrapper.setData({ count: 10 })
6768

68-
wrapper.setProps({ foo: 'bar' })
69+
await wrapper.setProps({ foo: 'bar' })
70+
})
6971
```
7072

7173
### プロパティをモックする

Diff for: ‎docs/ru/api/wrapper/setChecked.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
16-
const radioInput = wrapper.find('input[type="radio"]')
17-
radioInput.setChecked()
15+
test('setChecked demo', async () => {
16+
const wrapper = mount(Foo)
17+
const radioInput = wrapper.find('input[type="radio"]')
18+
19+
await radioInput.setChecked()
20+
21+
expect(radioInput.element.checked).toBeTruthy()
22+
})
1823
```
1924

2025
- **Примечание:**

Diff for: ‎docs/ru/api/wrapper/setData.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ setData работает путём слияния существующих св
1818
import { mount } from '@vue/test-utils'
1919
import Foo from './Foo.vue'
2020

21-
const wrapper = mount(Foo)
22-
wrapper.setData({ foo: 'bar' })
23-
expect(wrapper.vm.foo).toBe('bar')
21+
test('setData demo', async () => {
22+
const wrapper = mount(Foo)
23+
24+
await wrapper.setData({ foo: 'bar' })
25+
26+
expect(wrapper.vm.foo).toBe('bar')
27+
})
2428
```

Diff for: ‎docs/ru/api/wrapper/setProps.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,13 @@
1414
import { mount } from '@vue/test-utils'
1515
import Foo from './Foo.vue'
1616

17-
const wrapper = mount(Foo)
18-
wrapper.setProps({ foo: 'bar' })
19-
expect(wrapper.vm.foo).toBe('bar')
17+
test('setProps demo', async () => {
18+
const wrapper = mount(Foo)
19+
20+
await wrapper.setProps({ foo: 'bar' })
21+
22+
expect(wrapper.vm.foo).toBe('bar')
23+
})
2024
```
2125

2226
Вы также можете передать объект `propsData`, который инициализирует экземпляр Vue с переданными значениями.

Diff for: ‎docs/ru/api/wrapper/setSelected.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
import { mount } from '@vue/test-utils'
99
import Foo from './Foo.vue'
1010

11-
const wrapper = mount(Foo)
12-
const options = wrapper.find('select').findAll('option')
11+
test('setSelected demo', async () => {
12+
const wrapper = mount(Foo)
13+
const options = wrapper.find('select').findAll('option')
1314

14-
options.at(1).setSelected()
15+
await options.at(1).setSelected()
16+
17+
expect(wrapper.find('option:checked').element.value).toBe('bar')
18+
})
1519
```
1620

1721
- **Примечание:**

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

+19-8
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,28 @@
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
15+
test('setValue demo', async () => {
16+
const wrapper = mount(Foo)
1617

17-
const textInput = wrapper.find('input[type="text"]')
18-
textInput.setValue('some value')
18+
const textInput = wrapper.find('input[type="text"]')
19+
await textInput.setValue('some value')
1920

20-
const select = wrapper.find('select')
21-
select.setValue('option value')
21+
expect(wrapper.find('input[type="text"]').element.value).toBe('some value')
2222

23-
// требует <select multiple>
24-
const multiselect = wrapper.find('select')
25-
multiselect.setValue(['value1', 'value3'])
23+
const select = wrapper.find('select')
24+
await select.setValue('option value')
25+
26+
expect(wrapper.find('select').element.value).toBe('option value')
27+
28+
// requires <select multiple>
29+
const multiselect = wrapper.find('select')
30+
await multiselect.setValue(['value1', 'value3'])
31+
32+
const selectedOptions = Array.from(multiselect.element.selectedOptions).map(
33+
o => o.value
34+
)
35+
expect(selectedOptions).toEqual(['value1', 'value3'])
36+
})
2637
```
2738

2839
- **Примечание:**

Diff for: ‎docs/ru/guides/common-tips.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,11 @@ describe('ParentComponent', () => {
113113
Вы можете напрямую манипулировать состоянием компонента с помощью методов `setData` или `setProps` на обёртке:
114114

115115
```js
116-
wrapper.setData({ count: 10 })
116+
it('manipulates state', async () => {
117+
await wrapper.setData({ count: 10 })
117118

118-
wrapper.setProps({ foo: 'bar' })
119+
await wrapper.setProps({ foo: 'bar' })
120+
})
119121
```
120122

121123
### Моки входных параметров

Diff for: ‎docs/zh/api/wrapper/setChecked.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@
1212
import { mount } from '@vue/test-utils'
1313
import Foo from './Foo.vue'
1414

15-
const wrapper = mount(Foo)
16-
const radioInput = wrapper.find('input[type="radio"]')
17-
radioInput.setChecked()
15+
test('setChecked demo', async () => {
16+
const wrapper = mount(Foo)
17+
const radioInput = wrapper.find('input[type="radio"]')
18+
19+
await radioInput.setChecked()
20+
21+
expect(radioInput.element.checked).toBeTruthy()
22+
})
1823
```
1924

2025
- **注意：**

Diff for: ‎docs/zh/api/wrapper/setData.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@
1616
import { mount } from '@vue/test-utils'
1717
import Foo from './Foo.vue'
1818

19-
const wrapper = mount(Foo)
20-
wrapper.setData({ foo: 'bar' })
21-
expect(wrapper.vm.foo).toBe('bar')
19+
test('setData demo', async () => {
20+
const wrapper = mount(Foo)
21+
22+
await wrapper.setData({ foo: 'bar' })
23+
24+
expect(wrapper.vm.foo).toBe('bar')
25+
})
2226
```

0 commit comments

Comments
 (0)