我如何模拟RxJs 6计时器?

时间:2018-06-08 11:17:02

标签: angular jasmine rxjs6

我们最近从Angular 5更新到Angular 6,并使用它RxJs 6。 作为迁移的一部分,计时器使用情况已从:

更改
Observable.timer()

timer()

在我们的测试中有很多地方我们使用以下模式模拟计时器可观察量。

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('');
   ...
});

有人知道如何跨越这种模式吗?

编辑:我已在此处创建了问题的简化说明:

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');
  }));

在这个例子中,我试图让计时器触发而不等待计时器解决。

1 个答案:

答案 0 :(得分:5)

当您使用fakeAsync时,您可以依靠setInterval的修补来伪造timer可观察的实现。

但是,您需要破解asyncScheduler实例的now方法,因为它返回Date.now()。 (严格来说,对于timer可观测量来说,这并不是必需的,因为您已经使用过它,但它对其他一些可观察量很重要 - 例如delay运算符返回的可观察量)。

如果您使用beforeEachafterEach来破坏now方法并配置跟踪假冒时间的函数,则可以非常轻松地完成工作:

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;
  });
});

实际上,因为依靠fakeAsync来模拟基于时间的可观察量可能很有用,所以我在rxjs-marbles包中添加了fakeSchedulers函数。有关示例用法,请参阅fake-spec.ts

实现基本上与上面的代码片段相同 - 只是包含在一个函数中。

自撰写此答案并将fakeSchedulers添加到rxjs-marbles后,我已撰写了一篇关于Testing with Fake Time的文章。