refactor(angular): lazy loading tabs (#16637)

Fixes #16619

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

@@ -0,0 +1,85 @@
+import { browser, element, by, ElementFinder } from 'protractor';
+import { waitTime, testStack, handleErrorMessages } from './utils';
+
+describe('tabs', () => {
+
+  beforeEach(async () => {
+    await browser.get('/tabs');
+  });
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
+  it('should redirect and load tab-account', async () => {
+    await testTabTitle('Tab 1 - Page 1');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1']);
+  });
+
+  it('should simulate stack + double tab click', async () => {
+    const tab = await getSelectedTab() as ElementFinder;
+    await tab.$('#goto-tab1-page2').click();
+    await testTabTitle('Tab 1 - Page 2');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
+
+    await element(by.css('#tab-button-contact')).click();
+    await testTabTitle('Tab 2 - Page 1');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+
+    await element(by.css('#tab-button-account')).click();
+    await testTabTitle('Tab 1 - Page 2');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+
+    await element(by.css('#tab-button-account')).click();
+    await testTabTitle('Tab 1 - Page 1');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
+  });
+
+  it('should simulate stack + back button click', async () => {
+    const tab = await getSelectedTab();
+    await tab.$('#goto-tab1-page2').click();
+    await testTabTitle('Tab 1 - Page 2');
+
+    await element(by.css('#tab-button-contact')).click();
+    await testTabTitle('Tab 2 - Page 1');
+
+    await element(by.css('#tab-button-account')).click();
+    await testTabTitle('Tab 1 - Page 2');
+
+    await element(by.css('ion-back-button')).click();
+    await testTabTitle('Tab 1 - Page 1');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
+  });
+
+  it('should switch tabs and go back', async () => {
+    await element(by.css('#tab-button-contact')).click();
+    const tab = await testTabTitle('Tab 2 - Page 1');
+
+    await tab.$('#goto-tab1-page1').click();
+    await testTabTitle('Tab 1 - Page 1');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
+  });
+
+  it('should switch tabs and go to nested', async () => {
+    await element(by.css('#tab-button-contact')).click();
+    const tab = await testTabTitle('Tab 2 - Page 1');
+
+    await tab.$('#goto-tab1-page2').click();
+    await testTabTitle('Tab 1 - Page 2');
+    await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
+  });
+
+});
+
+async function testTabTitle(title: string) {
+  await waitTime(600);
+  const tab = await getSelectedTab();
+  expect(await tab.$('ion-title').getText()).toEqual(title);
+  return tab;
+}
+
+async function getSelectedTab(): Promise<ElementFinder> {
+  const tabs = element.all(by.css('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)'));
+  expect(await tabs.count()).toEqual(1);
+  const tab = tabs.first();
+  return tab;
+}

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

@@ -59,7 +59,7 @@ export async function testLifeCycle(selector: string, expected: LifeCycleCount)
 }
 
 export async function testStack(selector: string, expected: string[]) {
-  const children = browser.executeScript(`
+  const children = await browser.executeScript(`
     return Array.from(
       document.querySelector('${selector}').children
     ).map(el => el.tagName.toLowerCase());

angular/test/test-app/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "npm run sync && ng serve",
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
     "build": "ng build --prod --no-progress",

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

@@ -6,6 +6,9 @@ import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
+import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
+import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -13,7 +16,40 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
-  { path: 'tabs', component: TabsComponent }
+  { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
+  {
+    path: 'tabs',
+    component: TabsComponent,
+    children: [
+      {
+        path: 'account',
+        children: [
+          {
+            path: 'nested/:id',
+            component: TabsTab1NestedComponent
+          },
+          {
+            path: '',
+            component: TabsTab1Component
+          }
+        ]
+      },
+      {
+        path: 'contact',
+        children: [
+          {
+            path: 'one',
+            component: TabsTab2Component
+          },
+          {
+            path: '',
+            redirectTo: 'one',
+            pathMatch: 'full'
+          }
+        ]
+      }
+    ]
+  }
 ];
 
 @NgModule({

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

@@ -12,6 +12,9 @@ import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
+import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
+import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
+import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +25,10 @@ import { TabsComponent } from './tabs/tabs.component';
     RouterLinkComponent,
     RouterLinkPageComponent,
     HomePageComponent,
-    TabsComponent
+    TabsComponent,
+    TabsTab1Component,
+    TabsTab2Component,
+    TabsTab1NestedComponent
   ],
   imports: [
     BrowserModule,

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 1 - Page 2</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to NESTED PAGE</h1>
+  <p>
+    <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
+    <ion-button routerLink="/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab1-nested',
+  templateUrl: './tabs-tab1-nested.component.html',
+})
+export class TabsTab1NestedComponent { }

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 1 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to Tab1</h1>
+  <p>
+    <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
+  </p>
+</ion-content>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab1',
+  templateUrl: './tabs-tab1.component.html',
+})
+export class TabsTab1Component { }

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -0,0 +1,13 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 2 - Page 1</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <h1>Welcome to Tab 2</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-tab2/tabs-tab2.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tabs-tab2',
+  templateUrl: './tabs-tab2.component.html',
+})
+export class TabsTab2Component { }

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

@@ -1,21 +1,12 @@
 <ion-tabs>
-  <ion-tab tab="tab-one">
-    <ion-router-outlet name="tab-one"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="tab-two">
-    <ion-router-outlet name="tab-one"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab-one">
+  <ion-tab-bar>
+    <ion-tab-button tab="account" id="account-tab-button">
       <ion-label>Tab One</ion-label>
       <ion-icon name="add"></ion-icon>
     </ion-tab-button>
-
-    <ion-tab-button tab="tab-two">
+    <ion-tab-button tab="contact" id="contact-tab-button">
       <ion-label>Tab Two</ion-label>
-      <ion-icon name="plane"></ion-icon>
+      <ion-icon name="logo-ionic"></ion-icon>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>

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

@@ -4,6 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class TabsComponent {
-
-}
+export class TabsComponent { }