diff --git a/docs/zh/README.md b/docs/zh/README.md index 7ee677fb0..c9f7f1a94 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -65,9 +65,11 @@ Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。 * [is](api/wrapper-array/is.md) * [isEmpty](api/wrapper-array/isEmpty.md) * [isVueInstance](api/wrapper-array/isVueInstance.md) + * [setChecked](api/wrapper-array/setChecked.md) * [setData](api/wrapper-array/setData.md) * [setMethods](api/wrapper-array/setMethods.md) * [setProps](api/wrapper-array/setProps.md) + * [setValue](api/wrapper-array/setValue.md) * [trigger](api/wrapper-array/trigger.md) * [isVisible](api/wrapper-array/isVisible.md) * [组件](api/components/) diff --git a/docs/zh/api/config.md b/docs/zh/api/config.md index d890d92c4..987f22625 100644 --- a/docs/zh/api/config.md +++ b/docs/zh/api/config.md @@ -6,7 +6,7 @@ Vue Test Utils 包含了一个定义其选项的配置对象。 ### `stubs` -- 类型:`Object` +- 类型:`{ [name: string]: Component | boolean | string }` - 默认值:`{ transition: TransitionStub, 'transition-group': TransitionGroupStub @@ -46,7 +46,7 @@ VueTestUtils.config.mocks['$store'] = { ### `methods` -- 类型:`Object` +- 类型:`{ [name: string]: Function }` - 默认值:`{}` 你可以使用 `config` 对象配置默认的方法。它可以用于为组件注入方法的插件,例如 [VeeValidate](https://vee-validate.logaretm.com/)。你可以通过在挂载选项中传入 `methods` 来覆写 `config` 中的方法集合。 @@ -94,3 +94,18 @@ import VueTestUtils from '@vue/test-utils' VueTestUtils.config.logModifiedComponents = false ``` + +### `silent` + +- 类型:`Boolean` +- 默认值:`true` + +在组件的可观察内容 (如 props) 发生突变时,警告会被 Vue 阻止。当设置为 `false` 时,所有的警告都会出现在控制台中。这是一个 `Vue.config.silent` 的配置方式。 + +示例; + +```js +import VueTestUtils from '@vue/test-utils' + +VueTestUtils.config.silent = false +``` diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index 72c210287..b02cda261 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -11,6 +11,7 @@ - [`attachToDocument`](#attachtodocument) - [`attrs`](#attrs) - [`listeners`](#listeners) +- [`parentComponent`](#parentComponent) - [`provide`](#provide) - [`sync`](#sync) @@ -106,7 +107,9 @@ shallowMount(Component, { stubs: { // 使用一个特定的实现作为存根 'registered-component': Foo, - // 使用创建默认的实现作为存根 + // 使用创建默认的实现作为存根。 + // 这里默认存根的组件名是 `another-component`。 + // 默认存根是 `<${the component name of default stub}-stub>`。 'another-component': true } }) @@ -180,6 +183,23 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) 设置组件实例的 `$listeners` 对象。 +## parentComponent + +- 类型:`Object` + +用来作为被挂载组件的父级组件。 + +示例: + +```js +import Foo from './Foo.vue' + +const wrapper = shallowMount(Component, { + parentComponent: Foo +}) +expect(wrapper.vm.$parent.name).toBe('foo') +``` + ## provide - 类型:`Object` diff --git a/docs/zh/api/render.md b/docs/zh/api/render.md index ca8e7e117..2cef478af 100644 --- a/docs/zh/api/render.md +++ b/docs/zh/api/render.md @@ -7,8 +7,8 @@ - `{Object} context` - `{Array|Component} children` - `{Object} slots` - - `{Array|Component|String} default` - - `{Array|Component|String} named` + - `{Array|Component|String} default` + - `{Array|Component|String} named` - `{Object} mocks` - `{Object|Array} stubs` - `{Vue} localVue` diff --git a/docs/zh/api/renderToString.md b/docs/zh/api/renderToString.md index 91ec2896b..faa5a4a62 100644 --- a/docs/zh/api/renderToString.md +++ b/docs/zh/api/renderToString.md @@ -7,8 +7,8 @@ - `{Object} context` - `{Array|Component} children` - `{Object} slots` - - `{Array|Component|String} default` - - `{Array|Component|String} named` + - `{Array|Component|String} default` + - `{Array|Component|String} named` - `{Object} mocks` - `{Object|Array} stubs` - `{Vue} localVue` diff --git a/docs/zh/api/wrapper-array/README.md b/docs/zh/api/wrapper-array/README.md index f5c8cf005..1cdc21249 100644 --- a/docs/zh/api/wrapper-array/README.md +++ b/docs/zh/api/wrapper-array/README.md @@ -10,7 +10,7 @@ ### `length` -`number`:该 `WrapperArray` 中包含的 `Wrapper` 的数量。 +`number` (只读):该 `WrapperArray` 中包含的 `Wrapper` 的数量。 ## 方法 @@ -21,7 +21,9 @@ !!!include(docs/zh/api/wrapper-array/is.md)!!! !!!include(docs/zh/api/wrapper-array/isEmpty.md)!!! !!!include(docs/zh/api/wrapper-array/isVueInstance.md)!!! +!!!include(docs/zh/api/wrapper-array/setChecked.md)!!! !!!include(docs/zh/api/wrapper-array/setData.md)!!! !!!include(docs/zh/api/wrapper-array/setMethods.md)!!! !!!include(docs/zh/api/wrapper-array/setProps.md)!!! +!!!include(docs/zh/api/wrapper-array/setValue.md)!!! !!!include(docs/zh/api/wrapper-array/trigger.md)!!! diff --git a/docs/zh/api/wrapper-array/setChecked.md b/docs/zh/api/wrapper-array/setChecked.md new file mode 100644 index 000000000..3671e8b03 --- /dev/null +++ b/docs/zh/api/wrapper-array/setChecked.md @@ -0,0 +1,38 @@ +## setChecked(checked) + +该方法是接下来这段代码的别名: + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked)) +``` + +- **参数:** + - `{Boolean} checked (default: true)` + +- **示例:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data () { + return { + t1: false, + t2: '' + } + }, + template: ` +
+ + + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).to.equal(false) +expect(wrapper.vm.t2).to.equal('') +wrapperArray.setChecked() +expect(wrapper.vm.t1).to.equal(true) +expect(wrapper.vm.t2).to.equal('foo') +``` diff --git a/docs/zh/api/wrapper-array/setData.md b/docs/zh/api/wrapper-array/setData.md index bc953a2f1..229df8779 100644 --- a/docs/zh/api/wrapper-array/setData.md +++ b/docs/zh/api/wrapper-array/setData.md @@ -1,6 +1,6 @@ ## setData(data) -为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置数据并强行更新。 +为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置数据。 **注意:该包裹器必须包含一个 Vue 示例。** diff --git a/docs/zh/api/wrapper-array/setValue.md b/docs/zh/api/wrapper-array/setValue.md new file mode 100644 index 000000000..397e1274f --- /dev/null +++ b/docs/zh/api/wrapper-array/setValue.md @@ -0,0 +1,37 @@ +## setValue(value) + +该方法是接下来这段代码的别名: + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) +``` + +- **参数:** + - `{any} value` + +- **示例:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data () { + return { + t1: '', + t2: '' + } + }, + template: ` +
+ + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).to.equal('') +expect(wrapper.vm.t2).to.equal('') +wrapperArray.setValue('foo') +expect(wrapper.vm.t1).to.equal('foo') +expect(wrapper.vm.t2).to.equal('foo') +``` diff --git a/docs/zh/api/wrapper/README.md b/docs/zh/api/wrapper/README.md index 11fc1578a..860c1d9d6 100644 --- a/docs/zh/api/wrapper/README.md +++ b/docs/zh/api/wrapper/README.md @@ -6,23 +6,23 @@ Vue Test Utils 是一个基于包裹器的 API。 ## 属性 -### `vm` +### `vm` -`Component`:这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器中。 +`Component` (只读):这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器或绑定了 Vue 组件包裹器的 HTMLElement 中。 -### `element` +### `element` -`HTMLElement`:包裹器的根 DOM 节点 +`HTMLElement` (只读):包裹器的根 DOM 节点 -### `options` +### `options` -#### `options.attachedToDom` +#### `options.attachedToDom` -`Boolean`:如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真 +`Boolean` (只读):如果 `attachToDom` 传递给了 `mount` 或 `shallowMount` 则为真 -#### `options.sync` +#### `options.sync` -`Boolean`:如果挂载选项里的 `sync` 不是 `false` 则为真 +`Boolean` (只读):如果挂载选项里的 `sync` 不是 `false` 则为真 ## 方法 diff --git a/docs/zh/api/wrapper/setChecked.md b/docs/zh/api/wrapper/setChecked.md index d5eeb3854..e5c65da43 100644 --- a/docs/zh/api/wrapper/setChecked.md +++ b/docs/zh/api/wrapper/setChecked.md @@ -1,9 +1,9 @@ -## setChecked(value) +## setChecked(checked) -设置一个 `` 单选框或复选框的值。 +设置 checkbox 或 radio 类 `` 元素的 checked 值并更新 `v-model` 绑定的数据。 - **参数:** - - `{Boolean} selected` + - `{Boolean} checked (默认值:true)` - **示例:** @@ -15,3 +15,15 @@ const wrapper = mount(Foo) const option = wrapper.find('input[type="radio"]') option.setChecked() ``` + +- **注意:** + +当你尝试通过 `radioInput.element.checked = true; radioInput.trigger('input')` 经由 `v-model` 向 state 设置值的时候,`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。 + +`checkboxInput.setChecked(checked)` 是接下来这段代码的别名。 + +```js +checkboxInput.element.checked = checked +checkboxInput.trigger('click') +checkboxInput.trigger('change') +``` diff --git a/docs/zh/api/wrapper/setData.md b/docs/zh/api/wrapper/setData.md index a86ea5f44..b4e86f6b0 100644 --- a/docs/zh/api/wrapper/setData.md +++ b/docs/zh/api/wrapper/setData.md @@ -2,7 +2,7 @@ 设置 `Wrapper` `vm` 的属性。 -`setData` 通过合并现有的属性生效,被覆写的数组除外。 +`setData` 通过递归调用 `Vue.set` 生效。 **注意:该包裹器必须包含一个 Vue 示例。** diff --git a/docs/zh/api/wrapper/setSelected.md b/docs/zh/api/wrapper/setSelected.md index a2cc5c9e4..e56d03f8d 100644 --- a/docs/zh/api/wrapper/setSelected.md +++ b/docs/zh/api/wrapper/setSelected.md @@ -1,9 +1,6 @@ -## setSelected(value) +## setSelected() -在一个 `` 文本的值。 +设置一个文本控件或 select 元素的值并更新 `v-model` 绑定的数据。 - **参数:** - `{String} value` @@ -12,6 +12,26 @@ import { mount } from '@vue/test-utils' import Foo from './Foo.vue' const wrapper = mount(Foo) + const input = wrapper.find('input[type="text"]') input.setValue('some value') + +const select = wrapper.find('select') +select.setValue('option value') ``` + +- **注意:** + + - `textInput.setValue(value)` 是接下来这段代码的别名。 + + ```js + textInput.element.value = value + textInput.trigger('input') + ``` + + - `select.setValue(value)` 是接下来这段代码的别名。 + + ```js + select.element.value = value + select.trigger('change') + ``` diff --git a/docs/zh/guides/common-tips.md b/docs/zh/guides/common-tips.md index aaafbad89..4fd57edcf 100644 --- a/docs/zh/guides/common-tips.md +++ b/docs/zh/guides/common-tips.md @@ -23,7 +23,7 @@ Vue Test Utils 允许你通过 `shallowMount` 方法只挂载一个组件而不 ```js import { shallowMount } from '@vue/test-utils' -const wrapper = shallowMount(Component) // 返回一个包裹器,包含一个挂载的组件实例 +const wrapper = shallowMount(Component) wrapper.vm // 挂载的 Vue 实例 ``` @@ -125,7 +125,9 @@ const $route = { mount(Component, { mocks: { - $route // 在挂载组件之前添加仿造的 `$route` 对象到 Vue 实例中 + // 在挂载组件之前 + // 添加仿造的 `$route` 对象到 Vue 实例中 + $route } }) ``` diff --git a/docs/zh/guides/using-with-vuex.md b/docs/zh/guides/using-with-vuex.md index 4413b90b7..81de8c802 100644 --- a/docs/zh/guides/using-with-vuex.md +++ b/docs/zh/guides/using-with-vuex.md @@ -69,7 +69,7 @@ describe('Actions.vue', () => { }) }) - it('当输入框的值是“input”且一个“input”事件被触发时会调用“actionInput”的 action', () => { + it('当事件的值是“input”时会 dispatch“actionInput”', () => { const wrapper = shallowMount(Actions, { store, localVue }) const input = wrapper.find('input') input.element.value = 'input' @@ -77,7 +77,7 @@ describe('Actions.vue', () => { expect(actions.actionInput).toHaveBeenCalled() }) - it('当输入框的值不是“input”但有“input”事件触发时不会掉用“actionInput”的 action', () => { + it('当事件的值不是“input”时不会 dispatch “actionInput”', () => { const wrapper = shallowMount(Actions, { store, localVue }) const input = wrapper.find('input') input.element.value = 'not input' @@ -390,4 +390,3 @@ test('updates evenOrOdd getter when increment is commited', () => { - [测试 store 的示例工程](https://github.com/eddyerburgh/testing-vuex-store-example) - [`localVue`](../api/options.md#localvue) - [`createLocalVue`](../api/createLocalVue.md) -