Spying on Observable subscribe() and add() method in Angular unit test

Question

I have a method in my testComponent that returns an observable which is been subscribed to and after been unsubscribe from, then it runs the code in the .add() (i.e when the subscription is been unsubscribed from)

How do i spy on this method and watch the actions taking place when the subscribe method is called and when the add() method when unsubscribed from the subscription. Thanks

Here goes the code sample

const loading; 
const done; 
const error; 

onClick() {
this.loading = true;  
this.myService.processData(someValues)
.subscribe(
    result => {
        this.done = true; 
     },
    error => {
        this.error = true; 
     } )
.add(() => { this.loading = false })
}

I need a way to watch what's happening in the subscribe() and add() block.

Answer 1

Your "subject under test" is the method itself.

you call it, and then check the result.

From what I see, the result you should care about, is whether or not a certain "indirect output", meaning everything under this. is changed.

So this is your output, and it caused by a certain input.

In the case of the result, you need to "next" a new value from the Observable, which you should spy on by using jasmine-auto-spies.

In case of the error, same thing - just call throwWith() on the spy observable (again, using jasmine-auto-spies).

As for the add, it seems from this code that nothing is calling the unsubscribe method on the subscription, so the add logic would never be called in that case.

You need to trigger that action somehow in your code, in order to test it (maybe on ngOnDestory