Skip to content

[docs][zh-cn] update to 528d637 #620

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

Closed
wants to merge 3 commits into from
Closed
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
62 changes: 62 additions & 0 deletions docs/zh-cn/api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# API

* [mount](./mount.md)
* [shallowMount](./shallowMount.md)
* [render](./render.md)
* [renderToString](./renderToString.md)
* [挂载选项](./options.md)
- [context](./options.md#context)
- [slots](./options.md#slots)
- [scopedSlots](api/options.md#scopedslots)
- [stubs](./options.md#stubs)
- [mocks](./options.md#mocks)
- [localVue](./options.md#localvue)
- [attachToDocument](./options.md#attachtodocument)
- [attrs](./options.md#attrs)
- [listeners](./options.md#listeners)
- [provide](./options.md#provide)
- [sync](./options.md#sync)
- [其它选项](./options.md#other-options)
* [Wrapper](./wrapper/README.md)
* [attributes](./wrapper/attributes.md)
* [classes](./wrapper/classes.md)
* [contains](./wrapper/contains.md)
* [emitted](./wrapper/emitted.md)
* [emittedByOrder](./wrapper/emittedByOrder.md)
* [exists](./wrapper/exists.md)
* [destroy](./wrapper/destroy.md)
* [find](./wrapper/find.md)
* [findAll](./wrapper/findAll.md)
* [html](./wrapper/html.md)
* [is](./wrapper/is.md)
* [isEmpty](./wrapper/isEmpty.md)
* [isVueInstance](./wrapper/isVueInstance.md)
* [name](./wrapper/name.md)
* [props](./wrapper/props.md)
* [setData](./wrapper/setData.md)
* [setMethods](./wrapper/setMethods.md)
* [setProps](./wrapper/setProps.md)
* [text](./wrapper/text.md)
* [trigger](./wrapper/trigger.md)
* [isVisible](./wrapper/isVisible.md)
* [WrapperArray](./wrapper-array/README.md)
* [at](./wrapper-array/at.md)
* [contains](./wrapper-array/contains.md)
* [exists](./wrapper/exists.md)
* [destroy](./wrapper-array/destroy.md)
* [filter](./wrapper-array/filter.md)
* [is](./wrapper-array/is.md)
* [isEmpty](./wrapper-array/isEmpty.md)
* [isVueInstance](./wrapper-array/isVueInstance.md)
* [setData](./wrapper-array/setData.md)
* [setMethods](./wrapper-array/setMethods.md)
* [setProps](./wrapper-array/setProps.md)
* [trigger](./wrapper-array/trigger.md)
* [isVisible](./wrapper-array/isVisible.md)
* [组件](./components/README.md)
* [TransitionStub](./components/TransitionStub.md)
* [TransitionGroupStub](./components/TransitionGroupStub.md)
* [RouterLinkStub](./components/RouterLinkStub.md)
* [选择器](./selectors.md)
* [createLocalVue](./createLocalVue.md)
* [配置](./config.md)
17 changes: 17 additions & 0 deletions docs/zh-cn/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# `Wrapper`

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

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

- **属性:**

`vm` `Component`:这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器中
`element` `HTMLElement`:包裹器的根 DOM 节点
`options` `Object`:一个对象,包含传递给 `mount` 或 `shallowMount` 的 Vue Test Utils 选项
`options.attachedToDocument` `Boolean`:如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真
`options.sync` `Boolean`:如果 `sync` 没有以 `false` 传递给了 `mount` 或 `shallowMount` 则为真

- **方法:**

在文档的 `Wrapper` 章节有详细的方法列表。
17 changes: 16 additions & 1 deletion docs/zh/api/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。
存储在 `config.stubs` 中的存根会被默认使用。
用到的组件存根。它们会被传入挂载选项的 `stubs` 覆写。

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

示例:

Expand Down Expand Up @@ -77,3 +77,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
14 changes: 7 additions & 7 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 @@ -205,7 +205,7 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object)

## 其它选项

当 `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
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'))
```
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
10 changes: 5 additions & 5 deletions docs/zh/guides/testing-async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ export default {
测试用例可以写成像这样:

``` js
import { shallow } from 'vue-test-utils'
import { shallowMount } from 'vue-test-utils'
import Foo from './Foo'
jest.mock('axios')

test('Foo', () => {
it('fetches async when a button is clicked', () => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
expect(wrapper.vm.value).toBe('value')
})
Expand All @@ -62,7 +62,7 @@ test('Foo', () => {
``` js
test('Foo', () => {
it('fetches async when a button is clicked', (done) => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.value).toBe('value')
Expand All @@ -79,14 +79,14 @@ test('Foo', () => {
The updated test looks like this:

``` js
import { shallow } from 'vue-test-utils'
import { shallowMount } from 'vue-test-utils'
import flushPromises from 'flush-promises'
import Foo from './Foo'
jest.mock('axios')

test('Foo', () => {
it('fetches async when a button is clicked', async () => {
const wrapper = shallow(Foo)
const wrapper = shallowMount(Foo)
wrapper.find('button').trigger('click')
await flushPromises()
expect(wrapper.vm.value).toBe('value')
Expand Down
16 changes: 8 additions & 8 deletions docs/zh/guides/using-with-vue-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
为了避免这样的事情发生,我们创建了一个 `localVue` 并对其安装 Vue Router。

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

const localVue = createLocalVue()
localVue.use(VueRouter)
const router = new VueRouter()

shallow(Component, {
shallowMount(Component, {
localVue,
router
})
Expand All @@ -31,23 +31,23 @@ shallow(Component, {
### 使用存根

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

shallow(Component, {
shallowMount(Component, {
stubs: ['router-link', 'router-view']
})
```

### 为 localVue 安装 Vue Router

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

const localVue = createLocalVue()
localVue.use(VueRouter)

shallow(Component, {
shallowMount(Component, {
localVue
})
```
Expand All @@ -57,13 +57,13 @@ shallow(Component, {
有的时候你想要测试一个组件在配合 `$route` 和 `$router` 对象的参数时的行为。这时候你可以传递自定义假数据给 Vue 实例。

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

const $route = {
path: '/some/path'
}

const wrapper = shallow(Component, {
const wrapper = shallowMount(Component, {
mocks: {
$route
}
Expand Down
Loading