Angular單元測試的spyOn使用一例

待測試的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裏指定的值。