패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤"

코드 커버리지

• 보통 라인 수 기준으로 측정. 70%만 넘어도 훌륭한 수준.
  100%는 불가능. 억지로 100%로 맞추려고 어거지 코드를 작성하거나 중요한 로직이 없는 단순한 코드까지도 모두 테스트하는 건 오히려 시간 낭비.
  특히 프론트엔드 개발에서는 사용자의 입력 등으로 해결해야 하는 부분이 많아 더 어려운 면이 있음.
  E2E 테스트로 보완이 가능하긴 한데 완벽하게 된다는 뜻은 아님.
  일단 브라우저 구동하고 사용자의 행동을 에뮬레이션하는 게 느림. 파일 드래그처럼 구현이 어려운 동작도 있음.

TDD

• Test Driven Development : 테스트 주도 개발 방법론
• 테스트를 먼저 작성하고 그 후 실제 코드를 작성하는 방법

*BDD(Behavior Driven Development) : 행동 주도 개발 방법론

장점

• 테스트를 먼저 작성하기 때문에 전체 코드에서 얼마나 많은 코드가 테스트 되는가를 측정하는 테스트 커버리지 비율이 자연스럽게 높아짐
• 테스트 되는 것만 코드로 작성하므로 코드가 방대해지지 않음
• 버그때문에 발생하는 시간 낭비 줄여주고, 코드가 원하는 바를 명확히 달성하는지 쉽게 확인 가능

방법

1. 테스트를 먼저 작성
   → 만족하는 코드가 없는 상태이므로 당연히 이 테스트는 실패함
2. 테스트를 통과하는 코드를 작성
3. 리팩토링
   → 중복이 보이거나 더 개선할 방법이 있다면 코드 개선

TDD 3대 원칙 - 로버트 C. 마틴 (밥 아저씨, 클린 코더)
1. 실패할 테스트를 작성하기 전에는 아무런 프로덕션 코드도 작성하지 않는다.
2. 실패할 테스트 말고는 작성하지 않는다.
3. 현재 실패한 테스트를 만족시키는 코드 외에는 작성하지 않는다.

TDD 실습
369게임 - 숫자 배열을 넣으면 369게임 규칙에 따라 숫자를 읽는 문자열을 반환하는 프로그램
ex) game([1, 2, 3]) => '일,이,짝'

1. [1, 2]만 넣어서 숫자를 읽는지 테스트
   오류) 3/6/9에서는 짝
2. 3이 들어가면 짝으로 나오는지 테스트
   오류) 두 자릿수라면 두 숫자 다 확인해야함
3. 3이 나오면 두 번 짝짝하는지 테스트. 최종적으로 세 자리도 테스트

<script>
function game(arr) {
	const hangul = '영일이삼사오육칠팔구';
    const read = arr.map((num) => {
    	if(num === 3 || num === 6 || num === 9) {
        	return '짝';
        }
    	return hangul[num]
    });
    return read.join(',');
}

// 테스트 코드
describe('369 게임', () => {
	it('[1,2]를 넣으면 일,이가 반환되어야 함', () => {
    	expect(game([1,2])).toBe('일,이')
    })
    
	it('[1,2,3]은 일,이,짝으로 읽어야 함', () => {
    	expect(game([1,2,3])).toBe('일,이,짝')
    })
    
	it('[1,2,3,4,5,6]은 일,이,짝,사,오,짝으로 읽어야 함', () => {
    	expect(game([1,2,3,4,5,6])).toBe('일,이,짝,사,오,짝')
    })
    
	it('[1,2,3,4,5,6,7,8,9]은 일,이,짝,사,오,짝으로 읽어야 함', () => {
    	expect(game([1,2,3,4,5,6,7,8,9])).toBe('일,이,짝,사,오,짝,칠,팔,짝')
    })
    
	it('[10,11,12,13]은 십,십일,십이,짝으로 읽어야 함', () => {
    	expect(game([10,11,12,13])).toBe('십,십일,십이,짝')
    })
    
	it('[29,30,31,32,33]은 이십구,짝,짝,짝,짝짝으로 읽어야 함', () => {
    	expect(game([29,30,31,32,33])).toBe('이십구,짝,짝,짝,짝짝')
    })
})
</script>