使用 Jasmine 对 javascript/jQuery 事件进行单元测试

Question

我有这个代码：

$(document).on('click', '#clear-button', clearCalculatedPrice)

clearCalculatedPrice = ->
    $('#price_rule').removeAttr('data-original-title')
    $('#calculated-price').removeAttr('data-original-title')
    $('#calculated-price').empty()

还有这样的测试

describe 'Call taker', ->
  it 'should clear calculated price', ->
    spyOn($.fn, 'removeAttr')
    spyOn($.fn, 'empty')
    clearCalculatedPrice()
    expect($.fn.removeAttr).toHaveBeenCalled()
    expect($.fn.empty).toHaveBeenCalled()

我需要创建另一个测试来检查触发事件时调用的函数，像这样

     it 'should clear calculated price when "click" event is triggered', ->
      $('#destination-clear-button').trigger('click')
      spyOn($.fn, 'removeAttr')
      spyOn($.fn, 'empty')
      expect($.fn.removeAttr).toHaveBeenCalled()
      expect($.fn.empty).toHaveBeenCalled()

但是这个测试并没有像我想象的那样工作。所以问题是： 应该如何编写测试事件处理程序的单元测试

Answer 1

可能订单调用不好

 it 'should clear calculated price when "click" event is triggered', ->
  # set spys
  spyOn($.fn, 'removeAttr')
  spyOn($.fn, 'empty')
  # trigger
  $('#destination-clear-button').trigger('click')
  # check
  expect($.fn.removeAttr).toHaveBeenCalled()
  expect($.fn.empty).toHaveBeenCalled()