时间戳

首页 > 解决方案 > Ngrx 效果测试 - 如何测试 auth login

angular - Ngrx 效果测试 - 如何测试 auth login

问题描述

很抱歉打扰你，但我很难

了解测试效果背后的逻辑:(

谁能给我解释一下

如何测试这个 Auth 登录效果？

我也在寻找一些有用的教程:)

AuthEffects

import { Injectable } from '@angular/core';

import { of } from 'rxjs';
import { map, switchMap, catchError } from 'rxjs/operators';

import { Actions, Effect, ofType } from '@ngrx/effects';

import { Credentials, AuthToken } from '../../models';
import { Go } from '../../../router';
import { AuthService } from '../../services';
import { AuthActionTypes, Login, LoginFailure, LoginSuccess } from '../actions';

@Injectable()
export class AuthEffects {
  @Effect()
  login$ = this.actions$.pipe(
    ofType(AuthActionTypes.Login),
    map((action: Login) => action.payload.credentials),
    switchMap((credentials: Credentials) => {
      return this.service.login(credentials).pipe(
        map((token: AuthToken) => new LoginSuccess({ token })),
        catchError(error => of(new LoginFailure(error)))
      );
    })
  );

  @Effect()
  loginSuccess$ = this.actions$.pipe(
    ofType(AuthActionTypes.LoginSuccess),
    map(() => new Go({ path: ['/admin'] }))
  );

  constructor(private actions$: Actions, private service: AuthService) {}
}

AuthEffects 测试

// Testing
import { HttpClientTestingModule } from "@angular/common/http/testing";
import { TestBed } from "@angular/core/testing";
import { provideMockActions } from "@ngrx/effects/testing";

// Rxjs
import { Observable } from "rxjs";

// Marbles
import { hot, cold } from "jasmine-marbles";

// Store
import { Credentials, AuthToken } from "../../models";
import { CONFIG, Config } from "../../../../config/config.module";
import { AuthService } from "../../services";
import { AuthEffects } from "./auth.effects";
import * as fromActions from "../actions";

const credentials: Credentials = {
  email: "io@io.io",
  password: "abc"
};
const error: any = { status: 401, message: "401 Unauthorized Error" };
const token: AuthToken = {
  token: "abc",
  expiresIn: 1546356028904
};

describe("AuthEffects", () => {
  let effects: AuthEffects;
  let actions: Observable<any>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        AuthService,
        {
          provide: CONFIG,
          useClass: Config
        },
        AuthEffects,
        provideMockActions(() => actions)
      ]
    });

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

  it("should work", () => {
    const action = new fromActions.Login({ credentials });
    const completion = new fromActions.LoginSuccess({ token });


    actions = hot("a", { a: action });
    const expected = cold("b", { b: completion });

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

测试失败并显示消息

Error: Expected $.length = 0 to equal 1.

标签： angularunit-testingngrxngrx-effects

解决方案

也许您应该在预期的 observable 中使用 '-b' 而不是 'b' ：

const预期=冷（“-b”，{b：完成}）；

这里有一个与您的案例类似的示例：https ://github.com/blove/ngrx-testing/blob/master/src/app/state/user/user.effects.spec.ts#L54

推荐阅读