translate: testing.jade to line 978

This commit is contained in:
rexebin 2016-09-22 19:33:03 +01:00
parent 2d2d6e963e
commit 32462a5af4
1 changed files with 41 additions and 2 deletions

View File

@ -560,7 +560,7 @@ a#atp-intro
你能,也应该为组件、指令、管道和服务等编写[孤立的单元测试](#testing-without-atp "Testing without the Angular Testing Platform")。 你能,也应该为组件、指令、管道和服务等编写[孤立的单元测试](#testing-without-atp "Testing without the Angular Testing Platform")。
孤立的单元测试独立自己检测类的实例不依靠Angular或者任何其他注入值。 孤立的单元测试独立自己检测类的实例不依靠Angular或者任何其他注入值。
测试器使用`new`创建一个类的测试实例,在需要时提供虚拟的构造函数参数并测试被测试实例的API。 测试器使用`new`创建一个类的测试实例,在需要时提供伪造的构造函数参数并测试被测试实例的API。
Isolated tests don't reveal how the class interacts with Angular. Isolated tests don't reveal how the class interacts with Angular.
In particular, they can't reveal how a component class interacts with its own template or with other components. In particular, they can't reveal how a component class interacts with its own template or with other components.
@ -881,51 +881,78 @@ a#component-with-dependency
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
The `WelcomeComponent` has decision logic that interacts with the service; The `WelcomeComponent` has decision logic that interacts with the service;
such logic makes this component worth testing. such logic makes this component worth testing.
Here's the test module configuration for the spec file, `app/welcome.component.spec.ts`: Here's the test module configuration for the spec file, `app/welcome.component.spec.ts`:
`WelcomeComponent`的决策逻辑与服务进行交互。这样的逻辑让这个组件值得测试。下面是测试配置文件的测试模块配置,`app/welcome.component.spec.ts`
+makeExample('testing/ts/app/welcome.component.spec.ts', 'config-test-module', 'app/welcome.component.spec.ts')(format='.') +makeExample('testing/ts/app/welcome.component.spec.ts', 'config-test-module', 'app/welcome.component.spec.ts')(format='.')
:marked :marked
This time, in addition to declaring the component under test, This time, in addition to declaring the component under test,
the configurations sets the `providers` list with the dependent `UserService`. the configurations sets the `providers` list with the dependent `UserService`.
这次,在测试里不但声明了组件,而且在`providers`数组中添加了`UserService`依赖。
This example configures the test module with a _fake_ `UserService`. This example configures the test module with a _fake_ `UserService`.
本例子用**伪造**的`UserService`来配置测试模块。
## Provide service fakes ## Provide service fakes
## 提供伪造的服务
A component under test doesn't have to be injected with real services. A component under test doesn't have to be injected with real services.
In fact, it is usually better if they are fakes. In fact, it is usually better if they are fakes.
The purpose of the spec is to test the component, not the service, The purpose of the spec is to test the component, not the service,
and real services can be trouble. and real services can be trouble.
被测试的组件不一定要注入真正的服务。实际上,伪造的服务通常会更加合适。
测试配置的主要目的是测试组件,而不是服务。真实的服务可能会有问题。
Injecting the real `UserService` could be a nightmare. Injecting the real `UserService` could be a nightmare.
The real service might try to ask the user for login credentials and The real service might try to ask the user for login credentials and
try to reach an authentication server. try to reach an authentication server.
These behaviors could be hard to intercept. These behaviors could be hard to intercept.
It is far easier to create and register a fake `UserService`. It is far easier to create and register a fake `UserService`.
注入真实的`UserService`有可能很麻烦。真实的服务可能询问用户登录凭据,也可能试图连接一个认证服务器。
可能很难拦截这些行为。所以创建和注册一个伪造的`UserService`更加容易。
There are many ways to fake a service. There are many ways to fake a service.
This test suit supplies a minimal `UserService` that satisfies the needs of the `WelcomeComponent` This test suit supplies a minimal `UserService` that satisfies the needs of the `WelcomeComponent`
and its tests: and its tests:
有很多方法创建一个伪造服务。本测试套件提供了一个最小化的`UserService`,满足`WelcomeComponent`和它的测试的需求:
+makeExample('testing/ts/app/welcome.component.spec.ts', 'fake-userservice')(format='.') +makeExample('testing/ts/app/welcome.component.spec.ts', 'fake-userservice')(format='.')
a#injected-service-reference a#injected-service-reference
:marked :marked
## Referencing injected services ## Referencing injected services
## 应用注入的服务
The tests need access to the injected (fake) `UserService`. The tests need access to the injected (fake) `UserService`.
测试需要访问被注入(伪造)的`UserService`。
You cannot reference the `fakeUserService` object provided to the test module. You cannot reference the `fakeUserService` object provided to the test module.
**It does not work!** **It does not work!**
Surprisingly, the instance actually injected into the component is _not the same_ Surprisingly, the instance actually injected into the component is _not the same_
as the provided `fakeUserService` object. as the provided `fakeUserService` object.
你不能引用测试模块提供的`fakeUserService`对象。**这样是行不通的!**。
奇怪的是,实际被注入到组件的的实例和提供的`fakeUserService`对象是**不是一样的**。
.alert.is-important .alert.is-important
:marked :marked
Always use an injector to get a reference to an injected service. Always use an injector to get a reference to an injected service.
总是使用一个注入器来获取一个被注入服务的引用。
:marked :marked
Where do you get the injector? Where do you get the injector?
Angular has an hierarchical injection system. Angular has an hierarchical injection system.
@ -933,11 +960,23 @@ a#injected-service-reference
The current `TestBed` injector creates a top-level injector. The current `TestBed` injector creates a top-level injector.
The `WelcomeComponent` injector is a child of that injector created specifically for the component. The `WelcomeComponent` injector is a child of that injector created specifically for the component.
到哪儿获取注入器呢?
Angular有一个层次化的注入系统。
在一个测试中,可以有很多层注入器。
当前的`TestBed`注入器创建一个顶层注入器。
`WelcomeComponent`注入器是在专门为这个组件创建的注入器的子级。
You can get a `UserService` from the current `TestBed` injector by calling `TestBed.get`. You can get a `UserService` from the current `TestBed` injector by calling `TestBed.get`.
你可以从当前的`TestBed`注入器中,通过调用`TestBed.get`来获取一个`UserService`。
+makeExample('testing/ts/app/welcome.component.spec.ts', 'inject-from-testbed', 'TestBed injector')(format='.') +makeExample('testing/ts/app/welcome.component.spec.ts', 'inject-from-testbed', 'TestBed injector')(format='.')
.l-sub-section .l-sub-section
:marked :marked
The [inject](#inject) function is another way to inject one or more services into a test. The [inject](#inject) function is another way to inject one or more services into a test.
:marked :marked
That happens to work for testing the `WelcomeComponent` because the `UserService` instance from the `TestBed` That happens to work for testing the `WelcomeComponent` because the `UserService` instance from the `TestBed`
is the same as the `UserService` instance injected into the component. is the same as the `UserService` instance injected into the component.