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 453ceb46cf..75fd4bbeeb 100644
--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/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);
+ });
});
});
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
index e630024152..30c90a2064 100644
--- 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
@@ -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
}
];
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
index 25810ef59f..50a4d2057c 100644
--- 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
@@ -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,
diff --git a/angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html
new file mode 100644
index 0000000000..144eafcf41
--- /dev/null
+++ b/angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html
@@ -0,0 +1,15 @@
+
+