Skip to content

Commit 50c9598

Browse files
Jinjiangeddyerburgh
Jinjiang
authored and
eddyerburgh
committed
docs(zh): update (#848)
1 parent 540e23e commit 50c9598

16 files changed

+188
-34
lines changed

Diff for: ‎docs/zh/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,11 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
6565
* [is](api/wrapper-array/is.md)
6666
* [isEmpty](api/wrapper-array/isEmpty.md)
6767
* [isVueInstance](api/wrapper-array/isVueInstance.md)
68+
* [setChecked](api/wrapper-array/setChecked.md)
6869
* [setData](api/wrapper-array/setData.md)
6970
* [setMethods](api/wrapper-array/setMethods.md)
7071
* [setProps](api/wrapper-array/setProps.md)
72+
* [setValue](api/wrapper-array/setValue.md)
7173
* [trigger](api/wrapper-array/trigger.md)
7274
* [isVisible](api/wrapper-array/isVisible.md)
7375
* [组件](api/components/)

Diff for: ‎docs/zh/api/config.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。
66

77
### `stubs`
88

9-
- 类型：`Object`
9+
- 类型：`{ [name: string]: Component | boolean | string }`
1010
- 默认值：`{
1111
transition: TransitionStub,
1212
'transition-group': TransitionGroupStub
@@ -46,7 +46,7 @@ VueTestUtils.config.mocks['$store'] = {
4646

4747
### `methods`
4848

49-
- 类型：`Object`
49+
- 类型：`{ [name: string]: Function }`
5050
- 默认值：`{}`
5151

5252
你可以使用 `config` 对象配置默认的方法。它可以用于为组件注入方法的插件，例如 [VeeValidate](https://vee-validate.logaretm.com/)。你可以通过在挂载选项中传入 `methods` 来覆写 `config` 中的方法集合。
@@ -94,3 +94,18 @@ import VueTestUtils from '@vue/test-utils'
9494

9595
VueTestUtils.config.logModifiedComponents = false
9696
```
97+
98+
### `silent`
99+
100+
- 类型：`Boolean`
101+
- 默认值：`true`
102+
103+
在组件的可观察内容 (如 props) 发生突变时，警告会被 Vue 阻止。当设置为 `false` 时，所有的警告都会出现在控制台中。这是一个 `Vue.config.silent` 的配置方式。
104+
105+
示例；
106+
107+
```js
108+
import VueTestUtils from '@vue/test-utils'
109+
110+
VueTestUtils.config.silent = false
111+
```

Diff for: ‎docs/zh/api/options.md

+21-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
- [`attachToDocument`](#attachtodocument)
1212
- [`attrs`](#attrs)
1313
- [`listeners`](#listeners)
14+
- [`parentComponent`](#parentComponent)
1415
- [`provide`](#provide)
1516
- [`sync`](#sync)
1617

@@ -106,7 +107,9 @@ shallowMount(Component, {
106107
stubs: {
107108
// 使用一个特定的实现作为存根
108109
'registered-component': Foo,
109-
// 使用创建默认的实现作为存根
110+
// 使用创建默认的实现作为存根。
111+
// 这里默认存根的组件名是 `another-component`。
112+
// 默认存根是 `<${the component name of default stub}-stub>`。
110113
'another-component': true
111114
}
112115
})
@@ -180,6 +183,23 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
180183

181184
设置组件实例的 `$listeners` 对象。
182185

186+
## parentComponent
187+
188+
- 类型：`Object`
189+
190+
用来作为被挂载组件的父级组件。
191+
192+
示例：
193+
194+
```js
195+
import Foo from './Foo.vue'
196+
197+
const wrapper = shallowMount(Component, {
198+
parentComponent: Foo
199+
})
200+
expect(wrapper.vm.$parent.name).toBe('foo')
201+
```
202+
183203
## provide
184204

185205
- 类型：`Object`

Diff for: ‎docs/zh/api/render.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
- `{Object} context`
88
- `{Array<Component|Object>|Component} children`
99
- `{Object} slots`
10-
- `{Array<Componet|Object>|Component|String} default`
11-
- `{Array<Componet|Object>|Component|String} named`
10+
- `{Array<Component|Object>|Component|String} default`
11+
- `{Array<Component|Object>|Component|String} named`
1212
- `{Object} mocks`
1313
- `{Object|Array<string>} stubs`
1414
- `{Vue} localVue`

Diff for: ‎docs/zh/api/renderToString.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
- `{Object} context`
88
- `{Array<Component|Object>|Component} children`
99
- `{Object} slots`
10-
- `{Array<Componet|Object>|Component|String} default`
11-
- `{Array<Componet|Object>|Component|String} named`
10+
- `{Array<Component|Object>|Component|String} default`
11+
- `{Array<Component|Object>|Component|String} named`
1212
- `{Object} mocks`
1313
- `{Object|Array<string>} stubs`
1414
- `{Vue} localVue`

Diff for: ‎docs/zh/api/wrapper-array/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
### `length`
1212

13-
`number`：该 `WrapperArray` 中包含的 `Wrapper` 的数量。
13+
`number` (只读)：该 `WrapperArray` 中包含的 `Wrapper` 的数量。
1414

1515
## 方法
1616

@@ -21,7 +21,9 @@
2121
!!!include(docs/zh/api/wrapper-array/is.md)!!!
2222
!!!include(docs/zh/api/wrapper-array/isEmpty.md)!!!
2323
!!!include(docs/zh/api/wrapper-array/isVueInstance.md)!!!
24+
!!!include(docs/zh/api/wrapper-array/setChecked.md)!!!
2425
!!!include(docs/zh/api/wrapper-array/setData.md)!!!
2526
!!!include(docs/zh/api/wrapper-array/setMethods.md)!!!
2627
!!!include(docs/zh/api/wrapper-array/setProps.md)!!!
28+
!!!include(docs/zh/api/wrapper-array/setValue.md)!!!
2729
!!!include(docs/zh/api/wrapper-array/trigger.md)!!!

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

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
## setChecked(checked)
2+
3+
该方法是接下来这段代码的别名：
4+
5+
```js
6+
wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))
7+
```
8+
9+
- **参数：**
10+
- `{Boolean} checked (default: true)`
11+
12+
- **示例：**
13+
14+
```js
15+
import { mount } from '@vue/test-utils'
16+
17+
const wrapper = mount({
18+
data () {
19+
return {
20+
t1: false,
21+
t2: ''
22+
}
23+
},
24+
template: `
25+
<div>
26+
<input type="checkbox" name="t1" class="foo" v-model="t1" />
27+
<input type="radio" name="t2" class="foo" value="foo" v-model="t2"/>
28+
<input type="radio" name="t2" class="bar" value="bar" v-model="t2"/>
29+
</div>`
30+
})
31+
32+
const wrapperArray = wrapper.findAll('.foo')
33+
expect(wrapper.vm.t1).to.equal(false)
34+
expect(wrapper.vm.t2).to.equal('')
35+
wrapperArray.setChecked()
36+
expect(wrapper.vm.t1).to.equal(true)
37+
expect(wrapper.vm.t2).to.equal('foo')
38+
```

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## setData(data)
22

3-
为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置数据并强行更新。
3+
为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置数据。
44

55
**注意：该包裹器必须包含一个 Vue 示例。**
66

Diff for: ‎docs/zh/api/wrapper-array/setValue.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
## setValue(value)
2+
3+
该方法是接下来这段代码的别名：
4+
5+
```js
6+
wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))
7+
```
8+
9+
- **参数：**
10+
- `{any} value`
11+
12+
- **示例：**
13+
14+
```js
15+
import { mount } from '@vue/test-utils'
16+
17+
const wrapper = mount({
18+
data () {
19+
return {
20+
t1: '',
21+
t2: ''
22+
}
23+
},
24+
template: `
25+
<div>
26+
<input type="text" name="t1" class="foo" v-model="t1" />
27+
<input type="text" name="t2" class="foo" v-model="t2"/>
28+
</div>`
29+
})
30+
31+
const wrapperArray = wrapper.findAll('.foo')
32+
expect(wrapper.vm.t1).to.equal('')
33+
expect(wrapper.vm.t2).to.equal('')
34+
wrapperArray.setValue('foo')
35+
expect(wrapper.vm.t1).to.equal('foo')
36+
expect(wrapper.vm.t2).to.equal('foo')
37+
```

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,23 @@ Vue Test Utils 是一个基于包裹器的 API。
66

77
## 属性
88

9-
### `vm`
9+
### `vm`
1010

11-
`Component`：这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器中。
11+
`Component` (只读)：这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器或绑定了 Vue 组件包裹器的 HTMLElement 中。
1212

13-
### `element`
13+
### `element`
1414

15-
`HTMLElement`：包裹器的根 DOM 节点
15+
`HTMLElement` (只读)：包裹器的根 DOM 节点
1616

17-
### `options`
17+
### `options`
1818

19-
#### `options.attachedToDom`
19+
#### `options.attachedToDom`
2020

21-
`Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真
21+
`Boolean` (只读)：如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真
2222

23-
#### `options.sync`
23+
#### `options.sync`
2424

25-
`Boolean`：如果挂载选项里的 `sync` 不是 `false` 则为真
25+
`Boolean` (只读)：如果挂载选项里的 `sync` 不是 `false` 则为真
2626

2727
## 方法
2828

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

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
## setChecked(value)
1+
## setChecked(checked)
22

3-
设置一个 `<input>` 单选框或复选框的值。
3+
设置 checkbox 或 radio 类 `<input>` 元素的 checked 值并更新 `v-model` 绑定的数据。
44

55
- **参数：**
6-
- `{Boolean} selected`
6+
- `{Boolean} checked (默认值：true)`
77

88
- **示例：**
99

@@ -15,3 +15,15 @@ const wrapper = mount(Foo)
1515
const option = wrapper.find('input[type="radio"]')
1616
option.setChecked()
1717
```
18+
19+
- **注意：**
20+
21+
当你尝试通过 `radioInput.element.checked = true; radioInput.trigger('input')` 经由 `v-model` 向 state 设置值的时候，`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。
22+
23+
`checkboxInput.setChecked(checked)` 是接下来这段代码的别名。
24+
25+
```js
26+
checkboxInput.element.checked = checked
27+
checkboxInput.trigger('click')
28+
checkboxInput.trigger('change')
29+
```

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
设置 `Wrapper` `vm` 的属性。
44

5-
`setData` 通过合并现有的属性生效，被覆写的数组除外。
5+
`setData` 通过递归调用 `Vue.set` 生效。
66

77
**注意：该包裹器必须包含一个 Vue 示例。**
88

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

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
## setSelected(value)
1+
## setSelected()
22

3-
在一个 `<select>` 中选中某个特定的 `<option>`。
4-
5-
- **参数：**
6-
- `{Boolean} selected`
3+
选择一个 option 元素并更新 `v-model` 绑定的数据。
74

85
- **示例：**
96

@@ -15,5 +12,15 @@ const wrapper = shallowMount(Foo)
1512
const options = wrapper.find('select').findAll('option')
1613

1714
options.at(1).setSelected()
18-
expect(wrapper.text()).to.contain('option1')
15+
```
16+
17+
- **注意：**
18+
19+
当你尝试通过 `option.element.selected = true; arentSelect.trigger('input')` 经由 `v-model` 向 state 设置值的时候，`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。
20+
21+
`option.setSelected()` 是接下来这段代码的别名。
22+
23+
```js
24+
option.element.selected = true
25+
parentSelect.trigger('change')
1926
```

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

+21-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## setValue(value)
22

3-
设置一个 `<input>` 文本的值。
3+
设置一个文本控件或 select 元素的值并更新 `v-model` 绑定的数据。
44

55
- **参数：**
66
- `{String} value`
@@ -12,6 +12,26 @@ import { mount } from '@vue/test-utils'
1212
import Foo from './Foo.vue'
1313

1414
const wrapper = mount(Foo)
15+
1516
const input = wrapper.find('input[type="text"]')
1617
input.setValue('some value')
18+
19+
const select = wrapper.find('select')
20+
select.setValue('option value')
1721
```
22+
23+
- **注意：**
24+
25+
- `textInput.setValue(value)` 是接下来这段代码的别名。
26+
27+
```js
28+
textInput.element.value = value
29+
textInput.trigger('input')
30+
```
31+
32+
- `select.setValue(value)` 是接下来这段代码的别名。
33+
34+
```js
35+
select.element.value = value
36+
select.trigger('change')
37+
```

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Vue Test Utils 允许你通过 `shallowMount` 方法只挂载一个组件而不
2323
```js
2424
import { shallowMount } from '@vue/test-utils'
2525

26-
const wrapper = shallowMount(Component) // 返回一个包裹器，包含一个挂载的组件实例
26+
const wrapper = shallowMount(Component)
2727
wrapper.vm // 挂载的 Vue 实例
2828
```
2929

@@ -125,7 +125,9 @@ const $route = {
125125

126126
mount(Component, {
127127
mocks: {
128-
$route // 在挂载组件之前添加仿造的 `$route` 对象到 Vue 实例中
128+
// 在挂载组件之前
129+
// 添加仿造的 `$route` 对象到 Vue 实例中
130+
$route
129131
}
130132
})
131133
```

Diff for: ‎docs/zh/guides/using-with-vuex.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,15 @@ describe('Actions.vue', () => {
6969
})
7070
})
7171

72-
it('当输入框的值是“input”且一个“input”事件被触发时会调用“actionInput”的 action', () => {
72+
it('当事件的值是“input”时会 dispatch“actionInput”', () => {
7373
const wrapper = shallowMount(Actions, { store, localVue })
7474
const input = wrapper.find('input')
7575
input.element.value = 'input'
7676
input.trigger('input')
7777
expect(actions.actionInput).toHaveBeenCalled()
7878
})
7979

80-
it('当输入框的值不是“input”但有“input”事件触发时不会掉用“actionInput”的 action', () => {
80+
it('当事件的值不是“input”时不会 dispatch “actionInput”', () => {
8181
const wrapper = shallowMount(Actions, { store, localVue })
8282
const input = wrapper.find('input')
8383
input.element.value = 'not input'
@@ -390,4 +390,3 @@ test('updates evenOrOdd getter when increment is commited', () => {
390390
- [测试 store 的示例工程](https://github.com/eddyerburgh/testing-vuex-store-example)
391391
- [`localVue`](../api/options.md#localvue)
392392
- [`createLocalVue`](../api/createLocalVue.md)
393-

0 commit comments

Comments
 (0)