如何使用茉莉弹珠测试 ngrx 效果？

Question

我无法测试 NgRx 效果。你能帮帮我吗？

朋友，请帮帮我。我想测试一些效果，但我不能。我收到错误“预期 $[0].notification.value.payload 是一种对象，但用户（{名称：'1212'，角色：['somerole']}）”。 我不明白哪里错了。

效果：

@Injectable({
  providedIn: 'root'
})
@Injectable()
export class AuthEffects {

  constructor(
    private actions$: Actions,
    private rootService: RootService,
    private router: Router,
  ) {
  }

  @Effect()
  authUser$: Observable<any> = this.actions$.pipe(
    ofType(authActions.FETCHING),
    map((action: authActions.Fetching) => action.payload),
    switchMap((paylod: UserRequest) => this.rootService.login(paylod)
        .pipe(
          map((value) => {
            const {sub, authorities} = value;
            this.router.navigate(['/customers-list']);
            return new authActions.Success(new User(sub, authorities));
          }),
          catchError(() => of(new authActions.Fail('wrong username or password')))
        )
    )
  );
}

规格：

describe('AuthEffects', () => {
  let effects: AuthEffects;
  let rootService: jasmine.SpyObj<RootService>;
  let actions: Observable<any>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, RouterTestingModule],
      providers: [
        RootService,
        AuthEffects,
        provideMockActions(() => actions),
        {
          provide: RootService,
          useValue: {
            login: jasmine.createSpy()
          }
        }
      ]
    });

    effects = TestBed.get(AuthEffects);
    rootService = TestBed.get(RootService);
  });

  it('should work', () => {
    const userRequest: UserRequest = {
      name: '1212',
      password: 'alsj'
    };
    const userResponse: UserResponse = {
      sub: '1212',
      authorities: ['somerole']
    };
    const editedUser: User = {
      name: '1212',
      roles: ['somerole']
    };
    const action = new authActions.Fetching(userRequest);
    const completion = new authActions.Success(editedUser);

    actions = hot('-a', {a: action});
    const response = cold('-a|', {a: userResponse});
    rootService.login.and.returnValue(response);
    const expected = cold('--b', {b: completion});

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

我试着按照一些例子来做，但有什么不对。

Answer 1

您必须对在测试中设置期望块的方式进行微小的更改。请尝试以下操作：

effects.authUser$.subscribe(actionSent => {
 expect(actionSent).toBeObservable(expected)
})

而不是

expect(effects.authUser$).toBeObservable(expected);

我希望这对你有用。

Answer 2

似乎构造函数打破了这个。如果我在没有构造函数的情况下更改效果代码 - 它的工作原理

  @Effect()
  authUser$: Observable<any> = this.actions$.pipe(
    ofType(authActions.FETCHING),
    map((action: authActions.Fetching) => action.payload),
    switchMap((paylod: UserRequest): any => this.rootService.login(paylod)
        .pipe(
          map((value: UserResponse) => {
            const {sub, authorities} = value;
            return new authActions.Success({
              name: sub,
              roles: authorities
            });
          }),
          catchError(() => of(new authActions.Fail('wrong username or password')))
        )
    )
  );