diff --git a/docs/zh/README.md b/docs/zh/README.md index b76393ac1..25fe3d77e 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -11,6 +11,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [用 Mocha 和 webpack 测试单文件组件](guides/testing-single-file-components-with-mocha-webpack.md) * [用 Karma 测试单文件组件](guides/testing-single-file-components-with-karma.md) * [测试异步行为](guides/testing-async-components.md) + * [配合 TypeScript 使用](guides/using-with-typescript.md) * [配合 Vue Router 使用](guides/using-with-vue-router.md) * [配合 Vuex 实用](guides/using-with-vuex.md) * [API](api/) @@ -27,7 +28,9 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 - [localVue](api/options.md#localvue) - [attachToDocument](api/options.md#attachtodocument) - [attrs](api/options.md#attrs) + - [propsData](api/options.md#propsdata) - [listeners](api/options.md#listeners) + - [parentComponent](api/options.md#parentComponent) - [provide](api/options.md#provide) - [sync](api/options.md#sync) - [其它选项](api/options.md#other-options) @@ -77,5 +80,6 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [RouterLinkStub](api/components/RouterLinkStub.md) * [选择器](api/selectors.md) + * [createWrapper](api/createWrapper.md) * [createLocalVue](api/createLocalVue.md) * [配置](api/config.md) diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md index 11e368375..bf3b5fdf0 100644 --- a/docs/zh/api/README.md +++ b/docs/zh/api/README.md @@ -6,4 +6,5 @@ !!!include(docs/zh/api/renderToString.md)!!! !!!include(docs/zh/api/selectors.md)!!! !!!include(docs/zh/api/createLocalVue.md)!!! +!!!include(docs/zh/api/createWrapper.md)!!! !!!include(docs/zh/api/config.md)!!! diff --git a/docs/zh/api/createWrapper.md b/docs/zh/api/createWrapper.md new file mode 100644 index 000000000..3d9ac6c9e --- /dev/null +++ b/docs/zh/api/createWrapper.md @@ -0,0 +1,25 @@ +## createWrapper(node [, options]) + +- **参数:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} sync` + - `{Boolean} attachedToDocument` + +- **返回值:** + - `{Wrapper}` + +- **用法:** + +`createWrapper` 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 `Wrapper`。 + +```js +import { createWrapper } from '@vue/test-utils' +import Foo from './Foo.vue' + +const Constructor = Vue.extend(Foo) +const vm = new Constructor().$mount() +const wrapper = createWrapper(vm) +expect(wrapper.vm.foo).toBe(true) +``` diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index 42485b56d..a2f15ac33 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -9,9 +9,10 @@ - [`mocks`](#mocks) - [`localVue`](#localvue) - [`attachToDocument`](#attachtodocument) +- [`propsData`](#propsdata) - [`attrs`](#attrs) - [`listeners`](#listeners) -- [`parentComponent`](#parentComponent) +- [`parentComponent`](#parentcomponent) - [`provide`](#provide) - [`sync`](#sync) @@ -19,7 +20,7 @@ - 类型:`Object` -将上下文传递给函数式组件。该选项只能用于函数式组件。 +将上下文传递给函数式组件。该选项只能用于[函数式组件](https://cn.vuejs.org/v2/guide/render-function.html#函数式组件)。 示例: @@ -47,45 +48,74 @@ expect(wrapper.is(Component)).toBe(true) ```js import Foo from './Foo.vue' -import Bar from './Bar.vue' + +const bazComponent = { + name: 'baz-component', + template: '

baz

' +} const wrapper = shallowMount(Component, { slots: { - default: [Foo, Bar], - fooBar: Foo, // 将会匹配 ``。 + default: [Foo, '', 'text'], + fooBar: Foo, // 将会匹配 ``. foo: '
', - bar: 'bar' + bar: 'bar', + baz: bazComponent, + qux: '' } }) + expect(wrapper.find('div')).toBe(true) ``` ## scopedSlots -- 类型:`{ [name: string]: string }` +- 类型:`{ [name: string]: string|Function }` -提供一个该组件所有作用域插槽内容的对象。每个键对应到插槽的名字,每个值可以是一个模板字符串。 +提供一个该组件所有作用域插槽的对象。每个键对应到插槽的名字。 -这里有三处限制。 +你可以使用 slot-scope 特性设置 prop 的名称: -* 该选项只支持 vue@2.5+。 +```js +shallowMount(Component, { + scopedSlots: { + foo: '

{{foo.index}},{{foo.text}}

' + } +}) +``` + +否则插槽被计算的时候可以通过 `props` 对象使用 prop: + +```js +shallowMount(Component, { + scopedSlots: { + default: '

{{props.index}},{{props.text}}

' + } +}) +``` -* 你不能在 `scopedSlots` 选项中将 `