testing.jade - done.

Jasmine-testing-101.jade: started.

Minor corrections in component-communication.jade and dynamic-form.jade.
This commit is contained in:
Rex 2016-04-19 16:07:22 +01:00
parent cb09d97c96
commit bce52dc696
5 changed files with 127 additions and 15 deletions

View File

@ -433,7 +433,7 @@ a(id="countdown-tests")
The `MissionControlComponent` both provides the instance of the service that it shares with its children The `MissionControlComponent` both provides the instance of the service that it shares with its children
(through the `providers` metadata array) and injects that instance into itself through its constructor: (through the `providers` metadata array) and injects that instance into itself through its constructor:
`MissionControlComponent`同时提供服务的实例并共享给它的子级(通过`providers`元素据序列),和通过自身的构造函数将该实例注入给自己。 `MissionControlComponent`同时提供服务的实例并共享给它的子级(通过`providers`元素据数组),和通过自身的构造函数将该实例注入给自己。
+makeExample('cb-component-communication/ts/app/missioncontrol.component.ts') +makeExample('cb-component-communication/ts/app/missioncontrol.component.ts')

View File

@ -138,7 +138,7 @@ include ../_util-fns
:marked :marked
`DynamicForm` expects the list of questions in the form of an array bound to `@Input() questions`. `DynamicForm` expects the list of questions in the form of an array bound to `@Input() questions`.
`DynamicForm`预期得到一个问题列表,该列表是一个关联到`@Input() questions`排列 `DynamicForm`预期得到一个问题列表,该列表是一个关联到`@Input() questions`数组
The set of questions we have defined for the job application is returned from the `QuestionService`. The set of questions we have defined for the job application is returned from the `QuestionService`.
In a real app we'd retrieve these questions from storage. In a real app we'd retrieve these questions from storage.
@ -148,7 +148,7 @@ include ../_util-fns
The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`. The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`.
Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array. Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array.
最关键的点是,我们全部通过从`QuestionService`返回的对象,来控制英雄工作申请问卷。要维护问卷,我们要做的是非常简单的添加、更新和删除`问题`排列中的对象。 最关键的点是,我们全部通过从`QuestionService`返回的对象,来控制英雄工作申请问卷。要维护问卷,我们要做的是非常简单的添加、更新和删除`问题`数组中的对象。
+makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts') +makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts')

View File

@ -1,33 +1,60 @@
:marked :marked
We write **unit tests** to explore and confirm the **behavior** of parts of our application. 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. 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. 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, we may have discovered a design flaw, something we can cure now rather than later when it becomes expensive to fix. 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.他们**揭露**我们设计的执行的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试,我们可能会发现设计缺陷,这是我们可以立刻修复的,而不是等到它变的很难修复的时候。
a(id="top") a(id="top")
:marked :marked
# Table of Contents # Table of Contents
# 目录
1. [Jasmine Testing 101](#jasmine-101) 1. [Jasmine Testing 101](#jasmine-101)
- setup to run Jasmine tests in the browser - setup to run Jasmine tests in the browser
- basic Jasmine testing skills - basic Jasmine testing skills
- write simple Jasmine tests in TypeScript - write simple Jasmine tests in TypeScript
- debug a test in the browser - debug a test in the browser
1. [Jasmine测试101](#jasmine-101)
- 设置浏览器来运行Jasmine测试
- 基础Jasmine测试技能
- 实用TypeScript来编写简单的Jasmine测试
- 在浏览器里调试测试
1. [The Application Under Test](#aut) 1. [The Application Under Test](#aut)
1. [被测试的应用程序](#aut)
1. [First app test](#first-app-tests) 1. [First app test](#first-app-tests)
- test a simple application interface outside of Angular - test a simple application interface outside of Angular
- where to put the test file - where to put the test file
- load a test file with systemJS - load a test file with systemJS
1. [第一个应用程序测试](#first-app-tests)
- 在Angular之外测试一个简单的应用程序接口
- 测试文件存放到哪儿
- 使用systemJS调用一个测试文件
1. [Pipe driven development](#pipe-testing) 1. [Pipe driven development](#pipe-testing)
- create a test before creating a class - create a test before creating a class
- load multiple test files in our test harness, using system.js - load multiple test files in our test harness, using system.js
- add the Angular 2 library to our test harness - add the Angular 2 library to our test harness
- watch the new test fail, and fix it - watch the new test fail, and fix it
1. [测试驱动开发一个管道](#pipe-testing)
- 在新建类之前,新建一个测试
- 使用system.js加载多个测试文件到我们的测试套装里
- 添加Angular 2的类库到我们的测试套装里
- 看着新测试失败,然后修复它
1. Test an Asynchronous Service (forthcoming) 1. Test an Asynchronous Service (forthcoming)
- test an asynchronous service class outside of Angular - test an asynchronous service class outside of Angular
- write a test plan in code - write a test plan in code
@ -67,6 +94,7 @@ a(href="#top").to-top Back to top
a(id="jasmine-101") a(id="jasmine-101")
:marked :marked
# Jasmine Testing 101 # Jasmine Testing 101
# Jasmine测试101
!= partial("../testing/jasmine-testing-101") != partial("../testing/jasmine-testing-101")
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
@ -74,6 +102,7 @@ a(href="#top").to-top Back to top
a(id="aut") a(id="aut")
:marked :marked
# The Application to Test # The Application to Test
# 被测试的应用程序
!= partial("../testing/application-under-test") != partial("../testing/application-under-test")
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
@ -81,6 +110,7 @@ a(href="#top").to-top Back to top
a(id="first-app-tests") a(id="first-app-tests")
:marked :marked
# First app test # First app test
# 第一个应用程序测试
!= partial("../testing/first-app-tests") != partial("../testing/first-app-tests")
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
@ -88,6 +118,7 @@ a(href="#top").to-top Back to top
a(id="pipe-testing") a(id="pipe-testing")
:marked :marked
# Pipe driven development # Pipe driven development
# 测试驱动开发一个管道
!= partial("../testing/testing-an-angular-pipe") != partial("../testing/testing-an-angular-pipe")
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
@ -95,3 +126,5 @@ a(href="#top").to-top Back to top
:marked :marked
The testing chapter is still under development. The testing chapter is still under development.
Please bear with us as we both update and complete it. Please bear with us as we both update and complete it.
测试章节正在开发中,请耐心,我们会更新并完成它。

View File

@ -1,9 +1,18 @@
:marked :marked
We write **unit tests** to explore and confirm the **behavior** of parts of our application. 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. 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. They **clarify** what the code does both when used as intended and when faced with deviant conditions.
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. 在我们正确使用代码和面对异常情况时,他们**澄清**代码做什么。
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 .alert.is-important
:marked :marked
@ -12,6 +21,8 @@
Much of the material remains accurate and relevant but references to Much of the material remains accurate and relevant but references to
specific features of Angular 2 and the Angular 2 testing library specific features of Angular 2 and the Angular 2 testing library
may not be correct. Please bear with us. may not be correct. Please bear with us.
这些测试的章节是
:marked :marked
Here is what well learn in the unit testing chapters. Here is what well learn in the unit testing chapters.

View File

@ -4,22 +4,38 @@ include ../_util-fns
Well write our tests with the [Jasmine test framework](http://jasmine.github.io/2.3/introduction.html). Well write our tests with the [Jasmine test framework](http://jasmine.github.io/2.3/introduction.html).
Well start by getting *some* tests to work - *any* tests at all. Well start by getting *some* tests to work - *any* tests at all.
我们将使用[Jasmine测试框架](http://jasmine.github.io/2.3/introduction.html)编写我们的测试。
我们以把*一些*测试弄成功为开始。
We will learn We will learn
- basic Jasmine testing skills - basic Jasmine testing skills
- to run our tests in the browser - to run our tests in the browser
- to write simple Jasmine tests in TypeScript - to write simple Jasmine tests in TypeScript
- to debug a test in the browser - to debug a test in the browser
我们会学到:
- 基础Jasmine测试技能
- 在浏览器里面运行我们的测试
- 使用TypeScript编写简单的Jasmine测试
- 在浏览器里调试一个测试
**Create a new project folder** perhaps called `angular2-unit-testing`. **Create a new project folder** perhaps called `angular2-unit-testing`.
**新建一个项目目录**,起名为`angular2-unit-testing`。
.l-main-section .l-main-section
:marked :marked
## Install npm packages locally ## Install npm packages locally
## 本地安装npm包
Next follow all of the steps prescribed in “Install npm packages locally” of the Next follow all of the steps prescribed in “Install npm packages locally” of the
[QuickStart](../quickstart.html). [QuickStart](../quickstart.html).
下一步,完成[快速开始](../quickstart.html)中的“本地安装npm包”的每一步。
Well also add the Jasmine package via `npm`: Well also add the Jasmine package via `npm`:
然后我们通过npm添加Jasmine包
pre.prettyprint.lang-bash pre.prettyprint.lang-bash
code npm install jasmine-core --save-dev --save-exact code npm install jasmine-core --save-dev --save-exact
@ -27,78 +43,117 @@ pre.prettyprint.lang-bash
:marked :marked
Be sure to install `jasmine-core` , not `jasmine`! Be sure to install `jasmine-core` , not `jasmine`!
确认安装的是`jasmine-core`,不是`jasmine`
:marked :marked
**Create a sub-folder `src` ** for our tests and then **cd into it**. **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**. We are going to **display and control our tests in the browser**.
我们将会**在浏览器里面显示和控制我们的测试**。
.l-sub-section .l-sub-section
:marked :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. Well switch to the karma test-runner when the time comes. But the browser will do for now. 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 :marked
Create a new file called`unit-tests.html` and enter the following: 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') +makeExample('testing/ts/unit-tests-0.html', 'no-script', 'unit-tests.html')
:marked :marked
In the head we have three Jasmine scripts and one Jasmine css file. Thats the foundation for running any tests. 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: Well write our first test with inline JavaScript inside the body tag:
我们接下来以内嵌JavaScript的形式在body表示里面编写我们的第一个测试
+makeExample('testing/ts/unit-tests-0.html', 'body')(format='.') +makeExample('testing/ts/unit-tests-0.html', 'body')(format='.')
:marked :marked
Now open `unit-tests.html` in a browser and see the Jasmine HTML test output: Now open `unit-tests.html` in a browser and see the Jasmine HTML test output:
现在,在浏览器里打开`unit-tests.html`看到Jasmine HTML的测试结果
figure.image-display figure.image-display
img(src='/resources/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png' style="height:170px;" alt="Jasmine HTML test output") img(src='/resources/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png' style="height:170px;" alt="Jasmine HTML test output")
:marked :marked
It doesnt get much simpler than that! It doesnt get much simpler than that!
这个已经是简单的不能再简单了。
.l-main-section .l-main-section
:marked :marked
## First TypeScript Test ## First TypeScript Test
## 第一个TypeScript测试
Perhaps too simple. We wont write our entire test suite inside one HTML file. 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` ** . 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 .l-sub-section
:marked :marked
Among Jasmine developers, a test is known as a “spec” and test filenames include the word “spec”. Well stick with that convention. 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 :marked
The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But lets make it more modern with an arrow function: 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') +makeExample('testing/ts/1st.spec.ts', 'it', '1st.spec.ts')
:marked :marked
Now modify `unit-tests.html` to load the script: Now modify `unit-tests.html` to load the script:
现在修改`unit-tests.html`来加载上面的脚本:
+makeExample('testing/ts/unit-tests-1.html', 'script') +makeExample('testing/ts/unit-tests-1.html', 'script')
:marked :marked
Hold on! We wrote a TypeScript file but were loading a JavaScript file? 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. 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 .l-main-section
:marked :marked
## Prepare for TypeScript ## Prepare for TypeScript
## 为TypeScript做准备
As weve seen before, we first have to tell the compiler how to compile our TypeScript files with As weve seen before, we first have to tell the compiler how to compile our TypeScript files with
a ** `tsconfig.json` **. a ** `tsconfig.json` **.
和我们见过的一样,我们必须通过*`tsconfig.json`*告诉编译器怎么编译我们的TypeScript文件。
We can copy one from the quickstart we wrote previously and paste it into our src sub-folder. We can copy one from the quickstart we wrote previously and paste it into our src sub-folder.
It should look something like this: It should look something like this:
我们可以从快速开始拷贝一个之前已写好的粘贴到我们的src子目录它应该像这样
+makeExample('testing/ts/tsconfig.1.json', null, 'tsconfig.json') +makeExample('testing/ts/tsconfig.1.json', null, 'tsconfig.json')
:marked :marked
## Compile and Run ## Compile and Run
## 编译和运行
Compile in the terminal window using the npm script command Compile in the terminal window using the npm script command
在终端窗口使用npm脚本命令编译
pre.prettyprint.lang-bash pre.prettyprint.lang-bash
code npm run tsc code npm run tsc
@ -108,24 +163,37 @@ pre.prettyprint.lang-bash
what `it` and `expect` are because they lack the typing files that describe Jasmine. 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. We can ignore those annoying complaints for now as they are harmless.
我们的编辑器和编译器可能会抱怨,说他们不知道什么是`it`和`expect`因为他们缺少描述Jasmine的typing文件。我们暂时可以忽略这些讨厌的抱怨他们目前并无害处。
:marked :marked
If we reload the browser, we should see the same Jasmine test-runner output as before. 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. 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: Lets launch with **live-server** in a second terminal window:
让我们在另一个终端窗口启动一个**live-server**。
pre.prettyprint.lang-bash pre.prettyprint.lang-bash
code npm start code npm start
:marked :marked
Now reload `unit-tests.html` in the browser Now reload `unit-tests.html` in the browser
现在在浏览器刷新`unit-tests.html`
We should get the same Jasmine test-runner output as before. We should get the same Jasmine test-runner output as before.
我们应该能看到一样的Jasmine测试运行器输出。
.l-main-section .l-main-section
:marked :marked
## Add a describe and another test ## Add a describe and another test
## 添加一个describe和其他测试
We cant tell what file produced these test results. We only have one file at the moment but soon well write more. We cant tell what file produced these test results. We only have one file at the moment but soon well write more.