diff --git a/public/docs/ts/latest/cookbook/component-communication.jade b/public/docs/ts/latest/cookbook/component-communication.jade index 349e65c23a..1a9672984d 100644 --- a/public/docs/ts/latest/cookbook/component-communication.jade +++ b/public/docs/ts/latest/cookbook/component-communication.jade @@ -433,7 +433,7 @@ a(id="countdown-tests") 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: - `MissionControlComponent`同时提供服务的实例并共享给它的子级（通过`providers`元素据序列），和通过自身的构造函数将该实例注入给自己。 + `MissionControlComponent`同时提供服务的实例并共享给它的子级（通过`providers`元素据数组），和通过自身的构造函数将该实例注入给自己。 +makeExample('cb-component-communication/ts/app/missioncontrol.component.ts') diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade index c6c7853167..e69c3bc8ee 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form.jade +++ b/public/docs/ts/latest/cookbook/dynamic-form.jade @@ -138,7 +138,7 @@ include ../_util-fns :marked `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`. 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`. 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') @@ -194,4 +194,4 @@ figure.image-display :marked [Back to top](#top) - [回到顶部](#top) \ No newline at end of file + [回到顶部](#top) diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index 4859c9551c..b59984fa11 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -1,33 +1,60 @@ :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, 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") :marked - # Table of Contents - + # Table of Contents + # 目录 1. [Jasmine Testing 101](#jasmine-101) - setup to run Jasmine tests in the browser - basic Jasmine testing skills - write simple Jasmine tests in TypeScript - debug a test in the browser - + + 1. [Jasmine测试101](#jasmine-101) + - 设置浏览器来运行Jasmine测试 + - 基础Jasmine测试技能 + - 实用TypeScript来编写简单的Jasmine测试 + - 在浏览器里调试测试 + 1. [The Application Under Test](#aut) + 1. [被测试的应用程序](#aut) + 1. [First app test](#first-app-tests) - test a simple application interface outside of Angular - where to put the test file - load a test file with systemJS - + + 1. [第一个应用程序测试](#first-app-tests) + - 在Angular之外，测试一个简单的应用程序接口 + - 测试文件存放到哪儿 + - 使用systemJS调用一个测试文件 + 1. [Pipe driven development](#pipe-testing) - create a test before creating a class - load multiple test files in our test harness, using system.js - add the Angular 2 library to our test harness - watch the new test fail, and fix it + 1. [测试驱动开发一个管道](#pipe-testing) + - 在新建类之前，新建一个测试 + - 使用system.js，加载多个测试文件到我们的测试套装里 + - 添加Angular 2的类库到我们的测试套装里 + - 看着新测试失败，然后修复它 + 1. Test an Asynchronous Service (forthcoming) - test an asynchronous service class outside of Angular - write a test plan in code @@ -67,6 +94,7 @@ a(href="#top").to-top Back to top a(id="jasmine-101") :marked # Jasmine Testing 101 + # Jasmine测试101 != partial("../testing/jasmine-testing-101") a(href="#top").to-top Back to top @@ -74,6 +102,7 @@ a(href="#top").to-top Back to top a(id="aut") :marked # The Application to Test + # 被测试的应用程序 != partial("../testing/application-under-test") 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") :marked # First app test + # 第一个应用程序测试 != partial("../testing/first-app-tests") a(href="#top").to-top Back to top @@ -88,6 +118,7 @@ a(href="#top").to-top Back to top a(id="pipe-testing") :marked # Pipe driven development + # 测试驱动开发一个管道 != partial("../testing/testing-an-angular-pipe") a(href="#top").to-top Back to top @@ -95,3 +126,5 @@ a(href="#top").to-top Back to top :marked The testing chapter is still under development. Please bear with us as we both update and complete it. + + 测试章节正在开发中，请耐心，我们会更新并完成它。 diff --git a/public/docs/ts/latest/testing/index.jade b/public/docs/ts/latest/testing/index.jade index 1a1307e717..d2bd66d839 100644 --- a/public/docs/ts/latest/testing/index.jade +++ b/public/docs/ts/latest/testing/index.jade @@ -1,9 +1,18 @@ :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. 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 :marked @@ -12,6 +21,8 @@ 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 we’ll learn in the unit testing chapters. diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade index fbf0c47697..6e66afd5d3 100644 --- a/public/docs/ts/latest/testing/jasmine-testing-101.jade +++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade @@ -4,21 +4,37 @@ include ../_util-fns We’ll write our tests with the [Jasmine test framework](http://jasmine.github.io/2.3/introduction.html). We’ll start by getting *some* tests to work - *any* tests at all. - We will learn + 我们将使用[Jasmine测试框架](http://jasmine.github.io/2.3/introduction.html)编写我们的测试。 + 我们以把*一些*测试弄成功为开始。 + + We will learn - basic Jasmine testing skills - to run our tests in the browser - to write simple Jasmine tests in TypeScript - to debug a test in the browser + + 我们会学到： + - 基础Jasmine测试技能 + - 在浏览器里面运行我们的测试 + - 使用TypeScript编写简单的Jasmine测试 + - 在浏览器里调试一个测试 **Create a new project folder** perhaps called `angular2-unit-testing`. + + **新建一个项目目录**，起名为`angular2-unit-testing`。 .l-main-section :marked ## Install npm packages locally + ## 本地安装npm包 Next follow all of the steps prescribed in “Install npm packages locally” of the [QuickStart](../quickstart.html). + + 下一步，完成[快速开始](../quickstart.html)中的“本地安装npm包”的每一步。 We’ll also add the Jasmine package via `npm`: + + 然后我们通过npm添加Jasmine包： pre.prettyprint.lang-bash code npm install jasmine-core --save-dev --save-exact @@ -26,78 +42,117 @@ 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. It’s not the best venue for working with a lot of tests and it won’t do at all for build automation. We’ll 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. It’s not the best venue for working with a lot of tests and it won’t do at all for build automation. + We’ll 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. That’s the foundation for running any tests. + + 在head里面，我们有三个Jasmine脚本和一个Jasmine css文件。他们是运行任何测试的奠基石。 We’ll 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 img(src='/resources/images/devguide/jasmine-testing-101/jasmine-1-spec-0-failures.png' style="height:170px;" alt="Jasmine HTML test output") :marked It doesn’t get much simpler than that! + + 这个已经是简单的不能再简单了。 .l-main-section :marked ## First TypeScript Test + ## 第一个TypeScript测试 Perhaps too simple. We won’t write our entire test suite inside one HTML file. Let’s **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”. We’ll stick with that convention. + + 在Jasmine开发者中，一个测试通常被叫做“spec”，而且测试的文件名包含单词“spec”。我们将遵循这个规则。 :marked The test we wrote is valid TypeScript because any JavaScript is valid TypeScript. But let’s 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 we’re loading a JavaScript file? - + + 等等！我们编写了TypeScript文件，但是我们却加载了一个Javascript文件？ + That’s 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 we’ve 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') :marked ## Compile and Run + ## 编译和运行 Compile in the terminal window using the npm script command + + 在终端窗口，使用npm脚本命令编译： pre.prettyprint.lang-bash code npm run tsc @@ -107,25 +162,38 @@ pre.prettyprint.lang-bash Our editor and the compiler may complain that they don’t 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测试运行器输出。 We’ll be evolving these tests rapidly and it would be nice to have the browser refresh automatically as we make changes and recompile. + + 我们可以迅速进化这些测试，让浏览器在我们做出修改和重新编译时自动刷新的话就更方便了。 Let’s launch with **live-server** in a second terminal window: + + 让我们在另一个终端窗口启动一个**live-server**。 pre.prettyprint.lang-bash code npm start :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 :marked ## Add a describe and another test + ## 添加一个describe和其他测试 We can’t tell what file produced these test results. We only have one file at the moment but soon we’ll write more.