From 45311fc7d46a5befde493d780d8f364933cbdec4 Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Fri, 16 Feb 2018 09:52:44 -0600
Subject: [PATCH] test(nav): nav then tabs test

---
 .../src/components/nav/test/basic/index.html  |  17 +-
 .../nav/test/nav-then-tabs/index.html         | 387 ++++++++++++++++++
 .../nav/test/simple-nested-navs/index.html    |  33 +-
 3 files changed, 417 insertions(+), 20 deletions(-)
 create mode 100644 packages/core/src/components/nav/test/nav-then-tabs/index.html
diff --git a/packages/core/src/components/nav/test/basic/index.html b/packages/core/src/components/nav/test/basic/index.html
index 5f2685543d..11fe138b16 100644
--- a/packages/core/src/components/nav/test/basic/index.html
+++ b/packages/core/src/components/nav/test/basic/index.html
@@ -32,6 +32,9 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button text="Page One"></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page Two</ion-title>
               </ion-toolbar>
             </ion-header>
@@ -42,11 +45,7 @@
                   <ion-button class="next">Go to Page Two</ion-button>
                 </ion-nav-push>
               </div>
-              <div>
-                <ion-nav-pop>
-                  <ion-button class="next">Go Back</ion-button>
-                </ion-nav-pop>
-              </div>
+
             </ion-content>
           </ion-page>
         `;
@@ -59,16 +58,14 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button text="Page Two"></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page Three</ion-title>
               </ion-toolbar>
             </ion-header>
             <ion-content padding>
               <h1>Page Three</h1>
-              <div>
-                <ion-nav-pop>
-                  <ion-button class="next">Go Back</ion-button>
-                </ion-nav-pop>
-              </div>
             </ion-content>
           </ion-page>
         `;
diff --git a/packages/core/src/components/nav/test/nav-then-tabs/index.html b/packages/core/src/components/nav/test/nav-then-tabs/index.html
new file mode 100644
index 0000000000..ec231e47e1
--- /dev/null
+++ b/packages/core/src/components/nav/test/nav-then-tabs/index.html
@@ -0,0 +1,387 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Then Tabs</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>
+  <script>
+
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page One</h1>
+              <ion-nav-push component="page-two">
+                <ion-button class="next">Go to Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-nav root="page-two-section-one"></ion-nav>
+          `;
+        }
+      }
+
+      class PageTwoSectionOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Two Section One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Two Section One</h1>
+              <ion-nav-push component="page-two-section-two">
+                <ion-button class="next">Go to Page Two Section Two</ion-button>
+              </ion-nav-push>
+              <div>
+                <ion-button class="previous">Go Back</ion-button>
+              </div>
+            </ion-content>
+          </ion-page>
+          `;
+
+          const button = this.querySelector('ion-button.previous');
+          button.addEventListener('click', () => {
+            const nav = this.closest('ion-nav');
+            if (nav.parent) {
+              nav.parent.pop();
+            }
+          });
+        }
+      }
+
+      class PageTwoSectionTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Two Section Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Two Section Two</h1>
+              <ion-nav-push component="page-three">
+                <ion-button class="next">Go to Page Three</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class PageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Three</h1>
+              <ion-nav-pop>
+                  <ion-button class="previous">Go Back</ion-button>
+              </ion-nav-pop>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class LoginPage extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Login Page</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Login Page</h1>
+              <ion-nav-push component="tabs-page">
+                <ion-button>Login</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabsPage extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-tabs>
+            <ion-tab title="Tab One" icon="star" #tabOne>
+              <ion-nav root="tab-one-page-one" name="tab-one" lazy="true"></ion-nav>
+            </ion-tab>
+            <ion-tab title="Tab Two" icon="globe" #tabTwo>
+              <ion-nav root="tab-two-page-one" name="tab-two" lazy="true"></ion-nav>
+            </ion-tab>
+            <ion-tab title="Tab Three" icon="logo-facebook" #tabThree>
+              <ion-nav root="tab-three-page-one" name="tab-three" lazy="true"></ion-nav>
+            </ion-tab>
+          </ion-tabs>
+          `;
+        }
+      }
+
+      class TabOnePageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab One Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab One Page One</h1>
+              <ion-nav-push component="tab-one-page-two">
+                <ion-button class="next">Go to Tab One Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabOnePageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab One Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab One Page Two</h1>
+              <div>
+                <ion-nav-push component="tab-one-page-three">
+                  <ion-button class="next">Go to Tab One Page Three</ion-button>
+                </ion-nav-push>
+              </div>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabOnePageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab One Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab One Page Three</h1>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabTwoPageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Two Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Two Page One</h1>
+              <ion-nav-push component="tab-two-page-two">
+                <ion-button class="next">Go to Tab Two Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabTwoPageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Two Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Two Page Two</h1>
+              <div>
+                <ion-nav-push component="tab-two-page-three">
+                  <ion-button class="next">Go to Tab Two Page Three</ion-button>
+                </ion-nav-push>
+              </div>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabTwoPageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Two Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Two Page Three</h1>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabThreePageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Three Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Three Page One</h1>
+              <ion-nav-push component="tab-three-page-two">
+                <ion-button class="next">Go to Tab Three Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabThreePageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Three Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Three Page Two</h1>
+              <div>
+                <ion-nav-push component="tab-three-page-three">
+                  <ion-button class="next">Go to Tab Three Page Three</ion-button>
+                </ion-nav-push>
+              </div>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      class TabThreePageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Tab Three Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Tab Three Page Three</h1>
+            </ion-content>
+          </ion-page>
+          `;
+        }
+      }
+
+      customElements.define('login-page', LoginPage);
+      customElements.define('tabs-page', TabsPage);
+
+      customElements.define('tab-one-page-one', TabOnePageOne);
+      customElements.define('tab-one-page-two', TabOnePageTwo);
+      customElements.define('tab-one-page-three', TabOnePageThree);
+
+      customElements.define('tab-two-page-one', TabTwoPageOne);
+      customElements.define('tab-two-page-two', TabTwoPageTwo);
+      customElements.define('tab-two-page-three', TabTwoPageThree);
+
+      customElements.define('tab-three-page-one', TabThreePageOne);
+      customElements.define('tab-three-page-two', TabThreePageTwo);
+      customElements.define('tab-three-page-three', TabThreePageThree);
+    </script>
+</head>
+<body>
+  <ion-app>
+    <ion-nav root="login-page"></ion-nav>
+  </ion-app>
+</body>
+</html>
diff --git a/packages/core/src/components/nav/test/simple-nested-navs/index.html b/packages/core/src/components/nav/test/simple-nested-navs/index.html
index f37e581795..746bcdbe67 100644
--- a/packages/core/src/components/nav/test/simple-nested-navs/index.html
+++ b/packages/core/src/components/nav/test/simple-nested-navs/index.html
@@ -13,7 +13,9 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
-                <ion-back-button slot="start"></ion-back-button>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page One</ion-title>
               </ion-toolbar>
             </ion-header>
@@ -42,7 +44,9 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
-                <ion-back-button slot="start"></ion-back-button>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page Two Section One</ion-title>
               </ion-toolbar>
             </ion-header>
@@ -51,12 +55,20 @@
               <ion-nav-push component="page-two-section-two">
                 <ion-button class="next">Go to Page Two Section Two</ion-button>
               </ion-nav-push>
-              <ion-nav-pop>
-                  <ion-button class="previous">Go Back</ion-button>
-              </ion-nav-pop>
+              <div>
+                <ion-button class="previous">Go Back</ion-button>
+              </div>
             </ion-content>
           </ion-page>
           `;
+
+          const button = this.querySelector('ion-button.previous');
+          button.addEventListener('click', () => {
+            const nav = this.closest('ion-nav');
+            if (nav.parent) {
+              nav.parent.pop();
+            }
+          });
         }
       }
 
@@ -66,7 +78,9 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
-                <ion-back-button slot="start"></ion-back-button>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page Two Section Two</ion-title>
               </ion-toolbar>
             </ion-header>
@@ -75,9 +89,6 @@
               <ion-nav-push component="page-three">
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
-              <ion-nav-pop>
-                  <ion-button class="previous">Go Back</ion-button>
-              </ion-nav-pop>
             </ion-content>
           </ion-page>
           `;
@@ -90,7 +101,9 @@
           <ion-page>
             <ion-header>
               <ion-toolbar>
-                <ion-back-button slot="start"></ion-back-button>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
                 <ion-title>Page Three</ion-title>
               </ion-toolbar>
             </ion-header>
