Firing a click event programmatically using Kendo UI Mobile

Question

I am using Kendo UI Mobile and I am attempting to write a UI test case. I am using Jasmine for testing. I have the following button in my login page for my mobile app.

<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>

I am trying to fire that button using my test. I am using the following code to attempt to fire that button but nothing is happening (that I can tell).

$("#modalview-open-button").click();

What I am missing?

Answer 1

Apparently Kendo UI Mobile is trapping and handling the click() event. I was able mimic the click event using:

$("#modalview-open-button").mousedown().mouseup();  // send "click()"
expect($("#modalview-login").is(":visible")).toBeTruthy();

I am also finding that sometimes the expect() code following the .mousedown().mouseup() is firing before the .mouseup() has completed so I am putting my test code in the callback.

$("#modalview-open-button").mousedown().mouseup(function() {  // send "click()"
    expect($("#modalview-login").is(":visible")).toBeTruthy();
});

Answer 2

I had the same situation today and found a workaround by using the following lines of code. It's not a nice solution but maybe it helps someone who is stuck in the same situation.

var kendoMobileButton = $("#button-id").data("kendoMobileButton");
kendoMobileButton._events.click[0]();