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

Question

In my Angular Unit Test I want to check whether myComponent.items$ have 0 results when I call subject myComponent.clearInput$.next() . Before that I want to ensure that there are some records. myComponent.items$ can be populated by myComponent.nameInput$.next("test") .

Unfortunately both subscription are triggered after both Subjects have been called, so myComponent.items$ is always 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();
});

---

This is how is items$ is called by those Subjects

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

In my unit tests, I rarely subscribe . I use promise approach because then I can wait.

Try this:

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();
});

I think that's what you want. This way we can have blocking code and much better assertions.