在Jasmine规格测试中触发d3事件
我正在尝试使用Jasmine触发d3事件。特别是，我想检查我的事件侦听器是不是使用Jasmine spy调用的。
例如，如果我将d3缩放行为附加到一个svg元素(我使用Backbone.js作为我的前端)：
代码(a)：
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‘事件绑定到我的视图，如下所示，上面的测试，即Code (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)，使用我上面的原始视图，即代码(a)？
回答 3
Stack Overflow用户
发布于 2013-05-16 07:57:32
Backbone触发jQuery事件，这似乎不会在Backbone之外注册。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对象上的事件。这样你就可以带上一个间谍然后触发它。
Stack Overflow用户
发布于 2013-05-17 11:47:58
正如M.Bostock在https://github.com/mbostock/d3/issues/906中所说："jQuery触发器不调度实际事件；它只调用自己的侦听器。“
使用普通JS分派实际事件的一种方法是(基于How to invoke "click" event programmatically in d3?中用户“处理程序”的回复)：
代码(b-已修改)
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) 因此，当对原始问题中的代码(a)，即具有d3.zoom()行为的svg元素执行时，Code (b-modified)中的Jasmine测试通过。
Stack Overflow用户
发布于 2013-07-23 08:22:00
@Biovisualize对该示例的一个变体：
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();https://stackoverflow.com/questions/16575408
复制相似问题
腾讯云开发者
