ionic + android back button + sidemenu isOpen detection - not working reliably - angularjs

I have an odd situation. I am writing an angular + ionic app with a left slide menu and here is what I am trying to do:
1) Trap the Android back button
2) When you tap the back button, if the menu is not open, take you to the menu (open it)
3) If the menu is open and you hit the back button, exit the app
To trap the back button, I have this code in app.run (also tried relocating to a base controller and injecting it with $controller into other controllers, did not make a difference)
What I am noticing is that if I actually tap the 'menu icon' of the menu, the "isOpen" reliably prints true/false alternately as a I open and close the menu
But, when I tap the Android back button, it works the first time (prints true or false), but every subsequent tap does not change the isOpen state, while the menu actually toggles.
This therefore makes it impossible for me to programmatically detect if the menu is open or close within the android back button handler.
It's confusing me why this is only a problem within the android back handler, and not a problem when I tap the menu item. It's the same code that is called in both cases, which is
$ionicSideMenuDelegate.toggleLeft();
My Android handler code:
$ionicPlatform.registerBackButtonAction(function (event) {
$ionicSideMenuDelegate.toggleLeft();
$ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
$timeout ( function() {
console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen());
},1000);
}, 100);
I've also set up a codepen, though not sure how one can test it on and android device, because every time I try and hit the backbutton on a codepen or jsfiddle, it makes the browser go back a page.
Any insight into what is going on? I've asked in the ionic forum, but haven't been able to find out why (yet) --> hence the post to the SO community in the hopes it reaches a wider audience.

registerBackButtonAction needs a priority to override the other actions:
The priorities for the existing back button hooks are as follows:
Return to previous view = 100 Close side menu = 150 Dismiss modal =
200 Close action sheet = 300 Dismiss popup = 400 Dismiss loading
overlay = 500
Your back button action will override each of the above actions whose
priority is less than the priority you provide. For example, an action
assigned a priority of 101 will override the 'return to previous view'
action, but not any of the other actions.
I've tested this code and it works as expected:
.run(function($ionicPlatform, $ionicSideMenuDelegate, $ionicPopup) {
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
if (!$ionicSideMenuDelegate.isOpenLeft()) {
$ionicSideMenuDelegate.toggleLeft();
} else {
navigator.app.exitApp();
}
}, 1000);
});
As you can see I've used priority 1000 to make sure that I override all the default actions.
I've also used preventDefault(). I don't think you need this but, just in case.
This bit of code only works for the left-side menu as I only check:
$ionicSideMenuDelegate.isOpenLeft()
and only open the left one:
$ionicSideMenuDelegate.toggleLeft()
but you can change it to work with the right menu as well.
UPDATE:
If someone is interested to find out more about Android and Back Button this is the best article I've read so far.

Related

AngularJS testing with Protractor - chaining promises- How to wait for animation to complete?

I am currently developing an automated test suite for an AngularJS application developed by my company. I have already designed & developed a number of test cases, which are running & passing/ failing as expected.
However, with the test that I am currently developing, I seem to have run into an issue when chaining promises, and am unable to solve it... The test script as it stands is:
it('should navigate to the browser page', function() {
console.log("Start browser page test");
browser.waitForAngularEnabled(false);
browser.wait(EC.visibilityOf(pagesMenuBtn), 10000).then(
browser.actions().mouseMove(pagesMenuBtn).perform().then(
//expect(pageBrowserBtn.isDisplayed()).toBeTruthy();
browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(
pageBrowserBtn.click().then(
function() {
console.log("Browser menu button clicked");
//browser.pause();
}).then(
browser.wait(EC.visibilityOf(browserPageTagsLink), 20000).then(
function(){
console.log("End browser page test (then call)");
expect(browser.getCurrentUrl()).toBe(VM + '/#/pages/browser');
}
)
)
)
)
);
});
When I run my test script (I have a number of other tests that run before this one), the first few run & pass successfully, then when this test starts to execute, the console shows:
Started
....Start browser page test
Browser menu button clicked
F
Failures:
1) App should navigate to the browser page
Message:
Failed: Wait timed out after 20010ms
Stack:
TimeoutError: Wait timed out after 20010ms
at WebDriverError (C:\Users\path\selenium-webdriver\lib\error.js:27:5)
So from the output displayed in the console, it's clear that the test executes correctly as far as the console.log("Browser menu button clicked); statement, which indicates that a click has been performed on the menu button as I intend (i.e. the menu button clicked is displayed on a popup menu that is only shown when the cursor is hovering over the pagesMenuBtn element, so that indicates that the line
browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(
is executed correctly).
Since the console.log("Browser menu button clicked"); statement is also displayed in the console, that indicates that the
pageBrowserBtn.click().then(
is also executed correctly.
But for some reason, the test is then timing out after the 20 seconds it waits for the browserPageTagsLink element to be displayed.
This browserPageTagsLink element is just a hyperlink element displayed on the 'Browser' page that my test is trying to navigate to- I am waiting for it to be visible so that I know that the page has loaded before I check that the URL is correct...
But as I watch what's happening in the browser window where these tests are run, and what's displayed in the console while my tests are running, the script seems to 'get stuck'/ pause/ 'hang' for a while after the Browser menu button clicked message is displayed in the console, and I can see from watching the browser window that this button was never actually clicked- the popup menu where this button is displayed is shown very briefly: the line browser.actions().mouseMove(pagesMenuBtn).perform() is causing the cursor to hover over the button required to show the sub-menu, but it seems that the click is performed before the sub-menu element has fully finished loading (there is some animation on the element- it appears to 'fade into view'), but I think that the click is happening before the element has fully finished loading, and so it's possibly not registering correctly?
How can I cause my test to wait for the animation to complete before trying to click the sub-menu menu item, so that the click registers with the element correctly?
I tried doing this with the line:
browser.wait(EC.visibilityOf(pageBrowserBtn), 12000).then(
It seems that the EC.visibilityOf(...) condition is met as soon as the element starts to become visible, rather than waiting until it is fully opaque, but that the
pageTagBrowserBtn.click().then(
line, which is called as soon as the condition is true can't actually be performed at this point- presumably because the element is not 'fully' visible at the point at which it's clicked?
How can I make my test wait for the animation (which has been implemented using CSS) to complete before it tries to click on the element?
I had a look on the Protractor API for anything about animations, but it only seems to provide the function allowAnimations()...
Edit
The animation for this element is set in the CSS with:
/* Animation for moving lists in configuration */
.list-fade.ng-enter,
.list-fade-leave.ng-leave {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
i.e. it should take 0.5 seconds for the element to be displayed when the cursor hovers over its parent element.
I tried adding a call to browser.wait(), so that my test would wait for the element to be fully displayed before trying to click on it- I updated the part of my test that is sending the click to:
browser.actions().mouseMove(pagesMenuBtn).perform().then(
//expect(pageTagBrowserBtn.isDisplayed()).toBeTruthy();
browser.wait(EC.visibilityOf(pageTagBrowserBtn), 12000).then(
browser.wait(10000).then(
pageTagBrowserBtn.click().then(
function() {
console.log("Tag Browser menu button clicked");
I told it to wait for 10 seconds at this point to ensure that it definitely gave the element enough time to load (according to the CSS, it should only take 0.5 seconds to be displayed), but for some reason, my test is still failing due to the same timeout issue.
Anyone have any suggestions?
Looking at your tests I'm wondering why you have to chain your promises like that. On a fully angular page Protractor is supposed to automatically chain promises, ie when I write a test like this
driver.get(“http://www.google.com”);
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
driver.findElement(webdriver.By.name('btnG')).click();
driver.getTitle().then(function(title) {
console.log(title);
});
it actually is executed in a synchronous manner like this:
driver.get(“http://www.google.com”).
then(function() {
return driver.findElement(webdriver.By.name('q'));
}).
then(function(q) {
return q.sendKeys('webdriver');
}).
then(function() {
return driver.findElement(webdriver.By.name('btnG'));
}).
then(function(btnG) {
return btnG.click();
}).
then(function() {
return driver.getTitle();
}).
then(function(title) {
console.log(title);
});
If your page is fully Angular most of what you've written shouldn't need the promises, and that my be causing timing issues with your test. Have you tried writing the test without chaining promises?
That said, you might also try EC.elementToBeClickable(yourElement) instead of waiting for EC.visibilityOf() if you haven't already.

CodenameOne Navigating from Splash Screen to "first time use" form in UIBuilder app

I have a tricky situation that only appears in mobile devices, not the simulator, so I need some expert help to troubleshoot. It's like the stateMachine takes me back to the SplashScreen briefly (or does some strange back-transition) after displaying my "FirstTimeSetup" form.
Here's my setup: I used the GUIBuilder to build the app with a form SplashScreen that will show first and then auto-transition to a form Main after some network connections happen in processBackground.
That works fine but on the First time starting, (when a Preference is not set) I want to display a different form: FirstTimeSetup. The best way I could see to do this was the following:
1) in processBackground, immediately return false if it's the first time running so that it doesn't transition to Main.
protected boolean processBackground(Form f) {
if ("SplashScreen".equals(f.getName())) {
if (Preferences.get(PREFS_FIRST_TIME_SETUP,true)){
//return false to indicate that we should not proceed to next_form specified in property
//we do this because postSplashScreen will trigger the load of the "FirstTimeSetup" form
return false;
}
//...continue with normal app initialization if this is not the first time
2) In postSplashScreen, I again check if it's a first-time load and then disable back-commands and call showForm to the First Time Setup form.
#Override
protected void postSplashScreen(Form f) {
if (Preferences.get(PREFS_FIRST_TIME_SETUP, true)) {
//disable back command for this form
setBackCommandEnabled(false);
showForm("FirstTimeSetup", null);
}
}
3) in postFirstTimeSetup method, I display some dialogs to explain the next steps to the user, do some network checks to ensure we can proceed with registration, and then end the method so the user can interact with the dialog and register. It's at this point when on the iOS or Android Device, I see a slide transition to the SplashScreen and then immediately it re-displays the FirstTimeSetup form, and it does this twice before the user is able to interact with the form.
4) Sometimes (it's inconsistent), the postFirstTimeSetup method will execute again (the same dialog boxes prompting the user are displayed again!).
It feels like some SplashScreen automatic transition is still trying to execute after I've returned false from processBackground and the postSplashScreen method is already complete... any suggestions would be helpful to eliminate this strange double-transition!
UPDATE:
With further tweaking and Investigating I realized that this appears to be caused by Android Permissions dialogs which is why it only happens on initially installing the app.
In processBackground, I make the first network calls (prompting network usage permission dialog) and access the device parameters IMEI And UUID to get a device identifier (prompting the "allow access to Phone" permission). After dismissing each dialog, the SplashScreen form appears to be re-entered causing a re-display of the form with transition animation (and I think also re-running the processBackground! re-doing all my splash screen initialization work!).
So here's the updated question: How can I get the Android Permissions dialogs to stop the SpashScreen from reloading?
I've tried moving the commands that trigger out to initVars, but then I get the permissions dialogs on a Blank screen, and then the splash screen just transitions twice rapidly like I shared in this video: youtu.be/2QpdaeigNZ8
I've tried wrapping the two "triggers" (commands that cause the permissions) in a callSerially() so that it would delay the dialogs until the SplashScreen form is at least displayed, but then the form displays, and a permission dialog shows, I click "allow" and then the splashScreen Form display again, then the second permission dialog pops up. I clock allow and then AGAIN a re-display of splashScreen.
The solution is to perform your logic in processBackground() and get rid of postSplashScreen, then return false at the end of this method.
#Override
protected boolean processBackground(final Form f) {
if ("SplashScreen".equalsIgnoreCase(f.getName())) {
new UITimer(() -> {
if (Preferences.get(PREFS_FIRST_TIME_SETUP, true)) {
showForm("FirstTimeSetup", null);
} else {
showForm("Main", null);// or any other form you want to show
}
}).schedule(3000, false, f); //wait 3 seconds before proceeding
}
return false; //always return false at the end
}
Then in your FirstTimeSetup form's postShow() (i.e. postFirstTimeSetup() method), remember to set PREFS_FIRST_TIME_SETUP to false.
Preferences.set(PREFS_FIRST_TIME_SETUP, false);

Execution order of protractor tests

Which is the best way to control the execution order of Protractor tests?
Problem case 1: protractor swipes angular pages so quickly that it cannot manipulate (fill in) input data. (The swipe logic is to transfer from being invisible to visible and by translating them into the window visible area). thus protractor cannot see those beyond the window and with opacity 0. To test i can only fill in the first page. the others are swiped too fast (or async).
Problem case 2: After i filled in the first page and submitted the form, the data is saved and alert shows confirmation message. Then protractor has to click a drop-down list and browser should navigate to the page where saved data is displayed. The problem is that protractor clicks the drop-down list before the data is saved due to alert fired later (have to wait for alert).
Question is: Is there a way to control tests to be executed in the given order in protractor? And is there a way to hold down swiping to fill in the date (otherwise protractor does not see it)? Here is the simplified code:
it('should fill in form and send data', function() {
// fill in textarea field
element.all(by.css('textarea')).first().clear().sendKeys('test');
// goes to page 2
browser.executeScript("angular.element(document.documentElement)
.injector().get('$rootScope').$broadcast('nextPage', {direction: 'next'});");
// Here is Problem 1. Though i can see this page when testing,
// the input is not visible for protractor.
// fill in input-field
element.all(by.css('input')).first().clear().sendKeys('test');
// goes to page 1
browser.executeScript("angular.element(document.documentElement)
.injector().get('$rootScope').$broadcast('prevPage', {direction: 'prev'});");
// submit form
element(by.css('button[type=submit]')).click();
// Here is problem 2. The following test is executed earlier
// than the following alert.
//browser.wait(protractor.ExpectedConditions.alertIsPresent(), 3000);
var alertDialog = browser.switchTo().alert();
expect(alertDialog.getText()).toEqual('Saved');
alertDialog.accept();
});
it('should click drop-down-list', function() {
// click drop-down list
element(by.css('.drop-down-list')).click();
});
I personally believe browser.sleep(5000) should resolve the second issue.
if not can you try with promisies
element(by.css('button[type=submit]')).click().then(function(){
var alertDialog = browser.switchTo().alert();
expect(alertDialog.getText()).toEqual('Saved');
alertDialog.accept();
});
This should wait for the promise to get resolved (i.e to click submit button) and then execute the code snippet inside

Webshims - Show invalid form fields on initial load

(Follow on questions from Placeholder Hidden)
I'd like my form to validate existing data when it is loaded. I can't seem to get that to happen
I jQuery.each of my controls and call focus() and blur(), is there a better way than this? I tried to call ctrl.checkValidity(), but it wasn't always defined yet. When it was, it still didn't mark the controls.
I seem to have a timing issue too, while the focus and blur() fire, the UI does not update. It's as if the Webshims are not fully loaded yet, even though this fires in the $.webshims.ready event.
I also tried to call $('#form').submit(), but this doesn't fire the events as I expected. The only way I could make that happen was to include an input type='submit'. How can I pragmatically case a form validation like clicking a submit button would?
Here's a jsFiddle that demonstrates the problem. When the form loads, I want the invalid email to be marked as such. If you click the add button it will be marked then, but not when initially loaded. Why?
Focus and blur in the control will cause it to be marked.
BUT, clicking ADD will too (which runs the same method that ran when it was loaded). Why does it work the 2nd time, but not when initially loaded?
updateValidation : function () {
this.$el.find('[placeholder]').each(function (index, ctrl) {
var $ctrl = $(ctrl);
if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
// alert('Do validity check!');
$ctrl.focus();
$ctrl.blur();
}
});
}
I see this in FF 17.0.5. The problem is worse in IE9, sometimes taking 2 or 3 clicks of ADD before the fields show in error. However, I get errors on some of the js files I've liked 'due to mime type mismatch'.
This has to do with the fact, that you are trying to reuse the .user-error class, which is a "shim" for the CSS4 :user-error and shouldn't be triggered from script. The user-error scripts are loaded after onload or as soon as a user seems to interact with an invalid from.
From my point of view, you shouldn't use user-error and instead create your own class. You can simply check for validity using the ':invalid' selector:
$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');
Simply write a function with similar code and bind them to events like change, input and so on and call it on start.
In case you still want to use user-error, you could do the following, but I would not recommend:
$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
$('input:invalid')
.filter(function(){
return !!$(this).val();
})
.trigger('refreshvalidityui')
;
});

setting value of html select element in change handler doesn't work on ios6

I'm using an html select element as an active menu. When you select an item from it, it does an action and then in some cases, a side effect of the action is resetting the value of the menu to something else.
function onMenuChangeHandler() {
var menu = $('#menu');
var menuChoice = menu.val();
if (menuChoice == ...) {
...
menu.blur(); // ensure change handler doesn't get fired again
menu.val(OTHER_VALUE); // **
}
};
This works fine on the desktop in multiple browsers and works fine on iOS5. It inexplicably stopped working on iOS6. The result is that it acts as if the line marked ** above is not there.
It works fine in any case where I don't set the value.
FYI: There's another change in iOS6 which seems unrelated to this but mentioning it just in case. When the menu is selected, it now dismisses the picker immediately rather than leaving it open. This is how it works on every other platform. If you have more more than one select element, you still get the non-standard behavior.
I spent a lot of time trying to track this down and eventually discovered that the problem is that iOS6 sets the value of the control a second time after my change handler exits. If I put in alerts, I can clearly see that the control changes to the OTHER_VALUE (underneath the alert). Then when I dismiss the alert, the control reverts. (Without the alert, the change happens too fast to see.)
So here's a workaround:
function onMenuChangeHandler() {
var menu = $('#menu');
var menuChoice = menu.val();
if (menuChoice == ...) {
...
setTimeout(function() {
menu.blur(); // ensure change handler doesn't get fired again
menu.val(OTHER_VALUE);
}, 1);
}
};
Maybe someone else has a better answer or a better explanation.

Resources