成功的對表單進行輸入后，本節我們開始按規范開發數據的提交功能。 ## 提交班級信息 ``` export class AddComponent implements OnInit { /*當發生請求錯誤時，顯示該信息*/ public static errorMessage = '數據保存失敗，這可能是由于網絡的原因引起的'; name: FormControl; teacherId: FormControl; /*當該值不為空時，可以顯示在前臺并提示用戶*/ message: string; constructor(private httpClient: HttpClient) { } ngOnInit() { this.name = new FormControl(''); this.teacherId = new FormControl(); } onSubmit(): void { const url = 'http://localhost:8080/Klass'; const klass = new Klass(undefined, this.name.value, new Teacher(parseInt(this.teacherId.value?, 10), undefined, undefined) ); this.httpClient.post(url, klass) .subscribe(() => { console.log('保存成功'); }, (response) => { console.log(`向${url}發起的post請求發生錯誤` + response); this.setMessage(AddComponent.errorMessage); }); } /** * 使用傳的值來設置message，并在1.5秒后將消息置空 * @param message 消息 */ private setMessage(message: string): void { this.message = message; setTimeout(() => { this.message = ''; }, 1500); } } ``` * ? FormController獲取的值的類型為string，Teacher中的ID的類型為number。使用parseInt(字符串，進制)將字符串轉為number使類型相匹配。 ## 測試 我們測試點保存按鈕點擊后，組件是否按預期提交了相應的請求： klass/add/add.component.spec.ts ``` /** * 設置表單數據 * 點擊按鈕發起請求 * 斷言：請求地址、請求方法、請求主體數據 */ fit('保存按鈕點擊后，提交相應的http請求', () => { httpTestingController = TestBed.get(HttpTestingController); expect(component).toBeTruthy(); component.name.setValue('test3'); component.teacherId.setValue('3'); fixture.whenStable().then(() => { const debugElement: DebugElement = fixture.debugElement; const submitButtonElement = debugElement.query(By.css('button')); const submitButton: HTMLButtonElement = submitButtonElement.nativeElement; submitButton.click(); const req = httpTestingController.expectOne('http://localhost:8080/Klass'); expect(req.request.method).toEqual('POST'); ? const klass: Klass = req.request.body.valueOf(); ? console.log(klass);? expect(klass.name).toEqual('test3');? expect(klass.teacher.id).toEqual(3);? }); }); ``` * ? 斷言請求方法為POST * ? 獲取請求主體數據 * ? 在終端及瀏覽器控制中中打印klass數據信息 * ? 斷言成功傳入了名稱及教師ID ``` LOG: Klass{id: undefined, name: 'test3', teacher: Teacher{id: 3, name: undefined, username: undefined, email: undefined, sex: undefined}} ? Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 10 SUCCESS (0 secs / 0.258 secs) LOG: Klass{id: undefined, name: 'test3', teacher: Teacher{id: 3, name: undefined, username: undefined, email: undefined, sex: undefin? Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 10 (skipped 9) SUCCESS (3.672 secs / 0.258 secs) TOTAL: 1 SUCCESS TOTAL: 1 SUCCESS ``` * ? 終端中打印的測試數據 * ? 瀏覽器打印日志  ## 模擬響應數據 klass/add/add.component.spec.ts ``` expect(klass.name).toEqual('test3'); expect(klass.teacher.id).toEqual(3); req.flush(null?, {status: 201?, statusText: 'Created'?}); ? }); ``` * ? 返回空數據。 * ? 新增成功，返回狀態碼201（行業慣例）。 * ? 返回對狀態碼的說明。 測試： ``` LOG: Klass{id: undefined, name: 'test3', teacher: Teacher{id: 3, name: undefined, username: undefined, email: undefined, sex: undefined}} Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 10 SUCCESS (0 secs / 0.097 secs) LOG: Klass{id: undefined, name: 'test3', teacher: Teacher{id: 3, name: undefined, username: undefined, email: undefined, sex: undefinLOG: '保存成功' Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 10 SUCCESS (0 secs / 0.097 secs) Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 10 (skipped 9) SUCCESS (0.121 secs / 0.097 secs) TOTAL: 1 SUCCESS TOTAL: 1 SUCCESS ``` > 最后，我們將測試完畢的方法名由`fit`變更為`it`。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.2) | - | | 測試http請求 | [https://www.angular.cn/guide/http#testing-http-requests](https://www.angular.cn/guide/http#testing-http-requests) | 10 | | TestRequest | [https://www.angular.cn/api/common/http/testing/TestRequest#request](https://www.angular.cn/api/common/http/testing/TestRequest#request) | 5 |