test(angular): add e2e tests for ion-nav

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

@@ -10,22 +10,45 @@ describe('modals', () => {
     handleErrorMessages();
   });
 
-  it('should open and close', async () => {
+  it('should open standalone modal and close', async () => {
     await element(by.css('#action-button')).click();
 
-    await waitTime(1000);
+    await waitTime(800);
 
     const modal = element(by.css('app-modal-example'));
     expect(await modal.$('h2').getText()).toEqual('123');
+    expect(await modal.$('h3').getText()).toEqual('321');
 
     expect(await getText('#onWillDismiss')).toEqual('false');
     expect(await getText('#onDidDismiss')).toEqual('false');
 
     await modal.$('#close-modal').click();
-    await waitTime(1000);
+    await waitTime(800);
 
     expect(await getText('#onWillDismiss')).toEqual('true');
     expect(await getText('#onDidDismiss')).toEqual('true');
   });
 
+  it('should open nav modal and close', async () => {
+    await element(by.css('#action-button-2')).click();
+
+    await waitTime(800);
+
+    let page = element(by.css('ion-nav > *:last-child'));
+    expect(await page.$('h2').getText()).toEqual('123');
+    expect(await page.$('h3').getText()).toEqual('321');
+
+    await page.$('.push-page').click();
+    await waitTime(800);
+
+    page = element(by.css('ion-nav > *:last-child'));
+    expect(await page.$('h2').getText()).toEqual('pushed!');
+    expect(await page.$('h3').getText()).toEqual('');
+
+    await page.$('.pop-page').click();
+    await waitTime(800);
+
+    page = element(by.css('ion-nav > *:last-child'));
+    expect(await page.$('h2').getText()).toEqual('123');
+  });
 });

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

@@ -21,6 +21,7 @@ import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scro
 import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
 import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
 import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
+import { NavComponent } from './nav/nav.component';
 
 @NgModule({
   declarations: [
@@ -40,7 +41,8 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-
     VirtualScrollInnerComponent,
     NestedOutletComponent,
     NestedOutletPageComponent,
-    NestedOutletPage2Component
+    NestedOutletPage2Component,
+    NavComponent
   ],
   imports: [
     BrowserModule,
@@ -49,7 +51,8 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-
     IonicModule.forRoot(),
   ],
   entryComponents: [
-    ModalExampleComponent
+    ModalExampleComponent,
+    NavComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -11,10 +11,14 @@
 <ion-content padding>
   <h1>Value</h1>
   <h2>{{value}}</h2>
+  <h3>{{valueFromParams}}</h3>
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
   <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
   <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
-
+  <p *ngIf="!!nav">
+    <ion-button (click)="push()" class="push-page">Push page</ion-button>
+    <ion-button (click)="pop()" class="pop-page">Pop page</ion-button>
+  </p>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, NgZone, OnInit } from '@angular/core';
+import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, NavParams, IonNav } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal-example',
@@ -9,6 +9,7 @@ export class ModalExampleComponent implements OnInit {
 
   @Input() value: string;
 
+  valueFromParams: string;
   onInit = 0;
   willEnter = 0;
   didEnter = 0;
@@ -16,8 +17,12 @@ export class ModalExampleComponent implements OnInit {
   didLeave = 0;
 
   constructor(
-    private modalCtrl: ModalController
+    private modalCtrl: ModalController,
-  ) {}
+    @Optional() public nav: IonNav,
+    navParams: NavParams
+  ) {
+    this.valueFromParams = navParams.get('prop');
+  }
 
   ngOnInit() {
     NgZone.assertInAngularZone();
@@ -43,8 +48,16 @@ export class ModalExampleComponent implements OnInit {
     NgZone.assertInAngularZone();
     this.didLeave++;
   }
-
   closeModal() {
     this.modalCtrl.dismiss();
   }
+
+  push() {
+    this.nav.push(ModalExampleComponent, {
+      'value': 'pushed!'
+    });
+  }
+  pop() {
+    this.nav.pop();
+  }
 }

angular/test/test-app/src/app/modal/modal.component.html

@@ -6,7 +6,8 @@
     </ion-toolbar>
   </ion-header>
 <ion-content padding>
-  <ion-button button (click)="openModal()" id="action-button">Open Modal</ion-button>
+  <ion-button (click)="openModal()" id="action-button">Open Modal</ion-button>
+  <ion-button (click)="openNav()" id="action-button-2">Open Nav in Modal</ion-button>
   <p>
     onWillDismiss: <span id="onWillDismiss">{{onWillDismiss}}</span>
   </p>

angular/test/test-app/src/app/modal/modal.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit, NgZone } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ModalExampleComponent } from '../modal-example/modal-example.component';
+import { NavComponent } from '../nav/nav.component';
 
 @Component({
   selector: 'app-modal',
@@ -16,10 +17,19 @@ export class ModalComponent {
   ) { }
 
   async openModal() {
+    return this.open(ModalExampleComponent);
+  }
+
+  async openNav() {
+    return this.open(NavComponent);
+  }
+
+  async open(TheModalComponent: any) {
     const modal = await this.modalCtrl.create({
-      component: ModalExampleComponent,
+      component: TheModalComponent,
       componentProps: {
-        value: '123'
+        value: '123',
+        prop: '321'
       }
     });
     await modal.present();

angular/test/test-app/src/app/nav/nav.component.html

@@ -0,0 +1 @@
+<ion-nav [root]="rootPage" [rootParams]="rootParams"></ion-nav>

angular/test/test-app/src/app/nav/nav.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ModalExampleComponent } from '../modal-example/modal-example.component';
+import { NavParams } from '@ionic/angular';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+})
+export class NavComponent {
+  rootPage = ModalExampleComponent;
+  rootParams: any;
+
+  constructor(
+    params: NavParams
+  ) {
+    this.rootParams = {
+      ...params.data
+    };
+  }
+}