如何在ngrx中测试效果？

Question

我只想在下面得到我的 getUser 效果。

我正在使用 angular5、typescript 和 ngrx。

我愿意接受以下示例的替代示例。

这是我的效果：

import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import { Effect, Actions } from '@ngrx/effects';
import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

import * as fromUser from '../actions/user-state.actions';
import { UserService } from '../services/user-state.service';
import { UserStateState } from '../models/user-state.interfaces';

@Injectable()
export class UserStateEffects {

  @Effect({ dispatch: true })
  getUser$: Observable<any> = this.actions$
    .ofType(fromUser.GET_USER)
    .pipe(
      switchMap(() => this.userService.getUser()),
      map((result: any) => new fromUser.UserSuccess(result)))
    .catch((error: HttpErrorResponse) => of(new fromUser.UserFailure(error)));

  constructor(
    private actions$: Actions,
    private userService: UserService
  ) {}
}

这是我的效果测试规格：

import 'rxjs/add/observable/throw';
import { Actions } from '@ngrx/effects';
import { cold, hot } from 'jasmine-marbles';
import { empty } from 'rxjs/observable/empty';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { TestBed } from '@angular/core/testing';

import * as actions from '../actions/user-state.actions';
import { UserService } from '@tradingapplication/user-state/src/state/services/user-state.service';
import { UserStateEffects } from '@tradingapplication/user-state/src/state/effects/user-state.effects';
import { UserStateState } from '../models/user-state.interfaces';
import { UserStateConstants } from '../../user-state.constants';

export class TestActions extends Actions {
  constructor(){
    super(empty());
  }
  set stream(source: Observable<any>){
    this.source = source
  }
}

export function getActions() {
  return new TestActions();
}

fdescribe('UserStateEffects', function () {
  let actions$: TestActions;
  let service: UserService;
  let effects: UserStateEffects;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [
        UserService,
        UserStateConstants,
        UserStateEffects,
        { provide: Actions, useFactory: getActions },
      ],
    });

    actions$ = TestBed.get(Actions);
    service = TestBed.get(UserService);
    effects = TestBed.get(UserStateEffects);

    spyOn(service, 'getUser').and.returnValue(of(null));
  });

  it('should return user from GetUser', () => {
    const action = actions.GET_USER;
    const completion = new actions.UserSuccess({});

    actions$.stream = hot('-a', { a: action });
    const expected = cold('-b', { b: completion });

    expect(effects.getUser$).toBeObservable(expected);
  });
});

Answer 1

您可能想查看 NGRX/Google 团队的 NGRX example app。它利用 Jasmine-Marbles 来测试流，就像在 NGRX Effects 中使用的那样。通过这种方式，您可以测试流在执行后是否关闭，以及在预期值到达之前有多少元素通过它们。所有这些都只需要几个破折号（刻度）。

如何在ngrx中测试效果？

How to test effects in ngrx?

side-effects

effects

redux

ngrx

ngrx-effects