Angular单元测试的spyOn使用一例

Spy的核心思路：避免service方法被实际调用!

Spyon两个参数：

• class instance本身
• 需要被spy的方法名，类型为字符串

如果使用.and.callThrough, 则方法会真正被调用。
如果使用.and.return, 则方法不会被真正调用。

待测试的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里指定的值。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":