test(e2e): refactor e2e to use deeplink decorator, lazy load more pages

src/components/segment/test/basic/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import {HomePage} from '../pages/home-page/home-page';
+
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-export class E2EApp {
+export class AppComponent {
   root = HomePage;
 }

src/components/segment/test/basic/app/app.module.ts

@@ -2,25 +2,18 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
-import { E2EApp } from './app.component';
-import { HomePage } from '../pages/home-page/home-page';
+import { AppComponent } from './app.component';
+import { HomePageModule } from '../pages/home-page/home-page.module';
+
 @NgModule({
   declarations: [
-    E2EApp,
-    HomePage
+    AppComponent,
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(E2EApp, {}, {
-      links: [
-        { component: HomePage, name: 'home-page' }
-      ]
-    })
+    IonicModule.forRoot(AppComponent, {}),
+    HomePageModule
   ],
   bootstrap: [IonicApp],
-  entryComponents: [
-    E2EApp,
-    HomePage
-  ]
 })
 export class AppModule { }

src/components/segment/test/basic/pages/home-page/home-page.html

@@ -0,0 +1,127 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
+      <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
+        Friends
+      </ion-segment-button>
+      <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
+        Enemies
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-buttons end>
+      <button ion-button icon-only>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-segment [(ngModel)]="icons" color="secondary">
+      <ion-segment-button value="camera">
+        <ion-icon name="camera"></ion-icon>
+      </ion-segment-button>
+      <ion-segment-button value="bookmark">
+        <ion-icon name="bookmark"></ion-icon>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
+  <h4>Map mode: formControlName</h4>
+  <form (submit)="doSubmit($event)" [formGroup]="myForm">
+    <ion-segment formControlName="mapStyle" color="danger">
+      <ion-segment-button value="active" class="e2eSegmentStandard">
+        Active
+      </ion-segment-button>
+      <ion-segment-button value="disabled" [disabled]="isDisabled">
+        Disabled
+      </ion-segment-button>
+      <ion-segment-button value="inactive" disabled="false">
+        Inactive
+      </ion-segment-button>
+    </ion-segment>
+  </form>
+  <p>
+    Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
+    <span [ngSwitch]="myForm.controls.mapStyle.value">
+      <span *ngSwitchCase="'standard'">
+        <b>Standard</b>
+      </span>
+      <span *ngSwitchCase="'hybrid'">
+        <b>Hybrid</b>
+      </span>
+      <span *ngSwitchCase="'sat'">
+        <b>Satellite</b>
+      </span>
+    </span>
+  </p>
+  <hr>
+  <h4>Model style: NgModel</h4>
+  <ion-segment [(ngModel)]="modelStyle" color="dark">
+    <ion-segment-button value="A">
+      Model A
+    </ion-segment-button>
+    <ion-segment-button value="B">
+      Model B
+    </ion-segment-button>
+    <ion-segment-button value="C" class="e2eSegmentModelC">
+      Model C
+    </ion-segment-button>
+    <ion-segment-button value="D" [disabled]="isDisabled">
+      Model D
+    </ion-segment-button>
+  </ion-segment>
+  <p>Model Style: <b>Model {{ modelStyle }}</b></p>
+  <ion-segment [(ngModel)]="icons">
+    <ion-segment-button value="camera">
+      <ion-icon name="camera"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="bookmark">
+      <ion-icon name="bookmark"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+  <button ion-button block color="dark" (click)="toggleDisabled()">Toggle Disabled</button>
+</ion-content>
+
+
+<ion-footer>
+  <ion-toolbar color="primary">
+    <ion-segment [(ngModel)]="appType" color="light">
+      <ion-segment-button value="paid">
+        Primary
+      </ion-segment-button>
+      <ion-segment-button value="free">
+        Toolbar
+      </ion-segment-button>
+      <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+        Light Segment
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="appType" color="danger">
+      <ion-segment-button value="paid">
+        Default
+      </ion-segment-button>
+      <ion-segment-button value="free">
+        Toolbar
+      </ion-segment-button>
+      <ion-segment-button value="top">
+        Danger Segment
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
+      <ion-segment-button value="paid">
+        Default
+      </ion-segment-button>
+      <ion-segment-button value="free">
+        Toolbar
+      </ion-segment-button>
+      <ion-segment-button value="top">
+        Dark Segment
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-footer>

src/components/segment/test/basic/pages/home-page/home-page.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+
+import { HomePage } from './home-page';
+
+@NgModule({
+  declarations: [
+    HomePage,
+  ],
+  imports: [
+    DeepLinkModule.forChild(HomePage)
+  ]
+})
+export class HomePageModule {}

src/components/segment/test/basic/pages/home-page/home-page.ts

@@ -1,138 +1,10 @@
 import { Component } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { SegmentButton } from '../../../../../..';
-
+import { DeepLink, SegmentButton } from '../../../../../..';
 
+@DeepLink()
 @Component({
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
-          <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
-            Friends
-          </ion-segment-button>
-          <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
-            Enemies
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-buttons end>
-          <button ion-button icon-only>
-            <ion-icon name="search"></ion-icon>
-          </button>
-        </ion-buttons>
-        <ion-segment [(ngModel)]="icons" color="secondary">
-          <ion-segment-button value="camera">
-            <ion-icon name="camera"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="bookmark">
-            <ion-icon name="bookmark"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
-      <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
-      <h4>Map mode: formControlName</h4>
-      <form (submit)="doSubmit($event)" [formGroup]="myForm">
-        <ion-segment formControlName="mapStyle" color="danger">
-          <ion-segment-button value="active" class="e2eSegmentStandard">
-            Active
-          </ion-segment-button>
-          <ion-segment-button value="disabled" [disabled]="isDisabled">
-            Disabled
-          </ion-segment-button>
-          <ion-segment-button value="inactive" disabled="false">
-            Inactive
-          </ion-segment-button>
-        </ion-segment>
-      </form>
-      <p>
-        Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
-        <span [ngSwitch]="myForm.controls.mapStyle.value">
-          <span *ngSwitchCase="'standard'">
-            <b>Standard</b>
-          </span>
-          <span *ngSwitchCase="'hybrid'">
-            <b>Hybrid</b>
-          </span>
-          <span *ngSwitchCase="'sat'">
-            <b>Satellite</b>
-          </span>
-        </span>
-      </p>
-      <hr>
-      <h4>Model style: NgModel</h4>
-      <ion-segment [(ngModel)]="modelStyle" color="dark">
-        <ion-segment-button value="A">
-          Model A
-        </ion-segment-button>
-        <ion-segment-button value="B">
-          Model B
-        </ion-segment-button>
-        <ion-segment-button value="C" class="e2eSegmentModelC">
-          Model C
-        </ion-segment-button>
-        <ion-segment-button value="D" [disabled]="isDisabled">
-          Model D
-        </ion-segment-button>
-      </ion-segment>
-      <p>Model Style: <b>Model {{ modelStyle }}</b></p>
-      <ion-segment [(ngModel)]="icons">
-        <ion-segment-button value="camera">
-          <ion-icon name="camera"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="bookmark">
-          <ion-icon name="bookmark"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
-      <button ion-button block color="dark" (click)="toggleDisabled()">Toggle Disabled</button>
-    </ion-content>
-
-
-    <ion-footer>
-      <ion-toolbar color="primary">
-        <ion-segment [(ngModel)]="appType" color="light">
-          <ion-segment-button value="paid">
-            Primary
-          </ion-segment-button>
-          <ion-segment-button value="free">
-            Toolbar
-          </ion-segment-button>
-          <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-            Light Segment
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-segment [(ngModel)]="appType" color="danger">
-          <ion-segment-button value="paid">
-            Default
-          </ion-segment-button>
-          <ion-segment-button value="free">
-            Toolbar
-          </ion-segment-button>
-          <ion-segment-button value="top">
-            Danger Segment
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabled">
-          <ion-segment-button value="paid">
-            Default
-          </ion-segment-button>
-          <ion-segment-button value="free">
-            Toolbar
-          </ion-segment-button>
-          <ion-segment-button value="top">
-            Dark Segment
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-footer>
-  `
+  templateUrl: 'home-page.html'
 })
 export class HomePage {
   relationship: string = 'enemies';

src/components/segment/test/nav/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { FirstPage } from '../pages/first-page/first-page';
+
 @Component({
   template: `<ion-nav [root]="root"></ion-nav>`
 })
-export class E2EApp {
+export class AppComponent {
   root = FirstPage;
 }

src/components/segment/test/nav/app/app.module.ts

@@ -2,27 +2,18 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
-import { E2EApp } from './app.component';
-import { FirstPage } from '../pages/first-page/first-page';
+import { AppComponent } from './app.component';
+import { FirstPageModule } from '../pages/first-page/first-page.module';
 
 @NgModule({
   declarations: [
-    E2EApp,
-    FirstPage
+    AppComponent,
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(E2EApp, {}, {
-      links: [
-        { name: 'first-page', component: FirstPage },
-        { name: 'second-page', loadChildren: '../pages/second-page/second-page.module#SecondPageModule' },
-      ]
-    })
+    IonicModule.forRoot(AppComponent, {}),
+    FirstPageModule
   ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    E2EApp,
-    FirstPage
-  ]
+  bootstrap: [IonicApp]
 })
 export class AppModule { }

src/components/segment/test/nav/pages/first-page/first-page.html

@@ -0,0 +1,45 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+      Segment under Navbar
+    </ion-title>
+  </ion-navbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="signInType">
+      <ion-segment-button value="new">
+        New
+      </ion-segment-button>
+      <ion-segment-button value="existing" class="e2eSegmentExistingSegment">
+        Existing
+      </ion-segment-button>
+      <ion-segment-button value="test">
+        Test
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <ion-row>
+    <ion-col>
+      <button ion-button block (click)="signInType='new'">New</button>
+    </ion-col>
+    <ion-col>
+      <button ion-button color="light" block (click)="signInType='existing'">Existing</button>
+    </ion-col>
+    <ion-col>
+      <button ion-button color="dark" block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
+    </ion-col>
+  </ion-row>
+  <div [ngSwitch]="signInType">
+    <div *ngSwitchCase="'existing'">
+      Signing up as an <b>Existing User</b>.
+    </div>
+    <div *ngSwitchCase="'new'">
+      Signing up as a <b>New User</b>.
+    </div>
+    <div *ngSwitchCase="'test'">
+      Signing up as a <b>Test User</b>.
+    </div>
+  </div>
+  <button ion-button block (click)="goToPage2()">Next Page</button>
+</ion-content>

src/components/segment/test/nav/pages/first-page/first-page.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { DeepLinkModule } from '../../../../../..';
+import { FirstPage } from './first-page';
+
+@NgModule({
+  imports: [
+    DeepLinkModule.forChild(FirstPage)
+  ],
+  declarations: [
+    FirstPage
+  ]
+})
+export class FirstPageModule { }

src/components/segment/test/nav/pages/first-page/first-page.ts

@@ -1,53 +1,9 @@
 import { Component } from '@angular/core';
-import { NavController } from '../../../../../..';
+import { DeepLink, NavController } from '../../../../../..';
+
+@DeepLink()
 @Component({
-  template: `
-    <ion-header>
-      <ion-navbar>
-        <ion-title>
-          Segment under Navbar
-        </ion-title>
-      </ion-navbar>
-      <ion-toolbar>
-        <ion-segment [(ngModel)]="signInType">
-          <ion-segment-button value="new">
-            New
-          </ion-segment-button>
-          <ion-segment-button value="existing" class="e2eSegmentExistingSegment">
-            Existing
-          </ion-segment-button>
-          <ion-segment-button value="test">
-            Test
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content padding>
-      <ion-row>
-        <ion-col>
-          <button ion-button block (click)="signInType='new'">New</button>
-        </ion-col>
-        <ion-col>
-          <button ion-button color="light" block (click)="signInType='existing'">Existing</button>
-        </ion-col>
-        <ion-col>
-          <button ion-button color="dark" block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
-        </ion-col>
-      </ion-row>
-      <div [ngSwitch]="signInType">
-        <div *ngSwitchCase="'existing'">
-          Signing up as an <b>Existing User</b>.
-        </div>
-        <div *ngSwitchCase="'new'">
-          Signing up as a <b>New User</b>.
-        </div>
-        <div *ngSwitchCase="'test'">
-          Signing up as a <b>Test User</b>.
-        </div>
-     </div>
-     <button ion-button block (click)="goToPage2()">Next Page</button>
-    </ion-content>
-  `
+  templateUrl: 'first-page.html'
 })
 export class FirstPage {
   signInType: string;
@@ -55,6 +11,6 @@ export class FirstPage {
     this.signInType = 'new';
   }
   goToPage2() {
-    this.navCtrl.push('second-page');
+    this.navCtrl.push('SecondPage');
   }
 }

src/components/segment/test/nav/pages/second-page/second-page.html

@@ -0,0 +1,13 @@
+<ion-header>
+  <ion-navbar hideBackButton>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>
+      Second Page
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+<ion-content>
+  <h1>Page 2</h1>
+</ion-content>

src/components/segment/test/nav/pages/second-page/second-page.ts

@@ -1,20 +1,8 @@
 import { Component } from '@angular/core';
+import { DeepLink } from '../../../../../..';
 
+@DeepLink()
 @Component({
-  template: `
-    <ion-header>
-      <ion-navbar hideBackButton>
-        <button ion-button menuToggle>
-          <ion-icon name="menu"></ion-icon>
-        </button>
-        <ion-title>
-          Second Page
-        </ion-title>
-      </ion-navbar>
-    </ion-header>
-    <ion-content>
-      <h1>Page 2</h1>
-    </ion-content>
-  `
+  templateUrl: 'second-page.html'
 })
 export class SecondPage {}