04-추가 요구사항도 쉽게 받을 수 있는 코드 만들기

인프런 김정환 님 견고한 JS 소프트웨어 만들기 강의 노트 입니다.

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

실무에서는 요구사항이 변경되거나 추가될 수 있다.

기능이 필요할지도 모른다는 건 뭘까.

카운터가 여러 개 필요할까?

지금 코드에서 모듈을 재사용할 수 있는 방법이 뭘까?

즉 확장성을 고려해서 코드를 짜야 한다.

세 번째 스펙. ClickCounter모듈은 '데이터'를 주입받는다.

증가 뿐만 아니라 감소까지 되려면 어떻게 해야 할까

버튼이 두 개 있어야 하고 counter도 두 개 있어야 한다.

increase 함수와 decrease 함수가 존재해야 한다.

근데 현재 ClickCounter는 데이터를 closure로 관리하고 있기 때문에

외부 모듈과 공유할 수 없다.

증가를 위한 클릭 카운터와 감소를 위한 클릭 카운터를 만들면

각각 카운터가 생기기 때문에 카운터는 공유되어야 한다.

공통의 데이터가 있고, 클릭 카운터 모듈이 이 데이터를 주입 받으면 된다.

git checkout -f ClickCounter-spec-3

ClickCounter.js

var App = App || {}

App.ClickCounter = _data => {
  if (!_data) throw Error('_data');

  // 데이터를 공유하기 위해선 원시형을 사용할 순 없다.
  // 참조형을 사용해야 한다.
  const data = _data;
  data.value = data.value || 0;

  return {
    getValue() {
      return data.value;
    },

    increase() {
      data.value++
    }
  }
}

ClickCounter.spec.js

describe('App.ClickCounter', ()=> {
  let counter, data;
  // 값을 주입받아야 하기 때문에 주입되지 않았을 때 에러를 발생시킨다.
  it('초기값을 주입하지 않으면 에러를 던진다', () => {
    const actual = () => (counter = App.ClickCounter());
    expect(actual).toThrowError();
  })

  beforeEach(() => {
      // value라는 속성을 가진 객체 data를 주입한다.
      data = { value: 0 };
      counter = App.ClickCounter(data);
    }
  )

  // ...
})

ClickCountView.spec.js

describe('App.ClickCountView 모듈', () => {
  let udpateEl, clickCounter, view

  beforeEach(()=> {
    // value 속성을 가진 data 객체 주입
    const data = { value: 0 }
    clickCounter = App.ClickCounter(data)
    updateEl = document.createElement('span')
    triggerEl = document.createElement('button') 
    view = App.ClickCountView(clickCounter, {updateEl, triggerEl})
  })

  // ...
})

2. 클릭카운터 모듈 - 스펙4

현재 increase는 1씩만 증가시킨다.

감소도 시킬 수 있어야 하고, 1뿐만 아니라 다른 숫자로 할 수 있어야 한다.

네 번째 스펙.

클릭 카운터 모듈의 increase함수는 대체될 수 있다.

값을 올릴 수도, 내릴 수도 있어야 한다.

이름을 increase가 아니라 count로 바꾸자.

git checkout -f ClickCounter-spec-4

ClickCounter.spec.js

describe('App.ClickCounter', ()=> {
  let counter
  const data = { value: 0 }

  it('초기값을 주입하지 않으면 에러를 던진다', () => {
    const actual = () => (counter = App.ClickCounter())
    expect(actual).toThrowError()
  })

  beforeEach(()=> (counter = App.ClickCounter(data)))

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

  describe('count()', ()=> {
    it('카운터를 1 올린다', ()=> {
      const initialValue = counter.getValue()
      counter.count()
      expect(counter.getValue()).toBe(initialValue + 1)
    })
  })

  describe('setCountFn()', () => {
    it('인자로 함수를 넘기면 count()를 대체한다', () => {
      // 준비
      const add2 = value => value + 2; // 바꿀 함수를 준비하고
      const expected = add2(data.value);
      // 실행
      counter.setCountFn(add2).count(); // 바꿀 함수를 전달한 뒤 실행
      const actual = counter.getValue();
      // 검증
      expect(actual).toBe(expected);

    })
  })
})