🧪 Hyundux‐test: 상태관리 테스트

소개

클라이언트 상태관리 툴인 hyundux에서 given when then의 패턴을 기준으로 state를 spread하지 않고 각 state에 대응되는 모든 상황을 한 파일에서 관리하는 것을 원칙으로 하는 test 모듈이다.

주안점

1. given when then: 이 3가지 테스트 원칙을 바탕으로 테스트가 하려는 이전 상태와 결과 상태가 명확히 보인다.
2. 순수함수: hyundux의 reducer는 현재의 할당된 state 에만 반응하는데 이때 오로지 순수함수로만 만들어졌기 때문에 기존 hyundux가 testable하기 때문에 이를 최대한 이용하고자 하였다.

hyundux-test 구조

Test code

const tester = createHynduxTester(initFindingGameState, findingGameReducer);

test("결과보여지는 것들의 인덱스변경_입력값:1 -> 결과값 1 (옮은 테스트)", () => {
  const givenData = initFindingGameState.payload;
  const whenData: Action = action.changeShowingAnswer(1);
  const thenData = tester.makeThenPayload({ answerIndex: 1 })
  tester.given(givenData).when(whenData).then(thenData, true);
});

1. givenData: 주어진 데이터 (위 코드에 경우 initState를 가지고 있다.)
2. whenData: action이 주어지면 givenData를 변경하는 역할을 한다.
3. thenData: expected Data라고도 할 수 있다.
4. tester.given().when().then(): 이는 주어진 테스트의 상태와 액션들을 명확히 가시화 해주는 역할을 한다. then의 두번째 파라미터는 해당 테스트의 결과를 예상해서 적는다.

구현부

export class HyunduxTest<T> {
  store: Store | null = null;
  currentState: State<T> | null = null;
  currentAction: Action | null = null;
  resultState: State<T> | null = null;
  
  constructor(initState: State<T>, reducer: Reducer<T>) {
    this.store = createStore();
    this.currentState = initState;
    if (this.store !== null) {
      this.store.subscribe(initState, reducer, (newState) => {
        this.resultState = newState;
	  });
	}
  }
  
  makeThenPayload(payLoad: object) {
    return { ...this.currentState.payload, ...payLoad };
  }
  
  given(givenPayload: T) {
    this.store.states = [createState(this.currentState.type, givenPayload)];
    if (this.store !== null && this.currentState !== null) {
      this.currentState = createState(this.currentState.type, givenPayload);
    }
    return this;
  }

  when(action: Action) {
    this.currentAction = action;
    return this;
  }
  
  async then<T>(expectedPayload: T, isTrue: boolean = true) {
    if (this.currentAction != null &&
        this.store !== null &&
        this.currentState !== null
    ) {
      this.store.states = [this.currentState];
      await this.store?.dispatch(this.currentAction);
      if (this.resultState !== null) {
        if (isTrue) {
          expect(this.resultState?.payload).toEqual(expectedPayload);
        } else {
          expect(this.resultState?.payload).not.toEqual(expectedPayload);
        }
      }
    }
  }
}

given, when, then 패턴을 기준으로 현재 객체가 가지는 변수들을 바꾸면 마지만 then의 실행을 돕는 역할을 한다. 즉 given, when, then은 명시적이 함수이다.

+ Hyundux-saga의 테스트

놀랍게도 Hyundux-saga는 단순히 API와 action을 연결하는 역할을 하기 때문에 테스트할때는 기존 action과 똑같이 다룰 수 있다.

test("Test Title", () => {
  const givenData = initFindingGameState.payload;
  const whenData: Action = action.click({ request: {
      answerList: [
        { positionX: 0.5, positionY: 0.5 },
      ]
    }, response: {
      responseCode: 1000,
      message: "success",
      data: {
        ticketIryd: "1212",
        startTime: "asdsad",
        correctAnswerList: [
          {
            positionX: 0.5,
            positionY: 0.5,
            descriptionImageUrl: "",
            title: "",
            content: ""
          }
        ]
      }
  }})
  const thenData = tester.makeThenPayload({ showingAnswers: [{
    positionX: 0.5,
    positionY: 0.5,
    descriptionImageUrl: "",
    title: "",
    content: ""
  }]})
  tester.given(givenData).when(whenData).then(thenData, true);
});

놀랍게도 click action을 saga에서 사용하는 action인데 위처럼 mock 데이터를 넣어도 잘 테스트 된다.

추후 수정사항

1. saga의 test는 특정 순간에 test를 걸 수 있는데 그 점은 매우 큰 장점인거같다(generate function이기 때문이긴 하지만...)
2. 실제 hyundux-saga에 대한 비동기 처리를 해볼 수 있는 테스트 모듈도 필요로할것 같다.