Await .onFirstEmitted() and .onEmitted(n); of observable values and then continue about observer-spy

[shairez]

Thanks @JasonLandbridge !
lol, I subscribed :)

I like the idea
I think I'd change onEmitted to onCount or onValuesCount to make it more clear..
because onEmitted might also be referring to the values themselves (like when the number 5 arrives, stop)

Mind creating a PR?

[JasonLandbridge]

Haha I will keep it in mind, thanks for the consideration!

[JasonLandbridge]

Awesome, sure I will create something! Not to be outdone by your naming suggestion, maybe onFirstValue and onValues to be in line with getFirstValue and getValues? Or would that be confusing? Naming things is definitely the most difficult part of programming :p
Anyway, I will make something and the naming can always change so I will go start with your suggestion. 👍

[JasonLandbridge]

So, this sounded good in theory but not so much in practice 😅

Consider the following:

const arrayObservable$ = of(0,1,2,3,4,5,6,7,8,9,10);
const observerSpy: ObserverSpy<number> = new ObserverSpy();

const _subscription = arrayObservable$.subscribe(observerSpy)

await observerSpy.onValuesCount(5);

expect(observerSpy.getValues()).toEqual([0,1,2,3,4]);

Before the await is reached, the observable has already emitted all values from 0 to 10 at the moment the .subscribe() is called. Which makes the await useless as it instantly resolves due to the count being reached.

A possibility here would be to add the onValuesCount before the subscription is called and then await after the subscription.
So it would be something like this:

const arrayObservable$ = of(0,1,2,3,4,5,6,7,8,9,10);
const observerSpy: ObserverSpy<number> = new ObserverSpy({valueCount: 5}); // Add the valueCount as a config property

const _subscription = arrayObservable$.subscribe(observerSpy)

await observerSpy.onValuesCount();

expect(observerSpy.getValues()).toEqual([0,1,2,3,4]);

This would "work", but then this is way more verbose than the following:

const arrayObservable$ = of(0,1,2,3,4,5,6,7,8,9,10).pipe(take(5));  // Add the take(5) here which completes
const observerSpy: ObserverSpy<number> = new ObserverSpy();

const _subscription = arrayObservable$.subscribe(observerSpy)

await observerSpy.onComplete();

expect(observerSpy.getValues()).toEqual([0,1,2,3,4]);

So my proposed idea is worse then the simple addition of .pipe(take(5)) and awaiting observable$.onComplete(). Which actually works perfectly with an observable that should stay alive in production but during testing you just need the first 5 values.

Please let me know if I missed something that would make this idea viable!

[shairez]

Yes I agree that the extra ceremony makes it equivalent to just using plain RxJS

I can't think about a simple way from the top of my head, so unless you do, let's close this issue for now and revisit if a "A HA" moment will pop up in the shower 😊

Thanks again @JasonLandbridge !