在最后的小節中，我們解決一下兩個小問題： ## 錯誤的單元測試 當我們修正所有的`fdescribe`及`fit`為`describe`及`it`，再運行`ng test`將啟用對項目的全局測試。一個用于生產的項目，是應該保證每次進行功能新增及功能變更時單元測試全部通過的。為了在以后我們的開發中也能達到此效果，我們修正下前期未做整理的單元測試。使用`ng test`來進行全局測試： ### 錯誤一 ``` AppComponent > should have as title 'web-app' Expected undefined to equal 'web-app'. Error: Expected undefined to equal 'web-app'. at <Jasmine> at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:26:23) ``` 修正app.component.spec.ts ``` import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); }); }); ``` ### 錯誤二 ``` IndexComponent > 測試V層的交互操作 Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <td>{{klass.name}}</td> <td>{{klass.teacher.name}}</td> <td><a [ERROR ->]routerLink="./edit/{{klass.id}}">編輯</a></td> </tr> </table> "): ng:///DynamicTestModule/IndexComponent.html@16:11 ``` 修正klass/index/index.component.ts ``` beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [IndexComponent], imports: [HttpClientTestingModule, FormsModule, RouterTestingModule] }) .compileComponents(); })); ``` ### 錯誤三  這是由于我們在選擇教師組件中的如下代碼，沒有進行前置判斷。 klass/teacher-select.component.ts ``` /** * 獲取所有的教師，并傳給V層 */ ngOnInit() { this.teacherSelect = new FormControl(); const url = 'http://localhost:8080/Teacher'; this.httpClient.get(url) .subscribe((teachers: Array<Teacher>) => { this.teachers = teachers; this.teachers.forEach((teacher: Teacher) => { if (this.teacher) { ? if (teacher.id === this.teacher.id) { this.teacherSelect.setValue(teacher); } } ? }); }); } ``` * 只有當傳入teacher時，才進行賦值。 除此以外，我們還可以使用更優化的如下方案： ``` /** * 獲取所有的教師，并傳給V層 */ ngOnInit() { this.teacherSelect = new FormControl(this.teacher); ? const url = 'http://localhost:8080/Teacher'; this.httpClient.get(url) .subscribe((teachers: Array<Teacher>) => { this.teachers = teachers; }); } /** * 比較函數，標識用哪個字段來比較兩個教師是否為同一個教師 * @param t1 源 * @param t2 目標 */ compareFn(t1: Teacher, t2: Teacher) { ? return t1 && t2 ? t1.id === t2.id : t1 === t2; } ``` * ? 直接使用teacher進行初始化 * ? 定義實體比較函數。即：當兩個實體的id相等時，我們認為這兩個實體是一樣的 然后將此`compareFn`方法對應添加到V層： ``` <select id="teacherSelect" [formControl]="teacherSelect" (change)="onChange()" [compareWith]="compareFn" ?> <option *ngFor="let teacher of teachers" [ngValue]="teacher"> {{teacher.name}} </option> </select> ``` * ? 定義判斷兩個對象是否相等的方法（當兩個對象的ID相同時便認為這兩個對象是相等的）  整體測試通過，其中有一個警告（黃色的點），我們暫時不理它。 > 在教程的4.7.7小節中對為何要使用compareWith進行判斷進行簡單的說明 ## 錯誤的導航 在班級新增及班級編輯組件中，我們點擊完確認按鈕后沒有如我們期望的跳轉到班級列表而是跳轉到了首頁。在一些資料的查找中，筆者并沒有找到更好的解決方案及該錯誤的產生的原因。雖然在我們也可以通過更正規的方法來解決這個問題，但在此我們仍然采用暴力的`hard code`方法來臨時解決下這個問題。 我們將班級新增及編輯中進行跳轉的代碼臨時改為： ``` this.router.navigateByUrl('', {relativeTo: this.route}); ? this.router.navigateByUrl('/klass'); ? ``` # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.7](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.7) | - | | SelectControlValueAccessor | [https://www.angular.cn/api/forms/SelectControlValueAccessor](https://www.angular.cn/api/forms/SelectControlValueAccessor) | 15 |