From b4717b70a65e7891a136eedce2440304f56c931f Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Wed, 16 May 2018 21:48:53 +0800 Subject: [PATCH] [docs][zh-cn] update to 528d637 --- docs/zh-cn/README.md | 2 +- docs/zh-cn/SUMMARY.md | 2 +- docs/zh-cn/api/README.md | 2 +- docs/zh-cn/api/config.md | 17 +++++++++++++- docs/zh-cn/api/createLocalVue.md | 6 ++--- docs/zh-cn/api/options.md | 14 ++++++------ docs/zh-cn/api/selectors.md | 4 ++-- docs/zh-cn/api/shallow.md | 22 +++++++++---------- docs/zh-cn/api/wrapper-array/at.md | 4 ++-- docs/zh-cn/api/wrapper-array/contains.md | 4 ++-- docs/zh-cn/api/wrapper-array/filter.md | 4 ++-- docs/zh-cn/api/wrapper/README.md | 5 +++-- docs/zh-cn/guides/common-tips.md | 6 ++--- docs/zh-cn/guides/testing-SFCs-with-karma.md | 4 ++-- .../guides/testing-SFCs-with-mocha-webpack.md | 4 ++-- docs/zh-cn/guides/testing-async-components.md | 10 ++++----- docs/zh-cn/guides/using-with-vue-router.md | 16 +++++++------- docs/zh-cn/guides/using-with-vuex.md | 22 +++++++++---------- 18 files changed, 82 insertions(+), 66 deletions(-) diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index 313fa82aa..250314382 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -17,7 +17,7 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [配合 Vuex 实用](guides/using-with-vuex.md) * [API](api/README.md) * [mount](api/mount.md) - * [shallow](api/shallow.md) + * [shallowMount](api/shallowMount.md) * [render](api/render.md) * [renderToString](api/renderToString.md) * [挂载选项](api/options.md) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index a1b33439c..001f939a7 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -13,7 +13,7 @@  * [配合 Vuex 使用](guides/using-with-vuex.md) * [API](api/README.md) * [mount](api/mount.md) - * [shallow](api/shallow.md) + * [shallowMount](api/shallowMount.md) * [render](api/render.md) * [renderToString](api/renderToString.md) * [挂载选项](api/options.md) diff --git a/docs/zh-cn/api/README.md b/docs/zh-cn/api/README.md index a397c7713..3f65752d8 100644 --- a/docs/zh-cn/api/README.md +++ b/docs/zh-cn/api/README.md @@ -1,7 +1,7 @@ # API * [mount](./mount.md) -* [shallow](./shallow.md) +* [shallowMount](./shallowMount.md) * [render](./render.md) * [renderToString](./renderToString.md) * [挂载选项](./options.md) diff --git a/docs/zh-cn/api/config.md b/docs/zh-cn/api/config.md index b27ce54e3..51b7207ea 100644 --- a/docs/zh-cn/api/config.md +++ b/docs/zh-cn/api/config.md @@ -15,7 +15,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。 存储在 `config.stubs` 中的存根会被默认使用。 用到的组件存根。它们会被传入挂载选项的 `stubs` 覆写。 -当把 `stubs` 作为一个数组传入挂载选项时，`config.stubs` 会被转换为一个数组，然后用只返回一个 `` 的基础组件进行存根。 +当把 `stubs` 作为一个数组传入挂载选项时，`config.stubs` 会被转换为一个数组，然后用只返回一个 `<${component name}-stub>` 的基础组件进行存根。 示例： @@ -79,3 +79,18 @@ VueTestUtils.config.provide['$logger'] = { } } ``` + +### `logModifiedComponents` + +- 类型：`Boolean` +- 默认值：`true` + +当被展开的子元素被自动化存根的时候记录下告警日志。设置为 `false` 时则会隐藏告警日志。和其它配置选项不同的是，它不能设置在挂载选项上。 + +示例： + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.logModifiedComponents = false +``` diff --git a/docs/zh-cn/api/createLocalVue.md b/docs/zh-cn/api/createLocalVue.md index a005d2cb1..8607738da 100644 --- a/docs/zh-cn/api/createLocalVue.md +++ b/docs/zh-cn/api/createLocalVue.md @@ -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) ``` diff --git a/docs/zh-cn/api/options.md b/docs/zh-cn/api/options.md index 0f597f949..87add6046 100644 --- a/docs/zh-cn/api/options.md +++ b/docs/zh-cn/api/options.md @@ -1,6 +1,6 @@ # 挂载选项 -即 `mount` 和 `shallow` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。 +即 `mount` 和 `shallowMount` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。 ## Vue Test Utils 特定的挂载选项 @@ -50,7 +50,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, // 将会匹配 ``。 @@ -88,7 +88,7 @@ There are three limitations. 示例： ```js -const wrapper = shallow(Component, { +const wrapper = shallowMount(Component, { scopedSlots: { foo: '

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

' } @@ -100,7 +100,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe('

0,text1 - 类型：`{ [name: string]: Component | boolean } | Array` -将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组，则每个存根都是一个 ``。 +将子组件存根。可以是一个要存根的组件名的数组或对象。如果 `stubs` 是一个数组，则每个存根都是一个 `<${component name}-stub>`。 示例： @@ -111,7 +111,7 @@ mount(Component, { stubs: ['registered-component'] }) -shallow(Component, { +shallowMount(Component, { stubs: { // 使用一个特定的实现作为存根 'registered-component': Foo, @@ -131,7 +131,7 @@ shallow(Component, { ```js const $route = { path: 'http://www.example-path.com' } -const wrapper = shallow(Component, { +const wrapper = shallowMount(Component, { mocks: { $route } @@ -207,7 +207,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 = { diff --git a/docs/zh-cn/api/selectors.md b/docs/zh-cn/api/selectors.md index 1ebeac3bd..cabb8dc3b 100644 --- a/docs/zh-cn/api/selectors.md +++ b/docs/zh-cn/api/selectors.md @@ -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) ``` diff --git a/docs/zh-cn/api/shallow.md b/docs/zh-cn/api/shallow.md index d21253cef..d0936703e 100644 --- a/docs/zh-cn/api/shallow.md +++ b/docs/zh-cn/api/shallow.md @@ -1,4 +1,4 @@ -# `shallow(component {, options}])` +# `shallowMount(component {, options}])` - **参数：** @@ -27,12 +27,12 @@ **无选项：** ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('返回一个 div', () => { - const wrapper = shallow(Foo) + const wrapper = shallowMount(Foo) expect(wrapper.contains('div')).toBe(true) }) }) @@ -41,12 +41,12 @@ describe('Foo', () => { **使用 Vue 选项：** ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('渲染一个 div', () => { - const wrapper = shallow(Foo, { + const wrapper = shallowMount(Foo, { propsData: { color: 'red' } @@ -59,12 +59,12 @@ describe('Foo', () => { **固定在 DOM 上：** ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('渲染一个 div', () => { - const wrapper = shallow(Foo, { + const wrapper = shallowMount(Foo, { attachToDocument: true }) expect(wrapper.contains('div')).toBe(true) @@ -75,14 +75,14 @@ describe('Foo', () => { **默认的和具名的插槽：** ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' import Bar from './Bar.vue' import FooBar from './FooBar.vue' describe('Foo', () => { it('renders a div', () => { - const wrapper = shallow(Foo, { + const wrapper = shallowMount(Foo, { slots: { default: [Bar, FooBar], fooBar: FooBar, // Will match , @@ -97,13 +97,13 @@ describe('Foo', () => { **将全局属性存根：** ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('renders a div', () => { const $route = { path: 'http://www.example-path.com' } - const wrapper = shallow(Foo, { + const wrapper = shallowMount(Foo, { mocks: { $route } diff --git a/docs/zh-cn/api/wrapper-array/at.md b/docs/zh-cn/api/wrapper-array/at.md index 1bfd5a2f4..e6370af6a 100644 --- a/docs/zh-cn/api/wrapper-array/at.md +++ b/docs/zh-cn/api/wrapper-array/at.md @@ -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) diff --git a/docs/zh-cn/api/wrapper-array/contains.md b/docs/zh-cn/api/wrapper-array/contains.md index 76cca5a62..7f881c478 100644 --- a/docs/zh-cn/api/wrapper-array/contains.md +++ b/docs/zh-cn/api/wrapper-array/contains.md @@ -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) diff --git a/docs/zh-cn/api/wrapper-array/filter.md b/docs/zh-cn/api/wrapper-array/filter.md index cdc59cc90..08e854472 100644 --- a/docs/zh-cn/api/wrapper-array/filter.md +++ b/docs/zh-cn/api/wrapper-array/filter.md @@ -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')) ``` diff --git a/docs/zh-cn/api/wrapper/README.md b/docs/zh-cn/api/wrapper/README.md index 1c57fc7fa..8e589eace 100644 --- a/docs/zh-cn/api/wrapper/README.md +++ b/docs/zh-cn/api/wrapper/README.md @@ -8,8 +8,9 @@ Vue Test Utils 是一个基于包裹器的 API。 `vm` `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` 则为真 +`options` `Object`：一个对象，包含传递给 `mount` 或 `shallowMount` 的 Vue Test Utils 选项 +`options.attachedToDocument` `Boolean`：如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真 +`options.sync` `Boolean`：如果 `sync` 没有以 `false` 传递给了 `mount` 或 `shallowMount` 则为真 - **方法：** diff --git a/docs/zh-cn/guides/common-tips.md b/docs/zh-cn/guides/common-tips.md index 7f896da5d..24998ad8b 100644 --- a/docs/zh-cn/guides/common-tips.md +++ b/docs/zh-cn/guides/common-tips.md @@ -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 实例 ``` diff --git a/docs/zh-cn/guides/testing-SFCs-with-karma.md b/docs/zh-cn/guides/testing-SFCs-with-karma.md index e8232e7bb..bedda3e49 100644 --- a/docs/zh-cn/guides/testing-SFCs-with-karma.md +++ b/docs/zh-cn/guides/testing-SFCs-with-karma.md @@ -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') }) diff --git a/docs/zh-cn/guides/testing-SFCs-with-mocha-webpack.md b/docs/zh-cn/guides/testing-SFCs-with-mocha-webpack.md index 0f14713ac..fc92514d1 100644 --- a/docs/zh-cn/guides/testing-SFCs-with-mocha-webpack.md +++ b/docs/zh-cn/guides/testing-SFCs-with-mocha-webpack.md @@ -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') }) diff --git a/docs/zh-cn/guides/testing-async-components.md b/docs/zh-cn/guides/testing-async-components.md index add0c7def..688c2befa 100644 --- a/docs/zh-cn/guides/testing-async-components.md +++ b/docs/zh-cn/guides/testing-async-components.md @@ -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') }) @@ -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') @@ -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') diff --git a/docs/zh-cn/guides/using-with-vue-router.md b/docs/zh-cn/guides/using-with-vue-router.md index 193b664cc..30605413a 100644 --- a/docs/zh-cn/guides/using-with-vue-router.md +++ b/docs/zh-cn/guides/using-with-vue-router.md @@ -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 }) @@ -31,9 +31,9 @@ shallow(Component, { ### 使用存根 ```js -import { shallow } from '@vue/test-utils' +import { shallowMount } from '@vue/test-utils' -shallow(Component, { +shallowMount(Component, { stubs: ['router-link', 'router-view'] }) ``` @@ -41,13 +41,13 @@ shallow(Component, { ### 为 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 }) ``` @@ -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 } diff --git a/docs/zh-cn/guides/using-with-vuex.md b/docs/zh-cn/guides/using-with-vuex.md index cf95484ae..d4ca410ca 100644 --- a/docs/zh-cn/guides/using-with-vuex.md +++ b/docs/zh-cn/guides/using-with-vuex.md @@ -46,7 +46,7 @@ export default{ 我们来看看它的样子： ``` js -import { shallow, createLocalVue } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import Actions from '../../../src/components/Actions' @@ -70,7 +70,7 @@ describe('Actions.vue', () => { }) it('当输入框的值是“input”且一个“input”事件被触发时会调用“actionInput”的 action', () => { - const wrapper = shallow(Actions, { store, localVue }) + const wrapper = shallowMount(Actions, { store, localVue }) const input = wrapper.find('input') input.element.value = 'input' input.trigger('input') @@ -78,7 +78,7 @@ describe('Actions.vue', () => { }) it('当输入框的值不是“input”但有“input”事件触发时不会掉用“actionInput”的 action', () => { - const wrapper = shallow(Actions, { store, localVue }) + const wrapper = shallowMount(Actions, { store, localVue }) const input = wrapper.find('input') input.element.value = 'not input' input.trigger('input') @@ -86,7 +86,7 @@ describe('Actions.vue', () => { }) it('当按钮被点击时候调用“actionClick”的 action', () => { - const wrapper = shallow(Actions, { store, localVue }) + const wrapper = shallowMount(Actions, { store, localVue }) wrapper.find('button').trigger('click') expect(actions.actionClick).toHaveBeenCalled() }) @@ -137,7 +137,7 @@ export default{ 让我们看看这个测试： ``` js -import { shallow, createLocalVue } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import Getters from '../../../src/components/Getters' @@ -161,20 +161,20 @@ describe('Getters.vue', () => { }) it('在第一个 p 标签中渲染“state.inputValue”', () => { - const wrapper = shallow(Getters, { store, localVue }) + const wrapper = shallowMount(Getters, { store, localVue }) const p = wrapper.find('p') expect(p.text()).toBe(getters.inputValue()) }) it('在第二个 p 标签中渲染“state.clicks”', () => { - const wrapper = shallow(Getters, { store, localVue }) + const wrapper = shallowMount(Getters, { store, localVue }) const p = wrapper.findAll('p').at(1) expect(p.text()).toBe(getters.clicks().toString()) }) }) ``` -这个测试和我们的 action 测试很相似。我们在每个测试运行之前创建了一个伪造的 store，在我们调用 `shallow` 的时候将其以一个选项传递进去，并断言我们伪造的 getter 的返回值被渲染。 +这个测试和我们的 action 测试很相似。我们在每个测试运行之前创建了一个伪造的 store，在我们调用 `shallowMount` 的时候将其以一个选项传递进去，并断言我们伪造的 getter 的返回值被渲染。 这非常好，但是如果我们想要检查我们的 getter 是否返回了正确的 state 的部分该怎么办呢？ @@ -214,7 +214,7 @@ export default{ 其测试： ``` js -import { shallow, createLocalVue } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import Modules from '../../../src/components/Modules' import module from '../../../src/store/module' @@ -247,14 +247,14 @@ describe('Modules.vue', () => { }) it('在点击按钮时调用 action“moduleActionClick”', () => { - const wrapper = shallow(Modules, { store, localVue }) + const wrapper = shallowMount(Modules, { store, localVue }) const button = wrapper.find('button') button.trigger('click') expect(actions.moduleActionClick).toHaveBeenCalled() }) it('在第一个 p 标签内渲染“state.inputValue”', () => { - const wrapper = shallow(Modules, { store, localVue }) + const wrapper = shallowMount(Modules, { store, localVue }) const p = wrapper.find('p') expect(p.text()).toBe(state.module.clicks.toString()) })