diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index dc1697285..e654160a2 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -39,6 +39,7 @@ * [isEmpty](api/wrapper/isEmpty.md) * [isVueInstance](api/wrapper/isVueInstance.md) * [name](api/wrapper/name.md) + * [setComputed](api/wrapper/setComputed.md) * [setData](api/wrapper/setData.md) * [setMethods](api/wrapper/setMethods.md) * [setProps](api/wrapper/setProps.md) @@ -56,11 +57,16 @@ * [is](api/wrapper-array/is.md) * [isEmpty](api/wrapper-array/isEmpty.md) * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setComputed](api/wrapper-array/setComputed.md) * [setData](api/wrapper-array/setData.md) * [setMethods](api/wrapper-array/setMethods.md) * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) * [destroy](api/wrapper-array/destroy.md) + * [组件](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [选择器](api/selectors.md) * [createLocalVue](api/createLocalVue.md) + * [配置](api/config.md) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index 486368538..1b7842103 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -37,6 +37,7 @@ * [isEmpty](api/wrapper/isEmpty.md) * [isVueInstance](api/wrapper/isVueInstance.md) * [name](api/wrapper/name.md) + * [setComputed](api/wrapper/setComputed.md) * [setData](api/wrapper/setData.md) * [setMethods](api/wrapper/setMethods.md) * [setProps](api/wrapper/setProps.md) @@ -54,11 +55,16 @@ * [is](api/wrapper-array/is.md) * [isEmpty](api/wrapper-array/isEmpty.md) * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setComputed](api/wrapper-array/setComputed.md) * [setData](api/wrapper-array/setData.md) * [setMethods](api/wrapper-array/setMethods.md) * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) * [destroy](api/wrapper-array/destroy.md) + * [组件](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [选择器](api/selectors.md) * [createLocalVue](api/createLocalVue.md) + * [配置](api/config.md) diff --git a/docs/zh-cn/api/README.md b/docs/zh-cn/api/README.md index ac7e14b5f..6686fb767 100644 --- a/docs/zh-cn/api/README.md +++ b/docs/zh-cn/api/README.md @@ -27,6 +27,7 @@ * [isEmpty](./wrapper/isEmpty.md) * [isVueInstance](./wrapper/isVueInstance.md) * [name](./wrapper/name.md) + * [setComputed](./wrapper/setComputed.md) * [setData](./wrapper/setData.md) * [setMethods](./wrapper/setMethods.md) * [setProps](./wrapper/setProps.md) @@ -44,11 +45,16 @@ * [is](./wrapper-array/is.md) * [isEmpty](./wrapper-array/isEmpty.md) * [isVueInstance](./wrapper-array/isVueInstance.md) + * [setComputed](./wrapper-array/setComputed.md) * [setData](./wrapper-array/setData.md) * [setMethods](./wrapper-array/setMethods.md) * [setProps](./wrapper-array/setProps.md) * [trigger](./wrapper-array/trigger.md) * [update](./wrapper-array/update.md) * [destroy](./wrapper-array/destroy.md) +* [组件](./components/README.md) + * [TransitionStub](./components/TransitionStub.md) + * [TransitionGroupStub](./components/TransitionGroupStub.md) * [选择器](./selectors.md) * [createLocalVue](./createLocalVue.md) +* [配置](./config.md) diff --git a/docs/zh-cn/api/components/README.md b/docs/zh-cn/api/components/README.md new file mode 100644 index 000000000..c387d58d7 --- /dev/null +++ b/docs/zh-cn/api/components/README.md @@ -0,0 +1,5 @@ +# 组件 + +`vue-test-utils` 包含了用做存根的实用组件。 + +默认情况下 [TransitionStub](./TransitionStub.md) 和 [TransitionGroupStub](./TransitionGroupStub.md) 用来存根 `transition` 和 `transition-group` 组件。你也可以通过配置信息来编辑存根。 diff --git a/docs/zh-cn/api/components/TransitionGroupStub.md b/docs/zh-cn/api/components/TransitionGroupStub.md new file mode 100644 index 000000000..be0739684 --- /dev/null +++ b/docs/zh-cn/api/components/TransitionGroupStub.md @@ -0,0 +1,31 @@ +# `TransitionGroupStub` + +一个用来存根 `transition-group` 包裹器组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。 + +它在 `vue-test-utils` 默认配置中用来存根所有的 `transition-group` 组件。将 `config.stubs['transition-group']` 设为 `false` 可以使用内建的 `transition-group` 包裹器组件: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = false +``` + +将其重置可以存根过渡组件: + +```js +import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = TransitionGroupStub +``` + +还可以在挂载选项中将其设置为一个存根: + +```js +import { mount, TransitionGroupStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + 'transition-group': TransitionGroupStub + } +}) +``` diff --git a/docs/zh-cn/api/components/TransitionStub.md b/docs/zh-cn/api/components/TransitionStub.md new file mode 100644 index 000000000..c3235d322 --- /dev/null +++ b/docs/zh-cn/api/components/TransitionStub.md @@ -0,0 +1,32 @@ +# `TransitionStub` + +一个用来存根 `transition` 包裹器组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。 + +它在 `vue-test-utils` 默认配置中用来存根所有的 `transition` 组件。将 `config.stubs.transition` 设为 `false` 可以使用内建的 `transition` 包裹器组件: + + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = false +``` + +将其重置可以存根过渡组件: + +```js +import VueTestUtils, { TransitionStub } from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = TransitionStub +``` + +还可以在挂载选项中将其设置为一个存根: + +```js +import { mount, TransitionStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + transition: TransitionStub + } +}) +``` diff --git a/docs/zh-cn/api/config.md b/docs/zh-cn/api/config.md new file mode 100644 index 000000000..f5f4cbeae --- /dev/null +++ b/docs/zh-cn/api/config.md @@ -0,0 +1,25 @@ +# 配置 + +`vue-test-utils` 包含了一个定义其选项的配置对象。 + +## `vue-test-utils` 配置选项 + +### `stubs` + +- 类型:`Object` +- 默认值:`{ + transition: TransitionStub, + 'transition-group': TransitionGroupStub +}` + +用到的组件存根。它们会被传入挂载选项的 `stubs` 复写。 + +当把 `stubs` 作为一个数组传入挂载选项时,`config.stubs` 会被转换为一个数组,然后用只返回一个 div 的基础组件进行存根。 + +示例: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['my-compomnent'] = '
' +``` diff --git a/docs/zh-cn/api/selectors.md b/docs/zh-cn/api/selectors.md index 9df74b60b..ac5bafcc7 100644 --- a/docs/zh-cn/api/selectors.md +++ b/docs/zh-cn/api/selectors.md @@ -1,6 +1,6 @@ # 选择器 -很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器或是一个 Vue 组件。 +很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器、一个 Vue 组件或是一个查找选项对象。 ## CSS 选择器 @@ -41,3 +41,14 @@ import Foo from './Foo.vue' const wrapper = shallow(Foo) expect(wrapper.is(Foo)).toBe(true) ``` + +## 查找选项对象 + +### Ref + +`vue-test-utils` 允许通过一个查找选项对象在组件包裹器上根据 `$ref` 选择元素。 + +```js +const buttonWrapper = wrapper.find({ ref: 'myButton' }); +buttonWrapper.trigger('click'); +``` diff --git a/docs/zh-cn/api/wrapper-array/setComputed.md b/docs/zh-cn/api/wrapper-array/setComputed.md new file mode 100644 index 000000000..d322c45fa --- /dev/null +++ b/docs/zh-cn/api/wrapper-array/setComputed.md @@ -0,0 +1,25 @@ +# `setComputed(computedObjects)` + +为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置计算属性并强行更新。 + +**注意:该包裹器必须包含一个 Vue 示例。** +**注意:每个 Vue 示例必须已经有被传入 `setComputed` 的计算属性。** + +- **参数:** + - `{Object} computed properties` + +- **示例:** + +```js +import { mount } from 'vue-test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) + +barArray.setComputed({ + computed1: 'new-computed1', + computed2: 'new-computed2' +}) +``` diff --git a/docs/zh-cn/api/wrapper/emitted.md b/docs/zh-cn/api/wrapper/emitted.md index 36302f4b2..a8059bb54 100644 --- a/docs/zh-cn/api/wrapper/emitted.md +++ b/docs/zh-cn/api/wrapper/emitted.md @@ -31,3 +31,16 @@ expect(wrapper.emitted().foo.length).toBe(2) // 断言事件的有效数据 expect(wrapper.emitted().foo[1]).toEqual([123]) ``` + +你也可以把上面的代码写成这样: + +```js +// 断言事件已经被触发 +expect(wrapper.emitted('foo')).toBeTruthy() + +// 断言事件的数量 +expect(wrapper.emitted('foo').length).toBe(2) + +// 断言事件的有效数据 +expect(wrapper.emitted('foo')[1]).toEqual([123]) +``` diff --git a/docs/zh-cn/api/wrapper/setComputed.md b/docs/zh-cn/api/wrapper/setComputed.md new file mode 100644 index 000000000..fab55ae93 --- /dev/null +++ b/docs/zh-cn/api/wrapper/setComputed.md @@ -0,0 +1,42 @@ +# `setComputed(computedObjects)` + +设置 `Wrapper` `vm` 的计算属性并强制更新。 + +**注意:该包裹器必须包含一个 Vue 示例。** +**注意:该 Vue 示例必须已经有被传入 `setComputed` 的计算属性。** + +- **参数:** + - `{Object} computed properties` + +- **示例:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount({ + template: '
{{ computed1 }} {{ computed2 }}
', + data () { + return { + initial: 'initial' + } + }, + computed: { + computed1 () { + return this.initial + }, + computed2 () { + return this.initial + } + } +}) + +expect(wrapper.html()).toBe('
initial initial
') + +wrapper.setComputed({ + computed1: 'new-computed1', + computed2: 'new-computed2' +}) + +expect(wrapper.html()).toBe('
new-computed1 new-computed2
') +``` diff --git a/docs/zh-cn/guides/dom-events.md b/docs/zh-cn/guides/dom-events.md index b7fe7ffc5..250d84684 100644 --- a/docs/zh-cn/guides/dom-events.md +++ b/docs/zh-cn/guides/dom-events.md @@ -193,4 +193,4 @@ describe('键盘事件测试', () => { ## 重要事项 -`vue-test-utils` 是同步触发事件。因此 `vue.nextTick` 不是必须的。 +`vue-test-utils` 是同步触发事件。因此 `Vue.nextTick` 不是必须的。