問題描述

嘗試使用 Jasmine 測試在單擊的元素上調用事件處理程序.有一個Pad"對象，其中包含一個被點擊的 DOM 元素PadElement".事件處理程序是 Pad 對象上的一個方法:

Trying to test that an event handler gets called on a clicked element with Jasmine. Have a "Pad" object that contains a DOM element "PadElement", which gets clicked. The event handler is a method on the Pad object:

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

茉莉花測試:

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 通過鼠標單擊和模擬單擊成功寫入)，并且如果我直接調用 testPad.clickHandler()，Jasmine 的間諜可以拾取它.但是在實際測試中會發生什么?事件處理程序調用是否在運行時轉移到不同的對象?這樣做的正確方法是什么?

However, the test FAILS. Note that the event listener does get called (console.log writes successfully with a mouse click and with simulateClick), AND if I just call the testPad.clickHandler() directly Jasmine's spy can pick it up. But what happens during the actual test? Does the event handler invocation get transferred to a different object at runtime? What's the right way to do this?

推薦答案

您實際上是在測試 GRAPH.padElement 調用提供的 clickHandler 而不是 thisGRAPH.Pad 的.clickHandler 由GRAPH.padElement 調用.我會怎么做

You are actually testing that GRAPH.padElement calls the supplied clickHandler and not that this.clickHandler of GRAPH.Pad is called by GRAPH.padElement. How I would do that is

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.現在要做到這一點，我不會直接從 GRAPH.Pad 內部創建 padElement ，而是以某種方式從外部注入它，然后在 jasmine 規范中對其進行模擬.如果您對這部分不清楚，請告訴我，我可以為您整理一些代碼.

This may sound little different to what you are trying to achieve. But in ideal unit testing world you should be testing each unit independently, so I would first test that padElement does what it's supposed to do (as above) and then write another test to make sure GRAPH.Pad is passing correct handler to padElement. Now to do that I would not create padElement directly from within GRAPH.Pad but somehow inject it from outside and then mock it in the jasmine specs. If you are not clear on this part let me know and I can put some code together for you.

這篇關于Jasmine 不能監視事件處理程序?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！