Skip to content

[docs][zh] keep update #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 28, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/zh/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Vue Test Utils
# 介绍

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

Expand Down
74 changes: 0 additions & 74 deletions docs/zh/SUMMARY.md

This file was deleted.

2 changes: 1 addition & 1 deletion docs/zh/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
!!!include(docs/zh/api/renderToString.md)!!!
!!!include(docs/zh/api/selectors.md)!!!
!!!include(docs/zh/api/createLocalVue.md)!!!
!!!include(docs/zh/api/config.md)!!!
!!!include(docs/zh/api/config.md)!!!
19 changes: 18 additions & 1 deletion docs/zh/api/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

Vue Test Utils 包含了一个定义其选项的配置对象。

### Vue Test Utils 配置选项

### `stubs`

- 类型:`Object`
Expand All @@ -13,7 +15,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。
存储在 `config.stubs` 中的存根会被默认使用。
用到的组件存根。它们会被传入挂载选项的 `stubs` 覆写。

当把 `stubs` 作为一个数组传入挂载选项时,`config.stubs` 会被转换为一个数组,然后用只返回一个 `<!---->` 的基础组件进行存根。
当把 `stubs` 作为一个数组传入挂载选项时,`config.stubs` 会被转换为一个数组,然后用只返回一个 `<${component name}-stub>` 的基础组件进行存根。

示例:

Expand Down Expand Up @@ -77,3 +79,18 @@ VueTestUtils.config.provide['$logger'] = {
}
}
```

### `logModifiedComponents`

- 类型:`Boolean`
- 默认值:`true`

当被展开的子元素被自动化存根的时候记录下告警日志。设置为 `false` 时则会隐藏告警日志。和其它配置选项不同的是,它不能设置在挂载选项上。

示例:

```js
import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.logModifiedComponents = false
```
6 changes: 3 additions & 3 deletions docs/zh/api/createLocalVue.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
可通过 `options.localVue` 来使用:

```js
import { createLocalVue, shallow } from '@vue/test-utils'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const localVue = createLocalVue()
const wrapper = shallow(Foo, {
const wrapper = shallowMount(Foo, {
localVue,
mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)

const freshWrapper = shallow(Foo)
const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false)
```

Expand Down
16 changes: 7 additions & 9 deletions docs/zh/api/options.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 挂载选项

即 `mount` 和 `shallow` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。
即 `mount` 和 `shallowMount` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。

- [`context`](#context)
- [`slots`](#slots)
Expand Down Expand Up @@ -48,7 +48,7 @@ expect(wrapper.is(Component)).toBe(true)
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
slots: {
default: [Foo, Bar],
fooBar: Foo, // 将会匹配 `<slot name="FooBar" />`。
Expand Down Expand Up @@ -86,7 +86,7 @@ There are three limitations.
示例:

```js
const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
scopedSlots: {
foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
}
Expand All @@ -98,7 +98,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe('<div id="fooWrapper"><p>0,text1

- 类型:`{ [name: string]: Component | boolean } | Array<string>`

将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组,则每个存根都是一个 `<!---->`。
将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组,则每个存根都是一个 `<${component name}-stub>`。

示例:

Expand All @@ -109,7 +109,7 @@ mount(Component, {
stubs: ['registered-component']
})

shallow(Component, {
shallowMount(Component, {
stubs: {
// 使用一个特定的实现作为存根
'registered-component': Foo,
Expand All @@ -129,7 +129,7 @@ shallow(Component, {

```js
const $route = { path: 'http://www.example-path.com' }
const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
mocks: {
$route
}
Expand Down Expand Up @@ -198,14 +198,12 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)
- 类型:`boolean`
- 默认值:`true`

将所有的侦听器都设置为同步执行。

当 `sync` 是 `true` 时,这个 Vue 组件会被同步渲染。
当 `sync` 是 `false` 时,这个 Vue 组件会被异步渲染。

## 其它选项

当 `mount` 和 `shallow` 的选项包含了挂载选项之外的选项时,则会将它们通过[扩展](https://vuejs.org/v2/api/#extends)覆写到其组件选项。
当 `mount` 和 `shallowMount` 的选项包含了挂载选项之外的选项时,则会将它们通过[扩展](https://vuejs.org/v2/api/#extends)覆写到其组件选项。

```js
const Component = {
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/api/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ export default {
```

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)
```

Expand Down
8 changes: 4 additions & 4 deletions docs/zh/api/wrapper-array/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

一个 `WrapperArray` 是一个包含 [`Wrapper`](../wrapper/README.md) 数组以及 `Wrapper` 的测试方法等对象。

- **属性:**
## 属性

### `wrappers`

`array`: 包含在 `WrapperArray` 内的 `Wrappers`

###`length`
### `length`

`number`:该 `WrapperArray` 中包含的 `Wrapper` 的数量。

- **方法:**
## 方法

!!!include(docs/zh/api/wrapper-array/at.md)!!!
!!!include(docs/zh/api/wrapper-array/contains.md)!!!
Expand All @@ -24,4 +24,4 @@
!!!include(docs/zh/api/wrapper-array/setData.md)!!!
!!!include(docs/zh/api/wrapper-array/setMethods.md)!!!
!!!include(docs/zh/api/wrapper-array/setProps.md)!!!
!!!include(docs/zh/api/wrapper-array/trigger.md)!!!
!!!include(docs/zh/api/wrapper-array/trigger.md)!!!
4 changes: 2 additions & 2 deletions docs/zh/api/wrapper-array/at.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
- **示例:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
const secondDiv = divArray.at(1)
expect(secondDiv.is('p')).toBe(true)
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/api/wrapper-array/contains.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
- **示例:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/api/wrapper-array/filter.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
- **示例:**

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper.findAll('div').filter(w => !w.hasClass('filtered'))
```
18 changes: 9 additions & 9 deletions docs/zh/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
## Wrapper
# Wrapper

Vue Test Utils 是一个基于包裹器的 API。

一个 `Wrapper` 是一个包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法。

- **属性:**
## 属性

### `vm`

`Component`:这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。

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

### `element`

`HTMLElement`:包裹器的根 DOM 节点

### `options`

`Object`:一个对象,包含传递给 `mount` 或 `shallow` 的 Vue Test Utils 选项

#### `options.attachedToDom`

`Boolean`:如果 `attachToDom` 传递给了 `mount` 或 `shallow` 则为真
`Boolean`:如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真

#### `options.sync`

`Boolean`:如果挂载选项里的 `sync` 不是 `false` 则为真

- **方法:**
## 方法

!!!include(docs/zh/api/wrapper/attributes.md)!!!
!!!include(docs/zh/api/wrapper/classes.md)!!!
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/api/wrapper/emitted.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ expect(wrapper.emitted('foo').length).toBe(2)
expect(wrapper.emitted('foo')[1]).toEqual([123])
```

该 `.emitted() 方法每次被调用时都返回相同的对象,而不是返回一个新的,所以当新事件被触发时该对象会被更新:
该 `.emitted()` 方法每次被调用时都返回相同的对象,而不是返回一个新的,所以当新事件被触发时该对象会被更新:

```js
const emitted = wrapper.emitted()
Expand Down
4 changes: 3 additions & 1 deletion docs/zh/api/wrapper/setData.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
## setData(data)

设置 `Wrapper` `vm` 的属性并强制更新。
设置 `Wrapper` `vm` 的属性。

`setData` 通过合并现有的属性生效,被覆写的数组除外。

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

Expand Down
6 changes: 3 additions & 3 deletions docs/zh/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@

额外的,对于包含许多子组件的组件来说,整个渲染树可能会非常大。重复渲染所有的子组件可能会让我们的测试变慢。

Vue Test Utils 允许你通过 `shallow` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根):
Vue Test Utils 允许你通过 `shallowMount` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根):

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'

const wrapper = shallow(Component) // 返回一个包裹器,包含一个挂载的组件实例
const wrapper = shallowMount(Component) // 返回一个包裹器,包含一个挂载的组件实例
wrapper.vm // 挂载的 Vue 实例
```

Expand Down
4 changes: 2 additions & 2 deletions docs/zh/guides/testing-SFCs-with-karma.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,12 @@ export default {

```js
import { expect } from 'chai'
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'

describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
const wrapper = shallow(Counter)
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).contains('1')
})
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/guides/testing-SFCs-with-mocha-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,12 +150,12 @@ export default {
然后创建一个名为 `test/Counter.spec.js` 的测试文件并写入如下代码:

```js
import { shallow } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Counter from '../src/Counter.vue'

describe('Counter.vue', () => {
it('计数器在点击按钮时自增', () => {
const wrapper = shallow(Counter)
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
Expand Down
Loading