如何测试Observable.timer

Question

I'm trying to test this piece of code:

`discardChanges() {
    const timer = Observable.timer(1000);
    this.showSpinner = true;
    timer.subscribe(() => {
        this.showSpinner = false;
        this.toastr.success('Changes discarded');
        this.loadCondition(this.condition);
        this.studyConditionsForm.markAsPristine();
    });
}`

doing it with Jasmine like:

`xit('should discard changes and navigate to conditions', fakeAsync(() => {
    expect(component.showSpinner).toBeFalsy();
    enter code herecomponent.discardChanges();
    expect(component.showSpinner).toBeTruthy();
    tick(1000);
    fixture.detectChanges();
    expect(component.showSpinner).toBeFalsy();
    discardPeriodicTasks();
  })
);`

but when running ng test I got this error:

Error: 1 timer(s) still in the queue.​​

I have read many post and I don't make it work, actually I had the same issue with another test doing it this way but magically worked before many tries (I don't like magic to be honest).

I hope someone can guide me, actually if there is another best way rather than using const timer = Observable.timer(1000) and make it testable would be great!

Thanks.

Answer 1

I'm using rxjs 6.x，copy your code and run ng test command, and test passes. You can try to update rxjs to newer version and test again(attention: no Observable.timer in rxjs 6.x) Here are codes:

import { timer } from 'rxjs';
 discardChanges() { // method of component class
    const source = timer(1000);
    this.showSpinner = true;
    source.subscribe(() => {
        console.log(1)
        this.showSpinner = false;
    });
  }

test specification code:

 it('should test discardChanges', fakeAsync(() => {
        expect(component.showSpinner).toBeFalsy();
        component.discardChanges()
        expect(component.showSpinner).toBeTruthy();
        tick(1000);
        expect(component.showSpinner).toBeFalsy();
        discardPeriodicTasks()
      }));