組件初始化后,單元測(cè)試如下:

錯(cuò)誤信息提示說(shuō)以`classId`命名的`FormControl`上沒(méi)有找到`value accessor`。如果以前報(bào)此類(lèi)錯(cuò)誤,我們有些茫然是正常的。但學(xué)習(xí)過(guò)自定義FormControl后,排醒此錯(cuò)誤便應(yīng)該有些眉目了。只所以發(fā)生上述錯(cuò)誤,是由于在V層中我們使用了如下代碼:
```html
<app-clazz-select formControlName="clazzId"></app-clazz-select>
```
上述錯(cuò)誤產(chǎn)生的根本原因是當(dāng)前動(dòng)態(tài)測(cè)試模塊并不認(rèn)識(shí)`app-clazz-select`,當(dāng)然就更不知道`app-clazz-select`是我們自定義的`FormControl`了。
## import
我們按下圖嘗試修正出現(xiàn)的單元測(cè)試的錯(cuò)誤:

在動(dòng)態(tài)測(cè)試模塊中引入班級(jí)選擇模塊:
```typescript
+++ b/first-app/src/app/student/add/add.component.spec.ts
@@ -2,6 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
import {AddComponent} from './add.component';
import {ReactiveFormsModule} from '@angular/forms';
+import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module';
describe('student -> AddComponent', () => {
let component: AddComponent;
@@ -11,7 +12,8 @@ describe('student -> AddComponent', () => {
await TestBed.configureTestingModule({
declarations: [AddComponent],
imports: [
- ReactiveFormsModule
+ ReactiveFormsModule,
+ ClazzSelectModule
]
})
```
`import`包括了`ClazzSelectComponent`組件的`ClazzSelectModule`后,錯(cuò)誤依舊:`app-clazz-select`仍然未被識(shí)別為`FormControl`。
一般這種情況是在創(chuàng)建自己定義組件時(shí)沒(méi)有完全符合以下兩種規(guī)范造成的:
- 組件未實(shí)現(xiàn)`ControlValueAccessor`接口
- 組件未`provider` -> `NG_VALUE_ACCESSOR`
對(duì)于有單元測(cè)試的我們而言,上述兩種情況都不大可能,因?yàn)樵诎嗉?jí)選擇組件的單元測(cè)試中,我們?cè)诟附M件中對(duì)其進(jìn)行了測(cè)試:
```typescript
first-app/src/app/clazz/clazz-select/clazz-select.component.spec.ts
@Component({
template: `
<app-clazz-select [formControl]="clazzId"></app-clazz-select>`
})
class TestComponent {
clazzId = new FormControl();
}
```
這說(shuō)明`app-clazz-select`必然是符合`FormControl`規(guī)范的。
## 私有與公有
要解決這個(gè)問(wèn)題,就要談?wù)勀K中的組件、指令和管道的公有**與**私有**了。
默認(rèn)情況下處于模塊`declarations`聲明中的組件、指令和管道都是**私有**的,在當(dāng)前模塊的任意組件中可以自由地使用它們。而當(dāng)模塊(A)被`import`進(jìn)入其它模塊(B)時(shí),由于A模塊中元素的**私有**性,B模塊無(wú)法使用A模塊中的任意私有元素(組件、指令和管道)。
所以在當(dāng)前的代碼下,進(jìn)行`imports`時(shí),實(shí)際如下圖所示:

如上圖所示:私有的班級(jí)選擇組件并沒(méi)有成功的并引入到動(dòng)態(tài)測(cè)試模塊中來(lái),所以動(dòng)態(tài)測(cè)試模塊并無(wú)法解析`app-clazz-select`,當(dāng)然就更別談將其做為`FormControl`來(lái)看待了。
## exports
若想將Angular中的組件、指令和管道設(shè)置為公有的,則需要將其添加到`exports`中:
```typescript
+++ b/first-app/src/app/clazz/clazz-select/clazz-select.module.ts
@@ -9,6 +9,9 @@ import {ReactiveFormsModule} from '@angular/forms';
imports: [
CommonModule,
ReactiveFormsModule
+ ],
+ exports: [
+ ClazzSelectComponent
]
})
export class ClazzSelectModule {
```
此時(shí)`ClazzSelectComponent`的屬性變更為**公有**,當(dāng)動(dòng)態(tài)測(cè)試模塊引入班級(jí)選擇模塊時(shí)便開(kāi)始同步引入了這個(gè)班級(jí)選擇組件了。當(dāng)然也就認(rèn)識(shí)了`app-clazz-select`,以及感知到其是一個(gè)合格的`FormControl`了。

此時(shí)不能識(shí)別為`FormControl`的錯(cuò)誤消失,轉(zhuǎn)而顯示新的錯(cuò)誤如下:

加入MockApi后錯(cuò)誤消失:
```typescript
+++ b/first-app/src/app/student/add/add.component.spec.ts
@@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
import {AddComponent} from './add.component';
import {ReactiveFormsModule} from '@angular/forms';
import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module';
+import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module';
describe('student -> AddComponent', () => {
let component: AddComponent;
@@ -13,7 +14,8 @@ describe('student -> AddComponent', () => {
declarations: [AddComponent],
imports: [
ReactiveFormsModule,
- ClazzSelectModule
+ ClazzSelectModule,
+ MockApiTestingModule
]
})
.compileComponents();
```
最終效果如下:

最后,手動(dòng)的發(fā)送后面的模擬數(shù)據(jù),并重新渲染V層,以使班級(jí)選擇組件中默認(rèn)有數(shù)據(jù)可選:
```typescript
+++ b/first-app/src/app/student/add/add.component.spec.ts
@@ -30,5 +30,7 @@ describe('student -> AddComponent', () => {
fit('should create', () => {
expect(component).toBeTruthy();
+ getTestScheduler().flush();
+ fixture.detectChanges();
});
});
```

| 名稱(chēng) | 鏈接 |
| ---------------- | ------------------------------------------------------------ |
| `imports` 數(shù)組 | [https://angular.cn/guide/bootstrapping#the-imports-array](https://angular.cn/guide/bootstrapping#the-imports-array) |
| `exports` | [https://angular.cn/api/core/NgModule#exports](https://angular.cn/api/core/NgModule#exports) |
| 共享特性模塊 | [https://angular.cn/guide/sharing-ngmodules#sharing-modules](https://angular.cn/guide/sharing-ngmodules#sharing-modules) |
| 本節(jié)源碼(含答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.1.zip) |
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴(lài)注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶(hù)登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類(lèi)
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷(xiāo)
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)