Testing observables fail without detectChanges

Question

I was reproducing some examples of the Angular documentation to improve my understanding of angular unit tests, and I ended up in a simple test case when I can't figure out what's going on.

Here is my app.component.ts file when I have a single method "getQuote" that get a quote from a service.

@Component({...})
export class AppComponent {
  errMsg: string;
  quote: Observable<string>;

  constructor (private twainService: TwainService) {}

  getQuote () {
    this.quote = this.twainService.getQuote().pipe(
      catchError(err => {
        this.errMsg = err;
        return of('...');
      })
    );
  }
}

Then, I created a test to verify if my errMsg prop was correctly updated in case I got an error from my twainService.getQuote method :

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  let getQuoteSpy;

  beforeEach(async(() => {
    const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
    getQuoteSpy = twainService.getQuote.and.returnValue(of(testQuote));

    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: TwainService, useValue: twainService }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
  });

  it('should get error msg when TwainService fails', async(async () => {
    const errMsg = 'TwainService fails';
    getQuoteSpy.and.returnValue(throwError(errMsg));

    component.getQuote();
    await fixture.whenStable();

    expect(component.errMsg).toBe(errMsg);
  }));
});

But here is the problem : this test always fails, and I can't get to see what's wrong.

Playing around, I managed to find that adding a "fixture.detectChanges()" like the following was making the test works, but I don't understand why. I thought the detectChanges method was only used to propagate changes to the component view.

it('should get error msg when TwainService fails', async(async () => {
    const errMsg = 'TwainService fails';
    getQuoteSpy.and.returnValue(throwError(errMsg));

    component.getQuote();
    fixture.detectChanges();
    await fixture.whenStable();

    expect(component.errMsg).toBe(errMsg);
  }));

I tested with async, fakeAsync, and using synchronous observable emitting directly an error and asynchronous observable, and the result is always the same.

If anyone can help me understand what's going on there :)

shohrukh · Accepted Answer · 2018-08-31 21:44:20Z

9

+50

I guess you simply need to subscribe to your quote Observable after calling getQuote method in your tests:

 it('should get error msg when TwainService fails', async(async () => {
    const errMsg = 'TwainService fails';
    getQuoteSpy.and.returnValue(throwError(errMsg));

    component.getQuote();
    component.quote.subscribe();
    await fixture.whenStable();

    expect(component.errMsg).toBe(errMsg);
  }));

So when you call component.getQuote() in your tests - it simply sets the this.quote property 'a cold' observable and in order to see that catchError was fired, you have to subscribe to the Observable. This will run it and eventually you'll get an error according to your mocked data throwError(errMsg).

Edit

According to the second part of your question:

Playing around, I managed to find that adding a "fixture.detectChanges()" like the following was making the test works, but I don't understand why.

I've also figured it out and most probably you are using async pipe somewhere in the component's template: {{ quote | async }}. Under the hood angular's async pipe subscribes to a quote Observable and returns the latest value it has emitted. This is why we need to call detectChanges method and after this - async pipe will start subscribing to the quote Observable (and the test will work as expected). In this case we don't need to manually subscribe to quote Observable (async pipe takes care of it). And yes - you were right: I thought the detectChanges method was only used to propagate changes to the component view.

You can test both examples in the stackblitz example. Hope this will be helpful :)

edited Aug 31, 2018 at 21:44

answered Aug 26, 2018 at 0:08

shohrukh

3,2094 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Orodan Over a year ago

Thank you, indeed I simply forgot that you need to subscribe to your observable ^^' works like I expected now

shohrukh Over a year ago

u r welcome. The question is really interesting. I've also updated the answer and added explanation for the second part of your question - "I managed to find that adding a "fixture.detectChanges()" like the following was making the test works, but I don't understand why."

Collectives™ on Stack Overflow

Testing observables fail without detectChanges

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related