Test observable 'next' callback in RxJs and Angular

Question

I'm trying to do a pretty simple test in Angular with RxJs Observables, but I'm coming up short. This is what I'm basically trying to test:

// We're inside some Angular component here...
let testMe = 0;

function somethingOrOther(): void {

    this.someService.methodReturningObservable()
      .subscribe(
          (nextValue: number): void => {
              testMe += nextValue;
          }
      ) 
}

How do I test that testMe gets updated properly when the observable behind methodReturningObservable emits a value?

I attempted it with this:

it(`works 'cuz I want it to`, fakeAsync(() => {
    spyOn(this.someService, 'methodReturningObservable').and.returnValue(cold('a', {a: 10}));

    tick();

    expect(component.testMe).toBe(10);
}));

So, tick() doesn't seem to do anything here. Nothing gets my cold value to ever emit on my spy.

I tried getTestScheduler.flush() instead as shown at https://netbasal.com/testing-observables-in-angular-a2dbbfaf5329 under the marbles section.

Can I use marbles like this to emit a value on an observable? This was very easy in AngularJS by just triggering a digest, but I can't seem to get Anguar to let me in the next callback for an observable.

dmcgrandle · Accepted Answer · 2018-12-14T05:25:41.167

I put together a simple Stackblitz to show you how I would approach testing that simple component method you describe.

Here is the spec from that Stackblitz:

it(`works with "of" 'cuz I want it to`, () => {
    spyOn(someService, 'methodReturningObservable').and.returnValue(of(10));
    component.somethingOrOther();
    expect(component.testMe).toBe(10);
});

Some of the changes I made to your code:

I had to make minor changes to your component method to have it work. Details in the Stackblitz.
The cold() function is from the marble testing library, but that is way overkill for such a simple function. rxjs has the of Observable creation method available which can create a cold synchronous observable that can be subscribed to (but more below if you really want to test it this way).
Since the spec above uses a synchronous observable, there is no need for fakeAsync(), as it will complete immediately.
The method under test needed to be called explicitly to be tested, done above with the line component.somethingOrOther().

As you can see in the Stackblitz, this test passes just fine.

Now, if you want to use marble testing even for this simple case, I set up another spec in the Stackblitz for that. It is as follows:

it(`works with "cold" 'cuz I want it to`, () => {
    spyOn(someService, 'methodReturningObservable').and.returnValue(cold('a', { a: 10 }));
    component.somethingOrOther();
    getTestScheduler().flush(); // flush the observables
    expect(component.testMe).toBe(10);
});

Note the fact that the component function needed to be called
The flushing of the getTestScheduler needs to be done as well.

Both tests are now passing in the Stackblitz.

Official docs for marble testing in Angular are here.

I hope this helps.

A couple of things: I was actually calling the method, just forgot to include it in the original question. I kept getting confused between `fakeAsync` and `tick` vs `testScheduler.flush()` and multiple combinations of the same. Turns I had another dumb issue where I was exiting the method before the service call was made due to other variables. So my attempts to flush failed because I never actually made the call. It's been a long week... Thanks for confirming that I can use marbles in this situation, that's what I was hoping for! — Spencer, Dec 14 '18 at 15:19
Is there a way I can use marbles and test after each emission? If I had `cold('--a-- b--c')`, how can I stop after each emission and check state? — Spencer, Dec 14 '18 at 15:26
Marble testing is all about setting up an observable "input" and also setting up an expected "output", both with text based marble diagrams, then comparing the actual output with the expected output. Just as with actual observables there is no "stopping" between emissions. If you have a more detailed question I would encourage you to ask it as a new question. :) Details on writing marble tests [here](https://github.com/ReactiveX/rxjs/blob/master/doc/marble-testing.md) — dmcgrandle, Dec 14 '18 at 16:34

Test observable 'next' callback in RxJs and Angular

1 Answers1