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的原创文章，请关注公众号"汪子熙":

Angular单元测试的spyOn使用一例相关推荐

[转]Angular 单元测试讲解
Angular_单元测试测试分类按开发阶段划分按是否运行划分按是否查看源代码划分其他 ATDD,TDD,BDD,DDD ATDD TDD BDD DDD Angular单元测试 Karma的 ...
Angular 单元测试讲解
Angular_单元测试测试分类按开发阶段划分按是否运行划分按是否查看源代码划分其他 ATDD,TDD,BDD,DDD ATDD TDD BDD DDD Angular单元测试 Karma的 ...
如何在Angular单元测试里，对class protected方法进行测试
例子: 我的service class里有一个protected方法,我想在单元测试里对其进行测试: 一种思路是,可以沿用Java里测试protected方法的变通方式,即创建一个新的sub clas ...
Angular单元测试框架里API toHaveBeenCalledTimes的工作原理
看这样一段代码: let spiedFirstFocusable = spyOn(keyboardFocusService,'findFirstFocusable').and.returnValue( ...
Angular单元测试遇到的错误消息：Uncaught Error - Cannot find module tslib
我的单元测试源代码: @Component({selector: 'cx-host',template: ` <div id="a" [cxFocus]="{ au ...
Angular单元测试fixture.detectChanges()
https://codecraft.tv/courses/angular/unit-testing/change-detection/ ATB:Angular Test Bed // create c ...
Angular单元测试ComponentFixture的实例化过程明细
从angular core里导入单元测试需要的库文件: import { async, ComponentFixture, TestBed } from '@angular/core/testing' ...
Angular单元测试如何只执行指定的测试用例，提高测试速度
Angular项目的规模一旦变大,待执行的单元测试的数目可能是海量的.此时在开发新的单元测试时,会遇到需要屏蔽到系统里已经非常稳定的测试,而只执行正在开发的新单元测试.这个需求如何实现呢? 每个Ang ...
使用setup函数替代beforeEach函数进行Angular单元测试
具有依赖关系的Service源代码: import { Injectable } from '@angular/core';@Injectable() export class MasterServi ...

Angular单元测试的spyOn使用一例

Angular单元测试的spyOn使用一例相关推荐

最新文章

热门文章