test(angular): lazy loading tabs (#16690)

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

@@ -2,75 +2,124 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { waitTime, testStack, handleErrorMessages } from './utils';
 
 describe('tabs', () => {
-
-  beforeEach(async () => {
-    await browser.get('/tabs');
-  });
   afterEach(() => {
     handleErrorMessages();
   });
+  describe('entry url - /tabs', () => {
+    beforeEach(async () => {
+      await browser.get('/tabs');
+    });
 
-  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 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 () => {
+      let 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']);
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
+
+      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();
+      tab = await testTabTitle('Tab 1 - Page 2');
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
+
+      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']);
+    });
+
+    it('should load lazy loaded tab', async () => {
+      await element(by.css('#tab-button-lazy')).click();
+      await testTabTitle('Tab 3 - Page 1');
+    });
+
+    it('should use ion-back-button defaultHref', async () => {
+      let tab = await getSelectedTab() as ElementFinder;
+      await tab.$('#goto-tab3-page2').click();
+      tab = await testTabTitle('Tab 3 - Page 2');
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3-nested']);
+
+      await tab.$('ion-back-button').click();
+      await testTabTitle('Tab 3 - Page 1');
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
+    });
   });
 
-  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']);
+  describe('entry url - /tabs/account/nested/12', () => {
+    beforeEach(async () => {
+      await browser.get('/tabs/account/nested/12');
+    });
 
-    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']);
+    it('should only display the back-button when there is a page in the stack', async () => {
+      let tab = await testTabTitle('Tab 1 - Page 2') as ElementFinder;
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
 
-    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();
+      tab = await testTabTitle('Tab 1 - Page 1');
 
-    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']);
+      await tab.$('#goto-tab1-page2').click();
+      tab = await testTabTitle('Tab 1 - Page 2');
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
+    });
   });
 
-  it('should simulate stack + back button click', async () => {
-    const tab = await getSelectedTab();
-    await tab.$('#goto-tab1-page2').click();
-    await testTabTitle('Tab 1 - Page 2');
+  describe('entry url - /tabs/lazy', () => {
+    beforeEach(async () => {
+      await browser.get('/tabs/lazy');
+    });
 
-    await element(by.css('#tab-button-contact')).click();
-    await testTabTitle('Tab 2 - Page 1');
+    it('should not display the back-button if coming from a different stack', async () => {
+      let tab = await testTabTitle('Tab 3 - Page 1') as ElementFinder;
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3']);
 
-    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']);
-  });
-
-  it('should load lazy loaded tab', async () => {
-    await element(by.css('#tab-button-lazy')).click();
-    await testTabTitle('Tab 3 - Page 1');
+      await tab.$('#goto-tab1-page2').click();
+      tab = await testTabTitle('Tab 1 - Page 2');
+      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
+      expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
+    });
   });
 });
 

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

@@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { TabsTab3Component } from './tabs-tab3/tabs-tab3.component';
+import { TabsTab3NestedComponent } from './tabs-tab3-nested/tabs-tab3-nested.component';
 
 const routes: Routes = [
   {
     path: '',
     component: TabsTab3Component
+  },
+  {
+    path: 'nested',
+    component: TabsTab3NestedComponent
   }
 ];
 

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

@@ -4,9 +4,10 @@ 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';
+import { TabsTab3NestedComponent } from './tabs-tab3-nested/tabs-tab3-nested.component';
 
 @NgModule({
-  declarations: [TabsTab3Component],
+  declarations: [TabsTab3Component, TabsTab3NestedComponent],
   imports: [
     CommonModule,
     IonicModule,

angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Tab 3 - Page 2</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/lazy"></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <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-nested/tabs-tab3-nested.component.ts

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

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

@@ -9,5 +9,7 @@
   <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>
+    <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
+
   </p>
 </ion-content>

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

@@ -8,5 +8,6 @@
   <h1>Welcome to Tab1</h1>
   <p>
     <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
+    <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
   </p>
 </ion-content>