如何使用Angular5,ngrx5测试使用Jasmine / Karma的ngrx /效果?

时间:2018-06-13 15:29:59

标签: angular unit-testing typescript ngrx ngrx-effects

这是我需要测试的文件。 我正在使用Angular5(^ 5.2.0),ngrx5(^ 5.2.0),目前我的注意力集中在一些特效服务上。 这是我当前需要测试的代码。 但我不知道如何正确实施它,我做了一些尝试,但它们只是失败。你们有没有提示?感谢

import { Injectable } from '@angular/core';
import { Actions, Effect } from '@ngrx/effects';
import { FETCH_DATA } from '../reducers/data.reducer';
import { DataService } from './data.service';
import { Subject } from 'rxjs/Subject';
import { ActionWithPayload } from '../types/app-actions';

@Injectable()
export class AutoCompleteEffects {
  public autoComplete$ = new Subject<{
    type: string;
    payload: { results: string[]; searchValue: string };
  }>();

  @Effect()
  getData$ = this.actions$.ofType(FETCH_DATA).switchMap((action: ActionWithPayload) => {
    return this.data
      .getData(action.payload)
      .map(results => ({
    type: 'FETCHED_DATA',
    payload: { results, searchValue: action.payload }
      }))
      .catch(() =>
    Observable.of({
      type: 'FETCHED_DATA',
      payload: { results: [], searchValue: action.payload }
    })
      );
  });


  constructor(
    private actions$: Actions,
    private data: DataService,
  ) {
    this.getData$.subscribe(action => this.autoComplete$.next(action));
  }

  public getAutoCompleteEffects() {
    return this.autoComplete$.asObservable();
  }
}

1 个答案:

答案 0 :(得分:1)

你需要做几件事

  1. 使用provideMockActions(参考{​​{3}})
  2. 关注ngrx效果测试设置
  3. 模拟DataService并注入
  4. 在那之后,它只是一个具有不同动作的测试

    it('should suggest auto complete values', () => {
      actions = of([<test-actions>]);
      const expectedEffects = of([<expected-actions-from-effects>]);
    
      expect(TestBed.get(AutoCompleteEffects).getData$).toBeObservable(expectedEffects);
    });