File tree Expand file tree Collapse file tree 12 files changed +204
-2
lines changed Expand file tree Collapse file tree 12 files changed +204
-2
lines changed Original file line number Diff line number Diff line change 39
39
* [ isEmpty] ( api/wrapper/isEmpty.md )
40
40
* [ isVueInstance] ( api/wrapper/isVueInstance.md )
41
41
* [ name] ( api/wrapper/name.md )
42
+ * [ setComputed] ( api/wrapper/setComputed.md )
42
43
* [ setData] ( api/wrapper/setData.md )
43
44
* [ setMethods] ( api/wrapper/setMethods.md )
44
45
* [ setProps] ( api/wrapper/setProps.md )
56
57
* [ is] ( api/wrapper-array/is.md )
57
58
* [ isEmpty] ( api/wrapper-array/isEmpty.md )
58
59
* [ isVueInstance] ( api/wrapper-array/isVueInstance.md )
60
+ * [ setComputed] ( api/wrapper-array/setComputed.md )
59
61
* [ setData] ( api/wrapper-array/setData.md )
60
62
* [ setMethods] ( api/wrapper-array/setMethods.md )
61
63
* [ setProps] ( api/wrapper-array/setProps.md )
62
64
* [ trigger] ( api/wrapper-array/trigger.md )
63
65
* [ update] ( api/wrapper-array/update.md )
64
66
* [ destroy] ( api/wrapper-array/destroy.md )
67
+ * [ 组件] ( api/components/README.md )
68
+ * [ TransitionStub] ( api/components/TransitionStub.md )
69
+ * [ TransitionGroupStub] ( api/components/TransitionGroupStub.md )
65
70
* [ 选择器] ( api/selectors.md )
66
71
* [ createLocalVue] ( api/createLocalVue.md )
72
+ * [ 配置] ( api/config.md )
Original file line number Diff line number Diff line change 37
37
* [ isEmpty] ( api/wrapper/isEmpty.md )
38
38
* [ isVueInstance] ( api/wrapper/isVueInstance.md )
39
39
* [ name] ( api/wrapper/name.md )
40
+ * [ setComputed] ( api/wrapper/setComputed.md )
40
41
* [ setData] ( api/wrapper/setData.md )
41
42
* [ setMethods] ( api/wrapper/setMethods.md )
42
43
* [ setProps] ( api/wrapper/setProps.md )
54
55
* [ is] ( api/wrapper-array/is.md )
55
56
* [ isEmpty] ( api/wrapper-array/isEmpty.md )
56
57
* [ isVueInstance] ( api/wrapper-array/isVueInstance.md )
58
+ * [ setComputed] ( api/wrapper-array/setComputed.md )
57
59
* [ setData] ( api/wrapper-array/setData.md )
58
60
* [ setMethods] ( api/wrapper-array/setMethods.md )
59
61
* [ setProps] ( api/wrapper-array/setProps.md )
60
62
* [ trigger] ( api/wrapper-array/trigger.md )
61
63
* [ update] ( api/wrapper-array/update.md )
62
64
* [ destroy] ( api/wrapper-array/destroy.md )
65
+ * [ 组件] ( api/components/README.md )
66
+ * [ TransitionStub] ( api/components/TransitionStub.md )
67
+ * [ TransitionGroupStub] ( api/components/TransitionGroupStub.md )
63
68
* [ 选择器] ( api/selectors.md )
64
69
* [ createLocalVue] ( api/createLocalVue.md )
70
+ * [ 配置] ( api/config.md )
Original file line number Diff line number Diff line change 27
27
* [ isEmpty] ( ./wrapper/isEmpty.md )
28
28
* [ isVueInstance] ( ./wrapper/isVueInstance.md )
29
29
* [ name] ( ./wrapper/name.md )
30
+ * [ setComputed] ( ./wrapper/setComputed.md )
30
31
* [ setData] ( ./wrapper/setData.md )
31
32
* [ setMethods] ( ./wrapper/setMethods.md )
32
33
* [ setProps] ( ./wrapper/setProps.md )
44
45
* [ is] ( ./wrapper-array/is.md )
45
46
* [ isEmpty] ( ./wrapper-array/isEmpty.md )
46
47
* [ isVueInstance] ( ./wrapper-array/isVueInstance.md )
48
+ * [ setComputed] ( ./wrapper-array/setComputed.md )
47
49
* [ setData] ( ./wrapper-array/setData.md )
48
50
* [ setMethods] ( ./wrapper-array/setMethods.md )
49
51
* [ setProps] ( ./wrapper-array/setProps.md )
50
52
* [ trigger] ( ./wrapper-array/trigger.md )
51
53
* [ update] ( ./wrapper-array/update.md )
52
54
* [ destroy] ( ./wrapper-array/destroy.md )
55
+ * [ 组件] ( ./components/README.md )
56
+ * [ TransitionStub] ( ./components/TransitionStub.md )
57
+ * [ TransitionGroupStub] ( ./components/TransitionGroupStub.md )
53
58
* [ 选择器] ( ./selectors.md )
54
59
* [ createLocalVue] ( ./createLocalVue.md )
60
+ * [ 配置] ( ./config.md )
Original file line number Diff line number Diff line change
1
+ # 组件
2
+
3
+ ` vue-test-utils ` 包含了用做存根的实用组件。
4
+
5
+ 默认情况下 [ TransitionStub] ( ./TransitionStub.md ) 和 [ TransitionGroupStub] ( ./TransitionGroupStub.md ) 用来存根 ` transition ` 和 ` transition-group ` 组件。你也可以通过配置信息来编辑存根。
Original file line number Diff line number Diff line change
1
+ # ` TransitionGroupStub `
2
+
3
+ 一个用来存根 ` transition-group ` 包裹器组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。
4
+
5
+ 它在 ` vue-test-utils ` 默认配置中用来存根所有的 ` transition-group ` 组件。将 ` config.stubs['transition-group'] ` 设为 ` false ` 可以使用内建的 ` transition-group ` 包裹器组件:
6
+
7
+ ``` js
8
+ import VueTestUtils from ' vue-test-utils'
9
+
10
+ VueTestUtils .config .stubs [' transition-group' ] = false
11
+ ```
12
+
13
+ 将其重置可以存根过渡组件:
14
+
15
+ ``` js
16
+ import VueTestUtils , { TransitionGroupStub } from ' vue-test-utils'
17
+
18
+ VueTestUtils .config .stubs [' transition-group' ] = TransitionGroupStub
19
+ ```
20
+
21
+ 还可以在挂载选项中将其设置为一个存根:
22
+
23
+ ``` js
24
+ import { mount , TransitionGroupStub } from ' vue-test-utils'
25
+
26
+ mount (Component, {
27
+ stubs: {
28
+ ' transition-group' : TransitionGroupStub
29
+ }
30
+ })
31
+ ```
Original file line number Diff line number Diff line change
1
+ # ` TransitionStub `
2
+
3
+ 一个用来存根 ` transition ` 包裹器组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。
4
+
5
+ 它在 ` vue-test-utils ` 默认配置中用来存根所有的 ` transition ` 组件。将 ` config.stubs.transition ` 设为 ` false ` 可以使用内建的 ` transition ` 包裹器组件:
6
+
7
+
8
+ ``` js
9
+ import VueTestUtils from ' vue-test-utils'
10
+
11
+ VueTestUtils .config .stubs .transition = false
12
+ ```
13
+
14
+ 将其重置可以存根过渡组件:
15
+
16
+ ``` js
17
+ import VueTestUtils , { TransitionStub } from ' vue-test-utils'
18
+
19
+ VueTestUtils .config .stubs .transition = TransitionStub
20
+ ```
21
+
22
+ 还可以在挂载选项中将其设置为一个存根:
23
+
24
+ ``` js
25
+ import { mount , TransitionStub } from ' vue-test-utils'
26
+
27
+ mount (Component, {
28
+ stubs: {
29
+ transition: TransitionStub
30
+ }
31
+ })
32
+ ```
Original file line number Diff line number Diff line change
1
+ # 配置
2
+
3
+ ` vue-test-utils ` 包含了一个定义其选项的配置对象。
4
+
5
+ ## ` vue-test-utils ` 配置选项
6
+
7
+ ### ` stubs `
8
+
9
+ - 类型:` Object `
10
+ - 默认值:`{
11
+ transition: TransitionStub,
12
+ 'transition-group': TransitionGroupStub
13
+ }`
14
+
15
+ 用到的组件存根。它们会被传入挂载选项的 ` stubs ` 复写。
16
+
17
+ 当把 ` stubs ` 作为一个数组传入挂载选项时,` config.stubs ` 会被转换为一个数组,然后用只返回一个 div 的基础组件进行存根。
18
+
19
+ 示例:
20
+
21
+ ``` js
22
+ import VueTestUtils from ' vue-test-utils'
23
+
24
+ VueTestUtils .config .stubs [' my-compomnent' ] = ' <div />'
25
+ ```
Original file line number Diff line number Diff line change 1
1
# 选择器
2
2
3
- 很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器或是一个 Vue 组件 。
3
+ 很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器、一个 Vue 组件或是一个查找选项对象 。
4
4
5
5
## CSS 选择器
6
6
@@ -41,3 +41,14 @@ import Foo from './Foo.vue'
41
41
const wrapper = shallow (Foo)
42
42
expect (wrapper .is (Foo)).toBe (true )
43
43
```
44
+
45
+ ## 查找选项对象
46
+
47
+ ### Ref
48
+
49
+ ` vue-test-utils ` 允许通过一个查找选项对象在组件包裹器上根据 ` $ref ` 选择元素。
50
+
51
+ ``` js
52
+ const buttonWrapper = wrapper .find ({ ref: ' myButton' });
53
+ buttonWrapper .trigger (' click' );
54
+ ```
Original file line number Diff line number Diff line change
1
+ # ` setComputed(computedObjects) `
2
+
3
+ 为 ` WrapperArray ` 的每个 ` Wrapper ` ` vm ` 都设置计算属性并强行更新。
4
+
5
+ ** 注意:该包裹器必须包含一个 Vue 示例。**
6
+ ** 注意:每个 Vue 示例必须已经有被传入 ` setComputed ` 的计算属性。**
7
+
8
+ - ** 参数:**
9
+ - ` {Object} computed properties `
10
+
11
+ - ** 示例:**
12
+
13
+ ``` js
14
+ import { mount } from ' vue-test-utils'
15
+ import Foo from ' ./Foo.vue'
16
+ import Bar from ' ./Bar.vue'
17
+
18
+ const wrapper = mount (Foo)
19
+ const barArray = wrapper .findAll (Bar)
20
+
21
+ barArray .setComputed ({
22
+ computed1: ' new-computed1' ,
23
+ computed2: ' new-computed2'
24
+ })
25
+ ```
Original file line number Diff line number Diff line change @@ -31,3 +31,16 @@ expect(wrapper.emitted().foo.length).toBe(2)
31
31
// 断言事件的有效数据
32
32
expect (wrapper .emitted ().foo [1 ]).toEqual ([123 ])
33
33
```
34
+
35
+ 你也可以把上面的代码写成这样:
36
+
37
+ ``` js
38
+ // 断言事件已经被触发
39
+ expect (wrapper .emitted (' foo' )).toBeTruthy ()
40
+
41
+ // 断言事件的数量
42
+ expect (wrapper .emitted (' foo' ).length ).toBe (2 )
43
+
44
+ // 断言事件的有效数据
45
+ expect (wrapper .emitted (' foo' )[1 ]).toEqual ([123 ])
46
+ ```
Original file line number Diff line number Diff line change
1
+ # ` setComputed(computedObjects) `
2
+
3
+ 设置 ` Wrapper ` ` vm ` 的计算属性并强制更新。
4
+
5
+ ** 注意:该包裹器必须包含一个 Vue 示例。**
6
+ ** 注意:该 Vue 示例必须已经有被传入 ` setComputed ` 的计算属性。**
7
+
8
+ - ** 参数:**
9
+ - ` {Object} computed properties `
10
+
11
+ - ** 示例:**
12
+
13
+ ``` js
14
+ import { mount } from ' vue-test-utils'
15
+ import { expect } from ' chai'
16
+
17
+ const wrapper = mount ({
18
+ template: ' <div>{{ computed1 }} {{ computed2 }}</div>' ,
19
+ data () {
20
+ return {
21
+ initial: ' initial'
22
+ }
23
+ },
24
+ computed: {
25
+ computed1 () {
26
+ return this .initial
27
+ },
28
+ computed2 () {
29
+ return this .initial
30
+ }
31
+ }
32
+ })
33
+
34
+ expect (wrapper .html ()).toBe (' <div>initial initial</div>' )
35
+
36
+ wrapper .setComputed ({
37
+ computed1: ' new-computed1' ,
38
+ computed2: ' new-computed2'
39
+ })
40
+
41
+ expect (wrapper .html ()).toBe (' <div>new-computed1 new-computed2</div>' )
42
+ ```
Original file line number Diff line number Diff line change @@ -193,4 +193,4 @@ describe('键盘事件测试', () => {
193
193
194
194
## 重要事项
195
195
196
- ` vue-test-utils ` 是同步触发事件。因此 ` vue .nextTick` 不是必须的。
196
+ ` vue-test-utils ` 是同步触发事件。因此 ` Vue .nextTick` 不是必须的。
You can’t perform that action at this time.
0 commit comments