test(angular): add lazy loading tabs test

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) {

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'
       }
     ]
   }

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 { }

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 { }

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>

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 {}

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>