NgRx Effect에 withLatestFrom을 조합해서 사용하는 Production Code는 아주 잘 동작한다. 근데, 이걸 Effect에서 Unit Test와 MockStore를 조합해서 사용하면 동작하지 않는다. 그냥 undefined stream이라는 에러만 뱉어 낸다. 

구글링을 해도 실마리는 없고, 대충 여러 가지 글을 추정으로 다음과 같은 결론을 내렸다. 

withLatestFrom은 Observable이나 Array등을 입력으로 받는데, 이게 이미 초기화가 이루어져 있어야 한다. 초기화가 이루어져 있지 않으면 undefined stream이 된다. 즉, 현재 에러는 withLatestFrom의 source stream 들이 초기화가 이루어져 있지 않아 undefined stream 에러를 발생시키는 것으로 보인다.  

Production Code에서는 MockStore 등을 사용하지 않으므로, Store의 초기화, 각 Observable들의 초기화 등의 모든 게 이루어진 다음에 withLatestFrom의 Source Observable이 참조되는 것 같다. 

해결책은 Source Observable이 할당된 후, Effect를 생성시키면 된다. 아래 예는 동작하지만, isActive$를 testPolling$ 아래에 위치키는 순간 undefined stream 에러가 발생한다. 

export class RecentEventStoreEffects {
  isActive$ = this.facade.isActive$;
  
  testPolling$ = createEffect( () => this.actions$.pipe(
    ofType(RecentEventStoreActions.RecentEventStartPolling),
    withLatestFrom( this.isActive$ ),
    
    .................
    
  ));
  
  .....
  

iif가 흔히들 생각하는 conditional statement라고 생각했는데 아니다. 

아래 예에서 언뜻 생각하기에는 input is arrived in 출력이 하나만 찍힐 것 같은데, 두 개가 찍힌다. 

iif는 조건문의 실행이 아니라, 리턴된 두 개의 stream 중 subscription만을 할 거냐 말거냐를 결정하는 거다. 

즉, "input is arrived in #1", "input is arrived in #2" 둘 다 찍히게 된다. 

import { of, pipe, iif } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const source$ = of('Input');
const one$ = (x) => {console.log(`${x} is arrived in #1`); return of('One')};
const two$ = (x) => {console.log(`${x} is arrived in #2`); return of('Two')};

source$.pipe(
  mergeMap(v =>
    iif(
      () => v === 'Input',
      one$(v),
      two$(v)
    ))
).subscribe( x => console.log('Output is ' + x ));

Angular 테스팅에서 jest를 사용하는데, Marble Testing을 해야하기에 테스팅 툴을 찾았다. 

jasmine-marble 과 비슷하게 jest-marble이 있기에 아무 생각없이 올려서 사용하는데, Time Progression Syntax가 지원이 안 된다. 사용 방법을 찾다가 알게 된 거, jasmine-marble이고 jest-marble이고 간에 모두 rxjs testing 툴을 그냥 Wrapping한 거였다. ㅎㅎ 

그냥 rxjs의 기본 testing tool을 사용하면 될 걸 삽질 하고 있었다. 

Reference

• https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing