fix(angular): race condition when fast navigation (#17197)

fixes #17194
fixes #16449
fixes #15413

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -45,7 +45,7 @@ describe('form', () => {
     });
 
     it('ion-toggle should change', async () => {
-      await element(by.css('ion-toggle')).click();
+      await element(by.css('form ion-toggle')).click();
       await testData({
         'datetime': '2010-08-20',
         'select': null,
@@ -84,7 +84,7 @@ describe('form', () => {
     });
 
     it('ion-toggle should change only after blur', async () => {
-      await element(by.css('ion-toggle')).click();
+      await element(by.css('form ion-toggle')).click();
       await testData({
         'datetime': '2010-08-20',
         'select': null,

angular/test/test-app/e2e/src/navigation.e2e-spec.ts

@@ -0,0 +1,24 @@
+import { browser, element, by } from 'protractor';
+import { handleErrorMessages, waitTime, testStack } from './utils';
+
+describe('navigation', () => {
+
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
+  it('should navigate correctly', async () => {
+    await browser.get('/navigation/page1');
+    await waitTime(2000);
+    await testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
+
+    const pageHidden = element(by.css('app-navigation-page2'));
+    expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true');
+    expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden');
+
+    const pageVisible = element(by.css('app-navigation-page1'));
+    expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null);
+    expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
+  });
+
+});

angular/test/test-app/src/app/app-routing.module.ts

@@ -18,6 +18,9 @@ import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
 import { SlidesComponent } from './slides/slides.component';
 import { FormComponent } from './form/form.component';
+import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
+import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
+import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -32,6 +35,14 @@ const routes: Routes = [
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
   { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
+  {
+    path: 'navigation',
+    children: [
+      { path: 'page1', component: NavigationPage1Component },
+      { path: 'page2', component: NavigationPage2Component },
+      { path: 'page3', component: NavigationPage3Component }
+    ]
+  },
   {
     path: 'tabs',
     component: TabsComponent,

angular/test/test-app/src/app/app.module.ts

@@ -27,6 +27,9 @@ import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
 import { SlidesComponent } from './slides/slides.component';
 import { FormComponent } from './form/form.component';
+import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
+import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
+import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 
 @NgModule({
   declarations: [
@@ -51,7 +54,10 @@ import { FormComponent } from './form/form.component';
     ViewChildComponent,
     ProvidersComponent,
     SlidesComponent,
-    FormComponent
+    FormComponent,
+    NavigationPage1Component,
+    NavigationPage2Component,
+    NavigationPage3Component
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/navigation-page1/navigation-page1.component.html

@@ -0,0 +1,3 @@
+<p>
+  navigation-page1 works!
+</p>

angular/test/test-app/src/app/navigation-page1/navigation-page1.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+let count = 0;
+@Component({
+  selector: 'app-navigation-page1',
+  templateUrl: './navigation-page1.component.html',
+})
+export class NavigationPage1Component {
+  constructor(
+    private navController: NavController
+  ) {}
+
+  ionViewDidEnter() {
+    if (count < 1) {
+      this.navController.navigateBack('/navigation/page2');
+    }
+    count++;
+  }
+}

angular/test/test-app/src/app/navigation-page2/navigation-page2.component.html

@@ -0,0 +1,3 @@
+<p>
+  navigation-page2 works!
+</p>

angular/test/test-app/src/app/navigation-page2/navigation-page2.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+
+@Component({
+  selector: 'app-navigation-page2',
+  templateUrl: './navigation-page2.component.html',
+})
+export class NavigationPage2Component {
+  constructor(
+    private navController: NavController
+  ) {}
+
+  ionViewDidEnter() {
+    this.navController.navigateForward('/navigation/page1');
+  }
+}

angular/test/test-app/src/app/navigation-page3/navigation-page3.component.html

@@ -0,0 +1,3 @@
+<p>
+  navigation-page3 works!
+</p>

angular/test/test-app/src/app/navigation-page3/navigation-page3.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-navigation-page3',
+  templateUrl: './navigation-page3.component.html',
+})
+export class NavigationPage3Component {
+  constructor(
+    private navController: NavController
+  ) {}
+
+ionViewDidEnter() {
+    this.navController.navigateRoot('/navigation/page2');
+  }
+}