@@ -6,11 +6,11 @@ order: 23
6
6
7
7
## 配置和工具
8
8
9
- 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用[ Karma] ( http://karma-runner.github.io ) 进行自动化测试。它有很多社区版的插件,包括对[ Webpack] ( https://github.com/webpack/karma-webpack ) 和 [ Browserify] ( https://github.com/Nikku/karma-browserify ) 的支持。更多详细的安装步骤,请参考各项目的安装文档,通过这些Karma配置的例子可以快速帮助你上手 ([ Webpack] ( https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js ) 配置,[ Browserify] ( https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js ) 配置)。
9
+ 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用 [ Karma] ( http://karma-runner.github.io ) 进行自动化测试。它有很多社区版的插件,包括对 [ Webpack] ( https://github.com/webpack/karma-webpack ) 和 [ Browserify] ( https://github.com/Nikku/karma-browserify ) 的支持。更多详细的安装步骤,请参考各项目的安装文档,通过这些 Karma 配置的例子可以快速帮助你上手 ([ Webpack] ( https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js ) 配置,[ Browserify] ( https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js ) 配置)。
10
10
11
11
## 简单的断言
12
12
13
- 在测试的代码结构方面,你不必在你的组件中做任何特殊的事情使它们可测试。主要导出原始设置就可以了 :
13
+ 在测试的代码结构方面,你不必为了可测试在你的组件中做任何特殊的操作。只要导出原始设置就可以了 :
14
14
15
15
``` html
16
16
<template >
@@ -31,14 +31,14 @@ order: 23
31
31
</script >
32
32
```
33
33
34
- 当测试的组件时,所要做的就是导入对象和Vue然后使用许多常见的断言 :
34
+ 当测试的组件时,所要做的就是导入对象和 Vue 然后使用许多常见的断言 :
35
35
36
36
``` js
37
- // 导入Vue.js和组件 ,进行测试
37
+ // 导入 Vue.js 和组件 ,进行测试
38
38
import Vue from ' vue'
39
39
import MyComponent from ' path/to/MyComponent.vue'
40
40
41
- // 这里是一些Jasmine 2.0的测试 ,你也可以使用你喜欢的任何断言库或测试工具。
41
+ // 这里是一些 Jasmine 2.0 的测试 ,你也可以使用你喜欢的任何断言库或测试工具。
42
42
43
43
describe (' MyComponent' , () => {
44
44
// 检查原始组件选项
@@ -70,7 +70,7 @@ describe('MyComponent', () => {
70
70
71
71
## 编写可被测试的组件
72
72
73
- 很多组件的渲染输出由它的props决定 。事实上,如果一个组件的渲染输出完全取决于它的props ,那么它会让测试变得简单,就好像断言不同参数的纯函数的返回值。看下面这个例子:
73
+ 很多组件的渲染输出由它的 props 决定 。事实上,如果一个组件的渲染输出完全取决于它的 props ,那么它会让测试变得简单,就好像断言不同参数的纯函数的返回值。看下面这个例子:
74
74
75
75
``` html
76
76
<template >
@@ -84,7 +84,7 @@ describe('MyComponent', () => {
84
84
</script >
85
85
```
86
86
87
- 你可以在不同的props中 ,通过 ` propsData ` 选项断言它的渲染输出:
87
+ 你可以在不同的 props 中 ,通过 ` propsData ` 选项断言它的渲染输出:
88
88
89
89
``` js
90
90
import Vue from ' vue'
@@ -110,25 +110,25 @@ describe('MyComponent', () => {
110
110
})
111
111
```
112
112
113
- ## 主张异步更新
113
+ ## 断言异步更新
114
114
115
- 由于Vue进行 [ 异步更新DOM] ( /guide/reactivity.html#Async-Update-Queue ) 的情况,一些依赖DOM更新结果的断言必须在` Vue nexttick ` 回调中进行:
115
+ 由于 Vue 进行 [ 异步更新DOM] ( /guide/reactivity.html#Async-Update-Queue ) 的情况,一些依赖DOM更新结果的断言必须在 ` Vue nexttick ` 回调中进行:
116
116
117
117
``` js
118
- // 在状态更新后检查生成的HTML
118
+ // 在状态更新后检查生成的 HTML
119
119
it (' updates the rendered message when vm.message updates' , done => {
120
120
const vm = new Vue (MyComponent).$mount ()
121
121
vm .message = ' foo'
122
122
123
- // 在状态改变后和断言DOM更新前等待一刻
123
+ // 在状态改变后和断言 DOM 更新前等待一刻
124
124
Vue .nextTick (() => {
125
125
expect (vm .$el .textContent ).toBe (' foo' )
126
126
done ()
127
127
})
128
128
})
129
129
```
130
130
131
- 我们计划做一个通用的测试工具集,让不同策略的渲染输出( 例如忽略子组件的基本渲染) 和断言变得更简单。
131
+ 我们计划做一个通用的测试工具集,让不同策略的渲染输出( 例如忽略子组件的基本渲染) 和断言变得更简单。
132
132
133
133
***
134
134
0 commit comments