Backbone.js Jasmine规格测试中触发d3事件

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

例如，如果我将d3缩放行为附加到svg元素（我使用Backbone.js作为前端）：

代码（a）：

茉莉花中的以下测试失败：

代码（b）：

另一方面，（作为健全性检查）如果我将“dblclick”事件绑定到我的视图，如下图所示，则上述测试即代码（b）将通过：

代码（c）：

---

有谁能告诉我为什么我不能在Jasmine测试中触发D3 zoom事件，即代码（b），使用我的原始视图（即代码（a）吗

主干网触发jQuery事件，它似乎不会在jQuery世界之外注册。本文解释了一些变通方法。但是这里有一个用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对象上的事件。所以你可以附加一个间谍并触发它

正如M.Bostock在中所说：“jQuery触发器不发送实际事件；它只调用自己的侦听器。”

使用vanilla JS分派真实事件的一种方法是（基于中用户“handler”的回复）：

代码（b-修改）

---

因此，当对原始问题中的代码（a）执行Jasmine代码测试（b-modified）时，即svg元素具有d3.zoom（）行为时，代码中的Jasmine测试（b-modified）通过。

a由@biovision：

fixture.datum(dataset).call(barChart);

var callback = jasmine.createSpy("filterCallback");
barChart.on('customHover', callback);
//to trigger all elements    
fixture.selectAll('.bar').each(function() {
    this.__onmouseover();
});

expect(callback).toHaveBeenCalled();

---

你应该把你的答案扩展成你自己的，因为你永远不知道Biovisualize的帖子是否会因为任何原因被删除。

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")  

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]);
});

it "calls zoom listener on dblclick", ->
  zoom_spy = spyOn(MyView.prototype, "zoom_listener").andCallThrough()
  view = new MyView()

  jQuery.fn.custom_mouse_dblclick = (->
    this.each(((i, element) ->
      evt = document.createEvent("MouseEvent")
      evt.initMouseEvent(
        "dblclick",
        true,
        true,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null)
      element.dispatchEvent(evt)
    ))
  )
  view.$(".viewport").custom_mouse_dblclick()
  waitsFor((-> zoom_spy.callCount == 1), "Call zoom", 1000) 

fixture.datum(dataset).call(barChart);

var callback = jasmine.createSpy("filterCallback");
barChart.on('customHover', callback);
//to trigger all elements    
fixture.selectAll('.bar').each(function() {
    this.__onmouseover();
});

expect(callback).toHaveBeenCalled();