Skip to content

Commit e7ac924

Browse files
authored
Update unit-testing-vue-components.md
1 parent e865a2d commit e7ac924

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

src/v2/cookbook/unit-testing-vue-components.md

+14-14
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 6
66

77
## 简单的示例
88

9-
单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的[单文件组件](../guide/single-file-components.html)使得为组件撰写隔离的单元测试这件事更加直接。它会让你带着更强的信心开发新特性而不会打破现有的设计,并帮助其他开发者理解你的组件的工作
9+
单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的[单文件组件](../guide/single-file-components.html)使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现,并帮助其他开发者理解你的组件的作用
1010

1111
这是一个判断一些文本是否被渲染的简单的示例:
1212

@@ -53,7 +53,7 @@ test('Foo', () => {
5353
// `username` 在除去头尾空格之后不应该少于 7 个字符
5454
wrapper.setData({ username: ' '.repeat(7) })
5555

56-
// 断言错误信息被渲染了
56+
 // 确认错误信息被渲染了
5757
expect(wrapper.find('.error').exists()).toBe(true)
5858

5959
// 将名字更新至足够长
@@ -68,7 +68,7 @@ test('Foo', () => {
6868
})
6969
```
7070

71-
上述代码片段展示了如何基于 `username` 的长度测试一个错误信息是否被渲染。它展示了 Vue 组件的单元测试的一般思路:渲染这个组件,然后断言这些标签是否匹配组件的状态。
71+
上述代码片段展示了如何基于 `username` 的长度测试一个错误信息是否被渲染。它展示了 Vue 组件单元测试的一般思路:渲染这个组件,然后断言这些标签是否匹配组件的状态。
7272

7373
## 为什么要测试?
7474

@@ -84,7 +84,7 @@ test('Foo', () => {
8484

8585
#### 起步
8686

87-
[Vue Test Units](https://github.com/vuejs/vue-test-utils) 是 Vue 组件单元测试的官方库。[Vue CLI](https://github.com/vuejs/vue-cli)`webpack` 模板对 Karma 和 Jest 这两个测试运行器都支持,并且在 Vue Test Utils 的文档中有一些[引导](https://vue-test-utils.vuejs.org/zh-cn/guides/)
87+
[Vue Test Utils](https://github.com/vuejs/vue-test-utils) 是 Vue 组件单元测试的官方库。[Vue CLI](https://github.com/vuejs/vue-cli)`webpack` 模板对 Karma 和 Jest 这两个测试运行器都支持,并且在 Vue Test Utils 的文档中有一些[引导](https://vue-test-utils.vuejs.org/zh-cn/guides/)
8888

8989
## 实际的例子
9090

@@ -94,10 +94,10 @@ test('Foo', () => {
9494
- 易于理解
9595
- 只测试_一个独立单元的工作_
9696

97-
我们在上一个示例的基础上继续构建,同时引入一个<a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">工厂函数 (factory function)</a>使得我们的测试更简洁更易读。这个组件应该:
97+
我们在上一个示例的基础上继续构建,同时引入一个<a href="https://zh.wikipedia.org/wiki/工厂方法#工厂">工厂函数 (factory function)</a>使得我们的测试更简洁更易读。这个组件应该:
9898

9999
- 展示一个“Welcome to the Vue.js cookbook”的问候语
100-
- 提示用户输入他们的用户名
100+
- 提示用户输入用户名
101101
- 如果输入的用户名少于七个字符则展示错误信息
102102

103103
让我们先看一下组件代码:
@@ -181,7 +181,7 @@ describe('Foo', () => {
181181
- 每个 `it` 块只做一个断言
182182
- 让测试描述更简短清晰
183183
- 只提供测试需要的最小化数据
184-
- 在一个工厂函数中重构了重复的逻辑 (创建 `wrapper` 和设置 `username` 变量)
184+
- 把重复的逻辑重构到了一个工厂函数中 (创建 `wrapper` 和设置 `username` 变量)
185185

186186
*更新后的测试*
187187

@@ -224,7 +224,7 @@ describe('Foo', () => {
224224

225225
注意事项:
226226

227-
在一开始,工厂函数将 `values` 对象覆盖到了 `data` 并返回了一个新的 `wrapper` 实例。这样,我就不需要在每个测试中重复 `const wrapper = shallow(Foo)`。另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或计算属性时,你只需要生命一次即可
227+
在一开始,工厂函数将 `values` 对象合并到了 `data` 并返回了一个新的 `wrapper` 实例。这样,我们就不需要在每个测试中重复 `const wrapper = shallow(Foo)`。另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或计算属性时,你只需要声明一次即可
228228

229229
## 额外的上下文
230230

@@ -236,18 +236,18 @@ describe('Foo', () => {
236236

237237
我们在 Vue Test Utils 的[教程](https://vue-test-utils.vuejs.org/zh-cn/guides/)中提供了更完整的示例展示这些测试。
238238

239-
Vue Test Utils 及其庞大的 JavaScript 生态系统提供了大量的工具促进 100% 的测试覆盖率。单元测试只是整个测试金字塔中的一部分。其它类型的测试还包括 e2e (端到端) 测试、快照比对测试等。单元测试是最小巧也是最简单的测试——它们通过在最小工作单元上的断言,隔离单个组件的每一个部分
239+
Vue Test Utils 及庞大的 JavaScript 生态系统提供了大量的工具促进 100% 的测试覆盖率。单元测试只是整个测试金字塔中的一部分。其它类型的测试还包括 e2e (端到端) 测试、快照比对测试等。单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分,来在最小工作单元上进行断言。
240240

241-
快照比对测试会保存你的 Vue 组件的标记,然后比较每次新生成的测试运行结果。如果有些东西改变了,开发者就会被注意到,并决定这个改变是有意识的 (组件是否被更新) 还是意外的 (组件的行为并不正常)。
241+
快照比对测试会保存你的 Vue 组件的标记,然后比较每次新生成的测试运行结果。如果有些东西改变了,开发者就会得到通知,并决定这个改变是刻意为之 (组件更新时) 还是意外发生的 (组件行为不正确)。
242242

243-
端到端测试致力于确保组件的一系列交互是正确的。它们是更高级别的测试,可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元测试和快照比对测试慢一些。
243+
端到端测试致力于确保组件的一系列交互是正确的。它们是更高级别的测试,例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元测试和快照比对测试慢一些。
244244

245-
单元测试中开发的时候是最有用的,即帮助开发者思考如何设计一个组件,又提炼了一个现有的组件。每次代码发生变化的时候它们都会被运行
245+
单元测试中开发的时候是最有用的,即能帮助开发者思考如何设计一个组件或重构一个现有组件。通常每次代码发生变化的时候它们都会被运行
246246

247-
高级别的测试,诸如端到端测试,运行起来会更慢一些。这些测试通常会在预部署的时候运行,来确保系统的每个部分都能够正常的协同工作。
247+
高级别的测试,诸如端到端测试,运行起来会更慢很多。这些测试通常只在部署前运行,来确保系统的每个部分都能够正常的协同工作。
248248

249249
更多测试 Vue 组件的知识可翻阅核心团员 [Edd Yerburgh](https://eddyerburgh.me/) 的书[《测试 Vue.js 应用》](https://www.manning.com/books/testing-vuejs-applications)
250250

251251
## 何时避免这个模式
252252

253-
单元测试是任何严肃的应用的重要部分。首先,当你对一个应用的愿景还不够清晰的时候,单元测试可能会拖慢开发进度,但是一旦你的愿景建立起来并且有真实的用户对这个应用产生兴趣,那么单元测试 (以及其它类型的自动化测试) 就是绝对有必要的了,它们会确保基础代码的可维护性和可扩展性。
253+
单元测试是任何正经的应用的重要部分。一开始,当你对一个应用的愿景还不够清晰的时候,单元测试可能会拖慢开发进度,但是一旦你的愿景建立起来并且有真实的用户对这个应用产生兴趣,那么单元测试 (以及其它类型的自动化测试) 就是绝对有必要的了,它们会确保基础代码的可维护性和可扩展性。

0 commit comments

Comments
 (0)