Skip to content

Commit a6a64d4

Browse files
Jinjiangeddyerburgh
Jinjiang
authored and
eddyerburgh
committed
docs(zh): keep update (#972)
1 parent 2f4c073 commit a6a64d4

14 files changed

+355
-60
lines changed

Diff for: ‎docs/zh/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
1111
* [用 Mocha 和 webpack 测试单文件组件](guides/testing-single-file-components-with-mocha-webpack.md)
1212
* [用 Karma 测试单文件组件](guides/testing-single-file-components-with-karma.md)
1313
* [测试异步行为](guides/testing-async-components.md)
14+
* [配合 TypeScript 使用](guides/using-with-typescript.md)
1415
* [配合 Vue Router 使用](guides/using-with-vue-router.md)
1516
* [配合 Vuex 实用](guides/using-with-vuex.md)
1617
* [API](api/)
@@ -27,7 +28,9 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
2728
- [localVue](api/options.md#localvue)
2829
- [attachToDocument](api/options.md#attachtodocument)
2930
- [attrs](api/options.md#attrs)
31+
- [propsData](api/options.md#propsdata)
3032
- [listeners](api/options.md#listeners)
33+
- [parentComponent](api/options.md#parentComponent)
3134
- [provide](api/options.md#provide)
3235
- [sync](api/options.md#sync)
3336
- [其它选项](api/options.md#other-options)
@@ -77,5 +80,6 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
7780
* [TransitionGroupStub](api/components/TransitionGroupStub.md)
7881
* [RouterLinkStub](api/components/RouterLinkStub.md)
7982
* [选择器](api/selectors.md)
83+
* [createWrapper](api/createWrapper.md)
8084
* [createLocalVue](api/createLocalVue.md)
8185
* [配置](api/config.md)

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

+1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
!!!include(docs/zh/api/renderToString.md)!!!
77
!!!include(docs/zh/api/selectors.md)!!!
88
!!!include(docs/zh/api/createLocalVue.md)!!!
9+
!!!include(docs/zh/api/createWrapper.md)!!!
910
!!!include(docs/zh/api/config.md)!!!

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
## createWrapper(node [, options])
2+
3+
- **参数：**
4+
5+
- `{vm|HTMLElement} node`
6+
- `{Object} options`
7+
- `{Boolean} sync`
8+
- `{Boolean} attachedToDocument`
9+
10+
- **返回值：**
11+
- `{Wrapper}`
12+
13+
- **用法：**
14+
15+
`createWrapper` 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 `Wrapper`。
16+
17+
```js
18+
import { createWrapper } from '@vue/test-utils'
19+
import Foo from './Foo.vue'
20+
21+
const Constructor = Vue.extend(Foo)
22+
const vm = new Constructor().$mount()
23+
const wrapper = createWrapper(vm)
24+
expect(wrapper.vm.foo).toBe(true)
25+
```

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

+93-19
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,18 @@
99
- [`mocks`](#mocks)
1010
- [`localVue`](#localvue)
1111
- [`attachToDocument`](#attachtodocument)
12+
- [`propsData`](#propsdata)
1213
- [`attrs`](#attrs)
1314
- [`listeners`](#listeners)
14-
- [`parentComponent`](#parentComponent)
15+
- [`parentComponent`](#parentcomponent)
1516
- [`provide`](#provide)
1617
- [`sync`](#sync)
1718

1819
## context
1920

2021
- 类型：`Object`
2122

22-
将上下文传递给函数式组件。该选项只能用于函数式组件。
23+
将上下文传递给函数式组件。该选项只能用于[函数式组件](https://cn.vuejs.org/v2/guide/render-function.html#函数式组件)。
2324

2425
示例：
2526

@@ -47,45 +48,74 @@ expect(wrapper.is(Component)).toBe(true)
4748

4849
```js
4950
import Foo from './Foo.vue'
50-
import Bar from './Bar.vue'
51+
52+
const bazComponent = {
53+
name: 'baz-component',
54+
template: '<p>baz</p>'
55+
}
5156

5257
const wrapper = shallowMount(Component, {
5358
slots: {
54-
default: [Foo, Bar],
55-
fooBar: Foo, // 将会匹配 `<slot name="FooBar" />`。
59+
default: [Foo, '<my-component />', 'text'],
60+
fooBar: Foo, // 将会匹配 `<slot name="FooBar" />`.
5661
foo: '<div />',
57-
bar: 'bar'
62+
bar: 'bar',
63+
baz: bazComponent,
64+
qux: '<my-component />'
5865
}
5966
})
67+
6068
expect(wrapper.find('div')).toBe(true)
6169
```
6270

6371
## scopedSlots
6472

65-
- 类型：`{ [name: string]: string }`
73+
- 类型：`{ [name: string]: string|Function }`
6674

67-
提供一个该组件所有作用域插槽内容的对象。每个键对应到插槽的名字，每个值可以是一个模板字符串。
75+
提供一个该组件所有作用域插槽的对象。每个键对应到插槽的名字。
6876

69-
这里有三处限制。
77+
你可以使用 slot-scope 特性设置 prop 的名称：
7078

71-
* 该选项只支持 [email protected]+。
79+
```js
80+
shallowMount(Component, {
81+
scopedSlots: {
82+
foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
83+
}
84+
})
85+
```
86+
87+
否则插槽被计算的时候可以通过 `props` 对象使用 prop：
88+
89+
```js
90+
shallowMount(Component, {
91+
scopedSlots: {
92+
default: '<p>{{props.index}},{{props.text}}</p>'
93+
}
94+
})
95+
```
7296

73-
* 你不能在 `scopedSlots` 选项中将 `<template>` 标签用作其根元素。
97+
你也可以传递一个函数将 prop 作为参数带入：
7498

75-
* 我们不支持 PhantomJS。
76-
你可以使用 [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) 作为替代品。
99+
```js
100+
shallowMount(Component, {
101+
scopedSlots: {
102+
foo: function (props) {
103+
return this.$createElement('div', props.index)
104+
}
105+
}
106+
})
107+
```
77108

78-
示例：
109+
或者你可以使用 JSX。如果你在一个方法里撰写 JSX，babel-plugin-transform-vue-jsx 会自动注入 `this.$createElement`：
79110

80111
```js
81-
const wrapper = shallowMount(Component, {
112+
shallowMount(Component, {
82113
scopedSlots: {
83-
foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
114+
foo (props) {
115+
return <div>{ props.text }</div>
116+
}
84117
}
85118
})
86-
expect(wrapper.find('#fooWrapper').html()).toBe(
87-
`<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>`
88-
)
89119
```
90120

91121
## stubs
@@ -177,6 +207,31 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
177207

178208
设置组件实例的 `$attrs` 对象。
179209

210+
## propsData
211+
212+
- 类型：`Object`
213+
214+
在组件被挂载时设置组件实例的 prop。
215+
216+
示例：
217+
218+
```js
219+
const Component = {
220+
template: '<div>{{ msg }}</div>',
221+
props: ['msg']
222+
}
223+
const wrapper = mount(Component, {
224+
propsData: {
225+
msg: 'aBC'
226+
}
227+
})
228+
expect(wrapper.text()).toBe('aBC')
229+
```
230+
231+
::: tip 提示
232+
值得注意的是 `propsData` 实际上是一个 [Vue API](https://cn.vuejs.org/v2/api/#propsData)，不是 Vue Test Utils 的挂载选项。它会被 [`extends`](https://cn.vuejs.org/v2/api/#extends) 处理。请查阅[其它选项](#其它选项)。
233+
:::
234+
180235
## listeners
181236

182237
- 类型：`Object`
@@ -206,6 +261,25 @@ expect(wrapper.vm.$parent.$options.name).toBe('foo')
206261

207262
为组件传递用于注入的属性。可查阅 [provie/inject](https://cn.vuejs.org/v2/api/#provide-inject) 了解更多。
208263

264+
示例：
265+
266+
```js
267+
const Component = {
268+
inject: ['foo'],
269+
template: '<div>{{this.foo()}}</div>'
270+
}
271+
272+
const wrapper = shallowMount(Component, {
273+
provide: {
274+
foo () {
275+
return 'fooValue'
276+
}
277+
}
278+
})
279+
280+
expect(wrapper.text()).toBe('fooValue')
281+
```
282+
209283
## sync
210284

211285
- 类型：`boolean`

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ describe('Foo', () => {
8989
foo: '<div />'
9090
}
9191
})
92-
expect(wrapper.find('div')).toBe(true)
92+
expect(wrapper.contains('div')).toBe(true)
9393
})
9494
})
9595
```

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
## attributes()
1+
## attributes([key])
22

3-
返回 `Wrapper` DOM 节点的特性对象。
3+
返回 `Wrapper` DOM 节点的特性对象。如果提供了 `key`，则返回这个 `key` 对应的值。
44

5-
- **返回值：**`{[attribute: string]: any}`
5+
- **参数：**
6+
- `{string} key` **可选的**
7+
8+
- **返回值：**`{[attribute: string]: any} | string`
69

710
- **示例：**
811

@@ -12,4 +15,5 @@ import Foo from './Foo.vue'
1215

1316
const wrapper = mount(Foo)
1417
expect(wrapper.attributes().id).toBe('foo')
18+
expect(wrapper.attributes('id')).toBe('foo')
1519
```

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
## classes()
1+
## classes([className])
22

33
返回 `Wrapper` DOM 节点的 class。
44

5-
返回 class 名称的数组。
5+
返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值。
66

7-
- **返回值：**`Array<{string}>`
7+
- **参数：**
8+
- `{string} className` **可选的**
9+
10+
- **返回值：**`Array<{string}> | boolean`
811

912
- **示例：**
1013

@@ -14,4 +17,5 @@ import Foo from './Foo.vue'
1417

1518
const wrapper = mount(Foo)
1619
expect(wrapper.classes()).toContain('bar')
20+
expect(wrapper.classes('bar')).toBe(true)
1721
```

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
## props()
1+
## props([key])
22

3-
返回 `Wrapper` `vm` 的 props 对象。
3+
返回 `Wrapper` `vm` 的 props 对象。如果提供了 `key`，则返回这个 `key` 对应的值。
44

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

7-
- **返回值：**`{[prop: string]: any}`
7+
- **参数：**
8+
- `{string} key` **可选的**
9+
10+
- **返回值：**`{[prop: string]: any} | any`
811

912
- **示例：**
1013

@@ -18,4 +21,5 @@ const wrapper = mount(Foo, {
1821
}
1922
})
2023
expect(wrapper.props().bar).toBe('baz')
24+
expect(wrapper.props('bar')).toBe('baz')
2125
```

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

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

1414
const wrapper = mount(Foo)
15-
const option = wrapper.find('input[type="radio"]')
16-
option.setChecked()
15+
const radioInput = wrapper.find('input[type="radio"]')
16+
radioInput.setChecked()
1717
```
1818

1919
- **注意：**

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import Foo from './Foo.vue'
1313

1414
const wrapper = mount(Foo)
1515

16-
const input = wrapper.find('input[type="text"]')
17-
input.setValue('some value')
16+
const textInput = wrapper.find('input[type="text"]')
17+
textInput.setValue('some value')
1818

1919
const select = wrapper.find('select')
2020
select.setValue('option value')

Diff for: ‎docs/zh/guides/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
!!!include(docs/zh/guides/testing-single-file-components-with-mocha-webpack.md)!!!
99
!!!include(docs/zh/guides/testing-single-file-components-with-karma.md)!!!
1010
!!!include(docs/zh/guides/testing-async-components.md)!!!
11+
!!!include(docs/zh/guides/using-with-typescript.md)!!!
1112
!!!include(docs/zh/guides/using-with-vue-router.md)!!!
12-
!!!include(docs/zh/guides/using-with-vuex.md)!!!
13+
!!!include(docs/zh/guides/using-with-vuex.md)!!!

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

+14
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,20 @@ mount(Component, {
132132
})
133133
```
134134

135+
### 存根组件
136+
137+
你可以使用 `stubs` 选项覆写全局或局部注册的组件：
138+
139+
```js
140+
import { mount } from '@vue/test-utils'
141+
142+
mount(Component, {
143+
// 将会把 globally-registered-component 解析为
144+
// 空的存根
145+
stubs: ['globally-registered-component']
146+
})
147+
```
148+
135149
### 处理路由
136150

137151
因为路由需要在应用的全局结构中进行定义，且引入了很多组件，所以最好集成到 end-to-end 测试。对于依赖 `vue-router` 功能的独立的组件来说，你可以使用上面提到的技术仿造它们。

0 commit comments

Comments
 (0)