TDD-view

view 테스트하기

이전에 우리는 데이터를 담당하는 모듈인 ClickCounter모듈을 만들었었다

이제 데이터를 화면에 출력을 담당하는 ClickCounterView모듈을 만들 차례다

테스트 코드

describe('ClickCountView 모듈', () => {
  describe('updateView()', () => {
    it('ClickCounter의 getCounter() 실행결과를 출력한다', ()=> {
    });
  });
});

테스트 코드 명세를 받긴 했는데 어떻게 짜는 걸까..?

우선 데이터는 ClickCounter모듈에서 담당하고 있으니 일단 ClickCounter에 의존해야할 것 같다

가져온 데이터를 화면에 붙이려면 돔 엘리먼트가 필요하니 엘리먼트도 하나 만들어야하고

그 두개의 인자를 받아서 엘리먼트에 데이터를 넣어주는 ClickCounterView모듈을 만들어야한다

const clickCounter = App.ClickCounter();
const updateElem = document.createElement('span');
const clickCounterView = App.ClickCounterView(clickCounter, updateElem);

clickCounterView.updateView();

이제 준비 부분은 끝났고 테스트 부분을 짜야하는데

expect(updateElem.innerHTML).toBe(clickCounter.getValue().toString());

view에서 보이는 값이 실제 데이터의 값과 일치하는지 테스트 해주었다

이때 서로 원시 타입이 다르기 때문에 getValue는 문자열로 바꿔주어야한다

이제 실제 코드를 짜보자

실제 코드

ClickCounterView는 두개의 인자를 받고 updateView함수에서 그 인자를 결합?해 주면되니까

App.ClickCounterView = (clickCounter,updateElem)=>{

    return {
        updateView(){
            updateElem.innerHTML = clickCounter.getValue();
        }
    }
}

리팩토링

이번에도 테스트 코드를 리팩토링해야한다

앞으로 추가될 테스트 유닛들에서도 clickCounterView객체는 계속 생성할 것이기 때문에 중복될 가능성이 있어 미리 DRY한 코드로 바꿔주자

describe('ClickCountView 모듈', () => {
  let clickCounter,updateElem,clickCounterView;

  beforeEach(()=>{
    clickCounter = App.ClickCounter();
    updateElem = document.createElement('span');
    clickCounterView = App.ClickCounterView(clickCounter, updateElem);
  });

  describe('updateView()', () => {
    it('ClickCounter의 getCounter() 실행결과를 출력한다', ()=> {
      let value = clickCounter.getValue();

      clickCounterView.updateView();

      expect(updateElem.innerHTML).toBe(value.toString());
    });
  });
});