单元测试使用延迟运算符观察

时间:2017-04-12 21:52:05

标签: angular rxjs karma-jasmine

我很难让我的单元测试与具有延迟操作符的Observable一起工作。该应用程序基于Angular 2构建,测试在karma / jasmine中运行。我已经尝试过async和fakeAsync帮助器方法,但它们都没有工作。

这是一个简化的代码块(没有Angular 2)解释我的问题。

let mouseDownStream = Rx.Observable.fromEvent(document.body, 'mousedown');
let haveBeenCalled = false;
mouseDownStream.delay(200).subscribe(() => haveBeenCalled = true);

describe('mouse down event', () => {
  it('it should emit an event stream after 200ms', (done) => {
    document.body.dispatchEvent(new MouseEvent('mousedown'))
    expect(haveBeenCalled).toBeFalsy();

    // Don't want this setTimeout should use Angular's tick(200) method instead but it's not working.
    setTimeout(() => {
      expect(haveBeenCalled).toBeTruthy();
      done();
    }, 200)
  });
});

JSBin

2 个答案:

答案 0 :(得分:0)

诀窍是使用不同的调度程序。有一个专门的测试调度程序叫做TestScheduler。这与大理石图结合使用,可以测试异步流。

以下是官方spec of the delay operator的示例:

it('should delay by absolute time period', () => {
  const e1 =   hot('--a--b--|  ');
  const t =   time(  '---|     ');
  const expected = '-----a--b--|';
  const subs =     '^          !';

  const absoluteDelay = new Date(rxTestScheduler.now() + t);
  const result = e1.delay(absoluteDelay, rxTestScheduler);

  expectObservable(result).toBe(expected);
  expectSubscriptions(e1.subscriptions).toBe(subs);
});

“官方”文档中隐藏了更多此主题:https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md

答案 1 :(得分:0)

这里是一个示例,该示例说明了如果有人仍在寻找答案,如何使用Angular 2+中的延迟运算符对Observable进行单元测试:

import { fakeAsync, tick } from "@angular/core/testing";

import { fromEvent } from "rxjs";
import { delay } from "rxjs/operators";

describe("mouse down event", () => {
  it("should emit an event stream after 200ms", fakeAsync(() => {
    let mouseDownStream = fromEvent(document.body, "mousedown");
    let haveBeenCalled = false;

    const subscription = mouseDownStream.pipe(delay(200)).subscribe(() => (haveBeenCalled = true));
    document.body.dispatchEvent(new MouseEvent("mousedown"));

    expect(haveBeenCalled).toBeFalsy();

    tick(200);

    expect(haveBeenCalled).toBeTruthy();

    subscription.unsubscribe();
  }));
});