견고한 JS 소프트웨어 만들기 강의노트4

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.

보다 자세한 내용은 강의를 통해 확인하실 수 있습니다.

 

클릭카운터 모듈 - 스펙3

감소버튼, 추가되는 수의 변화가 필요할지도 모른다.

모듈을 바꿔야할텐데...

ClickCounter모듈은 데이터를 주입받는다.

테스트 코드 작성

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

모듈수정

xxxxxxxxxx
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++
    }
  }
}

기존코드 변경

xxxxxxxxxx
  beforeEach(()=> {
    data = {value: 0}
    counter = App.ClickCounter(data)
  })

 

클릭카운터 모듈 - 스펙4

ClickCounter모듈의 increase함수는 대체될 수 있다.

증가 뿐만아니라, 감소 기능도 추가하고 싶으며 명칭을 increase에서 count로 변경하고 싶음

테스트 코드 작성

xxxxxxxxxx
  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)
    })
  })

모듈 수정

var App = App || {}
​
App.ClickCounter = _data => {
  if (!_data) throw Error('_data')
  const data = _data
  data.value = data.value || 0
​
  return {
    getValue() {
      return data.value
    },
​
    count() {
      data.value++
    },
​
    setCountFn(fn) {
      this.count = () => (data.value = fn(data.value))
​
      return this
    }
  }
}