Kendo Grid im Test fehlgeschlagen

Question

Ich verwende eine Kombination aus Qnit und Karma, um einige Tests in Chrome durchzuführen. Ich möchte die Funktionalität eines bestimmten UI-Elements in Kendo UI Grid testen. Dieses Element wird jedoch mit einer Verknüpfung und einem benutzerdefinierten Styling dargestellt. In der Produktion funktioniert dieser Code gut, aber im Test führt das Click-Ereignis, wie ich es unten ausführe, dazu, dass der Browser zu einer anderen Seite navigiert. Ich dachte, ich könnte vielleicht den Standard für jeden Link und Button auf der Seite verhindern, aber das hat nicht wie erwartet funktioniert. Hat jemand andere Ideen? Hier ist mein Testcode:

QUnit.test("Do the arrows do something once I click on them?", 
    function(assert) { 

    var done = assert.async(); 

    createShiftsGrid("#shifts-grid-test", "", "fooBaseURL", "subgridUrl/"); 
    gridHTML = $("#shifts-grid-test"); 

    $('a').click(function (e) { 
     e.preventDefault(); 
    }); 

    setTimeout(function(){ 
     var arrowIcons = $(gridHTML).find(".k-icon.k-plus"); 
     var oneIcon = $(arrowIcons[0]); 
     oneIcon.click(); 

     assert.expect(0); 

     done(); 

    }, 3000); 

    } 
); 

Answer 1

Ich denke, das Problem ist, dass Sie das Click-Ereignis mit der JQuery Klick-Funktion statt dispachEvent initiieren.

In JQuery können Sie Ereignis mit der trigger function

$("#foo").on("click", function() { 
    alert($(this).text()); 
}); 
$("#foo").trigger("click"); 

Im Klar JavaScript auslösen Sie die createEvent und dispachEvent Funktion verwenden müssen. See this link. Hier ist ein Code, den ich vorher benutzt habe.

//dispach a clicks clicks on events 
var evObj = document.createEvent('MouseEvents'); 
evObj.initEvent('click', true, false); 
$('#target1').each(function() { 
    this.dispatchEvent(evObj); 
});