Hi Everybody,
We have troubles finding a working solution for UI testing our Phonegap app built with Kendo Mobile. We've tried UiTest.JS Can anybody share a working recipe for JS driven UI testing? The goal is to drive user session in a browser starting with logging in and then using the features. This would also allow us to do BDD style development.
First, we found that .trigger('click') doesn't do anything in kendo, so we found that .mousedown().mouseup() creates the required effect. Now, we have an issue with ajax calls out to the API server. Bottom line, if someone can share a working setup with some best practices, I'll appreciate it.
We have troubles finding a working solution for UI testing our Phonegap app built with Kendo Mobile. We've tried UiTest.JS Can anybody share a working recipe for JS driven UI testing? The goal is to drive user session in a browser starting with logging in and then using the features. This would also allow us to do BDD style development.
First, we found that .trigger('click') doesn't do anything in kendo, so we found that .mousedown().mouseup() creates the required effect. Now, we have an issue with ajax calls out to the API server. Bottom line, if someone can share a working setup with some best practices, I'll appreciate it.
<
div
data-role
=
"modalview"
id
=
"modalview-login"
style
=
"width: 90%;"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
>Login</
span
>
<
a
id
=
"modalview-cancel-button"
data-click
=
"closeModalViewLogin"
data-role
=
"button"
data-align
=
"right"
>Cancel</
a
>
</
div
>
</
div
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
>
<
label
for
=
"username"
>Username:
<
input
type
=
"email"
id
=
"username"
placeholder
=
"Enter Username"
autofocus/>
</
label
>
</
li
>
<
li
>
<
label
for
=
"password"
>Password:
<
input
type
=
"password"
id
=
"password"
placeholder
=
"Enter Password"
/>
</
label
>
</
li
>
</
ul
>
<
a
data-click
=
"logMeIn"
id
=
"modalview-login-button"
type
=
"button"
data-role
=
"button"
>Login</
a
>
</
div
>
function
logMeIn() {
// console.log("function logMeIn() called.");
$(
"#logged-in-text"
).text(
"Attempting Login."
);
kendoMobileApplication.showLoading();
var
uName = $(
"#username"
).val();
var
pWord = $(
"#password"
).val();
// Create a session object and attempt login
var
sess =
new
SessionObj();
// console.log("Starting API call.");
sess.login(window.SESSIONAPI, uName, pWord, window.SITEKEY,
function
(s) {
if
(s.isAuthenticated) {
$(
"#logged-in-text"
).text(
"Login Successful."
);
// kendoMobileApplication.navigate("main.html");
window.location.href =
"main.html"
;
}
else
{
$(
"#logged-in-text"
).text(
"Login Failed."
);
}
kendoMobileApplication.hideLoading();
$(
"#modalview-login"
).kendoMobileModalView(
"close"
);
});
}
describe(
"Bad Login"
,
function
() {
it(
"Should display error message if login fields are invalid"
,
function
() {
uit.url(
"/"
);
uit.runs(
function
($) {
// display login dialog
$(
"#modalview-open-button"
).mousedown().mouseup();
expect($(
"#modalview-login"
).is(
":visible"
)).toBeTruthy();
// fill in fields and submit form
$(
"#username"
).val(
""
);
$(
"#password"
).val(
"123456"
);
$(
"#modalview-login-button"
).mousedown().mouseup();
});
uit.runs(
function
($) {
expect($(
"#logged-in-text"
).text()).toBe(
"Invalid login/password."
);
});
});
it(
"Should display error if invalid login."
,
function
() {
expect(
true
).toBe(
false
);
});
});