test(nav): e2e tests that put nav and nested navs through the paces

packages/core/scripts/e2e/index.js

@@ -6,6 +6,7 @@ const Mocha = require('mocha');
 const path = require('path');
 const webdriver = require('selenium-webdriver');
 const chromedriver = require('chromedriver');
+const argv = require('yargs').argv
 
 const Page = require('./page');
 const Snapshot = require('./snapshot');
@@ -54,21 +55,19 @@ function getTestFiles() {
 }
 
 function processCommandLine() {
-  process.argv.forEach(arg => {
-    if (arg === '--snapshot') {
+  if (argv.snapshot) {
     takeScreenshots = true;
   }
 
-    if (arg.indexOf('-f') > -1) {
-      folder = arg.split('=')[1];
+  if (argv.f || argv.folder) {
+    folder = argv.f || argv.folder;
   }
-  });
 }
 
 function registerE2ETest(desc, tst) {
   // NOTE: Do not use an arrow function here because: https://mochajs.org/#arrow-functions
   it(desc, async function() {
-    await tst(driver);
+    await tst(driver, this);
     if (takeScreenshots) {
       await snapshot.takeScreenshot(driver, {
         name: this.test.fullTitle().replace(/(^[\w-]+\/[\w-]+)/, '$1:'),
@@ -106,10 +105,34 @@ async function run() {
 
   const files = await getTestFiles();
   files.forEach(f => mocha.addFile(f));
+  const snapshot = await mochaLoadFiles(mocha);
+  const failures = await mochaRun(mocha);
+
+  if (takeScreenshots) {
+    snapshot.finish();
+  }
+  devServer.close();
+  driver.quit();
+
+  if (failures) {
+    throw new Error(failures);
+  }
+}
+
+function mochaRun(mocha) {
+  return new Promise((resolve, reject) => {
+    mocha.run(function(failures) {
+      resolve(failures);
+    });
+  });
+}
+
+function mochaLoadFiles(mocha) {
+  return new Promise((resolve, reject) => {
     mocha.loadFiles(() => {
       specIndex = 0;
 
-    snapshot = new Snapshot({
+      const snapshot = new Snapshot({
         groupId: 'ionic-core',
         appId: 'snapshots',
         testId: generateTestId(),
@@ -130,19 +153,11 @@ async function run() {
         },
         accessKey: process.env.IONIC_SNAPSHOT_KEY
       });
+      resolve(snapshot);
+    });
+  });
+}
 
-    mocha.run(function(failures) {
-      process.on('exit', function() {
-        process.exit(failures); // exit with non-zero status if there were failures
-      });
-      if (takeScreenshots) {
-        snapshot.finish();
-      }
-      devServer.close();
-      driver.quit();
-    });
-  });
-}
 
 function parseSemver(str) {
   return /(\d+)\.(\d+)\.(\d+)/
@@ -162,7 +177,11 @@ function validateNodeVersion(version) {
 // Invoke run() only if executed directly i.e. `node ./scripts/e2e`
 if (require.main === module) {
   validateNodeVersion(process.version);
-  run();
+  run().catch((err) => {
+    console.log(err);
+    // fail with non-zero status code
+    process.exit(1);
+  });
 }
 
 module.exports = {

packages/core/src/components/nav/test/basic/e2e.js

@@ -11,9 +11,55 @@ class E2ETestPage extends Page {
 
 platforms.forEach(platform => {
   describe('nav/basic', () => {
+
     register('should init', driver => {
       const page = new E2ETestPage(driver, platform);
       return page.navigate();
     });
+
+    register('should go to page-one, page-two, page-three, then back to page-two, page-one', async (driver, testContext) => {
+
+      testContext.timeout(10000);
+      const page = new E2ETestPage(driver, platform);
+
+      // go to page two
+      const pageOneNextButtonSelector = '.first-page ion-button.next.hydrated';
+      const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector);
+      pageOneNextButton.click();
+      await waitForTransition(600);
+
+      // go to page three
+      const pageTwoNextButtonSelector = '.second-page ion-button.next.hydrated';
+      const pageTwoNextButton = await getElement(driver, pageTwoNextButtonSelector);
+      pageTwoNextButton.click();
+      await waitForTransition(600);
+
+      // go back to page two
+      const pageThreeBackButtonSelector = '.third-page ion-button.previous.hydrated';
+      const pageThreeBackButton = await getElement(driver, pageThreeBackButtonSelector);
+      pageThreeBackButton.click();
+      await waitForTransition(600);
+
+      // go back to page two
+      const pageTwoBackButtonSelector = '.second-page ion-button.previous.hydrated';
+      const pageTwoBackButton = await getElement(driver, pageTwoBackButtonSelector);
+      pageTwoBackButton.click();
+      await waitForTransition(600);
+
+      // we're back on page one now
     });
   });
+});
+
+async function getElement(driver, selector) {
+  driver.wait(until.elementLocated(By.css(selector)));
+  const element = driver.findElement(By.css(selector));
+  await driver.wait(until.elementIsVisible(driver.findElement(By.css(selector))));
+  return element;
+}
+
+function waitForTransition(duration) {
+  return new Promise(resolve => {
+    setTimeout(resolve, duration);
+  })
+}

packages/core/src/components/nav/test/basic/index.html

@@ -7,7 +7,6 @@
   <script src="/dist/ionic.js"></script>
 </head>
 <body onload="loadFirstPage()">
-  <ion-nav-controller></ion-nav-controller>
   <ion-app>
     <ion-nav></ion-nav>
   </ion-app>
@@ -41,7 +40,7 @@
       </ion-header>
       <ion-content padding>
         <h1>Page One</h1>
-        <ion-button>Go to Page Two</ion-button>
+        <ion-button class="next">Go to Page Two</ion-button>
       </ion-content>
     `;
 

packages/core/src/components/nav/test/simple-nested-navs/e2e.js

@@ -0,0 +1,289 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const expect = require('chai').expect;
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/nav/test/simple-nested-navs?ionicplatform=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('nav/simple-nested-navs', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate();
+    });
+
+    register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-one-page-three, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
+
+      testContext.timeout(60000);
+      const page = new E2ETestPage(driver, platform);
+
+      await waitForTransition(300);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
+      const navOnePageOneNextButton = await waitAndGetElement(driver, navOnePageOneNextButtonSelector);
+      navOnePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
+      const navOnePageTwoNextButton = await waitAndGetElement(driver, navOnePageTwoNextButtonSelector);
+      navOnePageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-one.hydrated';
+      const navTwoPageOneNextButton = await waitAndGetElement(driver, navTwoPageOneNextButtonSelector);
+      navTwoPageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Three');
+      const navOnePageThreePreviousButtonSelector = '.nav-one-page-three ion-button.previous.hydrated';
+      const navOnePageThreePreviousButton = await waitAndGetElement(driver, navOnePageThreePreviousButtonSelector);
+      navOnePageThreePreviousButton.click();
+      await waitForTransition(600);
+
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
+      const navTwoPageOnePreviousButton = await waitAndGetElement(driver, navTwoPageOnePreviousButtonSelector);
+      navTwoPageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
+      const navOnePageTwoPreviousButton = await waitAndGetElement(driver, navOnePageTwoPreviousButtonSelector);
+      navOnePageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneSelector = '.nav-one-page-one';
+      const navOnePageOne = await waitAndGetElement(driver, navOnePageOneSelector);
+    });
+
+
+    register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav two-page-three and so on', async (driver, testContext) => {
+
+      testContext.timeout(60000);
+      const page = new E2ETestPage(driver, platform);
+
+      await waitForTransition(300);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
+      const navOnePageOneNextButton = await waitAndGetElement(driver, navOnePageOneNextButtonSelector);
+      navOnePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
+      const navOnePageTwoNextButton = await waitAndGetElement(driver, navOnePageTwoNextButtonSelector);
+      navOnePageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
+      const navTwoPageOneNextButton = await waitAndGetElement(driver, navTwoPageOneNextButtonSelector);
+      navTwoPageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Two');
+      const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
+      const navTwoPageTwoNextButton = await waitAndGetElement(driver, navTwoPageTwoNextButtonSelector);
+      navTwoPageTwoNextButton.click();
+      await waitForTransition(600);
+
+
+      console.log('On Nav Three Page One');
+      const navThreePageOneNextButtonSelector = '.nav-three-page-one ion-button.next.nav-two.hydrated';
+      const navThreePageOneNextButton = await waitAndGetElement(driver, navThreePageOneNextButtonSelector);
+      navThreePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Three');
+      const navTwoPageThreePreviousButtonSelector = '.nav-two-page-three ion-button.previous.hydrated';
+      const navTwoPageThreePreviousButton = await waitAndGetElement(driver, navTwoPageThreePreviousButtonSelector);
+      navTwoPageThreePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page One');
+      const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.previous.nav-two.hydrated';
+      const navThreePageOnePreviousButton = await waitAndGetElement(driver, navThreePageOnePreviousButtonSelector);
+      navThreePageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Two');
+      const navTwoPageTwoPreviousButtonSelector = '.nav-two-page-two ion-button.previous.hydrated';
+      const navTwoPageTwoPreviousButton = await waitAndGetElement(driver, navTwoPageTwoPreviousButtonSelector);
+      navTwoPageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
+      const navTwoPageOnePreviousButton = await waitAndGetElement(driver, navTwoPageOnePreviousButtonSelector);
+      navTwoPageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
+      const navOnePageTwoPreviousButton = await waitAndGetElement(driver, navOnePageTwoPreviousButtonSelector);
+      navOnePageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneSelector = '.nav-one-page-one';
+      const navOnePageOne = await waitAndGetElement(driver, navOnePageOneSelector);
+
+    });
+
+    register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
+
+      testContext.timeout(60000);
+      const page = new E2ETestPage(driver, platform);
+
+      await waitForTransition(300);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
+      const navOnePageOneNextButton = await waitAndGetElement(driver, navOnePageOneNextButtonSelector);
+      navOnePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
+      const navOnePageTwoNextButton = await waitAndGetElement(driver, navOnePageTwoNextButtonSelector);
+      navOnePageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
+      const navTwoPageOneNextButton = await waitAndGetElement(driver, navTwoPageOneNextButtonSelector);
+      navTwoPageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Two');
+      const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
+      const navTwoPageTwoNextButton = await waitAndGetElement(driver, navTwoPageTwoNextButtonSelector);
+      navTwoPageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page One');
+      const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.previous.nav-one.hydrated';
+      const navThreePageOnePreviousButton = await waitAndGetElement(driver, navThreePageOnePreviousButtonSelector);
+      navThreePageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
+      const navOnePageTwoPreviousButton = await waitAndGetElement(driver, navOnePageTwoPreviousButtonSelector);
+      navOnePageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneSelector = '.nav-one-page-one';
+      const navOnePageOne = await waitAndGetElement(driver, navOnePageOneSelector);
+    });
+
+    register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav-three-page-two, nav-three-page-three, nav-three-page-two, nav-three-page-one, nav-two-page-two, nav-two-page-one, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
+
+      testContext.timeout(60000);
+      const page = new E2ETestPage(driver, platform);
+
+      await waitForTransition(300);
+
+      console.log('On Nav One Page One');
+      const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
+      const navOnePageOneNextButton = await waitAndGetElement(driver, navOnePageOneNextButtonSelector);
+      navOnePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
+      const navOnePageTwoNextButton = await waitAndGetElement(driver, navOnePageTwoNextButtonSelector);
+      navOnePageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
+      const navTwoPageOneNextButton = await waitAndGetElement(driver, navTwoPageOneNextButtonSelector);
+      navTwoPageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Two');
+      const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
+      const navTwoPageTwoNextButton = await waitAndGetElement(driver, navTwoPageTwoNextButtonSelector);
+      navTwoPageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page One');
+      const navThreePageOneNextButtonSelector = '.nav-three-page-one ion-button.next.nav-three.hydrated';
+      const navThreePageOneNextButton = await waitAndGetElement(driver, navThreePageOneNextButtonSelector);
+      navThreePageOneNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page Two');
+      const navThreePageTwoNextButtonSelector = '.nav-three-page-two ion-button.next.hydrated';
+      const navThreePageTwoNextButton = await waitAndGetElement(driver, navThreePageTwoNextButtonSelector);
+      navThreePageTwoNextButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page Three');
+      const navThreePageThreePreviousButtonSelector = '.nav-three-page-three ion-button.previous.hydrated';
+      const navThreePageThreePreviousButton = await waitAndGetElement(driver, navThreePageThreePreviousButtonSelector);
+      navThreePageThreePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page Two');
+      const navThreePageTwoPreviousButtonSelector = '.nav-three-page-two ion-button.previous.hydrated';
+      const navThreePageTwoPreviousButton = await waitAndGetElement(driver, navThreePageTwoPreviousButtonSelector);
+      navThreePageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Three Page One');
+      const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.nav-two.previous.hydrated';
+      const navThreePageOnePreviousButton = await waitAndGetElement(driver, navThreePageOnePreviousButtonSelector);
+      navThreePageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page Two');
+      const navTwoPageTwoPreviousButtonSelector = '.nav-two-page-two ion-button.previous.hydrated';
+      const navTwoPageTwoPreviousButton = await waitAndGetElement(driver, navTwoPageTwoPreviousButtonSelector);
+      navTwoPageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav Two Page One');
+      const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
+      const navTwoPageOnePreviousButton = await waitAndGetElement(driver, navTwoPageOnePreviousButtonSelector);
+      navTwoPageOnePreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page Two');
+      const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
+      const navOnePageTwoPreviousButton = await waitAndGetElement(driver, navOnePageTwoPreviousButtonSelector);
+      navOnePageTwoPreviousButton.click();
+      await waitForTransition(600);
+
+      console.log('On Nav One Page One');
+      const navOnePageTwoSelector = '.nav-one-page-one';
+      const navOnePageTwo = await waitAndGetElement(driver, navOnePageTwoSelector);
+    });
+  });
+});
+
+async function waitAndGetElement(driver, selector) {
+  driver.wait(until.elementLocated(By.css(selector)));
+  const element = driver.findElement(By.css(selector));
+  await driver.wait(until.elementIsVisible(driver.findElement(By.css(selector))));
+  return element;
+}
+
+function waitForTransition(duration) {
+  return new Promise(resolve => {
+    setTimeout(resolve, duration);
+  })
+}

packages/core/src/components/nav/test/simple-nested-navs/index.html

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+  <style>
+      f {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      f:last-of-type {
+        background: yellow;
+      }
+    </style>
+</body>
+
+<script>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const navOnePageOne = document.createElement('div');
+    navOnePageOne.classList.add('nav-one-page-one');
+    navOnePageOne.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav One Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav One Page One</h1>
+        <ion-button class="next">Go to Nav One Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.push(navOnePageOne);
+
+    // okay cool, we're in the DOM now
+    const button = navOnePageOne.querySelector('ion-button');
+    button.addEventListener('click', async () => {
+      await goToNavOnePageTwo(nav);
+    });
+  }
+
+  async function goToNavOnePageTwo(nav) {
+    const navOnePageTwo = document.createElement('div');
+    navOnePageTwo.classList.add('nav-one-page-two');
+    navOnePageTwo.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav One Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav One Page Two</h1>
+        <div>
+          <ion-button class="page-three">Go to Nav One Page Three</ion-button>
+        </div>
+        <div>
+          <ion-button class="next">Go to Nav Two Page One</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous">Go Back to Nav One Page One</ion-button>
+        </div>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(navOnePageTwo);
+
+    const previousButton = navOnePageTwo.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await nav.pop();
+    });
+
+    const nextButton = navOnePageTwo.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToNavTwo(nav);
+    });
+  }
+
+  async function goToNavTwo(nav) {
+    const navTwoParent = document.createElement('div');
+    navTwoParent.classList.add('nav-two');
+    navTwoParent.innerHTML = `
+      <ion-nav></ion-nav>
+    `;
+
+    await nav.push(navTwoParent)
+
+    const navTwo = navTwoParent.querySelector('ion-nav');
+    await navTwo.componentOnReady();
+
+    goToNavTwoPageOne(nav, navTwo);
+  }
+
+  async function goToNavTwoPageOne(nav, navTwo) {
+    const navTwoPageOne = document.createElement('div');
+    navTwoPageOne.classList.add('nav-two-page-one');
+    navTwoPageOne.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Two Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Two Page One</h1>
+        <div>
+          <ion-button class="next nav-one">Push on Nav One</ion-button>
+        </div>
+        <div>
+          <ion-button class="next nav-two">Push on Nav Two</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous nav-one">Pop on Nav One</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous nav-two">Pop on Nav Two</ion-button>
+        </div>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navTwo.push(navTwoPageOne);
+
+    const pushNavOneButton = navTwoPageOne.querySelector('ion-button.next.nav-one');
+    pushNavOneButton.addEventListener('click', async () => {
+      await goToNavOnePageThree(nav);
+    });
+
+    const pushNavTwoButton = navTwoPageOne.querySelector('ion-button.next.nav-two');
+    pushNavTwoButton.addEventListener('click', async () => {
+      await goToNavTwoPageTwo(nav, navTwo);
+    });
+
+    const navOnePopButton = navTwoPageOne.querySelector('ion-button.previous.nav-one');
+    navOnePopButton.addEventListener('click', async () => {
+      await nav.pop();
+    });
+
+    const navTwoPopButton = navTwoPageOne.querySelector('ion-button.previous.nav-two');
+    navTwoPopButton.addEventListener('click', async () => {
+      await navTwo.pop();
+    });
+  }
+
+  async function goToNavOnePageThree(nav) {
+    const navOnePageThree = document.createElement('div');
+    navOnePageThree.classList.add('nav-one-page-three');
+    navOnePageThree.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav One Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav One Page Three</h1>
+        <ion-button class="previous">Go Back</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(navOnePageThree);
+
+    const previousButton = navOnePageThree.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await nav.pop();
+    });
+  }
+
+  async function goToNavTwoPageTwo(navOne, navTwo) {
+    const navTwoPageTwo = document.createElement('div');
+    navTwoPageTwo.classList.add('nav-two-page-two');
+    navTwoPageTwo.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Two Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Two Page Two</h1>
+        <div>
+          <ion-button class="nav-three next">Go To Nav Three Page One</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous">Go Back to Nav Two Page One</ion-button>
+        </div>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navTwo.push(navTwoPageTwo);
+
+    const nextButton = navTwoPageTwo.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToNavThree(navOne, navTwo);
+    });
+
+    const previousButton = navTwoPageTwo.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await navTwo.pop();
+    });
+  }
+
+  async function goToNavThree(navOne, navTwo) {
+    const navThreeParent = document.createElement('div');
+    navThreeParent.classList.add('nav-three');
+    navThreeParent.innerHTML = `
+      <ion-nav></ion-nav>
+    `;
+
+    await navTwo.push(navThreeParent);
+
+    const navThree = navThreeParent.querySelector('ion-nav');
+
+    await navThree.componentOnReady();
+
+    goToNavThreePageOne(navOne, navTwo, navThree);
+  }
+
+  async function goToNavThreePageOne(navOne, navTwo, navThree) {
+    const navThreePageOne = document.createElement('div');
+    navThreePageOne.classList.add('nav-three-page-one');
+    navThreePageOne.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Three Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Three Page One</h1>
+        <div>
+          <ion-button class="next nav-one">Push on Nav One</ion-button>
+        </div>
+        <div>
+          <ion-button class="next nav-two">Push on Nav Two</ion-button>
+        </div>
+        <div>
+          <ion-button class="next nav-three">Push on Nav Three</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous nav-one">Pop on Nav One</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous nav-two">Pop on Nav Two</ion-button>
+        </div>
+        <div>
+          <ion-button class="previous nav-three">Pop on Nav Three</ion-button>
+        </div>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navThree.push(navThreePageOne);
+
+    const pushNavOneButton = navThreePageOne.querySelector('ion-button.next.nav-one');
+    pushNavOneButton.addEventListener('click', async () => {
+      await goToNavOnePageThree(navOne);
+    });
+
+    const pushNavTwoButton = navThreePageOne.querySelector('ion-button.next.nav-two');
+    pushNavTwoButton.addEventListener('click', async () => {
+      await goToNavTwoPageThree(navOne, navTwo);
+    });
+
+    const pushNavThreeButton = navThreePageOne.querySelector('ion-button.next.nav-three');
+    pushNavThreeButton.addEventListener('click', async () => {
+      await goToNavThreePageTwo(navOne, navTwo, navThree);
+    });
+
+    const navOnePopButton = navThreePageOne.querySelector('ion-button.previous.nav-one');
+    navOnePopButton.addEventListener('click', async () => {
+      await navOne.pop();
+    });
+
+    const navTwoPopButton = navThreePageOne.querySelector('ion-button.previous.nav-two');
+    navTwoPopButton.addEventListener('click', async () => {
+      await navTwo.pop();
+    });
+
+    const navThreePopButton = navThreePageOne.querySelector('ion-button.previous.nav-three');
+    navThreePopButton.addEventListener('click', async () => {
+      await navThree.pop();
+    });
+  }
+
+  async function goToNavTwoPageThree(navOne, navTwo) {
+    const navTwoPageThree = document.createElement('div');
+    navTwoPageThree.classList.add('nav-two-page-three');
+    navTwoPageThree.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Two Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Two Page Three</h1>
+        <ion-button class="previous">Go Back</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navTwo.push(navTwoPageThree);
+
+    const previousButton = navTwoPageThree.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await navTwo.pop();
+    });
+  }
+
+  async function goToNavThreePageTwo(navOne, navTwo, navThree) {
+    const navThreePageTwo = document.createElement('div');
+    navThreePageTwo.classList.add('nav-three-page-two');
+    navThreePageTwo.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Three Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Three Page Two</h1>
+        <ion-button class="next">Go to Nav Three Page Three</ion-button>
+        <ion-button class="previous">Go Back to Nav Three Page One</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navThree.push(navThreePageTwo);
+
+    const nextButton = navThreePageTwo.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      goToNavThreePageThree(navOne, navTwo, navThree);
+    });
+
+    const previousButton = navThreePageTwo.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await navThree.pop();
+    });
+  }
+
+  async function goToNavThreePageThree(navOne, navTwo, navThree) {
+    const navThreePageThree = document.createElement('div');
+    navThreePageThree.classList.add('nav-three-page-three');
+    navThreePageThree.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Nav Three Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Nav Three Page Three</h1>
+        <ion-button class="previous">Go Back to Nav Three Page Two</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await navThree.push(navThreePageThree);
+
+    const previousButton = navThreePageThree.querySelector('ion-button .previous');
+    previousButton.addEventListener('click', async () => {
+      await navThree.pop();
+    });
+  }
+</script>
+</html>