backbone.js - 在 Jasmine 规范测试中触发 d3 事件

Question

我正在尝试使用 Jasmine 触发 d3 事件。特别是，我想检查是否正在使用 Jasmine spy 调用我的事件监听器。

例如，如果我将 d3 缩放行为附加到 svg 元素(我的前端使用 Backbone.js):

代码(一):

class MyView extends Backbone.View
  initialize: ->
    zoom = d3.behavior.zoom().on("zoom", this.zoom_listener)   
    d3.select(this.el).append("svg").attr("class", "viewport").call(zoom)

  zoom_listener: ->
    console.log("zoom called") 

Jasmine 中的以下测试失败:

代码(b):

it "calls zoom listener on dblclick", ->
  zoom_spy = spyOn(MyView.prototype, "zoom_listener").andCallThrough()
  view = new MyView()
  view.$(".viewport").trigger("dblclick")
  waitsFor((-> zoom_spy.callCount == 1), "Call zoom", 1000) 

另一方面，(就像完整性检查一样)如果我将“dblclick”事件绑定(bind)到我的 View ，如下所示，上面的测试即代码 (b) 将通过:

代码(c):

class MyView extends Backbone.View
  events:
    "dblclick" : "zoom_listener"

  initialize: ->
    zoom = d3.behavior.zoom().on("zoom", this.zoom_listener)   
    d3.select(this.el).append("svg").attr("class", "viewport")
    # .call(zoom)     # commented off this line for the sanity check  

  zoom_listener: ->
    console.log("zoom called")  

谁能告诉我为什么我似乎无法在 Jasmine 测试中触发 D3 缩放事件，即代码 (b) 使用我上面的原始 View ，即代码 (a)？

Answer 1

Backbone 触发 jQuery 事件，它似乎没有在 jQuery 世界之外注册。解释了一些解决方法 here .但这是使用 Jasmine 测试 D3 事件的通用方法。

it('should trigger a callback on custom events', function() {
  fixture.datum(dataset)
    .call(barChart);

  var callback = jasmine.createSpy("filterCallback");
  barChart.on('customHover', callback);

  var bars = fixture.selectAll('.bar');
  bars[0][0].__onmouseover();
  var callBackArguments = callback.argsForCall[0][0];

  expect(callback).toHaveBeenCalled();
  expect(callBackArguments).toBe(dataset[0]);
});

D3 在 DOM 对象上公开事件。所以你可以附加一个 spy 并触发它。