TDD 1

카운터 프로그램

우리는 버튼을 누르면 값이 올라가는 매우 흔하고 아주 간단한 프로그램을 만들 건데

내가 만드는 난잡하고 조잡한 코드에서

TDD강의를 보고 만들게 되면 코드가 어떻게 달라질지 한번 봐야겠다

우선은 화면에 보이지않는 부분인 데이터 부분을 만들어보자

클릭 카운터 모듈

말 그대로 클릭했을 때 데이터들의 변동을 관리하는 모듈이다

// in ClickCounter.spec.js

describe('ClickCounter', ()=> {
  describe('getCounter()', ()=> {
    it('초기값이 0인 카운터 값을 반환한다', ()=> {
      const counter = App.ClickCounter();
      expect(counter.getValue()).toBe(0);
    });
  })
})

위는 테스트 코드가 들어있는 spec.js의 내용

네임스페이스 App에 있는 ClickCounter를 불러와서 객체를 생성한 뒤에

getValue로 값을 불러와서 기댓값이 0임을 확인하는 테스트 코드이다

// in ClickCounter.js

var App = App || {};

실제 코드가 있는 js 당연하게도 아직 네임스페이스 외에는 아무것도 구현되지 않았다

tdd의 단계는 실패->성공->리팩토링 순서이다

아무것도 구현되어있지 않기 때문에 실패하는 것이 당연

우리는 이제 이 실패를 성공으로 만들 코드를 js안에 구현해야한다

var App = App || {};

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

value 값은 0으로 초기화 했고

내부의 value를 불러오는 getValue메소드를 구현했다

성공단계인데 이제 리팩토링 단계인데

지금은 딱히 리팩토링 할 것이 보이지 않아서 넘어간다