test(angular): add tests for ngOnInit

angular/src/directives/navigation/stack-controller.ts

@@ -19,11 +19,11 @@ export class StackController {
     private zone: NgZone,
   ) {}
 
-  createView(enteringRef: ComponentRef<any>, route: ActivatedRoute): RouteView {
+  createView(enteringRef: ComponentRef<any>, activatedRoute: ActivatedRoute): RouteView {
     return {
       ref: enteringRef,
       element: (enteringRef && enteringRef.location && enteringRef.location.nativeElement) as HTMLElement,
-      url: this.getUrl(route)
+      url: this.getUrl(activatedRoute)
     };
   }
 
@@ -134,6 +134,7 @@ export class StackController {
     }
     if (enteringView) {
       enteringView.ref.changeDetectorRef.reattach();
+      enteringView.ref.changeDetectorRef.markForCheck();
     }
     const enteringEl = enteringView ? enteringView.element : undefined;
     const leavingEl = leavingView ? leavingView.element : undefined;

angular/test/test-app/e2e/src/utils.ts

@@ -33,7 +33,7 @@ export interface LifeCycleCount {
 }
 
 export async function testLifeCycle(selector: string, expected: LifeCycleCount) {
-  const page = element(by.css(selector));
+  expect(await getText(`${selector} #ngOnInit`)).toEqual('1');
   expect(await getText(`${selector} #ionViewWillEnter`)).toEqual(expected.ionViewWillEnter.toString());
   expect(await getText(`${selector} #ionViewDidEnter`)).toEqual(expected.ionViewDidEnter.toString());
   expect(await getText(`${selector} #ionViewWillLeave`)).toEqual(expected.ionViewWillLeave.toString());

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

@@ -11,7 +11,7 @@
 <ion-content padding>
   <h1>Value</h1>
   <h2>{{value}}</h2>
-
+  <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>

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

@@ -1,14 +1,15 @@
-import { Component, Input, NgZone } from '@angular/core';
+import { Component, Input, NgZone, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal-example',
   templateUrl: './modal-example.component.html',
 })
-export class ModalExampleComponent {
+export class ModalExampleComponent implements OnInit {
 
   @Input() value: string;
 
+  onInit = 0;
   willEnter = 0;
   didEnter = 0;
   willLeave = 0;
@@ -18,6 +19,11 @@ export class ModalExampleComponent {
     private modalCtrl: ModalController
   ) {}
 
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
     this.willEnter++;

angular/test/test-app/src/app/router-link-page/router-link-page.component.html

@@ -8,6 +8,7 @@
 
 <ion-content>
   router-link page
+  <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>

angular/test/test-app/src/app/router-link-page/router-link-page.component.ts

@@ -4,13 +4,19 @@ import { Component, OnInit, NgZone } from '@angular/core';
   selector: 'app-router-link-page',
   templateUrl: './router-link-page.component.html',
 })
-export class RouterLinkPageComponent {
+export class RouterLinkPageComponent implements OnInit {
 
+  onInit = 0;
   willEnter = 0;
   didEnter = 0;
   willLeave = 0;
   didLeave = 0;
 
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
     this.willEnter++;

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -6,6 +6,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content padding>
+  <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>

angular/test/test-app/src/app/router-link/router-link.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
 import { Router } from '@angular/router';
 
@@ -6,8 +6,9 @@ import { Router } from '@angular/router';
   selector: 'app-router-link',
   templateUrl: './router-link.component.html',
 })
-export class RouterLinkComponent {
+export class RouterLinkComponent implements OnInit {
 
+  onInit = 0;
   willEnter = 0;
   didEnter = 0;
   willLeave = 0;
@@ -34,6 +35,11 @@ export class RouterLinkComponent {
     this.navCtrl.navigateRoot('/router-link-page');
   }
 
+  ngOnInit() {
+    NgZone.assertInAngularZone();
+    this.onInit++;
+  }
+
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
     this.willEnter++;