开发指南-测试 初译中……

This commit is contained in:
Zhicheng Wang 2016-05-30 08:54:35 +08:00
parent 8676cef5af
commit 61cb39cc0a
4 changed files with 107 additions and 92 deletions

View File

@ -2,16 +2,17 @@ include ../_util-fns
:marked
Well need an Angular application to test, one as simple as possible while having most of the angular features we want to test.
我们将需要一个Angular应用程序来测试一个尽量简单但几乎拥有所有我们想要测试angular特性的应用程序。
What better app than our own [The Tour of Heroes](../tutorial/toh-pt5.html)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there.
什么应用程序比我们自己的[英雄指南](../tutorial/toh-pt5.html)更合适?我们已经很熟悉它了,它也适合我们的需求,所以让我们来测试一下我们已经完成了的功能。
We might end up modifying it a bit, because it doesn't have everything we want to test, but it's the perfect starting point.
我们可能需要对它做一些修改,因为它没有所有我们想要测试的需求,但是这是一个完美的起点。
Create a copy of the Tour of Heroes app so that we can fiddle without fear.
复制一个英雄指南应用程序,这样我们可以肆无忌惮的摆弄它。

View File

@ -2,10 +2,11 @@ include ../_util-fns
:marked
In this chapter we'll setup the environment for testing our sample application and write a few easy Jasmine tests of the app's simplest parts.
在这个章节我们将为我们的样本应用程序设置测试环境针对应用程序的最简单的部分编写几个简单的Jasmine测试。
We'll learn:
我们会学到:
- to test one of our application files
- 测试我们应用程序的一个文件
@ -24,7 +25,7 @@ include ../_util-fns
we introduced in the [QuickStart](../quickstart.html) and
the [Tour of Heroes](../tutorial/) tutorial
such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
本单元测试章节是在其它章节的基础上编写的。我们建议你按顺序阅读它们。我们同时假设你已经对Angular 2的原理、在[“快速起步”](../quickstart.html)里介绍的工具、
[英雄指南](../tutorial)和<code>npm</code>, <code>gulp</code>, and <code>live-server</code>等工具都所有了解。
@ -34,41 +35,44 @@ include ../_util-fns
## 新建一个测试运行器(test-runner) HTML
Locate the folder that contains the application `index.html` for your testing copy of Tour of Heroes.
在英雄指南的测试拷贝版里面找到包含`index.html`的目录。
Create a new, sibling HTML file, ** `unit-tests.html` ** and copy over the same basic material from the `unit-tests.html` in the [Jasmine 101](./jasmine-testing-101.html) chapter.
在隔壁建立一个新的HTML文件**`unit-tests.html`**,从[Jasmine 101](./jasmine-testing-101.html)章节,将`unit-tests.html`里面的基础内容拷贝到此文件中。
+makeExample('testing/ts/unit-tests-2.html', 'test-runner-base', 'unit-tests.html')
:marked
We're picking up right where we left off. All we've done is change the title.
我们将从上次的的基础上开始。我们只修改了标题。
.l-main-section
:marked
## Update `package.json` for testing
## 为测试更新`package.json`
We must install the Jasmine package as well:
我们也必须安装Jasmine包
pre.prettyprint.lang-bash
code npm install jasmine-core --save-dev --save-exact
.alert.is-important Be sure to install <code>jasmine-core</code> , not <code>jasmine</code>! 请注意,安装<code>jasmine-core</code>,而不是<code>jasmine</code>!
.alert.is-important Be sure to install <code>jasmine-core</code> , not <code>jasmine</code>!
.alert.is-important 请注意,安装<code>jasmine-core</code>,而不是<code>jasmine</code>!
:marked
Let's make one more change to the `package.json` script commands.
让我们在`package.json`的脚本命令部分再修改一项。
**Open the `package.json` ** and scroll to the `scripts` node and add in a new one:
**打开`package.json`**,滚动到`scripts`节点,添加下面这行:
code-example(format="").
@ -76,45 +80,46 @@ code-example(format="").
:marked
That command will launch `live-server` and open a browser to the `unit-tests.html` page we just wrote.
该指令将启动`live-server`,并使用浏览器,打开我们刚新建的`unit-tests.html`页面。
.l-main-section
:marked
## First app tests
## 第一个应用程序测试
We can start testing *some* of our app right away. For example, we can test the `Hero` interface:
我们可以立刻开始测试我们应用程序的*一些*代码。比如,我们可以测试`Hero`接口:
+makeExample('testing/ts/app/hero.ts')
+makeExample('testing/ts/app/hero.ts')
:marked
Let's add a couple of simple tests in a new file.
让我们在一个新文件里面添加一些简单的测试。
+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')
+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')
:marked
That's the basic Jasmine we learned back in "Jasmine 101".
上面是我们在“Jasmine 101”学习的基本Jasmine知识。
Notice that we surrounded our tests with ** `describe('Hero')` **.
请注意,我们把我们的测试围在**`describe('Hero')`**里面。
**By convention, our test always begin with a `describe` that identifies the application part under test.**
**按惯例,我们的测试都已`describe`开始,它是用来标识该测试是用来测试哪个应用程序部分的。
The description should be sufficient to identify the tested application part and its source file.
The description should be sufficient to identify the tested application part and its source file.
Almost any convention will do as long as you and your team follow it consistently and are never confused.
这个说明应该能足够标识被测试应用程序部分和相关源代码。几乎任何
But we haven't saved this test yet.
.l-main-section
@ -134,7 +139,7 @@ code-example(format="").
.l-sub-section
:marked
You may put your tests elsewhere if you wish.
You may put your tests elsewhere if you wish.
We're putting ours inside the app, next to the source files that they test.
.l-main-section
@ -150,7 +155,7 @@ code-example(format="").
:marked
Save the tests we just made in `hero.spec.ts`:
+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')
+makeExample('testing/ts/app/hero.spec.ts', 'base-hero-spec')
:marked
### Import the part we're testing
@ -162,7 +167,7 @@ code-example(format="").
### Update unit-tests.html
Next we update the `unit-tests.html` with a reference to our new `hero.spec.ts` file. Delete the inline test code. The revised pertinent HTML looks like this:
+makeExample('testing/ts/unit-tests-2.html', 'load-hero-and-spec')(format=".")
:marked
@ -250,6 +255,6 @@ figure.image-display
We are able to test a part of our application with simple Jasmine tests.
The part was a stand-alone interface that made no mention or use of Angular.
That's not rare but it's not typical either.
That's not rare but it's not typical either.
Most of our application parts make some use of the Angular framework.
Let's test a *pipe* class that does rely on Angular.

View File

@ -1,17 +1,19 @@
:marked
We write **unit tests** to explore and confirm the **behavior** of parts of our application.
我们编写**单元测试**来探索和确认我们应用程序的**行为**部分。
1. They **guard** against breaking existing code (“regressions”) when we make changes.
1. 当我们改变代码时,它们**守护**已有代码,以防被破坏。
1. They **clarify** what the code does both when used as intended and when faced with deviant conditions.
1. 在我们正确使用代码和面对异常情况时,它们**澄清**代码做什么。
1. They **reveal** mistakes in design and implementation. Tests force us to look at our code from many angles. When a part of our application seems hard to test,
1. They **reveal** mistakes in design and implementation. Tests force us to look at our code from many angles. When a part of our application seems hard to test,
we may have discovered a design flaw, something we can cure now rather than later when it becomes expensive to fix.
1.它们**揭露**我们设计的执行的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试,我们可能会发现设计缺陷,这是我们可以立刻修复的,而不是等到它变的很难修复的时候。
.alert.is-important
@ -21,7 +23,7 @@
Much of the material remains accurate and relevant but references to
specific features of Angular 2 and the Angular 2 testing library
may not be correct. Please bear with us.
这些测试的章节是
:marked
Here is what well learn in the unit testing chapters.
@ -32,7 +34,7 @@
- write simple Jasmine tests in TypeScript
- debug a test in the browser
1. The Application Under Test
1. Test a class
- test a simple application class outside of Angular
- where to put the test file

View File

@ -6,10 +6,10 @@ include ../_util-fns
我们将使用[Jasmine测试框架](http://jasmine.github.io/2.3/introduction.html)编写我们的测试。
我们以把*一些*测试弄成功为开始。
We will learn
我们会学到:
We will learn
我们会学到:
- basic Jasmine testing skills
- 基础Jasmine测试技能
- to run our tests in the browser
@ -20,8 +20,9 @@ include ../_util-fns
- 在浏览器里调试一个测试
**Create a new project folder** perhaps called `angular2-unit-testing`.
**新建一个项目目录**,起名为`angular2-unit-testing`。
.l-main-section
:marked
## Install npm packages locally
@ -29,11 +30,11 @@ include ../_util-fns
Next follow all of the steps prescribed in “Install npm packages locally” of the
[QuickStart](../quickstart.html).
下一步,完成[“快速起步”](../quickstart.html)中的“本地安装npm包”的每一步。
Well also add the Jasmine package via `npm`:
然后我们通过npm添加Jasmine包
pre.prettyprint.lang-bash
@ -42,46 +43,46 @@ pre.prettyprint.lang-bash
.alert.is-important
:marked
Be sure to install `jasmine-core` , not `jasmine`!
确认安装的是`jasmine-core`,不是`jasmine`
:marked
**Create a sub-folder `src` ** for our tests and then **cd into it**.
为我们的测试**新建一个子目录`src`**,然后**cd到里面**。
We are going to **display and control our tests in the browser**.
我们将会**在浏览器里面显示和控制我们的测试**。
.l-sub-section
:marked
The browser is nice during development of a few tests. Its not the best venue for working with a lot of tests and it wont do at all for build automation.
The browser is nice during development of a few tests. Its not the best venue for working with a lot of tests and it wont do at all for build automation.
Well switch to the karma test-runner when the time comes. But the browser will do for now.
在我们开发一些测试的过程中,浏览器很有帮助。它却并不是最好的开发很多测试的地方,它更不能用来做建构自动化。
到时我们将会切换到Karma测试运行器。但是现在先用浏览器。
:marked
Create a new file called`unit-tests.html` and enter the following:
新建一个文件叫做`unit-tests.html`,并把下面的内容输入进去:
+makeExample('testing/ts/unit-tests-0.html', 'no-script', 'unit-tests.html')
:marked
In the head we have three Jasmine scripts and one Jasmine css file. Thats the foundation for running any tests.
在head里面我们有三个Jasmine脚本和一个Jasmine css文件。它们是运行任何测试的奠基石。
Well write our first test with inline JavaScript inside the body tag:
我们接下来以内联JavaScript的形式在body表示里面编写我们的第一个测试
+makeExample('testing/ts/unit-tests-0.html', 'body')(format='.')
:marked
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
现在,在浏览器里打开`unit-tests.html`看到Jasmine HTML的测试结果
figure.image-display
@ -89,7 +90,7 @@ figure.image-display
:marked
It doesnt get much simpler than that!
这个已经是简单的不能再简单了。
.l-main-section
@ -98,50 +99,50 @@ figure.image-display
## 第一个TypeScript测试
Perhaps too simple. We wont write our entire test suite inside one HTML file.
Lets **extract** that line of test code to a **new file in `src` called `1st.spec.ts` ** .
或许过于简单。我们不会再一个HTML文件里面编写整套测试。让我们把这行测试代码**提取**到**`src`目录下的新文件`1st.spec.ts`**。
.l-sub-section
:marked
Among Jasmine developers, a test is known as a “spec” and test filenames include the word “spec”. Well stick with that convention.
在Jasmine开发者中一个测试通常被叫做“spec”而且测试的文件名包含单词“spec”。我们将遵循这个规则。
:marked
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But lets make it more modern with an arrow function:
我们编写的测试是一个有效的TypeScript因为所有的JavaScript都是有效的TypeScript。但是让我们使用箭头函数让它更加现代
+makeExample('testing/ts/1st.spec.ts', 'it', '1st.spec.ts')
:marked
Now modify `unit-tests.html` to load the script:
现在修改`unit-tests.html`来加载上面的脚本:
+makeExample('testing/ts/unit-tests-1.html', 'script')
:marked
Hold on! We wrote a TypeScript file but were loading a JavaScript file?
等等我们编写了TypeScript文件但是我们却加载了一个JavaScript文件
Thats a reminder that we need to compile our TypeScript test files as we do our TypeScript application files. Do that next.
这是一个提醒我们需要编译我们的TypeScript测试文件就像我们编译我们的TypeScript应用程序文件一样。我们接下来做这个。
.l-main-section
:marked
## Prepare for TypeScript
## 为TypeScript做准备
As weve seen before, we first have to tell the compiler how to compile our TypeScript files with
a ** `tsconfig.json` **.
和我们见过的一样,我们必须通过*`tsconfig.json`*告诉编译器怎么编译我们的TypeScript文件。
We can copy one from the quickstart we wrote previously and paste it into our src sub-folder.
It should look something like this:
我们可以从“快速起步”拷贝一个之前已写好的粘贴到我们的src子目录它应该像这样
+makeExample('testing/ts/tsconfig.1.json', null, 'tsconfig.json')
@ -151,7 +152,7 @@ figure.image-display
## 编译和运行
Compile in the terminal window using the npm script command
在终端窗口使用npm脚本命令编译
pre.prettyprint.lang-bash
@ -162,20 +163,20 @@ pre.prettyprint.lang-bash
Our editor and the compiler may complain that they dont know
what `it` and `expect` are because they lack the typing files that describe Jasmine.
We can ignore those annoying complaints for now as they are harmless.
我们的编辑器和编译器可能会抱怨,说它们不知道什么是`it`和`expect`因为它们缺少描述Jasmine的typing文件。我们暂时可以忽略这些讨厌的抱怨它们目前并无害处。
:marked
If we reload the browser, we should see the same Jasmine test-runner output as before.
如果我们刷新浏览器我们会看到和以前一样的Jasmine测试运行器输出。
Well be evolving these tests rapidly and it would be nice to have the browser refresh automatically as we make changes and recompile.
我们可以迅速进化这些测试,让浏览器在我们做出修改和重新编译时自动刷新的话就更方便了。
Lets launch with **live-server** in a second terminal window:
让我们在另一个终端窗口启动一个**live-server**。
pre.prettyprint.lang-bash
@ -183,11 +184,11 @@ pre.prettyprint.lang-bash
:marked
Now reload `unit-tests.html` in the browser
现在在浏览器刷新`unit-tests.html`
We should get the same Jasmine test-runner output as before.
我们应该能看到一样的Jasmine测试运行器输出。
.l-main-section
@ -196,24 +197,24 @@ pre.prettyprint.lang-bash
## 添加一个describe和其它测试
We cant tell what file produced these test results. We only have one file at the moment but soon well write more.
我们不知道什么文件生成了这些测试结果。虽然我们目前只有一个文件但是我们会编写更多。
We should wrap this test into something that identifies the file. In Jasmine that “something” is a `describe` function.
We should wrap this test into something that identifies the file. In Jasmine that “something” is a `describe` function.
Every test file should have at least one `describe` that identifies the file holding the test(s).
我们应该把这个测试包裹到一个可以识别这个文件的东西。在Jasmine里这个东西是一个`describe`函数。
每个测试文件都应该至少有一个`describe`来标识这个文件测试了什么。
Heres what our revised `1st.spec.ts` looks like when wrapped in a `describe`:
下面是我们修改`1st.spec.ts`,用`describe`包裹后的结果:
+makeExample('testing/ts/1st.spec.ts', 'describe')
:marked
And heres how the test report displays it.
下面是测试报告的显示:
figure.image-display
@ -221,9 +222,9 @@ figure.image-display
:marked
Lets add another Jasmine test to `1st.spec.ts`
让我们添加另一个测试到`1st.spec.ts`
+makeExample('testing/ts/1st.spec.ts', 'another-test')(format=".")
:marked
@ -243,7 +244,7 @@ figure.image-display
:marked
Click the `Spec List` link just below “2 specs, 1 failure” to see the summary again:
点击“2 Specs, 1 failure”下面的`Spec List`链接,看看总结:
figure.image-display
@ -251,15 +252,17 @@ figure.image-display
:marked
We can re-run just the failing test by double-clicking it. Try it!
我们可以只重新运行失败的测试,点击它就可以了。试试!
.l-main-section
:marked
## Debug the test
## 调试测试
Suppose we didnt know what was going on. We can debug it in the browser.
假设我们不知道是怎么回事。我们都能在浏览器里面调试它。
- Open the browsers “Developer Tools” (F12 or Ctrl-Shift-I).
@ -282,26 +285,30 @@ figure.image-display
:marked
How about that! They really arent equal.
你觉得怎么样?它们真的不相等。
- remove the breakpoint (right-click in the “Breakpoints” section and chose “Remove breakpoint”)
- 移除断点在“Breakpoints”区域右键点击“Remove breakpoint”)
- Click the “play” icon to resume the test (or F8)
- 点击“play”图标来继续运行测试或F8
And the test finishes. Close the browser tools (click the close box or press F12 or Ctrl-Shift-I)
然后测试完成。关闭浏览器工具点击关闭图标或者按F12或Ctrl-Shift-I)
Fix the test (restore the `.not`); the browser should refresh automatically and all tests pass.
修复测试(恢复`.not`);浏览器应该自动刷新,所有测试都通过。
Congratulations … youve completed Jasmine testing 101.
恭喜...你完成了Jasmine测试101。
Now that were familiar with Jasmine on its own, were ready to test an application.
现在我们熟悉了Jasmine的独立运作我们已做好准备测试一个应用程序了。
<!-- TODO