fix: patching up testing.jade line 1133

This commit is contained in:
Zhimin YE (Rex) 2016-09-23 17:01:03 +01:00
parent 3e1408792e
commit a809a5922e
1 changed files with 219 additions and 38 deletions

View File

@ -22,47 +22,73 @@ block includes
1. [Introduction to Angular Testing](#testing-intro) 1. [Introduction to Angular Testing](#testing-intro)
1. [Angular测试入门](#testing-intro) 1. [Angular测试入门](#testing-intro)
<br><br> <br>
1. [Setup](#setup) 1. [Setup](#setup)
1. [搭建测试环境](#setup) 1. [搭建测试环境](#setup)
- [setup files](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config` - [setup files](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`
- [文件配置](#setup-files): `karma.conf`, `karma-test-shim`, `systemjs.config`
- [npm packages](#npm-packages) - [npm packages](#npm-packages)
- [npm 包](#npm-packages)
1. [The first karma test](#1st-karma-test) 1. [The first karma test](#1st-karma-test)
1. [第一个Karma测试](#1st-karma-test) 1. [第一个Karma测试](#1st-karma-test)
<br>
<br><br>
1. [Introduction to the Angular testing utilities](#atu-intro) 1. [Introduction to the Angular testing utilities](#atu-intro)
1. [Angular测试工具](#atu-intro) 1. [Angular测试工具](#atu-intro)
<br>
<br><br>
1. [The sample application and its tests](#sample-app) 1. [The sample application and its tests](#sample-app)
1. [例子应用及其测试](#sample-app) 1. [例子应用及其测试](#sample-app)
<br>
<br><br>
1. [A simple component test](#simple-component-test) 1. [A simple component test](#simple-component-test)
1. [一个简单的组件测试](#simple-component-test) 1. [一个简单的组件测试](#simple-component-test)
- [_configureTestingModule_](#configure-testing-module) - [_configureTestingModule_](#configure-testing-module)
- [_configureTestingModule_](#configure-testing-module)
- [_createComponent_](#create-component) - [_createComponent_](#create-component)
- [_createComponent_](#create-component)
- [_ComponentFixture_, _DebugElement_, _query(By.css)_](#component-fixture) - [_ComponentFixture_, _DebugElement_, _query(By.css)_](#component-fixture)
- [_ComponentFixture_, _DebugElement_, _query(By.css)_](#component-fixture)
- [_detectChanges_](#detect-changes) - [_detectChanges_](#detect-changes)
- [_detectChanges_](#detect-changes)
- [_autoDetectChanges_](#auto-detect-changes)
- [_autoDetectChanges_](#auto-detect-changes) - [_autoDetectChanges_](#auto-detect-changes)
1. [Test a component with a service dependency](#component-with-dependency) 1. [Test a component with a service dependency](#component-with-dependency)
1. [测试拥有服务依赖的组件](#component-with-dependency) 1. [测试拥有服务依赖的组件](#component-with-dependency)
- [test doubles](#service-test-doubles) - [test doubles](#service-test-doubles)
- [测试复制品](#service-test-doubles)
- [get the injected service](#get-injected-service) - [get the injected service](#get-injected-service)
- [获取注入的服务](#get-injected-service)
- [_TestBed.get_](#testbed-get)
- [_TestBed.get_](#testbed-get) - [_TestBed.get_](#testbed-get)
1. [Test a component with an async service](#component-with-async-service) 1. [Test a component with an async service](#component-with-async-service)
@ -70,56 +96,139 @@ block includes
1. [测试拥有异步服务的组件](#component-with-async-service) 1. [测试拥有异步服务的组件](#component-with-async-service)
- [spies](#service-spy) - [spies](#service-spy)
- [spies](#service-spy)
- [_async_](#async) - [_async_](#async)
- [_async_](#async)
- [_whenStable_](#when-stable) - [_whenStable_](#when-stable)
- [_whenStable_](#when-stable)
- [_fakeAsync_](#async) - [_fakeAsync_](#async)
- [_fakeAsync_](#async)
- [_tick_](#tick) - [_tick_](#tick)
- [_tick_](#tick)
- [_jasmine.done_](#jasmine-done) - [_jasmine.done_](#jasmine-done)
- [_jasmine.done_](#jasmine-done)
1. [Test a component with an external template](#component-with-external-template) 1. [Test a component with an external template](#component-with-external-template)
1. [测试拥有外部模板的组件](#component-with-external-template) 1. [测试拥有外部模板的组件](#component-with-external-template)
- [_async_](#async-in-before-each) in `beforeEach` - [_async_](#async-in-before-each) in `beforeEach`
- [_async_](#async-in-before-each) in `beforeEach`
- [_compileComponents_](#compile-components) - [_compileComponents_](#compile-components)
- [_compileComponents_](#compile-components)
1. [Test a component with inputs and outputs](#component-with-inputs-output) 1. [Test a component with inputs and outputs](#component-with-inputs-output)
1. [测试拥有导入inputs和导出outputs的组件](#component-with-inputs-output) 1. [测试拥有导入inputs和导出outputs的组件](#component-with-inputs-output)
- [_triggerEventHandler_](#trigger-event-handler) - [_triggerEventHandler_](#trigger-event-handler)
- [_triggerEventHandler_](#trigger-event-handler)
1. [Test a component inside a test host component](#component-inside-test-host) 1. [Test a component inside a test host component](#component-inside-test-host)
1. [在宿主组件中测试组件](#component-inside-test-host) 1. [在宿主组件中测试组件](#component-inside-test-host)
<br><br> <br>
1. [Test a routed component](#routed-component) 1. [Test a routed component](#routed-component)
1. [测试路由组件](#routed-component) 1. [测试路由组件](#routed-component)
- [_inject_](#inject) - [_inject_](#inject)
- [_inject_](#inject)
1. [Test a routed component with parameters](#routed-component-w-param) 1. [Test a routed component with parameters](#routed-component-w-param)
1. [测试一个带有参数的被路由的组件](#routed-component-w-param)
- [_Observable_ test double](#stub-observable) - [_Observable_ test double](#stub-observable)
- [**可观察**测试复制品](#stub-observable)
1. [Use a _page_ object to simplify setup](#page-object) 1. [Use a _page_ object to simplify setup](#page-object)
<br><br>
1. [使用**page**对象来简化配置](#page-object)
<br>
1. [Setup with module imports](#import-module) 1. [Setup with module imports](#import-module)
<br><br>
1. [用模块的导入进行配置](#import-module)
<br>
1. [Override component providers](#component-override) 1. [Override component providers](#component-override)
<br><br>
1. [替换组件提供商](#component-override)
<br>
1. [Test a _RouterOutlet_ component](#router-outlet-component) 1. [Test a _RouterOutlet_ component](#router-outlet-component)
1. [测试一个**RouterOutlet**组件](#router-outlet-component)
- [stubbing unneeded components](#stub-component) - [stubbing unneeded components](#stub-component)
- [伪造不需要的组件](#stub-component)
- [Stubbing the _RouterLink_](#router-link-stub) - [Stubbing the _RouterLink_](#router-link-stub)
- [伪造_RouterLink_](#router-link-stub)
- [_By.directive_ and injected directives](#by-directive) - [_By.directive_ and injected directives](#by-directive)
- [_By.directive_和注入的指令](#by-directive)
1. ["Shallow" component tests with *NO\_ERRORS\_SCHEMA*](#shallow-component-test) 1. ["Shallow" component tests with *NO\_ERRORS\_SCHEMA*](#shallow-component-test)
<br><br>
1. [使用*NO\_ERRORS\_SCHEMA*来“浅化”组件测试](#shallow-component-test)
<br>
1. [Test an attribute directive](#attribute-directive) 1. [Test an attribute directive](#attribute-directive)
<br><br>
1. [测试属性指令](#attribute-directive)
<br>
1. [Isolated unit tests](#isolated-unit-tests "Unit testing without the Angular testing utilities") 1. [Isolated unit tests](#isolated-unit-tests "Unit testing without the Angular testing utilities")
- [Services](#isolated-service-tests)
- [Pipes](#isolated-pipe-tests) 1. [隔离的单元测试](#isolated-unit-tests "Unit testing without the Angular testing utilities")
- [Components](#isolated-component-tests)
- [服务](#isolated-service-tests)
- [管道](#isolated-pipe-tests)
- [组件](#isolated-component-tests)
1. [Angular testing utility APIs](#atu-apis) 1. [Angular testing utility APIs](#atu-apis)
1. [Angular测试工具APIs](#atu-apis)
- [Stand-alone functions](#atu-apis): `async`, `fakeAsync`, etc. - [Stand-alone functions](#atu-apis): `async`, `fakeAsync`, etc.
- [独立函数](#atu-apis): `async`, `fakeAsync`, etc.
- [_TestBed_](#testbed-class-summary) - [_TestBed_](#testbed-class-summary)
- [_TestBed_](#testbed-class-summary)
- [_ComponentFixture_](#component-fixture-class-summary) - [_ComponentFixture_](#component-fixture-class-summary)
- [_ComponentFixture_](#component-fixture-class-summary)
- [_DebugElement_](#debug-element-details)
- [_DebugElement_](#debug-element-details) - [_DebugElement_](#debug-element-details)
1. [FAQ](#faq "Frequently asked questions") 1. [FAQ](#faq "Frequently asked questions")
@ -432,12 +541,21 @@ code-example(format="." language="bash").
:marked :marked
The command compiles the application and test code and starts karma. The command compiles the application and test code and starts karma.
Both processes watch pertinent files, write messages to the console, and re-run when they detect changes. Both processes watch pertinent files, write messages to the console, and re-run when they detect changes.
该命令编译应用及其测试代码并启动Karma。
两个进程都监视相关文件,往控制台输入信息和检测到变化时自动重新运行。
.l-sub-section .l-sub-section
:marked :marked
The QuickStart development path defined the `test` command in the `scripts` section of npm's `package.json`. The QuickStart development path defined the `test` command in the `scripts` section of npm's `package.json`.
The Angular CLI has different commands to do the same thing. Adjust accordingly. The Angular CLI has different commands to do the same thing. Adjust accordingly.
《快速开始》在npm的`package.json`中的`scripts`里定义了`test`命令。
Angular CLI使用不同的命令来做同样的事情。对不同的环境采取不同的方案。
:marked :marked
After a few moments, karma opens a browser and starts writing to the console. After a few moments, karma opens a browser and starts writing to the console.
等一小段时间后Karma便打开浏览器并开始向控制台输出。
figure.image-display figure.image-display
img(src='/resources/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser") img(src='/resources/images/devguide/testing/karma-browser.png' style="width:400px;" alt="Karma browser")
:marked :marked
@ -520,6 +638,8 @@ code-example(format="." language="bash").
- Click the "DEBUG" button; it opens a new browser tab and re-runs the tests - Click the "DEBUG" button; it opens a new browser tab and re-runs the tests
- 点击“DEBUG”按钮它打开一个新的浏览器标签页并重新开始运行测试
- Open the browser's “Developer Tools” (F12 or Ctrl-Shift-I). - Open the browser's “Developer Tools” (F12 or Ctrl-Shift-I).
- 打开浏览器的“Developer Tools”(F12或者Ctrl-Shift-I)。 - 打开浏览器的“Developer Tools”(F12或者Ctrl-Shift-I)。
@ -551,6 +671,8 @@ a(href="#top").to-top 回到顶部
:marked :marked
# Introduction to the Angular Testing Utilities # Introduction to the Angular Testing Utilities
# Angular测试工具入门
Many tests explore how applications classes interact with Angular and the DOM while under Angular's control. Many tests explore how applications classes interact with Angular and the DOM while under Angular's control.
许多测试探索应用的类在被`Angular`控制时,是如何与`Angular`和`DOM`互动的。 许多测试探索应用的类在被`Angular`控制时,是如何与`Angular`和`DOM`互动的。
@ -578,6 +700,9 @@ a(href="#top").to-top 回到顶部
测试器使用`new`创建一个类的测试实例在需要时提供用于测试的构造函数参数复制品并测试被测试实例的API。 测试器使用`new`创建一个类的测试实例在需要时提供用于测试的构造函数参数复制品并测试被测试实例的API。
You can and should write isolated unit tests for pipes and services. You can and should write isolated unit tests for pipes and services.
你可以,也应该为服务和管道编写孤立的单元测试。
+makeExample('testing/ts/app/shared/title-case.pipe.spec.ts', 'mini-excerpt', 'app/shared/title-case.pipe.spec.ts (excerpt)') +makeExample('testing/ts/app/shared/title-case.pipe.spec.ts', 'mini-excerpt', 'app/shared/title-case.pipe.spec.ts (excerpt)')
:marked :marked
Components can be tested in isolation as well. Components can be tested in isolation as well.
@ -607,19 +732,31 @@ a(href="#top").to-top 回到顶部
The base state includes a default testing module configuration consisting of the The base state includes a default testing module configuration consisting of the
declarables (components, directives, and pipes) and providers (some of them mocked) declarables (components, directives, and pipes) and providers (some of them mocked)
that almost everyone needs. that almost everyone needs.
在每个测试之前,`TestBed`将自己重设为初始状态。
这个初始状态包含了一个默认的、几乎所有情况都需要的测试模块配置,包括可声明类(组件、指令和管道)和提供商(其中一些是伪造的)。
.l-sub-section .l-sub-section
:marked :marked
The testing shims mentioned [earlier](#setup) initialize the testing module configuration The testing shims mentioned [earlier](#setup) initialize the testing module configuration
to something like the `BrowserModule` from `@angular/platform-browser`. to something like the `BrowserModule` from `@angular/platform-browser`.
[之前](#setup)提到的测试垫片初始化测试模块配置到一个模块,这个模块和`@angular/platform-browser`中的`BrowserModule`类似。
:marked :marked
This default configuration is merely a _foundation_ for testing an app. This default configuration is merely a _foundation_ for testing an app.
You call `TestBed.configureTestingModule` with an object that defines additional imports, declarations, providers and schemas You call `TestBed.configureTestingModule` with an object that defines additional imports, declarations, providers and schemas
to fit your application tests. to fit your application tests.
Optional `override...` methods can fine-tune aspects of the configuration. Optional `override...` methods can fine-tune aspects of the configuration.
默认配置只是测试一个应用的**基础**。
使用一个定义额外inports、declarations、providers和schemas的对象来调用`TestBed.configureTestingModule`,以适合你的应用程序的测试。
可选的`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用来检查和控制组件周围的环境。
+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
Angular tests can interact with the HTML in the test DOM, Angular tests can interact with the HTML in the test DOM,
@ -729,15 +866,25 @@ a(href="#top").to-top 回到顶部
#create-component #create-component
:marked :marked
### _createComponent_ ### _createComponent_
### _createComponent_
`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` 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`
nor any of the `override...` methods. The `TestBed` throws an error if you try. nor any of the `override...` methods. The `TestBed` throws an error if you try.
`TestBed.createComponent`关闭当前`TestBed`实例,让它不能再被配置。
你不能再调用`TestBed`的配置方法,也不能调用`configureTestingModule`或者任何`override...`方法,否则`TestBed`会抛出一个错误。
.alert.is-important .alert.is-important
:marked :marked
Do not configure the `TestBed` after calling `createComponent`. Do not configure the `TestBed` after calling `createComponent`.
不要再调用`createComponent`之后试图配置`TestBed`。
#component-fixture #component-fixture
:marked :marked
### _ComponentFixture_, _DebugElement_, and _query(By.css)_ ### _ComponentFixture_, _DebugElement_, and _query(By.css)_
@ -747,33 +894,54 @@ a(href="#top").to-top 回到顶部
to the **`DebugElement`** which is a handle on the component's DOM element. to the **`DebugElement`** which is a handle on the component's DOM element.
`createComponent`方法返回一个**`ComponentFixture`**,用来控制和访问已创建的组件所在的测试环境。 `createComponent`方法返回一个**`ComponentFixture`**,用来控制和访问已创建的组件所在的测试环境。
这个工具提供了对组件实例自身的访问同时还提供了用来访问组件的DOM元素的**`DebugElement`**对象。 这个fixture提供了对组件实例自身的访问同时还提供了用来访问组件的DOM元素的**`DebugElement`**对象。
The `title` property value was interpolated into the DOM within `<h1>` tags. The `title` property value was interpolated into the DOM within `<h1>` tags.
Use the fixture's `DebugElement` to `query` for the `<h1>` element by CSS selector. Use the fixture's `DebugElement` to `query` for the `<h1>` element by CSS selector.
`title`属性被插值到DOM的`<h1>`标签中。
用CSS选择器从fixture的`DebugElement`中`query``<h1>`元素。
The **`query`** method takes a predicate function and searches the fixture's entire DOM tree for the The **`query`** method takes a predicate function and searches the fixture's entire DOM tree for the
_first_ element that satisfies the predicate. _first_ element that satisfies the predicate.
The result is a _different_ `DebugElement`, one associated with the matching DOM element. The result is a _different_ `DebugElement`, one associated with the matching DOM element.
**`query`**方法接受一个predicate函数并搜索fixture的整个DOM树试图寻找**第一个**满足predicate函数的元素。
.l-sub-section .l-sub-section
:marked :marked
The `queryAll` method returns an array of _all_ `DebugElements` that satisfy the predicate. The `queryAll` method returns an array of _all_ `DebugElements` that satisfy the predicate.
`queryAll`方法返回一个数组,包含所有`DebugElement`中满足predicate的元素。
A _predicate_ is a function that returns a boolean. A _predicate_ is a function that returns a boolean.
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接受一个`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.
Its `By.css` static method produces a Its `By.css` static method produces a
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" target="_blank">standard CSS selector</a> <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" target="_blank">standard CSS selector</a>
predicate that filters the same way as a jQuery selector. predicate that filters the same way as a jQuery selector.
**`By`**类是一个Angular测试工具它生成有用的predicate。
它的`By.css`静态方法产生一个<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" target="_blank">标准CSS选择器</a>
predicate与JQuery选择器相同的方式过滤。
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`。
测试将判断`el`是否包含期待的标题文本。
### The tests ### The tests
### 测试
Jasmine runs the `beforeEach` function before each of these tests Jasmine runs the `beforeEach` function before each of these tests
再每个测试之前Jasmin都一次运行`beforeEach`函数:
+makeExample('testing/ts/app/banner.component.spec.ts', 'tests', 'app/banner.component.spec.ts (tests)')(format='.') +makeExample('testing/ts/app/banner.component.spec.ts', 'tests', 'app/banner.component.spec.ts (tests)')(format='.')
:marked :marked
These tests ask the `DebugElement` for the native HTML element to satisfy their expectations. These tests ask the `DebugElement` for the native HTML element to satisfy their expectations.
@ -942,17 +1110,30 @@ a(href="#top").to-top 回到顶部
The safest way to get the injected service, the way that **_always works_**, The safest way to get the injected service, the way that **_always works_**,
is to **get it from the injector of the _component-under-test_**. is to **get it from the injector of the _component-under-test_**.
The component injector is a property of the fixture's `DebugElement`. The component injector is a property of the fixture's `DebugElement`.
最安全的获取注入的服务和**总是有效**的方法,是**从被测试的组件的注入器获取**。
组件注入器是fixture的`DebugElement`的一个属性。
+makeExample('testing/ts/app/welcome.component.spec.ts', 'injected-service', 'WelcomeComponent\'s injector')(format='.') +makeExample('testing/ts/app/welcome.component.spec.ts', 'injected-service', 'WelcomeComponent\'s injector')(format='.')
#testbed-get #testbed-get
:marked :marked
### _TestBed.get_ ### _TestBed.get_
### _TestBed.get_
You _may_ also be able to get the service from the root injector via `TestBed.get`. You _may_ also be able to get the service from the root injector via `TestBed.get`.
This is easier to remember and less verbose. This is easier to remember and less verbose.
But it only works when Angular injects the component with the service instance in the test's root injector. But it only works when Angular injects the component with the service instance in the test's root injector.
Fortunately, in this test suite, the _only_ provider of `UserService` is the root testing module, Fortunately, in this test suite, the _only_ provider of `UserService` is the root testing module,
so it is safe to call `TestBed.get` as follows: so it is safe to call `TestBed.get` as follows:
你**可以**通过`TestBed.get`方法来从根注入器中获取服务。
它更容易被记住,也更加简介。
But it only works when Angular injects the component with the service instance in the test's root injector.
Fortunately, in this test suite, the _only_ provider of `UserService` is the root testing module,
so it is safe to call `TestBed.get` as follows:
+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