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

import { browser, element, by, ElementFinder } from 'protractor';
import { waitTime, testStack, handleErrorMessages } from './utils';

describe('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 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']);
    });
  });

  describe('entry url - /tabs/account/nested/12', () => {
    beforeEach(async () => {
      await browser.get('/tabs/account/nested/12');
    });

    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();
      tab = await testTabTitle('Tab 1 - Page 1');

      await tab.$('#goto-tab1-page2').click();
      tab = await testTabTitle('Tab 1 - Page 2');
      expect(await tab.$('ion-back-button').isDisplayed()).toBe(true);
    });
  });

  describe('entry url - /tabs/lazy', () => {
    beforeEach(async () => {
      await browser.get('/tabs/lazy');
    });

    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 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);
    });
  });
});

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