2021 02 05(금) TIL - 269 cypress type, each(자동차 경주 미션)

Today I Learned

코드 작성 순서에 대한 고민

자동차 경주 미션을 진행했다. 지난 초간단 미션, 계산기 미션을 진행할 때는 모든 테스트를 작성하고 기능을 구현하는 방식으로 진행했었다. 오늘은 오전 강의에서 준이 테스트와 기능을 번갈아 작성하는 것을 보고 그 방식을 따라해보기로 했다.

오전 강의와 포수타로 평소보다 짧게 페어프로그래밍을 진행했다. 하지만 그 짧은 시간동안 테스트와 기능을 번갈아 작성하는 방법에서 아래와 같은 단점들을 느낄 수 있었다.

1. 코드 작성의 흐름이 끊긴다.(집중력이 분산된다.)
2. 기능을 작성하면서 샛길로 간다.(하나 이상의 기능을 작성하려고 한다.)

이 방법을 도입하려고 한 이유는 아직 테스트 코드에 대한 확신이 없기 떄문이었다. cypress를 접한지 얼마 안 된 지금 시점에서는 테스트 코드를 작성해도 테스트가 의도한대로 실행될지에 대한 확신이 없는 경우가 많다. 매번 새로운 cypress 메서드들을 사용하게 되고 테스트가 잘 실행되는지 확인하기 위한 테스트코드를 위한 테스트(?)가 필요하다고 생각했다. 그래서 빠르게 하나의 테스트를 구현하고 하나의 기능을 구현하는 식으로 작성한 테스트 코드에 대해서도 빠른 피드백을 얻고 싶었다. 하지만 오늘 진행을 해보니 득보다는 실이 더 많은거 같다. 다음부터는 다시 모든 테스트 코드를 작성하고 기능들을 구현하는 식으로 진행할거 같다.

cypress type, each

위와 같이 input창에 자동차 이름을 입력 받고 확인 버튼을 누르면 하단에 해당 이름을 가진 노드들이 생성되는 테스트를 작성했다. input창에 입력을 받기 위해 type 메서드를 사용했다. 어떻게 입력을 하는지 공식 문서를 보고 있었는데 type메서드인가 Number, String 등의 타입을 판별하는 메서드인줄 알고 넘길뻔 했는데 페어인 하루가 typing을 해주는 메서드인걸 발견하고 알려줬다.

each메서드도 사용했다. 운이 좋게도 어제 포코 코치와 짧은 대화를 나누다가 반복되는 작업에 대한 메서드를 질문했다가 each메서드의 존재를 알게돼서 사용법을 찾아본 덕분에 시행착오 없이 바로 코드에 적용할 수 있었다. 완성된 테스트 코드는 아래와 같다.

  it('"EAST, WEST, SOUTH, NORTH"를 입력하면 화면에 해당 자동차 이름들을 표시하는 테스트를 한다.', () => {
    const carNames = ['EAST', 'WEST', 'SOUTH', 'NORTH'];
    cy.get('#car-name-input').type('EAST, WEST, SOUTH, NORTH');
    cy.get('#car-name-submit').click();

    cy.get('.car-player')
      .should('have.length', carNames.length)
      .each(($div, index, $lis) => {
        return cy.get($div).should('have.text', carNames[index]);
      });
  });

지금 코드를 붙여넣으면서 보니 each메서드의 인자 이름들이 적절하지 않은거 같다는 생각이 든다. 이 부분은 다음 페어프로그래밍 때 리팩토링을 제안해야겠다.

오늘은 평소보다 짧은 페어 프로그래밍이었지만 평소와 다름없는 많은 인사이트들을 얻었다.

Thanks To Pair : 하루

Today Commit Review

• woowacourse-projects
  • 진행한 프로젝트들을 정리했다.
• vanilla-javascript-boilerplate
  • eslint config 내용을 추가했다.

Today Review

• 오전에는 준이 진행하는 TDD강의가 있었다. TDD Assertions와 BDD Assertions에 대해 명확하게 이해하지 못 하고 있었는데 예시 코드와 함께 이 부분을 설명해줘서 흐렸던 부분이 맑아지는 기분이었다.
• 왜 프론트엔드에서는 기존에 TDD방법론을 그대로 적용하기 힘들었고 그래서 BDD가 탄생하게 된 배경까지 이해할 수 있어서 좋았다.
• 간단한 프로그래밍을 작성하면서 설명을 하고 그 다음 크루들이 번갈아가면서 준이 작성한 코드를 리팩토링 하는 시간을 가졌는다. 리팩토링을 하면서 다른 사람들의 코딩 스타일과 철학을 할 수 있어서 좋았다.
• 우테코를 진행하면서 매일 많은 인사이트들을 얻고있다. 여러 정보와 팁들이 쏟아지다보니 모든걸 받아들이고 소화하지는 못 하고 있는것 같다. 바로 내것으로 만들고 적용하지 못할거라면 기록을 열심히 해서 천천히라도 모든 내용을 소화하고 싶다. 더 열심히 해야겠다.