在 RxJS 5.5 中测试和模拟 lettable 运算符

Question

在 lettable 操作符之前，我做了一个 helper 来修改 debounceTime 方法，所以它使用了一个 TestScheduler：

export function mockDebounceTime(
    scheduler: TestScheduler,
    overrideTime: number,
): void {
    const originalDebounce = Observable.prototype.debounceTime;

    spyOn(Observable.prototype, 'debounceTime').and.callFake(function(
        time: number,
    ): void {
        return originalDebounce.call(
            this,
            overrideTime,
            scheduler,
        );
    });
}

所以以下 Observable 的测试很简单：

@Effect()
public filterUpdated$ = this.actions$
    .ofType(UPDATE_FILTERS)
    .debounceTime(DEFAULT_DEBOUNCE_TIME)
    .mergeMap(action => [...])

使用 lettable 操作符，filterUpdated$ Observable 是这样写的：

@Effect()
public filterUpdated$ = this.actions$
    .ofType(UPDATE_FILTERS)
    .pipe(
        debounceTime(DEFAULT_DEBOUNCE_TIME),
        mergeMap(action => [...])
    );

我不能再修补 debounceTime 运算符了！如何将 testScheduler 传递给 debounceTime 运算符？

Answer 1

由于.pipe() 仍在 Observable 原型上，您可以在其上使用您的模拟技术。

Lettable 运算符（哎呀，现在应该称它们为pipeable operators）可以在模拟管道中按原样使用。

这是我在一个干净的 CLI 应用程序的 app.component.spec.ts 中使用的代码。请注意，它可能不是 TestScheduler 的最佳用途，但说明了原理。

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Observable } from 'rxjs/Observable';
import { debounceTime, take, tap } from 'rxjs/operators';
import { TestScheduler } from 'rxjs/Rx';

export function mockPipe(...mockArgs) {
  const originalPipe = Observable.prototype.pipe;
  spyOn(Observable.prototype, 'pipe').and.callFake(function(...actualArgs) {
    const args = [...actualArgs];
    mockArgs.forEach((mockArg, index) => {
      if(mockArg) {
        args[index] = mockArg;
      }
    });
    return originalPipe.call(this, ...args);
  });
}

describe('AppComponent', () => {
  it('should test lettable operators', () => {
    const scheduler = new TestScheduler(null);

    // Leave first tap() as-is but mock debounceTime()
    mockPipe(null, debounceTime(300, scheduler));   

    const sut = Observable.timer(0, 300).take(10)
      .pipe(
        tap(x => console.log('before ', x)),
        debounceTime(300),
        tap(x => console.log('after ', x)),
        take(4),
      );
    sut.subscribe((data) => console.log(data));
    scheduler.flush();
  });
});

Answer 2

您可以使用接受自定义调度程序的第二个参数。

  debounceTime(DEFAULT_DEBOUNCE_TIME, rxTestScheduler),

所有代码

import { Scheduler } from 'rxjs/scheduler/Scheduler';
import { asap } from 'rxjs/scheduler/asap';

@Injectable()
export class EffectsService {
  constructor(private scheduler: Scheduler = asap) { }

  @Effect()
  public filterUpdated$ = this.actions$
    .ofType(UPDATE_FILTERS)
    .pipe(
        debounceTime(DEFAULT_DEBOUNCE_TIME, this.scheduler),
        mergeMap(action => [...])
    );
}

然后在测试

describe('Service: EffectsService', () => {
  //setup
  beforeEach(() => TestBed.configureTestingModule({
    EffectsService, 
    { provide: Scheduler, useValue: rxTestScheduler} ]
  }));

  //specs
  it('should update filters using debounce', inject([EffectsService], service => {
    // your test
  });
});

Answer 3

如果难以将TestScheduler 实例注入或传递给您的操作员，这个最简单的解决方案是将AsyncScheduler 实例的now 和schedule 方法重新绑定到TestScheduler 实例的那些方法。

您可以手动执行此操作：

import { async } from "rxjs/Scheduler/async";

it("should rebind to the test scheduler", () => {

  const testScheduler = new TestScheduler();
  async.now = () => testScheduler.now();
  async.schedule = (work, delay, state) => testScheduler.schedule(work, delay, state);

  // test something

  delete async.now;
  delete async.schedule;
});

或者您可以使用sinon 存根：

import { async } from "rxjs/Scheduler/async";
import * as sinon from "sinon";

it("should rebind to the test scheduler", () => {

  const testScheduler = new TestScheduler();
  const stubNow = sinon.stub(async, "now").callsFake(
      () => testScheduler.now()
  );
  const stubSchedule = sinon.stub(async, "schedule").callsFake(
      (work, delay, state) => testScheduler.schedule(work, delay, state)
  );

  // test something

  stubNow.restore();
  stubSchedule.restore();
});

Answer 4

更新：如果您返回一组操作并且想要验证所有操作，请删除

.pipe(throttleTime(1, myScheduler))

您可以使用 jasmine-marbles 中的 getTestScheduler 而不是创建自己的调度程序。

import { getTestScheduler } from 'jasmine-marbles';

所以测试可能如下所示：

  it('should pass', () => {
    getTestScheduler().run((helpers) => {
      const action = new fromAppActions.LoadApps();
      const completion1 = new fromAppActions.FetchData();
      const completion2 = new fromAppActions.ShowWelcome();
      actions$ = helpers.hot('-a', { a: action });
      helpers
        .expectObservable(effects.load$)
        .toBe('300ms -(bc)', { b: completion1, c: completion2 });
    });
  });

我正在努力使用 debounceTime 测试 ngrx 效果。现在情况似乎发生了一些变化。我在这里关注了文档：https://github.com/ReactiveX/rxjs/blob/master/doc/marble-testing.md

这是我的测试的样子：

    describe('someEffect$', () => {
      const myScheduler = new TestScheduler((a, b) => expect(a).toEqual(b));
      it('should test', () => {
        myScheduler.run((helpers) => {
          const action = new fromActions.SomeAction();
          const completion = new fromActions.SomeCompleteAction(someData);
          actions$.stream = helpers.hot('-a', { a: action });

          helpers
            .expectObservable(effects.someEffect$.pipe(throttleTime(1, myScheduler)))
            .toBe('200ms -(b)', { b: completion });
        });
      });
    });

实际代码中不需要使用调度器，例如：no debounceTime(200, this.scheduler)

Answer 5

我对上面的答案有一些问题（在 Observable.prototype 上不能有多个间谍，...），与我相关的只是嘲笑“debounceTime”，所以我将实际的 debounceTime（例如 filterTextDebounceTime = 200）移动到组件和规范的“beforeEach”中的一个变量我将 component.filterTextDebounceTime 设置为 0，因此 debounceTime 同步/阻塞工作。