NgRx Effects を使用する Angular 5 アプリがあります。エフェクトの 1 つは、ユーザーが入力したデータを NodeJS バックエンドに渡すことで、Web サイトへのサインアップを処理します。エフェクトは意図したとおりに機能しますが、マーブルで単体テストをしようとすると、奇妙なエラーが発生します。
これは効果です:
@Effect()
authSignup$ = this.actions$
.ofType(AuthActions.TRY_SIGNUP)
.switchMap((signUpData: {
first_name: string,
last_name: string,
username: string,
password: string,
type: string,
agreement: boolean
}) =>
this.httpClient.post(
'/custom-endpoint',
{
first_name: signUpData.first_name,
last_name: signUpData.last_name,
username: signUpData.username,
password: signUpData.password,
type: signUpData.type,
agreement: signUpData.agreement
},
{
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
})
.map((res) => {
return new AuthActions.SuccessfulSignup();
})
.catch((error: {reason: string}) => {
return Observable.of(new AuthActions.UnsuccessfulSignup({reason: error.reason}))
})
);
これはビー玉を使った単体テストです。これは、NgRx 効果をテストするための Todd Motto のガイドラインに従います。
export class TestActions extends Actions {
constructor() {
super(empty());
}
set stream(source: Observable<any>) {
this.source = source;
}
}
export function getTestActions() {
return new TestActions();
}
fdescribe('AuthEffects', () => {
let actions$: TestActions;
let effects: fromEffects.AuthEffects;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CookieModule.forRoot(),
StoreModule.forRoot({...fromGlobal.reducers}),
RouterTestingModule,
HttpClientTestingModule
],
providers: [
fromEffects.AuthEffects,
CookieAesService,
{ provide: Actions, useFactory: getTestActions },
],
});
actions$ = TestBed.get(Actions);
effects = TestBed.get(fromEffects.AuthEffects);
});
it('should attempt to Sign Up the user', () => {
const trySignup = new fromActions.TrySignup({
first_name: 'test',
last_name: 'test',
password: 'test',
username: 'test@test.com',
type: 'test',
agreement: false
});
const unsuccessfulSignup = new fromActions.UnsuccessfulSignup({ reason: 'test' });
actions$.stream = hot('a', { a: trySignup });
const expected = cold('b', { b: unsuccessfulSignup });
expect(effects.authSignup$).toBeObservable(expected);
});
});
最後に、これは Karma で表示されるエラーです。
Expected $.length = 0 to equal 1.
Expected $[0] = undefined to equal Object({ frame: 0, notification: Notification({ kind: 'N', value: UnsuccessfulSignup({ payload: Object({ reason: 'test' }), type: 'UNSUCCESSFUL_SIGNUP' }), error: undefined, hasValue: true }) }).
trySignup
このやや不可解なエラー メッセージから、アクションは実行されたが、アクションは実行されなかったと推測できunsuccessfulSignup
ます。なぜこれが起こっているのか誰にも分かりますか?
ありがとう!