# 单元测试 本节中，我们继续使用`ng t`来开发教师编辑组件。让我们坐上时光机先回到本节的第一小节关于`ng t`仍然启动了Add组件的问题上。在本节的第一小节中，之所以`ng t`仍然显示的为Add组件，是由于Add组件单元测试文件中的`fdescribe`关键字，一个`f`表明强制执行该测试而忽略其它测试。所以我们可以通过移除Add组件的强制测试、同时在Edit组件对应的单元测试文件中加入`fdescribe`关键字来在单元测试中启动编辑组件。 使用`ng t`启动项目后将得到如下错误：  提示说：并没有找到`ActivatedRoute`的提供者。复习本节的第二小节得知，Angular内置的`RouterModule`可能提供`ActivatedRoute`: ## RouterTestingModule ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -1,6 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; +import {RouterModule} from '@angular/router'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -8,7 +9,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EditComponent] + declarations: [EditComponent], + imports: [RouterModule] }) .compileComponents(); }); ``` 保存代码后重新查看测试结果：  我们确认引用了能提供`ActivatedRoute`的`RouterModule`后，错误并未消失。这是由于：由在单元测试的理念是**以代码来验证代码**，而`RouterModule`提供的`ActivatedRoute`却做不到这一点，所以Angular为了准备了可以遵循**以代码来验证代码**的`RouterTestingModule`，其同样具有提供`ActivatedRoute`的能力，专门的适配于单元测试。 ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -1,6 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; +import {RouterTestingModule} from '@angular/router/testing'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -8,7 +9,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EditComponent] + declarations: [EditComponent], + imports: [RouterTestingModule] }) .compileComponents(); }); ``` 继续测试，错误如下：  ## HttpClientTestingModule 与专门用于测试的`RouterTestingModule`相同，Angular同样为我们准备了同样具体提供`HttpClient`能力的`HttpClientTestingModule`来替换`HttpClientModule`。 ```typescript +import {HttpClientTestingModule} from '@angular/common/http/testing'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -10,7 +11,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [EditComponent], - imports: [RouterTestingModule] + imports: [RouterTestingModule, + HttpClientTestingModule] }) .compileComponents(); }); ``` 对于Anguar而言，能够成功的完成依赖注入取决于模块是否拥有注入条件，比如要想成功完成Edit组件的依赖注入： ```typescript constructor(private activeRoute: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent) { } ``` 则当前测试专用动态测试模块需要拥有注入`ActivatedRoute`,`HttpClient`、`AppComponent`的能力，而这些能力具体是由谁提供的，Angular并不关心。  ## AppComponet 注入一个能提供AppComponet的provider(`HttpClientTestingModule`、`RouterTestingModule`、`HttpClientModule`、``RouterModule`都是provider )有多种方式，在此我们使用较简单的方式： ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; import {RouterTestingModule} from '@angular/router/testing'; import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {AppComponent} from '../app.component'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -12,7 +13,10 @@ fdescribe('EditComponent', () => { await TestBed.configureTestingModule({ declarations: [EditComponent], imports: [RouterTestingModule, - HttpClientTestingModule] + HttpClientTestingModule], + providers: [ + AppComponent + ] }) .compileComponents(); }); ``` 页面再次刷新后，显示错误消失。接下来查看控制台：  这是有两种依赖于第三方的声明方法：第一种是在构造函数中，第二种则是在V层模板中。我们在前面解决了在构造函数中的三个依赖，但没有解决模板中`[(ngModel)]`的依赖：`姓名：<input value="张三" name="name" [(ngModel)]="teacher.name">` 在此`[(ngModel)]`被称为一个指令，该指令可由Angular的`FormsModule`提供： ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -14,7 +14,8 @@ fdescribe('EditComponent', () => { await TestBed.configureTestingModule({ declarations: [EditComponent], imports: [RouterTestingModule, - HttpClientTestingModule], + HttpClientTestingModule, + FormsModule], providers: [ AppComponent ] ``` 再次查看界面，页面错误消息，控制台错误消失：  ## 未完待续 在以上几个providers的支持下，我们现在绝对可以单独的来测试当前编辑组件了。但是历史经验表明，在初始的学习阶段过多的强调单元测试，会无意中增加Angular的学习成本，这将使整个学习路径过于陡峭。 所以我们将在后续的章节中，逐步加强对单元测试的讲解。 | 名称 | 地址 | 备注 | | -------------------------- | ------------------------------------------------------------ | ---- | | 测试 -- 具有依赖的组件 | [https://angular.cn/guide/testing-components-scenarios#component-with-a-dependency](https://angular.cn/guide/testing-components-scenarios#component-with-a-dependency) | | | 测试 -- 对嵌套组件进行测试 | [https://angular.cn/guide/testing-components-scenarios#nested-component-tests](https://angular.cn/guide/testing-components-scenarios#nested-component-tests) | | | 测试 -- 路由目标组件 | [https://angular.cn/guide/testing-components-scenarios#routed-components](https://angular.cn/guide/testing-components-scenarios#routed-components) | | | 测试http请求 | [https://angular.cn/guide/http#testing-http-requests](https://angular.cn/guide/http#testing-http-requests) | | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.6.zip) | |