Jasmine không thể gián điệp xử lý sự kiện?

Question

Cố gắng kiểm tra xem trình xử lý sự kiện có được gọi trên phần tử được nhấp với Jasmine hay không. Có đối tượng "Pad" chứa phần tử DOM "PadElement", được nhấp vào. Xử lý sự kiện là một phương pháp trên đối tượng 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; 
} 

Các thử nghiệm 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(); 
    }); 

Tuy nhiên, thử nghiệm thất bại. Lưu ý rằng trình nghe sự kiện không được gọi (console.log viết thành công với một cú click chuột và với simulateClick), VÀ nếu tôi chỉ gọi testPad.clickHandler() trực tiếp của điệp viên của Jasmine có thể nhặt nó lên. Nhưng điều gì sẽ xảy ra trong quá trình kiểm tra thực tế? Liệu trình xử lý sự kiện có được chuyển đến một đối tượng khác trong thời gian chạy không? Cách thích hợp để làm điều này là gì?

Answer 1

Bạn đang thực sự thử nghiệm mà GRAPH.padElement gọi cung cấp clickHandler và không phải là this.clickHandler của GRAPH.Pad được gọi bởi GRAPH.padElement. Cách tôi sẽ làm điều đó là

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

Điều này nghe có vẻ hơi khác với những gì bạn đang cố gắng đạt được. Nhưng trong thế giới thử nghiệm đơn vị lý tưởng, bạn nên kiểm tra từng đơn vị một cách độc lập, vì vậy trước tiên tôi sẽ kiểm tra rằng padElement thực hiện thao tác nào (như trên) và sau đó viết một thử nghiệm khác để đảm bảo GRAPH.Pad chuyển bộ xử lý chính xác đến padElement. Bây giờ để làm điều đó tôi sẽ không tạo ra padElement trực tiếp từ bên trong GRAPH.Pad nhưng bằng cách nào đó tiêm nó từ bên ngoài và sau đó thử nó trong thông số kỹ thuật hoa nhài. Nếu bạn không rõ ràng về phần này cho tôi biết và tôi có thể đặt một số mã với nhau cho bạn.

Answer 2

Để thêm một lời giải thích chung chung hơn:

Bạn cần để do thám trước khi gắn các chức năng như một event listener.

Một số mã giả:

it("succeeds", function(){ 
    var o = {} 
    o.f = function() { console.log("event caught!");} //your eventHandler 
    spyOn(o, "f").and.callThrough(); //o.f is now a spy 
    addEventListener('click', o.f); //spy listens for event 

    fireEvent("click"); //"event caught!" is written to console 

    expect(o.f).toHaveBeenCalled(); //success, we're happy 
}); 



it("fails", function(){ 
    var o = {} 
    o.f = function() { console.log("event caught!");} //your eventHandler 
    addEventListener('click', o.f); //your eventHandler function listens for event 
    spyOn(o, "f").and.callThrough(); //o.f is now a spy 

    fireEvent("click"); //"event caught!" is written to console 

    expect(o.f).toHaveBeenCalled(); //fail, we waste a couple of hours not understanding why 
}); 

Vì vậy, nếu bạn biết xử lý của bạn đang được gọi, nhưng điệp viên không đăng ký như .tohaveBeenCalled() kiểm tra những gì xảy ra đầu tiên: gián điệp của bạn hoặc sự phân công của người nghe. Các điệp viên cần phải đến trước.