From 0437e2638ed782ad19760c46057f6d5e00a8521c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Wed, 6 Jun 2018 16:49:59 +0800 Subject: [PATCH] docs: zn update (#674) --- docs/api/mount.md | 2 +- docs/api/wrapper/find.md | 4 +--- docs/api/wrapper/findAll.md | 2 -- docs/ja/api/wrapper/find.md | 4 +--- docs/ja/api/wrapper/findAll.md | 2 -- docs/zh/README.md | 10 +++++----- docs/zh/api/mount.md | 4 ++-- docs/zh/api/options.md | 9 --------- docs/zh/api/render.md | 2 +- docs/zh/api/shallowMount.md | 2 +- docs/zh/api/wrapper-array/README.md | 8 ++++---- docs/zh/api/wrapper/find.md | 4 +--- docs/zh/api/wrapper/findAll.md | 4 +--- docs/zh/guides/using-with-vuex.md | 26 ++++++++++++++++---------- 14 files changed, 34 insertions(+), 49 deletions(-) diff --git a/docs/api/mount.md b/docs/api/mount.md index 3609c7c23..0bcd6a59f 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -126,4 +126,4 @@ describe('Foo', () => { }) ``` -- **See also:** [Wrapper](wrapper/README.md) +- **See also:** [Wrapper](wrapper/) diff --git a/docs/api/wrapper/find.md b/docs/api/wrapper/find.md index 1b7f0665f..f2734ebf7 100644 --- a/docs/api/wrapper/find.md +++ b/docs/api/wrapper/find.md @@ -1,6 +1,6 @@ ## find(selector) -Returns [`Wrapper`](../wrapper/) of first DOM node or Vue component matching selector. +Returns `Wrapper` of first DOM node or Vue component matching selector. Use any valid [selector](../selectors.md). @@ -30,5 +30,3 @@ expect(barByName.is(Bar)).toBe(true) const fooRef = wrapper.find({ ref: 'foo' }) expect(fooRef.is(Foo)).toBe(true) ``` - -- **See also:** [Wrapper](../wrapper/) diff --git a/docs/api/wrapper/findAll.md b/docs/api/wrapper/findAll.md index d62af580c..8720d84ee 100644 --- a/docs/api/wrapper/findAll.md +++ b/docs/api/wrapper/findAll.md @@ -22,5 +22,3 @@ expect(div.is('div')).toBe(true) const bar = wrapper.findAll(Bar).at(0) expect(bar.is(Bar)).toBe(true) ``` - -- **See also:** [Wrapper](../wrapper/) diff --git a/docs/ja/api/wrapper/find.md b/docs/ja/api/wrapper/find.md index e817d52a5..ceec5d336 100644 --- a/docs/ja/api/wrapper/find.md +++ b/docs/ja/api/wrapper/find.md @@ -1,6 +1,6 @@ ## find(selector) -最初の DOM ノードの [Wrapper](../wrapper/)、またはセレクタで一致した Vue コンポーネントを返します。 +最初の DOM ノードの Wrapper、またはセレクタで一致した Vue コンポーネントを返します。 有効な[セレクタ](../selectors.md)を使用してください。 @@ -30,5 +30,3 @@ expect(barByName.is(Bar)).toBe(true) const fooRef = wrapper.find({ ref: 'foo' }) expect(fooRef.is(Foo)).toBe(true) ``` - -- **参照:** [Wrapper](../wrapper/) diff --git a/docs/ja/api/wrapper/findAll.md b/docs/ja/api/wrapper/findAll.md index 6c824840e..fe22c46e3 100644 --- a/docs/ja/api/wrapper/findAll.md +++ b/docs/ja/api/wrapper/findAll.md @@ -22,5 +22,3 @@ expect(div.is('div')).toBe(true) const bar = wrapper.findAll(Bar).at(0) expect(bar.is(Bar)).toBe(true) ``` - -- **参照:** [Wrapper](../wrapper/) diff --git a/docs/zh/README.md b/docs/zh/README.md index 4b54df15c..073315c79 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -2,7 +2,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 -* [教程](guides/README.md) +* [教程](guides/) * [起步](guides/getting-started.md) * [常用技巧](guides/common-tips.md) * [鼠标、键盘以及其它 DOM 事件](guides/dom-events.md) @@ -13,7 +13,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [测试异步行为](guides/testing-async-components.md) * [配合 Vue Router 使用](guides/using-with-vue-router.md) * [配合 Vuex 实用](guides/using-with-vuex.md) -* [API](api/README.md) +* [API](api/) * [mount](api/mount.md) * [shallowMount](api/shallowMount.md) * [render](api/render.md) @@ -31,7 +31,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 - [provide](api/options.md#provide) - [sync](api/options.md#sync) - [其它选项](api/options.md#other-options) - * [Wrapper](api/wrapper/README.md) + * [Wrapper](api/wrapper/) * [attributes](api/wrapper/attributes.md) * [classes](api/wrapper/classes.md) * [contains](api/wrapper/contains.md) @@ -53,7 +53,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [text](api/wrapper/text.md) * [trigger](api/wrapper/trigger.md) * [isVisible](api/wrapper/isVisible.md) - * [WrapperArray](api/wrapper-array/README.md) + * [WrapperArray](api/wrapper-array/) * [at](api/wrapper-array/at.md) * [contains](api/wrapper-array/contains.md) * [exists](api/wrapper/exists.md) @@ -67,7 +67,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [isVisible](api/wrapper-array/isVisible.md) - * [组件](api/components/README.md) + * [组件](api/components/) * [TransitionStub](api/components/TransitionStub.md) * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [RouterLinkStub](api/components/RouterLinkStub.md) diff --git a/docs/zh/api/mount.md b/docs/zh/api/mount.md index 946bda67e..a09ba0391 100644 --- a/docs/zh/api/mount.md +++ b/docs/zh/api/mount.md @@ -13,7 +13,7 @@ - **用法：** -创建一个包含被挂载和渲染的 Vue 组件的 [`Wrapper`](wrapper/README.md)。 +创建一个包含被挂载和渲染的 Vue 组件的 [`Wrapper`](wrapper/)。 **Without options:** @@ -126,4 +126,4 @@ describe('Foo', () => { }) ``` -- **延伸阅读：**[`Wrapper`](wrapper/README.md) +- **延伸阅读：**[`Wrapper`](wrapper/) diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index a188102a2..8732e8f64 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -59,21 +59,12 @@ const wrapper = shallowMount(Component, { expect(wrapper.find('div')).toBe(true) ``` -### 传递文本 - -你可以传递文本到 `slots`。 -这里有一处限制。 - -我们不支持 PhantomJS。 -你可以使用 [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) 作为替代品。 - ## scopedSlots - 类型：`{ [name: string]: string }` 提供一个该组件所有带作用域的插槽内容的对象。每个键对应到插槽的名字，每个值可以是一个模板字符串。 -There are three limitations. 这里有三处限制。 * 该选项只支持 vue@2.5+。 diff --git a/docs/zh/api/render.md b/docs/zh/api/render.md index 4eb69a54f..ca8e7e117 100644 --- a/docs/zh/api/render.md +++ b/docs/zh/api/render.md @@ -23,7 +23,7 @@ 将一个对象渲染成为一个字符串并返回一个 [cheerio 包裹器](https://github.com/cheeriojs/cheerio)。 -Cheerio 是一个类似 jQuery 的库，可以在 Node.js 中游览 DOM 对象。它的 API 和 Vue Test Utils 的 [`Wrapper`](wrapper/README.md) 类似。 +Cheerio 是一个类似 jQuery 的库，可以在 Node.js 中游览 DOM 对象。它的 API 和 Vue Test Utils 的 [`Wrapper`](wrapper/) 类似。 `render` 在底层使用 [`vue-server-renderer`](https://ssr.vuejs.org/zh/basic.html) 将一个组件渲染为静态的 HTML。 diff --git a/docs/zh/api/shallowMount.md b/docs/zh/api/shallowMount.md index 320ac37b7..399d14bfd 100644 --- a/docs/zh/api/shallowMount.md +++ b/docs/zh/api/shallowMount.md @@ -22,7 +22,7 @@ - **用法：** -和 [`mount`](mount.md) 一样，创建一个包含被挂载和渲染的 Vue 组件的 [`Wrapper`](wrapper/README.md)，不同的是被存根的子组件。 +和 [`mount`](mount.md) 一样，创建一个包含被挂载和渲染的 Vue 组件的 [`Wrapper`](wrapper/)，不同的是被存根的子组件。 **无选项：** diff --git a/docs/zh/api/wrapper-array/README.md b/docs/zh/api/wrapper-array/README.md index 576dacae2..f5c8cf005 100644 --- a/docs/zh/api/wrapper-array/README.md +++ b/docs/zh/api/wrapper-array/README.md @@ -1,14 +1,14 @@ # WrapperArray -一个 `WrapperArray` 是一个包含 [`Wrapper`](../wrapper/README.md) 数组以及 `Wrapper` 的测试方法等对象。 +一个 `WrapperArray` 是一个包含 [`Wrapper`](../wrapper/) 数组以及 `Wrapper` 的测试方法等对象。 ## 属性 -### `wrappers` +### `wrappers` -`array`: 包含在 `WrapperArray` 内的 `Wrappers` +`array`: 包含在 `WrapperArray` 内的 `Wrappers` -### `length` +### `length` `number`：该 `WrapperArray` 中包含的 `Wrapper` 的数量。 diff --git a/docs/zh/api/wrapper/find.md b/docs/zh/api/wrapper/find.md index 6250eb99e..50aad3b5c 100644 --- a/docs/zh/api/wrapper/find.md +++ b/docs/zh/api/wrapper/find.md @@ -1,6 +1,6 @@ ## find(selector) -返回匹配选择器的第一个 DOM 节点或 Vue 组件的 [`Wrapper`](README.md)。 +返回匹配选择器的第一个 DOM 节点或 Vue 组件的 `Wrapper`。 可以使用任何有效的[选择器](../selectors.md)。 @@ -30,5 +30,3 @@ expect(barByName.is(Bar)).toBe(true) const fooRef = wrapper.find({ ref: 'foo' }) expect(fooRef.is(Foo)).toBe(true) ``` - -- **延伸阅读：**[Wrapper](README.md) diff --git a/docs/zh/api/wrapper/findAll.md b/docs/zh/api/wrapper/findAll.md index 152e1f0c7..ad7710694 100644 --- a/docs/zh/api/wrapper/findAll.md +++ b/docs/zh/api/wrapper/findAll.md @@ -1,6 +1,6 @@ ## findAll(selector) -返回一个匹配选择器的 DOM 节点或 Vue 组件的 [`Wrappers`](README.md) 的 [`WrapperArray`](../wrapper-array/README.md)。 +返回一个 [`WrapperArray`](../wrapper-array/)。 可以使用任何有效的[选择器](../selectors.md)。 @@ -22,5 +22,3 @@ expect(div.is('div')).toBe(true) const bar = wrapper.findAll(Bar).at(0) expect(bar.is(Bar)).toBe(true) ``` - -- **延伸阅读：**[Wrapper](README.md) diff --git a/docs/zh/guides/using-with-vuex.md b/docs/zh/guides/using-with-vuex.md index 1562b73c7..fb891ab71 100644 --- a/docs/zh/guides/using-with-vuex.md +++ b/docs/zh/guides/using-with-vuex.md @@ -1,7 +1,9 @@ -## 配合 Vuex 使用 +# 配合 Vuex 使用 在本教程中，我们将会看到如何用 Vue Test Utils 测试组件中的 Vuex，以及如何测试一个 Vuex store。 +## 在组件中测试 Vuex + ### 伪造 Action 我们来看一些代码。 @@ -214,14 +216,14 @@ export default{ ``` js import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' -import Modules from '../../../src/components/Modules' -import module from '../../../src/store/module' +import MyComponent from '../../../src/components/MyComponent' +import mymodule from '../../../src/store/mymodule' const localVue = createLocalVue() localVue.use(Vuex) -describe('Modules.vue', () => { +describe('MyComponent.vue', () => { let actions let state let store @@ -238,23 +240,27 @@ describe('Modules.vue', () => { } store = new Vuex.Store({ - state, - actions, - getters: module.getters + modules: { + mymodule: { + state, + actions, + getters: module.getters + } + } }) }) it('在点击按钮时调用 action“moduleActionClick”', () => { - const wrapper = shallowMount(Modules, { store, localVue }) + const wrapper = shallowMount(MyComponent, { store, localVue }) const button = wrapper.find('button') button.trigger('click') expect(actions.moduleActionClick).toHaveBeenCalled() }) it('在第一个 p 标签内渲染“state.inputValue”', () => { - const wrapper = shallowMount(Modules, { store, localVue }) + const wrapper = shallowMount(MyComponent, { store, localVue }) const p = wrapper.find('p') - expect(p.text()).toBe(state.module.clicks.toString()) + expect(p.text()).toBe(state.clicks.toString()) }) }) ```