How do I mock RxJs 6 timer?

Question

We've recently updated from Angular 5 to Angular 6, and with it RxJs 6. As part of the migration, the timer usage has changed from:

Observable.timer()

to

timer()

There are a number of places in our tests where we mock timer observables with the following pattern.

let timerObserver: Observer<any>;

 beforeEach(() => {
 spyOn(Observable, 'timer').and.returnValue(Observable.create(
    ((observer: Observer<any>) => {
      timerObserver  = observer;
    })
  ));
});

it(`should not have any notifications by default`, () => {
   timerObserver.next('');
   ...
});

Does anybody know how to migrate this pattern across?

Edit: I've created a simplified illustration of the problem here:

https://stackblitz.com/edit/angular-v6-testing-template-nm7add

// Hello.Component
      ngOnInit() {
        const timer$ = timer(30);
        timer$.subscribe(() => {
          this.testMe = 'this has been changed';
        });
      }

// Hello.component.spec
  it('should set testMe after a given timer', fakeAsync(() => {
    tick(50);
    expect(fixture.componentInstance.testMe).toBe('this has been changed');
  }));

In this example, I'm trying to get timer to trigger without waiting for the timer to resolve.

Use the `VirtualTimeScheduler` instead. See [this answer](https://stackoverflow.com/a/43108109/6680611). Or - even better - use a [marble test](https://github.com/ReactiveX/rxjs/blob/master/doc/marble-testing.md). — cartant, Jun 08 '18 at 12:36
Thanks for your reply Cartant. If I understand correctly I can use VirtualTimeScheduler to create timer observables within my spec, but what I'm trying to do is mock a timer that is created within my component, and which I therefore don't have direct access to. — MGDavies, Jun 08 '18 at 14:11
OK, if you're using `fakeAsync`, you can rely upon it mocking `setInterval` - which is what RxJS uses in its `AsyncScheduler` - but you will need to clobber the `asyncScheduler`'s `now` method to return `fakeAsync`'s concept of the current time. See [this answer](https://stackoverflow.com/a/47564162/6680611) for a clobbering mechanism. (Although, `async` is now named `asyncScheduler`.) Unclobbered, `now` will be call `Date.now()` and [that won't work](https://stackoverflow.com/a/48264151/6680611) with `fakeAsync`. — cartant, Jun 08 '18 at 23:02

cartant · Accepted Answer · 2018-08-20T07:43:19.203

As you are using fakeAsync, you can rely upon its patching of setInterval to fake the implementation of the timer observable.

However, you will need to clobber the asyncScheduler instance's now method, as it returns Date.now(). (Strictly speaking, this isn't necessary for the timer observable, as you've used it, but it will matter for some other observables - e.g. the observable returned by the delay operator).

You can get things to work pretty easily if you use beforeEach and afterEach to clobber the now method and to configure a function that keeps track of the fake time:

import { fakeAsync, tick as _tick } from '@angular/core/testing';
import { asyncScheduler, of, timer } from 'rxjs';
import { delay } from 'rxjs/operators';

describe('fakeAsync and RxJS', () => {

  let tick: (milliseconds: number) => void;

  beforeEach(() => {
    let fakeNow = 0;
    tick = milliseconds => {
      fakeNow += milliseconds;
      _tick(milliseconds);
    };
    asyncScheduler.now = () => fakeNow;
  });

  it('should support timer with fakeAsync', fakeAsync(() => {
    const source = timer(100);
    let received: number | undefined;
    source.subscribe(value => received = value);
    tick(50);
    expect(received).not.toBeDefined();
    tick(50);
    expect(received).toBe(0);
  }));

  it('should support delay with fakeAsync', fakeAsync(() => {
    const source = of(0).pipe(delay(100));
    let received: number | undefined;
    source.subscribe(value => received = value);
    tick(50);
    expect(received).not.toBeDefined();
    tick(50);
    expect(received).toBe(0);
  }));

  afterEach(() => {
    delete asyncScheduler.now;
  });
});

Actually, because relying upon fakeAsync to mock the time-based observable is likely to be useful, I've added a fakeSchedulers function to my rxjs-marbles package. See fake-spec.ts for example usage.

The implementation is basically the same as that in the above snippet - just wrapped up in a function.

Since writing this answer and adding fakeSchedulers to rxjs-marbles, I've written an article about Testing with Fake Time.

Thanks, this was conceptually difficult for me to grasp but you've helped me a lot. For those that are interested in supplementing the given explanation, and seeing how timer leans on asyncScheduler, I'd recommend a quick look at the source: https://github.com/ReactiveX/rxjs/blob/febe2ae4f7b29feeaf6bd4ccbdf623ead5045e24/src/internal/observable/timer.ts — MGDavies, Jun 11 '18 at 11:34

How do I mock RxJs 6 timer?

1 Answers1

Linked