diff --git a/public/docs/ts/latest/testing/application-under-test.jade b/public/docs/ts/latest/testing/application-under-test.jade index 6edc812e9a..05970a0cd8 100644 --- a/public/docs/ts/latest/testing/application-under-test.jade +++ b/public/docs/ts/latest/testing/application-under-test.jade @@ -2,16 +2,17 @@ include ../_util-fns :marked We’ll 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. - + 复制一个英雄指南应用程序，这样我们可以肆无忌惮的摆弄它。 diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade index 79b52536fb..21896d800f 100644 --- a/public/docs/ts/latest/testing/first-app-tests.jade +++ b/public/docs/ts/latest/testing/first-app-tests.jade @@ -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 npm, gulp, and live-server. - + 本单元测试章节是在其它章节的基础上编写的。我们建议你按顺序阅读它们。我们同时假设你已经对Angular 2的原理、在[“快速起步”](../quickstart.html)里介绍的工具、 [英雄指南](../tutorial)和npm, gulp, and live-server等工具都所有了解。 @@ -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 jasmine-core , not jasmine! 请注意，安装jasmine-core,而不是jasmine! +.alert.is-important Be sure to install jasmine-core , not jasmine! + +.alert.is-important 请注意，安装jasmine-core,而不是jasmine! :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. diff --git a/public/docs/ts/latest/testing/index.jade b/public/docs/ts/latest/testing/index.jade index c2a60b8582..1e059f0663 100644 --- a/public/docs/ts/latest/testing/index.jade +++ b/public/docs/ts/latest/testing/index.jade @@ -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 we’ll 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 diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade index 5396e85288..4f6ca0ad9f 100644 --- a/public/docs/ts/latest/testing/jasmine-testing-101.jade +++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade @@ -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包”的每一步。 We’ll 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. It’s not the best venue for working with a lot of tests and it won’t do at all for build automation. + 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 @@ -89,7 +90,7 @@ figure.image-display :marked It doesn’t get much simpler than that! - + 这个已经是简单的不能再简单了。 .l-main-section @@ -98,50 +99,50 @@ figure.image-display ## 第一个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') @@ -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 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 @@ -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 can’t tell what file produced these test results. We only have one file at the moment but soon we’ll 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`来标识这个文件测试了什么。 Here’s 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 here’s how the test report displays it. - + 下面是测试报告的显示： figure.image-display @@ -221,9 +222,9 @@ figure.image-display :marked Let’s 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 didn’t know what was going on. We can debug it in the browser. - + 假设我们不知道是怎么回事。我们都能在浏览器里面调试它。 - Open the browser’s “Developer Tools” (F12 or Ctrl-Shift-I). @@ -282,26 +285,30 @@ figure.image-display :marked How about that! They really aren’t 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 … you’ve completed Jasmine testing 101. - + 恭喜...你完成了Jasmine测试101。 - + Now that we’re familiar with Jasmine on its own, we’re ready to test an application. - + 现在，我们熟悉了Jasmine的独立运作，我们已做好准备测试一个应用程序了。