如何在 Angular 中测试多个订阅？

Question

在我的 Angular 单元测试中，当我调用主题 myComponent.clearInput$.next() 时，我想检查 myComponent.items$ 是否有 0 个结果。在此之前，我想确保有一些记录。 myComponent.items$ 可以填充为myComponent.nameInput$.next("test")。

不幸的是，两个订阅都是在调用两个主题后触发的，所以myComponent.items$ 始终为 0。

it("when control touched then clear input value", done => {

    myComponent.items$.pipe(first()).subscribe(result => {
        expect(result.length).toBe(2); 
        // it's always 0 because of myComponent.clearInput$.next(); from last line
    })
    myComponent.nameInput$.next("test");

// Now should wait after code from above will finish then the rest should be executed after that.

    myComponent.items$.pipe(first()).subscribe(result => {
        expect(result.length).toBe(0);
        done(); // test should be finished here
    })
    myComponent.clearInput$.next();
});

---

这就是那些主题如何调用 items$

this.items$ = merge(
    this.nameInput$.pipe(
        switchMap((name: string) =>
            iif(() => this._partyType === "PT",
                this.someService.getByName(name),
                this.otherService.getByOtherName(name)
            )
        )
    ),
    this.clearInput$.pipe(
        switchMapTo(of([]))
    )
);

Answer 1

在我的单元测试中，我很少subscribe。我使用promise 方法，因为这样我可以等待。

试试这个：

it("when control touched then clear input value", async done => {
   myComponent.nameInput$.next("test");
   console.log('first await...');
   const result = await myComponent.items$.pipe(take(1)).toPromise();
   console.log('after first await...');
   expect(result.length).toBe(2);

   myComponent.clearInput$.next();
   console.log('second await...');
   const newResult = await myComponent.items$.pipe(take(1)).toPromise();
   console.log('after second await...');
   expect(newResult.length).toBe(0);
   done();
});

我想这就是你想要的。这样我们就可以拥有阻塞代码和更好的断言。