275 자동차 경주 게임 미션 step2 PR

Today I Learned

자동차 경주 게임 미션 step2 PR

자동차 경주 게임 2단계 미션을 PR했다. 사실 조금 급하게 제출한 감이 있다. 현재 리뷰를 못 받은 PR들이 꽤 많아서 다음 주 월요일 전에 merge되는걸 목표로 할려면 빠르게 올리고 리뷰를 받고 피드백을 적용하는 방법이 좋을거라고 생각했다.

cy.tick()과 cy.clock()

두번째 미션이 setTimeout, setInterval , requestAnimationFrame 등을 사용해서 시간을 다루다보니 테스트를 위해서는 테스트에서도 시간을 조작할 필요가 있었다.

cy.clock()을 선언하고 cy.tick() 과 cy.clock()을 다양하게 사용해봤다. https://docs.cypress.io/api/commands/wait.html#Syntax cypress 공식문서를 보면 cy.clock()을 안티패턴으로 규정하고 있다.

그러나 실제 사용을 하면서 cy.tick()으로 해결하지 못 하는 경우를 만나서 cy.clock()을 많이 사용하게 됐다.

cy.tick() 을 사용한 케이스

it('자동차 경주 진행 중 턴마다 1초의 지연시간이 생기는지 테스트 한다.', () => {
  cy.clock();

  typeCarNameAndClickToSubmitButton();
  typeRacingCountAndClickToSubmitButton(1);

  // 첫번째 경기 진행시간 1000ms
  cy.tick(500);
  cy.get('#game-result-section').should('not.be.visible');
  cy.tick(500);
  cy.get('#game-result-section').should('be.visible');
  
  // 두번째 경기 진행시간 3000ms
  cy.get('#game-restart-button').click();
  typeCarNameAndClickToSubmitButton();
  typeRacingCountAndClickToSubmitButton(3);

  cy.tick(1500);
  cy.get('#game-result-section').should('not.be.visible');
  cy.tick(1500);
  cy.get('#game-result-section').should('be.visible');
}

cy.clock() 을 사용한 케이스

  it('자동차 경주 진행 중 지연시간마다 Anmiation이 출력되는지 테스트 한다.', () => {
    typeCarNameAndClickToSubmitButton();
    typeRacingCountAndClickToSubmitButton();

    cy.clock();

    // 경주 진행시간 5000ms
    cy.get('.spinner-container').should('be.visible');
    cy.wait(2000);
    cy.get('.spinner-container').should('be.visible');
    cy.wait(2000);
    cy.get('.spinner-container').should('be.visible');
    cy.wait(1000);
    cy.get('.spinner-container').should('not.be.visible');
  });

결론 : 혼란...ing

사실 cy.wait()를 사용하면 편하게 테스트코드 작성이 가능하지만 cy.wait()의 경우 실제 cypress에 지연시간이 생기면서 테스트 시간이 길어진다. 공식문서에 Anti-Pattern으로 나오기도 해서 최대한 사용을 지양하고 싶은데 공식문서에 설명된 내용만으로는 cy.wait()로는 되는데 cy.tick()으로는 안 되는 명확한 이유를 모르겠다.

지금 경험적으로는 어떤 상황에서는 cy.tick()으로는 테스트가 안 될거 같다. 이런 느낌은 받는데 아직 스스로도 납득이 가게 정리가 안 된다.

이 부분은 문서를 더 찾아봐야겠다.

Today Commit Review

• woowacourse-projects
  • 자동차 미션 step2 레포지토리를 추가했다.
  • 리스트로 바꾸니 한 눈에 들어오지 않는다.
  • 내일 다시 표 형식으로 바꿔야겠다.
• javascript-racingcar
  • 자동차 경주게임 2단계 미션을 PR했다.
  • 빨리 리뷰가 달리면 좋겠다.

Today Review

• 다른 분들의 PR과 거기에 달리는 리뷰어 분들의 피드백을 보면서 부족함을 많이 느낀다.
• 페어 프로그래밍이던 팀 프로그래밍이던 같이 하는 사람에게 짐이 되지 않도록 열심히 노력해야겠다.