Component 帶有巢狀 HTML
Case: 巢狀 HTML； 路徑: cases/component/nested
File name: nested.component.html
一般比較少會去測試 HTML 的 render，但當你真的想測的時候，就可以參考一下的做法，先建立一個 div 然後他的 child 有一個 p，如下:
File name: nested.component.ts
接著我們在 component 中放入一個變數 nested 和第一個 <P> binding 以便後續做 render test
File name: nested.component.spec.ts
Step-1. 跟之前說的一樣，在 beforeEach 每次跑測試之前，執行一次初始化 component。
Step-2. 一如既往的先測 component 能否被初始化。
Step-3. 從被實例化的 component，呼叫 nativeElement 去拿對應的 child 並確認值是否正確，非常的簡單，多層也是如此。
Custom element
當我們想測試的 element 是自定義的，像是拆成 web component 後，非 html 原生的 element，將它們掛入測試時， Angular 會不留情的噴錯給你，因為它不認得這些東西，我們來看看怎麼做測試
Case: Custom element； 路徑: cases/component/custom-element
File name: custom-element.component.html
上例以掛入先前自定義的 app-counter 計數器 component 來做演示
File name: custom-element.component.spec.ts
在這個 spec 檔中，會有兩種 type 的處理方法，要達到的目的都是一樣的，它們說明如下:
- First type: NO_ERRORS_SCHEMA，這是官方提供的工具，可以讓 Angular 照單全收所有掛入的 element 不報錯，詳細可看[這邊]，要使用只要在 TestBed 初始化時在 schemas 掛入即可。
- Second type: Component Decorator，等於 import 自定義的 component 進來做初始化，要這樣用記得在 TestBed 同時掛入要用到的全部元件。
至於以上兩種方式就看自己取捨，我個人是偏好第一種較簡潔。
Step-1. 跟前述都一樣，在 beforeEach 每次跑測試之前，執行一次初始化 component。
Step-2. 一如既往的先測 component 能否被初始化。
Step-3. 和巢狀情境一樣，使用實例化出來的component nativeElement 去取得測是 child，並判斷值是否正確即可。
Component 帶有動態 value
有時候 component 會用到 random or 取當下時間等等…value 是動態產生的，若依照前幾篇的做法會失敗，因為之前都是以固定的值去預期測試結果，這邊會以有 random value 的例子演示一下怎麼做動態值的 UT
Case: Dynamic value； 路徑: cases/component/dynamic-value
File name: dynamic-value.component.ts
我們有個簡單的 function，它會隨機產生數字跟丟它的最大值 & 最小值去計算，接著看測試怎麼寫
File name: dynamic-value.component.spec.ts
Step-1. 跟前述都一樣，在 beforeEach 每次跑測試之前，執行一次初始化 component。
Step-2. 一如既往的先測 component 能否被初始化。
Step-3. 使用 spyOn 模擬從被實例化 component 的 randomNumber function，並將它的 returnValue 塞入固定的 12345，這樣我們就能確保後續的測試值 。
Step-4. 有了 Step-3 的固定，就能測試這個動態值了，請注意這邊是已經知道 dynamic value 的格式，所以才能測試，若連格式都不知道是不能受測的。
好啦~終於把 Angular 做 UT 都說完了，希望對你有幫助，感謝!!!
UT 系列:
[UT] What’s unit test ? 在前端要測什麼 ?!
[UT] Angular 召喚 Karma + Jasmine 來做個單元測試吧 I
