1. TDD 이론 및 패턴 소개

아리송한 상황들

자바스크립트는 잘못된 코드를 작성하기 쉽다.

아래의 예시처럼 console.log 함수가 매우 쉽게 오버라이드 될 수 있다. 의도된 언어 스펙이지만 개발자들이 실수할 가능성이 높은 것이다.
```
console.log = 14
14
console.log(); // Uncaught TypeError: console.log is not a function
```
타입이 헷갈린다.

아래의 코드에 대한 결과를 예상해보자😨
```
'1' + 1 = '11'
'2' * 3 = 6
1 + '2' + 3 * 4 = '1212'
```
컴파일러가 없으니 테스트가 최선이다.

자바스크립트의 단점을 극복할 방법으로 **테스트주도개발(TDD)**를 한다.

몇 가지 테스트 개념들

단위 테스트(Unit Test)

단위(Unit): 특정 조건에서 어떻게 작동해야 할지 정의한 것으로 대게 '함수'로 표현한다. 준비(arrange), 실행(act), 단언(assert) 패턴을 따른다.
테스트주도개발(TDD)

TDD를 하는 목적? 품질 높은 코드를 만들기 위해서이다.
1. 단위 테스트 진행
2. 적색(Red: 오류 발생) → 녹색(Green: 오류 미발생) → 리팩터(Refactor: 품질 관리) 순환
3. 위의 과정을 통해 테스트하기 쉬운 코드를 만든다.
4. 관심사의 분리가 자연스럽게 이루어진다.

설치

재스민 Framework을 설치하고 TDD 개발 환경 꾸며보기

Getting Started

두 가지 설치 방법
- standalone ✅ 모든 자스민 코드를 브라우저에 올려서 실행하는 방법, 간단하게 실행결과를 볼 수 있으나 실무에서 그리 많이 쓰지는 않는다.
- karma와 함께 설치하는 방법 (자동화) 실무에서 주로 사용한다.
여기에서 jamine-standalone-3.6.0.zip 다운로드
압축을 풀고 SpecRunner.html을 실행하여 화면을 확인

**테스트 러너(Test Runner)**란

재스민, 소스, 테스트 코드를 실행하는 녀석
스탠드 얼론으로 설치한 자스민은 HTML 파일이 테스트 러너
(테스트 자동화를 하려면 테스트러너인 카르마(karma)와 함께 사용할 수 있음)
fork한 lecture 레포지토리 에서 git checkout -f install-jasmine 해당 폴더 내 index.html을 켜보면 테스트 결과 화면을 확인할 수 있다.
실제 동작하는 유닛테스트를 index.html에서 확인해보자
- 테스트 꾸러미(Test Suite): describe('테스트 설명', 테스트 구현 함수)
- 테스트 스펙(Test Spec): it('테스트 설명', 기대식을 가진 테스트 구현 함수)
- 기대식과 매쳐: expect(결과 값).toBe(기대하는 값)
- 스파이: spyOn(감시할 객체, 감시할 메소드)

<html>
  <head>
    <meta charset="UTF-8">

    <link rel="shortcut icon" type="image/png" href="../jasmine/lib/jasmine-2.6.4/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="../jasmine/lib/jasmine-2.6.4/jasmine.css">

    <script type="text/javascript" src="../jasmine/lib/jasmine-2.6.4/jasmine.js"></script>
    <script type="text/javascript" src="../jasmine/lib/jasmine-2.6.4/jasmine-html.js"></script>
    <script type="text/javascript" src="../jasmine/lib/jasmine-2.6.4/boot.js"></script>
  </head>
  <body>

  <script>
    describe('hello world', ()=> { // 테스트 스윗: 테스트 유닛들의 모음 
      it('true is true', ()=> { // 테스트 유닛: 테스트 단위, 테스트 케이스
        expect(true).toBe(true) // 매쳐: 검증자 
      })
    })
  </script>

  </body>
</html>