2020-6-1 Angular 單元測試 - 服務

[hsiaofung]

• Angular 的服務是什麼?
• 何時使用?
• 如何使用?
• 如何發出HTTP呼叫?
• 使用伺服器時如何處理各種狀況?

[hsiaofung]

• 如何對服務進行單元測試?
• 如何使用Angular 的相依注入系統在單元測試中模擬服務相依?
• 如何撰寫HttpClient單元測試?

[hsiaofung]

如何對服務進行單元測試?

• 設定Angular TestBed與要測試的服務。
• 注入受測服務實例到測試，或作為beforeEach中的元件實例。

[hsiaofung]

• 將inject 移到beforeEach 設定。無須將服務分別注入每個測試。
• 兩個測試
  • 一個測試加入股票
  • 一個測試預設的getStocks()呼叫。
  • 兩個測試是相互獨立的，每個測試前會以新的服務實例建構新測試模組。

[hsiaofung]

以相依服務測試元件

• 在測試中使用真正的服務來測試元件。
• 在測試中模擬相依的服務來測試元件，以真的服務測元件。

[hsiaofung]

以模擬服務測試元件

• 如何建構假服務?
• 使用模擬呼叫測試服務時很有用。這樣比建構與維護假時做更方便。
• 使用注入程序取得StockService

[hsiaofung]

• 測試取得服務實例有兩種方式。可以如StockService的測試，依靠Angular測試工具的inject函式注入服務實例，或如此處使用元素的injector參考。

• 取得服務實例後，可以使用Jasmine的間諜監視服務的方法。間諜能讓我們接入任何方法或函式。並記錄呼叫與參數且能定義回傳值。

• 例如: 使用spyOn監視服務的特定方法(getStocks())，並改成我們要的回傳值。如此就不會呼叫真的服務。然後測試以斷言確保從假服務而非原來的服務回傳值。

[hsiaofung]

• realService
• MockService
• FakeService

[hsiaofung]

• 先建構stockServiceFake這個假服務實例。我們只初始化一個方法(getStocks())而不是全部的API。
• 使用TestBed設定此測試模組時，相較於登記StockService，我們登記一個提供方。我們告訴Angular有人要求StockService時(使用provide鍵)，提供stockServiceFake鍵(使用useValue)。它覆寫類別實例的預設行為。

[hsiaofung]

• 非同步單元測試:
  • 如何測試服務與元件，無論是否有相依性。但前面的服務都是同步的。
  • 如何撰寫處理非同步流程的服務的測試。

[hsiaofung]

非同步測試和同步測試有兩個不同點 :

• 非同步測試中的it宣告要帶async函式。
• 等待非同步部分完成，然後whenStabilize在完成時回傳一個promise。
• fakeAsync
  • 和async 一樣
  • 用fakeAsync取代async
  • 用tick()模擬非同步行為。相較於whenStable，我們以tick()函式模擬。它讓程式看來更直接與可讀
  • fakeAsync 有tick 和 flush().tick兩個方法模擬時間。flush以次數做參考，基本上是任務序列清空的次數。
  • 選用哪一個? 若要程式抽離非同步行為，則使用fakeAsync。若要思考程式流程並模擬實際運行，則用async。

---

心得:

• 程式有基礎，只要把改變的地方寫對(例如: 同步的測試和非同步的測試程式碼幾乎一樣。只要在對的點上async 即非同步測試。)

[hsiaofung]

HTTP的單元測試

• 如何模擬伺服器呼叫 ?
• 如何利用Angular內建的測試工具測試HTTP通訊?
• 如何測試從伺服器取得股票清單的初始化邏輯? 確保整個呼叫流程、取得股票清單、然後顯示。

[hsiaofung]

• HttpTestingController
  • 想要測試發出XHR呼叫的流程，但不想要發出真正的呼叫。
  • 測試中的網路呼叫會增加不可靠的相依性，並讓測試不可預測。
  • 因此，模擬XHR呼叫，只檢查XHR呼叫是否發出。

[hsiaofung]

• 匯入HttpClientModule以注入HttpClient。
• 匯入HttpClientTestingModule模擬伺服器呼叫。
• TestBed匯入這兩個模組。
• 注入HttpTestingController實例。設定預期呼叫。
• 定義呼叫發出時的回應。呼叫flush方法以回傳兩個股票的陣列。
• 元件出始化、等待變更檢測穩定，然後確保回傳的回應正確的繪製在模板上。
• 確保所有在HttpTestingController設定的預期會在測試執行時實現。在afterEach中執行試個好作法，可確保程式不會多或少發出呼叫。

[hsiaofung]

• 如何處裡POST呼叫，以及如何從伺服器發送非200回應?

[hsiaofung]

總結 :

• Angular 的服務測試
• 如何測試(服務)與(使用服務的元件)
• 處理服務的各種技術與選項。
  • 使用真正的服務與模擬服務。
• 如何處理非同步行為的單元測試
• 如何處理XHR與HTTP的測試。