01.md

1. 클릭카운터 모듈 - 스펙1

어떤 모듈을 만들 때, 크게 화면에 보이는 부분, 보이지 않는 부분으로 나누어 생각할 수 있다.

지금은 화면에 보이는 부분을 먼저 만들자 보자.

ClickCounter는 카운터 데이터를 다루는 모듈이다.

counter 변수를 전역 공간이 아니라 ClickCounter 안에서 관리하자.

첫 번째 스펙

ClickCounter 모듈의 getValue()는 counter 값을 반환한다.

/* ClickCounter.spec.js */
// describe는 중첩해서 사용할 수 있다.
describe('App.ClickCounter', () => {
  describe('getValue()', () => {
    it('초기값이 0인 카운터 값을 반환한다', () => {
      const counter = App.ClickCounter();
      expect(counter.getValue()).toBe(0);
    })
  })
})

위 테스트 코드를 테스트 러너를 통해 실행시켜 보면 통과되지 못한다.

테스트할 코드가 작성되지 않았기 때문이다.

이것이 TDD의 첫 번째 단계, 적색 단계로 먼저 실패하는 코드를 작성하는 단계이다.

/* ClickCounter.js */
var App = App || {};

App.ClickCounter = () => {
  return {
    getValue() {
      return 0;
    }
  }
}

위와 같이 작성해주면 테스트가 성공한다. 이것이 두 번째 단계인 녹색 단계이다. 테스트를 통과하는 코드를 작성하는 단계이다.

하지만 ClickCounter로 변경시킬 counter라는 값은 계속 값이 변하기 때문에

0이라는 상수를 반환하면 안된다.

/* ClickCounter.js */
var App = App || {};

App.ClickCounter = () => {
  // counter라는 값은 계속 변하는 값이기 때문에 상수가 아니라 변수로 지정해줘야 한다.
  let value = 0;

  return {
    getValue() {
      return value;
    }
  }
}

위와 같이 리팩토링을 거치면서도 테스트를 통과했다.

이것이 세 번째 단계인 청색, 리팩토링의 단계이다.

짧은 결론

이렇게 안심하고 리팩토링할 수 있는 이유는 테스트코드 덕분이다.

이렇게 TDD는 하나의 기능에 대해 Red -> Green -> Blue(Refactor) 사이클로 개발하는 것이다.