Backbone.js의 이벤트 테스트에서 빠진 이야기

빠진 코드

아래의 coffeescript 코드를 jsTestDriver로 테스트합니다. 덧붙여 저의 경우 Backbone.js를 사용해 빠졌습니다만, 기본적으로는 jQuery의 on에서도 같은 결과가 될 것 같습니다.

eventsample.coffee

class @EventSample
  constructor: ->
    @func = null

    Backbone.on("test", => @.onTest())

  onTest: ->
    @func()

이벤트 "test"가 발생하면 onTest() 를 실행할 뿐의 클래스입니다.

onTest()는 @func ()를 실행합니다. 그러나 @func 은 초기 값은 null입니다.

테스트 코드는 다음과 같습니다.

test.coffee

TestCase "Test1",
  setUp: ->
    @event = new EventSample()

  "test1": ->
    assertNull(@event.func)

TestCase "Test2",
  setUp: ->
    @event = new EventSample()
    @event.func = ->
      console.log "dummy"

  "test2": ->
    Backbone.trigger "test"
    assertNotNull(@event.func)

Test1은 클래스를 초기화하고 @func이 null인지 확인하는 테스트입니다.

Test2는 @func 에 적당하게 함수를 설정해, 이벤트 "test"를 발행하는 테스트입니다. @func ()가 실행되어야 합니다.

어떻게 빠졌습니까?

위의 테스트를 실행하면 Test2에서 @func이 null로 실행할 수 없다는 오류가 발생합니다.

원인

Test2 실행시에도 Test1에서 생성한 @event 인스턴스가 남아 있기 때문입니다. 이벤트 "test"를 발행하면 Test1, Test2 모두 @event onTest ()가 실행됩니다. Test1의 @event.func는 null이므로 당연히 함수로서는 실행할 수 없어 에러가 되어 버린다.

해결 방법

아래와 같이 on으로 등록한 이벤트를 해제하는 함수를 추가한다.

eventsample.coffee

class @EventSample
  constructor: ->
    @func = null

    Backbone.on("test", => @.onTest())

  #追加
  unbindEvent: ->
    Backbone.off("test")

  onTest: ->
    @func()

테스트는 tearDown으로 등록한 이벤트를 취소합니다.

test.coffee

TestCase "Test1",
  setUp: ->
    @event = new EventSample()

  tearDown: ->
    @event.unbindEvent()

  "test1": ->
    assertNull(@event.func)

TestCase "Test2",
  setUp: ->
    @event = new EventSample()
    @event.func = ->
      console.log "dummy"

  tearDown: ->
    @event.unbindEvent()

  "test2": ->
    Backbone.trigger "test"
    assertNotNull(@event.func)

아래와 같이 테스트가 OK가 되었습니다.