review: testing.jade

This commit is contained in:
Zhimin YE 2016-10-24 12:10:45 +01:00
parent b75409866e
commit 865a0934bd

View File

@ -283,7 +283,7 @@ a(href="#top").to-top 回到顶部
something to cure now rather than later when it becomes expensive to fix. something to cure now rather than later when it becomes expensive to fix.
1. 测试**暴露**设计和实现可能出现的错误。测试从很多角度为代码亮出警报灯。当应用程序很难被测试时, 1. 测试**暴露**设计和实现可能出现的错误。测试从很多角度为代码亮出警报灯。当应用程序很难被测试时,
根本原因一般都是设计缺陷,这种缺陷最好立刻将其修正,不要等到它变得很难被修复的时候才行动。 根本原因一般都是设计缺陷,这种缺陷最好立刻修正,不要等到它变得很难被修复的时候才行动。
This chapter assumes that you know something about testing. Don't worry if you don't. This chapter assumes that you know something about testing. Don't worry if you don't.
There are plenty of books and online resources to get up to speed. There are plenty of books and online resources to get up to speed.
@ -751,13 +751,13 @@ a(href="#top").to-top 回到顶部
Optional `override...` methods can fine-tune aspects of the configuration. Optional `override...` methods can fine-tune aspects of the configuration.
默认配置只是测试应用的**基础**。 默认配置只是测试应用的**基础**。
使用定义额外imports、declarations、providers和schemas的对象来调用`TestBed.configureTestingModule`,以适合你的应用程序的测试 在`TestBed.configureTestingModule`中定义额外imports、declarations、providers和schemas的对象构建适合你的应用程序的测试环境
可选的`override...`方法可以微调配置的各个方面。 可选的`override...`方法可以微调配置的各个方面。
After configuring the `TestBed`, tell it to create an instance of the _component-under-test_ and the test fixture After configuring the `TestBed`, tell it to create an instance of the _component-under-test_ and the test fixture
that you'll need to inspect and control the component's immediate environment. that you'll need to inspect and control the component's immediate environment.
`TestBed`配置完成以后,用它创建**被测试的组件**的实例和测试fixture用来检查和控制组件周围的环境。 `TestBed`配置完成以后,用它创建**被测试的组件**的实例和测试fixture我们可以用它们检查和控制组件周围的环境。
+makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-before-each', 'app/banner.component.spec.ts (simplified)')(format='.') +makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-before-each', 'app/banner.component.spec.ts (simplified)')(format='.')
:marked :marked
@ -765,15 +765,15 @@ a(href="#top").to-top 回到顶部
simulate user activity, tell Angular to perform specific task (such as change detection), simulate user activity, tell Angular to perform specific task (such as change detection),
and see the effects of these actions both in the _component-under-test_ and in the test DOM. and see the effects of these actions both in the _component-under-test_ and in the test DOM.
Angular测试可以在测试DOM中与HTML互动模拟用户行为告诉Angular执行特定任务比如变换检测并在被测试的组件和测试DOM中查看这些行为的效果。 Angular测试可以在测试DOM中与HTML互动模拟用户行为Angular执行特定任务比如变换检测并在被测试的组件和测试DOM中查看这些行为的效果。
+makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-it', 'app/banner.component.spec.ts (simplified)')(format='.') +makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-it', 'app/banner.component.spec.ts (simplified)')(format='.')
:marked :marked
A comprehensive review of the Angular testing utilities appears [later in the chapter](#atu-apis). A comprehensive review of the Angular testing utilities appears [later in the chapter](#atu-apis).
Let's dive right into Angular testing, starting with the components of a sample application. Let's dive right into Angular testing, starting with the components of a sample application.
完整的关于Angular测试工具的回顾将会在[本章后面](#atu-apis)出现。 关于Angular测试工具的完整回顾将会在[本章后面](#atu-apis)出现。
让我们深入到Angular测试以例子应用的组件开始。 现在开始深入到Angular测试让我们以例子应用的组件开始。
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部 a(href="#top").to-top 回到顶部
@ -788,11 +788,11 @@ a(href="#top").to-top 回到顶部
This chapter tests a cut-down version of the _Tour of Heroes_ [tutorial app](../tutorial). This chapter tests a cut-down version of the _Tour of Heroes_ [tutorial app](../tutorial).
本章测试**简化**版本的**英雄指南**[教程应用程序](../tutorial)。 本章测试**简化版本的英雄指南**[教程应用程序](../tutorial)。
The following live example shows how it works and provides the complete source code. The following live example shows how it works and provides the complete source code.
下面的在线例子展示了它如何工作,并提供了完整的源代码。 下面的在线例子展示了它如何工作,并提供了完整的源代码。
<live-example embedded img="devguide/testing/app-plunker.png"></live-example> <live-example embedded img="devguide/testing/app-plunker.png"></live-example>
<br><br> <br><br>
@ -832,12 +832,12 @@ a(href="#top").to-top 回到顶部
it's perfect for a first encounter with the `TestBed`. it's perfect for a first encounter with the `TestBed`.
`BannerComponent`有内联模板和插值表达式绑定。 `BannerComponent`有内联模板和插值表达式绑定。
在真实应用场景中,这个组件可能过于简单,不值得测试。但是对于第一次接触`TestBed`它非常合适。 在真实应用场景中,这个组件可能过于简单,不值得测试。但是我们是第一次接触`TestBed`,所以用它非常合适。
The corresponding `app/banner-component.spec.ts` sits in the same folder as the component, The corresponding `app/banner-component.spec.ts` sits in the same folder as the component,
for reasons explained [here](#q-spec-file-location); for reasons explained [here](#q-spec-file-location);
对应的`app/banner-component.spec.ts`处于与组件相同的目录,原因在[这里](#q-spec-file-location)有所解释。 对应的`app/banner-component.spec.ts`在与组件相同的目录,参见[这里](#q-spec-file-location)的解释。
Start with ES6 import statements to get access to symbols referenced in the spec. Start with ES6 import statements to get access to symbols referenced in the spec.
@ -856,7 +856,7 @@ a(href="#top").to-top 回到顶部
`TestBed.configureTestingModule` takes an `@NgModule`-like metadata object. `TestBed.configureTestingModule` takes an `@NgModule`-like metadata object.
This one simply declares the component to test, `BannerComponent`. This one simply declares the component to test, `BannerComponent`.
`TestBed.configureTestingModule`接受像`@NgModule`元据的对象。 `TestBed.configureTestingModule`接受像`@NgModule`元据的对象。
这里的对象仅仅声明了要测试的组件`BannerComponent`。 这里的对象仅仅声明了要测试的组件`BannerComponent`。
It lacks `imports` because (a) it extends the default testing module configuration which It lacks `imports` because (a) it extends the default testing module configuration which
@ -873,7 +873,7 @@ a(href="#top").to-top 回到顶部
`TestBed.createComponent` creates an instance of `BannerComponent` to test and returns a [fixture](#component-fixture). `TestBed.createComponent` creates an instance of `BannerComponent` to test and returns a [fixture](#component-fixture).
`TestBed.createComponent`创建`BannerComponent`组件的实例用来测试和返回[fixture](#component-fixture)。 `TestBed.createComponent`创建`BannerComponent`组件的实例,可以用来测试和返回[fixture](#component-fixture)。
`TestBed.createComponent` closes the current `TestBed` instance to further configuration. `TestBed.createComponent` closes the current `TestBed` instance to further configuration.
You cannot call any more `TestBed` configuration methods, not `configureTestModule` You cannot call any more `TestBed` configuration methods, not `configureTestModule`
@ -919,7 +919,7 @@ a(href="#top").to-top 回到顶部
A query predicate receives a `DebugElement` and returns `true` if the element meets the selection criteria. A query predicate receives a `DebugElement` and returns `true` if the element meets the selection criteria.
**predicate**是返回布尔值的函数。 **predicate**是返回布尔值的函数。
predicate查询接受`DebugElement`,如果元素符合选择条件便返回`true`。 predicate查询接受`DebugElement`参数,如果元素符合选择条件便返回`true`。
:marked :marked
The **`By`** class is an Angular testing utility that produces useful predicates. The **`By`** class is an Angular testing utility that produces useful predicates.
@ -934,7 +934,7 @@ a(href="#top").to-top 回到顶部
Finally, the setup assigns the DOM element from the `DebugElement` **`nativeElement`** property to `el`. Finally, the setup assigns the DOM element from the `DebugElement` **`nativeElement`** property to `el`.
The tests will assert that `el` contains the expected title text. The tests will assert that `el` contains the expected title text.
最后,这个配置指定`DebugElement`中的**`nativeElement`DOM元素到属性`el`。 最后,这个配置指定`DebugElement`中的**`nativeElement`**DOM元素到属性`el`。
测试将判断`el`是否包含期待的标题文本。 测试将判断`el`是否包含期待的标题文本。
### The tests ### The tests
@ -1017,8 +1017,8 @@ a(href="#top").to-top 回到顶部
第二和第三个测试显示了一个重要的局限性。 第二和第三个测试显示了一个重要的局限性。
Angular测试环境**不会**知道测试改变了组件的`title`属性。 Angular测试环境**不会**知道测试改变了组件的`title`属性。
**自动检测**只对**异步行为**比如承诺的解析,计时器和DOM时间作出反应。 自动检测只对异步行为比如承诺的解析、计时器和DOM时间作出反应。
但是直接的组件属性值的同步更新是不会触发**自动检测**的。 但是直接修改组件属性值的这种同步更新是不会触发**自动检测**的。
测试必须手动调用`fixture.detectChange()`,来触发新一轮的变化检测周期。 测试必须手动调用`fixture.detectChange()`,来触发新一轮的变化检测周期。
.alert.is-helpful .alert.is-helpful
@ -1028,7 +1028,7 @@ a(href="#top").to-top 回到顶部
There is no harm in calling `detectChanges()` more often than is strictly necessary. There is no harm in calling `detectChanges()` more often than is strictly necessary.
与其怀疑测试工具会不会执行变化检测,本章中的例子**总是显式**调用`detectChanges()`。 与其怀疑测试工具会不会执行变化检测,本章中的例子**总是显式**调用`detectChanges()`。
频繁调用`detectChanges()`不理会是否真的需要是没有什么坏处 即使是在不需要的时候,频繁调用`detectChanges()`没有任何什么坏处。
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部 a(href="#top").to-top 回到顶部
@ -1045,7 +1045,7 @@ a(href="#top").to-top 回到顶部
The `WelcomeComponent` displays a welcome message to the logged in user. The `WelcomeComponent` displays a welcome message to the logged in user.
It knows who the user is based on a property of the injected `UserService`: It knows who the user is based on a property of the injected `UserService`:
组件经常有服务依赖。`WelcomeComponent`为登陆的用户显示一条欢迎信息。它从注入的`UserService`的属性知用户的身份: 组件经常有服务依赖。`WelcomeComponent`为登陆的用户显示一条欢迎信息。它从注入的`UserService`的属性知用户的身份:
+makeExample('testing/ts/app/welcome.component.ts', '', 'app/welcome.component.ts')(format='.') +makeExample('testing/ts/app/welcome.component.ts', '', 'app/welcome.component.ts')(format='.')
:marked :marked