[英]Angular unit test combineLatest
我已经开始在 Angular 中使用 Jest Framework 进行单元测试。 但是,我陷入了需要对combineLatest RxJS 运算符进行单元测试的情况。 我的组件如下所示。
零件:
public userData;
public productData;
constructor(
private readonly userService: UserService,
private readonly productService: ProductService
) {}
public ngOnInit() {
this.initialize();
}
public initialize() {
combineLatest([
this.userService.getUserData(),
this.productService.getProductData()
])
.subscribe([userData, productData] => {
this.userData = userData;
this.productData = productData;
});
}
我已经嘲笑了我的服务,我的单元测试如下所示。
it('should initialize user and product data', fakeAsync(() => {
spyOn(userService, 'getUserData');
spyOn(productService, 'getProductData');
component.initialize();
tick();
fixture.detectChanges();
expect(userService.getUserData).toHaveBeenCalled();
expect(productService.getProductData).toHaveBeenCalled();
expect(component.userData).toBeDefined();
expect(component.productData).toBeDefined();
}));
此测试失败,收到:未定义。 但是在使用单个 observable 时,同样的测试也有效。
我将尝试以不同的方式回答这个问题。
让我们看看你的代码,测试简单的代码块比测试长代码更容易。
将变量分配给您的属性会容易得多。 有了它,您可以简单地测试属性
请参阅下面的改进代码;
constructor(
private readonly userService: UserService,
private readonly productService: ProductService
) {}
userData: any;
productData: any;
userData$ = this.userService.getUserData().pipe(
tap(userData => this.userData = userData)
);
productData$ = this.productService.getProductData().pipe(
tap(productData = productData => this.productData = productData)
)
v$ = combineLatest([this.userData$, this.productData$]).pipe(
map(([userData, productData]) => ({ userData, productData }))
)
initialize() {
v$.subscribe()
}
ngOnInit() {
this.initialize();
}
现在让我们尝试测试您的初始代码并了解为什么测试不起作用。 来自官方文档
当任何 observable 发出一个值时,从每个 observable 发出最后发出的值
让我们看看下面的代码
spyOn(userService, 'getUserData');
spyOn(productService, 'getProductData');
上面的代码是否发出任何值? 答案是否定的,因此代码this.userService.getUserData()
和this.productService.getProductData()
不会返回任何值,因此不会发出任何值。 因此combineLatest
不会发出任何值。
您需要从spyOn()
函数返回一个Observable
,类似于 spyOn(userService, 'getUserData').and.returnValue(of({}));
现在 Observable 将发出并且测试将通过
您可以考虑使用async
管道来处理您的订阅。 使用async
管道,您的代码可以如下编写
constructor(
private readonly userService: UserService,
private readonly productService: ProductService
) {}
userData$ = this.userService.getUserData()
productData$ = this.productService.getProductData()
v$ = combineLatest([this.userData$, this.productData$]).pipe(
map(([userData, productData]) => ({ userData, productData }))
)
在你的 html
<ng-container *ngIf='v$ | async'>
{{ v.userData | json }}
{{ v.productData| json }}
</ng-container>
在您的测试文件中,您可以拥有
it('should initialize user and product data', fakeAsync(() => {
spyOn(userService, 'getUserData').and.returnValue(of({}));
spyOn(productService, 'getProductData').and.returnValue(of({}));
tick();
fixture.detectChanges();
component.v$.subscribe({
next: (v) => {
expect(v.userData).toBeDefined();
expect(v.productData).toBeDefined();
}
})
}));
上面的测试只是检查是否我们订阅了v$
,然后定义了userData
和productData
你可以像这样jest
地模拟combineLatest
/* Mock rxjs's combineLatest */
const rxjs = jest.requireActual('rxjs');
rxjs.combineLatest = jest.fn(() => of(<ADD_YOUR_MOCK_DATA_HERE>));
完整测试看起来像这样
it('should initialize user and product data', () => {
const userMockData = <ADD_MOCK_DATA>;
const productMockData = <ADD_MOCK_DATA>;
/* Mock rxjs's combineLatest */
const rxjs = jest.requireActual('rxjs');
rxjs.combineLatest = jest.fn(() => of([userMockData, productMockData]));
jest.spyOn(userService, 'getUserData');
jest.spyOn(productService, 'getProductData');
component.initialize();
expect(component.userData).toEqual(userMockData);
expect(component.productData).toEqual(productMockData);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.