From f0ef061a6bae675ebe4c7bd2fbf934cb8a1399ea Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Mon, 10 Dec 2018 21:14:34 +0100
Subject: [PATCH] test(angular): add lazy loading tabs test

---
 angular/test/test-app/e2e/src/tabs.e2e-spec.ts   |  4 ++++
 .../test/test-app/src/app/app-routing.module.ts  |  4 ++++
 .../app/tabs-lazy/tabs-lazy-routing.module.ts    | 16 ++++++++++++++++
 .../src/app/tabs-lazy/tabs-lazy.module.ts        | 16 ++++++++++++++++
 .../tabs-lazy/tabs-tab3/tabs-tab3.component.html | 13 +++++++++++++
 .../tabs-lazy/tabs-tab3/tabs-tab3.component.ts   |  7 +++++++
 .../test-app/src/app/tabs/tabs.component.html    | 11 +++++++++--
 7 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 angular/test/test-app/src/app/tabs-lazy/tabs-lazy-routing.module.ts
 create mode 100644 angular/test/test-app/src/app/tabs-lazy/tabs-lazy.module.ts
 create mode 100644 angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
 create mode 100644 angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts

diff --git a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
index 698afe6995..453ceb46cf 100644
--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
@@ -68,6 +68,10 @@ describe('tabs', () => {
     await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
   });
 
+  it('should load lazy loaded tab', async () => {
+    await element(by.css('#tab-button-lazy')).click();
+    await testTabTitle('Tab 3 - Page 1');
+  });
 });
 
 async function testTabTitle(title: string) {
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index 499acab67a..5ffb92548d 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -47,6 +47,10 @@ const routes: Routes = [
             pathMatch: 'full'
           }
         ]
+      },
+      {
+        path: 'lazy',
+        loadChildren: './tabs-lazy/tabs-lazy.module#TabsLazyModule'
       }
     ]
   }
diff --git a/angular/test/test-app/src/app/tabs-lazy/tabs-lazy-routing.module.ts b/angular/test/test-app/src/app/tabs-lazy/tabs-lazy-routing.module.ts
new file mode 100644
index 0000000000..e630024152
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs-lazy/tabs-lazy-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TabsTab3Component } from './tabs-tab3/tabs-tab3.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TabsTab3Component
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TabsLazyRoutingModule { }
diff --git a/angular/test/test-app/src/app/tabs-lazy/tabs-lazy.module.ts b/angular/test/test-app/src/app/tabs-lazy/tabs-lazy.module.ts
new file mode 100644
index 0000000000..25810ef59f
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs-lazy/tabs-lazy.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TabsLazyRoutingModule } from './tabs-lazy-routing.module';
+import { TabsTab3Component } from './tabs-tab3/tabs-tab3.component';
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [TabsTab3Component],
+  imports: [
+    CommonModule,
+    IonicModule,
+    TabsLazyRoutingModule
+  ]
+})
+export class TabsLazyModule { }
diff --git a/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
new file mode 100644
index 0000000000..dd24e1c366
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
@@ -0,0 +1,13 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 3 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>LAZY LOADED TAB</h1>
+  <p>
+    <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
+  </p>
+</ion-content>
diff --git a/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts
new file mode 100644
index 0000000000..f7e8921e9c
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts
@@ -0,0 +1,7 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab3',
+  templateUrl: './tabs-tab3.component.html',
+})
+export class TabsTab3Component {}
diff --git a/angular/test/test-app/src/app/tabs/tabs.component.html b/angular/test/test-app/src/app/tabs/tabs.component.html
index 818ef858b7..1adecf6fda 100644
--- a/angular/test/test-app/src/app/tabs/tabs.component.html
+++ b/angular/test/test-app/src/app/tabs/tabs.component.html
@@ -1,12 +1,19 @@
 <ion-tabs>
   <ion-tab-bar>
-    <ion-tab-button tab="account" id="account-tab-button">
+    <ion-tab-button tab="account">
       <ion-label>Tab One</ion-label>
       <ion-icon name="add"></ion-icon>
     </ion-tab-button>
-    <ion-tab-button tab="contact" id="contact-tab-button">
+
+    <ion-tab-button tab="contact">
       <ion-label>Tab Two</ion-label>
       <ion-icon name="logo-ionic"></ion-icon>
     </ion-tab-button>
+
+    <ion-tab-button tab="lazy">
+      <ion-label>Tab Three</ion-label>
+      <ion-icon name="save"></ion-icon>
+    </ion-tab-button>
+
   </ion-tab-bar>
 </ion-tabs>