javascript - Jasmine 不能监视事件处理程序？

Question

尝试使用 Jasmine 测试事件处理程序是否在单击的元素上被调用。有一个包含 DOM 元素“PadElement”的“Pad”对象，它会被点击。事件处理程序是 Pad 对象上的一个方法:

GRAPH.Pad = function(graphDiv, graph) {
    this.graph = graph;

    this.clickHandler = function(e) {
        console.log('padElement clickHandler called');
        //this.graph.createVertex(e.clientX, e.clientY);
    };
    this.padElement = GRAPH.padElement(graphDiv, this.clickHandler);
}

GRAPH.padElement = function(graphDiv, clickHandler) {
    //Initialize pad
    var NS="http://www.w3.org/2000/svg";
    var pad=document.createElementNS(NS,"svg");
    pad.setAttributeNS(null, 'id', 'pad');
    graphDiv.appendChild(pad);
    pad.addEventListener('click', clickHandler)
    return pad;
}

Jasmine 测试:

var testDiv = document.createElement('div');
var testGraph = new GRAPH.Graph(testDiv);
var testPad = new GRAPH.Pad(testDiv, testGraph);

  it('has its clickHandler function called when its padElement is clicked',
    function() {
      spyOn(testPad, "clickHandler");
      simulateClick(testPad.padElement);
      //testPad.clickHandler();
      expect(testPad.clickHandler).toHaveBeenCalled();
  });

但是，测试失败了。请注意，事件监听器确实被调用(console.log 通过鼠标单击和 simulateClick 成功写入)，并且如果我直接调用 testPad.clickHandler() 则 Jasmine 的 spy 可以将其拾取。但是在实际测试中会发生什么？事件处理程序调用是否在运行时转移到不同的对象？执行此操作的正确方法是什么？

Answer 1

您实际上是在测试 GRAPH.padElement调用提供的 clickHandler而不是那个this.clickHandler的 GRAPH.Pad由 GRAPH.padElement 调用.我会怎么做是

var testDiv = document.createElement('div');
var clickHandlerSpy = jasmine.CreateSpy();
var padelement = padElement(testDiv , clickHandlerSpy);

  it('has its clickHandler function called when its padElement is clicked',
    function() {
      simulateClick(testPad.padElement);
      expect(clickHandlerSpy).toHaveBeenCalled();
  });

这听起来可能与您要实现的目标略有不同。但在理想的单元测试世界中，你应该独立测试每个单元，所以我会首先测试 padElement做它应该做的(如上所述)，然后编写另一个测试以确保 GRAPH.Pad正在将正确的处理程序传递给 padElement .现在这样做我不会创建 padElement直接来自 GRAPH.Pad但以某种方式从外部注入(inject)它，然后在 jasmine 规范中模拟它。如果您对这部分不清楚，请告诉我，我可以为您整理一些代码。