Angular单元测试的spyOn使用一例

时间:2022-07-28
本文章向大家介绍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里指定的值。

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