Angular單元測試的spyOn使用一例

Spy的核心思路：

避免service方法被實際調用!

Spyon兩個參數：

• class instance本身
• 需要被spy的方法名，類型為字元串

  

  待測試的Component裡有一個Observable數組：

  

  通過下面的代碼指派：

this.checkoutDeliveryService.getSupportedDeliveryModes();      

checkoutDeliveryService的類型：CheckoutDeliveryService

在單元測試時，我們需要将CheckoutDeliveryService的實際實作隔離開，通過建立MockCheckoutDeliveryService實作。

首先在單元測試裡建立一個mockcheckoutDeliveryService執行個體：

建立一個MockCheckoutDeliveryService類：

class MockCheckoutDeliveryService {
  loadSupportedDeliveryModes = createSpy();
  setDeliveryMode = createSpy();
  getSupportedDeliveryModes(): Observable<DeliveryMode[]> {
    return of();
  }
  getSelectedDeliveryMode(): Observable<DeliveryMode> {
    return of();
  }
  getLoadSupportedDeliveryModeProcess(): Observable<LoaderState<void>> {
    return of();
  }
}      

其方法同真實的CheckoutDeliveryService類方法一緻，差别在于傳回的是空的Observable對象。

在TestBed.configureTestingModule的providers配置裡，使用class MockCheckoutDeliveryService來注入CheckoutDeliveryService:

通過TestBed.inject得到mockCheckoutDeliveryService的執行個體：

使用spyOn代碼将mockCheckoutDeliveryService類的方法getSupportedDeliveryModes的傳回值設定成of(mockSupportedDeliveryModes):

這樣，在單元測試執行時，Component調用checkoutDeliveryService的getSupportedDeliveryModes方法時，會自動傳回我們在spyOn裡指定的值。