[230523] TDD

🧪 TDD(Test Driven Development)

테스트 주도 개발 즉, 테스트를 통한 기능의 구현

TDD의 단계

TDD 에서는 코딩을 할때 기능을 바로 개발하지 않고 테스트 코드를 먼저 작성한다. 이때 테스트 코드는 다음과 같은 단계의 반복을 거치게 된다.

1. 적색 단계 : 성공하기 위해 테스트에 실패하는 단계
2. 녹색 단계 : 테스트에 성공한 단계
3. 리팩터 단계 : 테스트에 성공한 코드를 기반으로 코드의 품질을 높이는 단계 (refactoring)
   (이미지 출처 - 프론트엔드스쿨 5기 교안)

TDD 방법론

Unit Test

단위 테스트는 코드의 가장 작은 단위를 테스트한다. 단위는 함수, 메서드 또는 클래스가 될 수 있다. 단위 테스트는 일반적으로 개발자가 작성하며 별도의 테스트 파일을 통해 실행된다.

E2E Test

E2E(End-to-End) 테스트는 소프트웨어 시스템의 전체 기능을 테스트한다. 브라우저와 상호작용을 통하여 테스트를 진행할 수 있다. 예를 들어, 테스트 라이브러리에서 지원하는 API 명령어의 cy.visit() 메서드를 사용하여 특정 URL로 이동하고 cy.click() 메서드를 사용하여 버튼을 클릭할 수 있다. 사람이 직접 할 수도 있다(QA팀).

TDD의 장점

• 자바스크립트는 인터프리터 언어인데 컴파일러의 역할을 테스트를 통해 대신 수행하여 기능의 구동을 보장한다. 이는 곧 코드를 안정적이고 견고하게 만들어준다.
  💡 컴파일러 언어: 컴파일러가 존재하는 언어
  사람이 작성한 코드를 컴파일러라는 프로그램이 기계어로 바꿔준다.
  변환하는 과정 중에 에러가 있으면 미리 잡아준다. : 컴파일 에러
  컴파일 과정으로 생성된 파일은 실행속도가 굉장히 빠르다.
  💡 인터프리터 언어
  중간에 번역하는 과정이 없고 통역가가 통역해주는 방식
  브라우저 엔진이 바로바로 해석하고 바로바로 실행한다.
  그래서 실행속도가 느리다.
  컴파일러가 없기 때문에 실제로 동작하는지, 문법적 오류가 없는지 잡아내는 과정이 없다.
• 구현해야 하는 기능에 대한 높은 분석을 요구하기 때문에 서비스에 대한 이해도가 상승하고 품질을 우선하는 사고를 하게된다.

TDD를 사용할 때 주의해야할 점

• 테스트 코드를 따로 작성해야 하기 때문에 시간이 더 들어가고 이는 곧 업무에 대한 부담으로 다가온다. 때문에 프로젝트가 급박하다면 TDD를 사용하지 않는 편이 좋다. 프로젝트의 성격에 따라 판단해야 한다.
• TDD가 모든 예외 상황을 해결해주지는 않는다. 결국 테스트 코드를 작성하는 사람이 고려하지 않은 상황은 테스트 코드도 놓칠 수 있기 때문에 테스트 코드를 작성했다고 해서 방심할 수는 없다. 테스트 코드는 견고하고 안정적인 코드를 지향하는 것이지 결코 완벽하진 않다.

TDD 라이브러리

https://github.com/yoonmallang22/TDD

💡 테스트 가능한 코드

• 테스트할 코드를 UI에서 완전히 분리해야 한다.
• 자바스크립트를 JS파일로 따로 분리해야 한다.
• 모든 기능은 함수로 구현한다. 함수 밖에 있는 내용은 테스트가 불가능하다.

Jasmine

Jest🌟

HTML 요소를 탐색하는데 접근성 마커 즉, WAI-ARIA를 이용한다. TDD를 작성함으로써 자연스럽게 접근성을 향상시키는 장점이 있다.

💡 모든 테스트 파일을 실행한다.