NgRx로 Redux Pattern의 Application을 작성하는 중이다. Unit Test는 어느 정도 틀을 만들어 완료를 했고, IntegrationTest를 작성하는 중이다.

Unit Test에서 NgRx의 MockStore 기능을 사용하여 테스트를 수행했기에 역시나 MockStore를 사용하려고 하는데, 뻔한 곳에서 에러가 난다. 가만히 생각해 보니, MockStore는 Action이 Stream에 보이기는 하지만, Store의 State를 변경하지를 않는다. 

Integration Test를 하려면 State에 변화가 있어야 하는데, MockStore로는 불가능하다. Real Store를 사용해서 작성해야 할 듯.... 

가끔 프로그래밍하다 보면 새로운 걸 불현듯 깨닫는 때가 있다. 당연히 이미 알고 있어야 할 걸 말이지. 

오늘은 Unit Test를 하다가 Constructor와 OnInit의 용도 차이를 깨닫게 된다. 

OnInit은 Override 안 하면 안 생기니, 아무 생각 없이 Constructor에다 초기화 코드를 때려 넣었다. 

만들어낸 Unit Test를 하려고 보니 아.. 뭐냐.. 왜 이렇게 에러가 많이 생기는 거냐? 

Constructor에다 초기화 코드를 다 때려 넣었더니 Mocking을 안 하면 아예 동작을 안 한다. ㅋㅋ 

Assign와 DI만 빼고 다 옮겼더니 갑자기 Unit Test로 작업할 양이 확 줄면서, 동작하기 시작한다. 

왜 그랬을까나... 왜 몰랐을까나... 

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$ ),
    
    .................
    
  ));
  
  .....