Question

I'm using a combination of QUnit, and Karma to run some tests in Chrome. I want to test the functionality of a certain UI element in Kendo UI's Grid. However that element is represented with a link and some custom styling. In production this code works just fine, however in test executing the click event like I do below causes the browser to navigate to another page. I thought maybe I could prevent default on each link and button on the page but that didn't work as expected. Does anyone else have any ideas? Here's my test code:

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

我认为问题是您使用JQuery点击功能而不是dispachEvent启动Click事件。

在JQuery中，您可以使用trigger function

触发事件

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

在纯JavaScript中，您需要使用createEvent和dispachEvent函数。 See this link。这是我之前使用的一些代码。

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

Kendo Grid Failing in Test

1 个答案: