2 動態數據綁定【前】 · SpringBoot+Angular入門實例教程

在前面教師管理的功能開發中，我們已經有了獲取教師管理的接口，該規范為： `GET /Teacher/` 當查詢數據成功后返回教師列表信息，在此我們直接使用該接口。 ## 先寫斷言按照TDD測試驅動開發的理論，在進行某個功能開發以前首先需要清晰明了的知道自己想要的內容是什么，而想要的內容是什么則可以通過寫測試代碼來描述出來。所以測試代碼應該在功能代碼以前。但在實際的開發中，TDD的開發對我們的功底要求比較高，在此我們嘗試使用這種理論進行本小節動態獲取后臺教師列表數據的功能開發。 klass/teacher-select/teacher-select.component.spec ``` /*斷言發請了后臺請求，模擬返回數據后，斷言V層的select個數為2*/ fit('獲取教師列表后選擇教師', () => { expect(component).toBeTruthy(); const httpTestingController: HttpTestingController = TestBed.get(HttpTestingController); const req = httpTestingController.expectOne('http://localhost:8080/Teacher'); expect(req.request.method).toEqual('GET'); const teachers = new Array(new Teacher(1, 'panjie', '潘杰'), new Teacher(2, 'zhangxishuo', '張喜碩')); req.flush(teachers); fixture.detectChanges(); ① const htmlSelectElement: HTMLSelectElement? = fixture.debugElement.query(By.css('#teacherSelect')).nativeElement; expect(htmlSelectElement.length).toBe(2); ? }); ``` * ① 很重要，獲取HTML元素前，必須重新渲染V層。 * ? 聲明該HTML元素的類型（很有必要，這將減少在后續代碼中書寫的錯誤率）。 * ? 斷言select中有兩個option ## 再寫功能代碼有了斷言后，我們再根據斷言的提示信息來寫功能代碼。這像極了軟件開發的過程：1. 甲方提需求 2. 我們按需求開發功能 3. 功能與需求相吻合開發完成。 ``` Chrome 78.0.3904 (Mac OS X 10.13.6) TeacherSelectComponent 獲取教師列表后選擇教師 FAILED Error: Expected one matching request for criteria "Match URL: http://localhost:8080/Teacher", found none. ``` 報錯說，我們期望組件發起一個`http://localhost:8080/Teacher`的請求，但是一個也沒有找到。我們補充C層代碼： ``` constructor(private httpClient: HttpClient) { } /** * 獲取所有的教師，并傳給V層 */ ngOnInit() { this.teacherSelect = new FormControl(); const url = 'http://localhost:8080/Teacher'; this.httpClient.get(url) .subscribe((teachers: Array<Teacher>) => { this.teachers = teachers; }); } ``` ### 完善測試最后對option中的值進行測試，看是否正確的將教師姓名進行展示： ``` const teachers = new Array(new Teacher(1, 'panjie', '潘杰'), new Teacher(2, 'zhangxishuo', '張喜碩')); ① ... /*斷言發請了后臺請求，模擬返回數據后，斷言V層的select個數為2*/ fit('獲取教師列表后選擇教師', () => { expect(component).toBeTruthy(); const httpTestingController: HttpTestingController = TestBed.get(HttpTestingController); const req = httpTestingController.expectOne('http://localhost:8080/Teacher'); expect(req.request.method).toEqual('GET'); req.flush(teachers); fixture.detectChanges(); const htmlSelectElement: HTMLSelectElement = fixture.debugElement.query(By.css('#teacherSelect')).nativeElement; expect(htmlSelectElement.length).toBe(2); testOptionValue(htmlSelectElement); ② }); /** * 斷言option的值與teacher中name的相同 * 循環teachers數組。斷言與option的值一一相等 * @param htmlSelectElement html元素 */ const testOptionValue = (htmlSelectElement: HTMLSelectElement) => { ② const htmlOptionElements: HTMLCollectionOf<HTMLOptionElement>? = htmlSelectElement.options; for (let i = 0; i < teachers.length; i++) { const htmlOptionElement: HTMLOptionElement = htmlOptionElements.item(i); console.log(htmlOptionElement.text); expect(htmlOptionElement.text).toEqual(teachers[i].name); } }; ``` * ① 抽離公共的變量 * ② 定義子函數并調用 * ? 返回值的類型請參閱本小節最小方的官方文檔 #### 測試 ``` LOG: '潘杰' Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 0 of 12 SUCCESS (0 secs / 0 secs) LOG: '張喜碩' Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 0 of 12 SUCCESS (0 secs / 0 secs) Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 1 of 12 (skipped 11) SUCCESS (0.115 secs / 0.095 secs) TOTAL: 1 SUCCESS TOTAL: 1 SUCCESS ``` # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.5.2) | - | | HTMLSelectElement | [https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | 5 | | HTMLSelectElement.options | [https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options) | 5 |