test(app): make progress on app tests

* tmp

* tmp

packages/core/package.json

@@ -31,6 +31,7 @@
     "tsc": "./node_modules/.bin/tsc -p .",
     "dev": "sd concurrent \"stencil build --dev --watch --docs\" \"stencil-dev-server\"",
     "e2e": "node ./scripts/e2e",
+    "e2e-debug": "node --inspect --debug-brk ./scripts/e2e",
     "snapshot": "node ./scripts/e2e --snapshot",
     "test": "jest --no-cache",
     "test.watch": "jest --watch --no-cache",

packages/core/src/components/app/test/cordova/e2e.js

@@ -6,23 +6,21 @@ const expect = require('chai').expect;
 
 class E2ETestPage extends Page {
   constructor(driver, platform) {
-    super(driver, `http://localhost:3333/src/components/app/test/cordova?ionicplatform=${platform}`);
+    super(driver, `http://localhost:3333/src/components/app/test/cordova?ionicplatform=${platform}&ts=${Date.now()}`);
   }
 }
 
 platforms.forEach(platform => {
   describe('app/cordova', () => {
 
-    register('should init', driver => {
+    register('should init', async (driver) => {
       const page = new E2ETestPage(driver, platform);
-      return page.navigate();
+      await page.navigate();
     });
 
     register('should have status bar padding for all pages', async (driver, testContext) => {
-
       testContext.timeout(10000);
       const page = new E2ETestPage(driver, platform);
-
       await waitForTransition(200);
       const pageOneToolbarSelector = 'page-one ion-toolbar';
       const pageOneToolbar = await getElement(driver, pageOneToolbarSelector);
@@ -49,6 +47,38 @@ platforms.forEach(platform => {
         expect(paddingTopPageTwo).to.equal('24px');
       }
 
+      // reset the test to the original state
+      const backButtonSelector = 'page-two ion-button';
+      const backButton = await getElement(driver, backButtonSelector);
+      await backButton.click();
+      await waitForTransition(600);
+
     });
+
+    /*register('should have status bar padding for a single modal', async (driver, testContext) => {
+      testContext.timeout(10000);
+      const page = new E2ETestPage(driver, platform);
+
+      await waitForTransition(200);
+
+      const singleModalButtonSelector = '.single-modal';
+      const singleModalButton = await getElement(driver, singleModalButtonSelector);
+      await singleModalButton.click();
+      await waitForTransition(600);
+
+      console.log('blah');
+
+      const modalOneToolbarSelector = 'modal-one ion-toolbar';
+      const modalOneToolbar = await getElement(driver, modalOneToolbarSelector);
+      const paddingTopModalOne = await modalOneToolbar.getCssValue('padding-top');
+      console.log('paddingTopModalOne: ', paddingTopModalOne);
+      if (platform === 'ios') {
+        expect(paddingTopModalOne).to.equal('24px');
+      } else {
+        expect(paddingTopModalOne).to.equal('24px');
+      }
+
+    });
+    */
   });
 });

packages/core/src/components/app/test/cordova/index.html

@@ -57,6 +57,7 @@
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
+  <ion-modal-controller></ion-modal-controller>
   <script>
 
 async function initialize() {
@@ -91,6 +92,8 @@ class PageOne extends HTMLElement {
 
   <ion-button expand='block' class='e2eCordovaPage2 next'>Go to Page Two</ion-button>
   <ion-button color='secondary' expand='block' class='e2eCordovaPage2 tabs'>Go to Tabs</ion-button>
+  <ion-button color='warning' expand='block' class='e2eCordovaPage2 single-modal'>Open Single Modal</ion-button>
+  <ion-button color='secondary' expand='block' class='e2eCordovaPage2 nav-modal'>Open Modal Nav</ion-button>
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
@@ -112,6 +115,26 @@ class PageOne extends HTMLElement {
     tabsButton.addEventListener('click', async () => {
       await this.closest('ion-nav').setRoot('tabs-page');
     });
+
+    const navModalButton = this.querySelector('ion-button.nav-modal');
+    navModalButton.addEventListener('click', async () => {
+      const modalController = document.querySelector('ion-modal-controller');
+      await modalController.componentOnReady();
+      const modalElement = await modalController.create({
+        component: 'modal-container'
+      });
+      modalElement.present();
+    });
+
+    const modalButton = this.querySelector('ion-button.single-modal');
+    modalButton.addEventListener('click', async () => {
+      const modalController = document.querySelector('ion-modal-controller');
+      await modalController.componentOnReady();
+      const modalElement = await modalController.create({
+        component: 'modal-one'
+      });
+      modalElement.present();
+    });
   }
 }
 
@@ -212,10 +235,72 @@ class TabsPage extends HTMLElement {
     await navThree.setRoot('page-three');
   }
 }
+
+class ModalContainer extends HTMLElement {
+  async connectedCallback() {
+    this.innerHTML = `
+      <ion-nav></ion-nav>
+    `;
+
+    const nav = this.querySelector('ion-nav');
+    await nav.componentOnReady();
+    nav.setRoot('modal-one');
+  }
+}
+
+class ModalOne extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Page One</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  Modal Page One
+  <div>
+    <ion-button class="next">Go to Page Two</ion-button>
+  </div>
+</ion-content>
+    `;
+
+    const nextButton = this.querySelector('ion-button.next');
+    nextButton.addEventListener('click', async () => {
+      this.closest('ion-nav').push('modal-two');
+    });
+  }
+}
+
+class ModalTwo extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Page Two</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  Modal Page Two
+  <div>
+    <ion-button class="back">Go Back</ion-button>
+  </div>
+</ion-content>
+    `;
+
+    const backButton = this.querySelector('ion-button.back');
+    backButton.addEventListener('click', async () => {
+      this.closest('ion-nav').pop();
+    });
+  }
+}
+
 customElements.define('page-one', PageOne);
 customElements.define('page-two', PageTwo);
 customElements.define('page-three', PageThree);
 customElements.define('tabs-page', TabsPage);
+customElements.define('modal-container', ModalContainer);
+customElements.define('modal-one', ModalOne);
+customElements.define('modal-two', ModalTwo);
 
   </script>
 </body>