From f267d0b419fbdadb26d9d0690fb1a41684e431e9 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Thu, 7 Dec 2017 14:41:42 -0600 Subject: [PATCH] test(app): update the app/cordova test to NOT use stencil components --- .../components/app/test/cordova/bootstrap.js | 18 +++++ .../components/app/test/cordova/index.html | 7 +- .../components/app/test/cordova/page-one.js | 69 +++++++++++++++++++ .../components/app/test/cordova/page-one.tsx | 59 ---------------- .../components/app/test/cordova/page-tabs.tsx | 31 --------- .../components/app/test/cordova/page-three.js | 35 ++++++++++ .../app/test/cordova/page-three.tsx | 39 ----------- .../components/app/test/cordova/page-two.js | 55 +++++++++++++++ .../components/app/test/cordova/page-two.tsx | 51 -------------- .../components/app/test/cordova/tabs-page.js | 48 +++++++++++++ 10 files changed, 227 insertions(+), 185 deletions(-) create mode 100644 packages/core/src/components/app/test/cordova/bootstrap.js create mode 100644 packages/core/src/components/app/test/cordova/page-one.js delete mode 100644 packages/core/src/components/app/test/cordova/page-one.tsx delete mode 100644 packages/core/src/components/app/test/cordova/page-tabs.tsx create mode 100644 packages/core/src/components/app/test/cordova/page-three.js delete mode 100644 packages/core/src/components/app/test/cordova/page-three.tsx create mode 100644 packages/core/src/components/app/test/cordova/page-two.js delete mode 100644 packages/core/src/components/app/test/cordova/page-two.tsx create mode 100644 packages/core/src/components/app/test/cordova/tabs-page.js diff --git a/packages/core/src/components/app/test/cordova/bootstrap.js b/packages/core/src/components/app/test/cordova/bootstrap.js new file mode 100644 index 0000000000..20dc19b023 --- /dev/null +++ b/packages/core/src/components/app/test/cordova/bootstrap.js @@ -0,0 +1,18 @@ + + +export async function bootstrap() { + const nav = document.querySelector('ion-nav'); + await nav.componentOnReady(); + const pageOneModule = await import('./page-one.js'); + + const pageOne = new pageOneModule.PageOne(nav); + + nav.push(pageOne.getElement()).then(() => { + pageOne.initialize(); + }); +} + +// IDK, it errors out sometimes if I bootstrap right away +setTimeout(() => { + bootstrap() +}, 250); \ No newline at end of file diff --git a/packages/core/src/components/app/test/cordova/index.html b/packages/core/src/components/app/test/cordova/index.html index d20e759043..91af0c6319 100644 --- a/packages/core/src/components/app/test/cordova/index.html +++ b/packages/core/src/components/app/test/cordova/index.html @@ -10,7 +10,6 @@ - @@ -54,14 +53,12 @@ - + - + diff --git a/packages/core/src/components/app/test/cordova/page-one.js b/packages/core/src/components/app/test/cordova/page-one.js new file mode 100644 index 0000000000..6ab9b49dfc --- /dev/null +++ b/packages/core/src/components/app/test/cordova/page-one.js @@ -0,0 +1,69 @@ + +export class PageOne { + constructor(nav) { + this.nav = nav; + } + + getElement() { + const element = document.createElement('div'); + element.innerHTML = ` + + + + + + + All + Favorites + + + + + + + + I'm a toolbar + + + +
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.
+ + Go to Page Two + Go to Tabs + +
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.
+ +
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.
+ +
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.
+ + +`; + + this.element = element; + return element; + } + + initialize() { + const pageTwoButton = this.element.querySelector('ion-button .next'); + + pageTwoButton.addEventListener('click', async () => { + // okay, go to page two + const pageTwoModule = await import('./page-two.js'); + const pageTwo = new pageTwoModule.PageTwo(this.nav); + await this.nav.push(pageTwo.getElement()); + // okay, the page is pushed, initialize it + pageTwo.initialize(); + }); + + const tabsButton = this.element.querySelector('ion-button .tabs'); + tabsButton.addEventListener('click', async () => { + // okay, go to page two + const tabsPageModule = await import('./tabs-page.js'); + const tabsPage = new tabsPageModule.TabsPage(this.nav); + await this.nav.setRoot(tabsPage.getElement()); + // okay, the page is pushed, initialize it + await tabsPage.initialize(); + }); + } +} \ No newline at end of file diff --git a/packages/core/src/components/app/test/cordova/page-one.tsx b/packages/core/src/components/app/test/cordova/page-one.tsx deleted file mode 100644 index 49aa9bb7db..0000000000 --- a/packages/core/src/components/app/test/cordova/page-one.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, Element } from '@stencil/core'; - -@Component({ - tag: 'app-cordova-page-one' -}) -export class AppCordovaPageOne { - - @Element() element: HTMLElement; - - componentDidEnter() { - console.log('page one did enter'); - } - - nextPage() { - const nav = this.element.closest('ion-nav') as any; - nav.push('app-cordova-page-two'); - } - - goToTabs() { - const nav = this.element.closest('ion-nav') as any; - nav.setRoot('app-cordova-page-tabs'); - } - - render() { - return [ - - - - - - - All - Favorites - - - - - - - - I'm a toolbar - - , - -
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.
- - this.nextPage()} expand='block' class='e2eCordovaPage2'>Go to Page Two - this.goToTabs()} color='secondary' expand='block' class='e2eCordovaPage2'>Go to Tabs - -
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.
- -
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.
- -
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.
- - - ]; - } -} diff --git a/packages/core/src/components/app/test/cordova/page-tabs.tsx b/packages/core/src/components/app/test/cordova/page-tabs.tsx deleted file mode 100644 index 76eba584f0..0000000000 --- a/packages/core/src/components/app/test/cordova/page-tabs.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, Element } from '@stencil/core'; - -@Component({ - tag: 'app-cordova-page-tabs' -}) -export class AppCordovaPageTabs { - - @Element() element: HTMLElement; - - componentDidEnter() { - console.log('page two did enter'); - } - - render() { - return [ - - - - - - - - - - - - - - ]; - } -} diff --git a/packages/core/src/components/app/test/cordova/page-three.js b/packages/core/src/components/app/test/cordova/page-three.js new file mode 100644 index 0000000000..6e94fc4494 --- /dev/null +++ b/packages/core/src/components/app/test/cordova/page-three.js @@ -0,0 +1,35 @@ + +export class PageThree { + constructor(nav) { + this.nav = nav; + } + + getElement() { + const element = document.createElement('div'); + element.innerHTML = ` + +

Page 3

+
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.
+ + Go Back + + + + + + I'm a bottom toolbar + + +`; + + this.element = element; + return element; + } + + initialize() { + const backButton = this.element.querySelector('ion-button .back'); + backButton.addEventListener('click', async () => { + await this.nav.pop(); + }); + } +} \ No newline at end of file diff --git a/packages/core/src/components/app/test/cordova/page-three.tsx b/packages/core/src/components/app/test/cordova/page-three.tsx deleted file mode 100644 index 833a3beb7e..0000000000 --- a/packages/core/src/components/app/test/cordova/page-three.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, Element } from '@stencil/core'; - -@Component({ - tag: 'app-cordova-page-three' -}) -export class AppCordovaPageThree { - - @Element() element: HTMLElement; - - componentDidEnter() { - console.log('page one did enter'); - } - - nextPage() { - const nav = this.element.closest('ion-nav') as any; - nav.push('app-cordova-page-one'); - } - - prevPage() { - const nav = this.element.closest('ion-nav') as any; - nav.push('app-cordova-page-two'); - } - - render() { - return [ - -

Page 3

-
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.
- this.prevPage()} expand='block' class='e2eCordovaGoBack'>Go Back - , - - - - I'm a bottom toolbar - - - ]; - } -} diff --git a/packages/core/src/components/app/test/cordova/page-two.js b/packages/core/src/components/app/test/cordova/page-two.js new file mode 100644 index 0000000000..7f68c722ea --- /dev/null +++ b/packages/core/src/components/app/test/cordova/page-two.js @@ -0,0 +1,55 @@ + +export class PageTwo { + constructor(nav) { + this.nav = nav; + } + + getElement() { + const element = document.createElement('div'); + element.innerHTML = ` + + + Page Two + + + + + + Hello I am a sub header, with no border on top + + + +
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.
+ + Go Back + Go to Page Three + Open Modal + + +`; + + this.element = element; + return element; + } + + initialize() { + const backButton = this.element.querySelector('ion-button .back'); + backButton.addEventListener('click', async () => { + await this.nav.pop(); + }); + + const nextButton = this.element.querySelector('ion-button .next'); + nextButton.addEventListener('click', async () => { + const pageThreeModule = await import('./page-three.js'); + const pageThree = new pageThreeModule.PageThree(this.nav); + await this.nav.push(pageThree.getElement()); + // okay, the page is pushed, initialize it + pageThree.initialize(); + }); + + const modalButton = this.element.querySelector('ion-button .modal'); + modalButton.addEventListener('click', () => { + alert('This is a problem for future Ionic team, let\'s let those comrades dal with it.'); + }); + } +} \ No newline at end of file diff --git a/packages/core/src/components/app/test/cordova/page-two.tsx b/packages/core/src/components/app/test/cordova/page-two.tsx deleted file mode 100644 index b710076155..0000000000 --- a/packages/core/src/components/app/test/cordova/page-two.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Component, Element } from '@stencil/core'; - -@Component({ - tag: 'app-cordova-page-two' -}) -export class AppCordovaPageTwo { - - @Element() element: HTMLElement; - - componentDidEnter() { - console.log('page two did enter'); - } - - prevPage() { - const nav = this.element.closest('ion-nav') as any; - nav.push('app-cordova-page-one'); - } - - nextPage() { - const nav = this.element.closest('ion-nav') as any; - nav.push('app-cordova-page-three'); - } - - openModal() { - - } - - render() { - return [ - - - Page Two - - - - - - Hello I am a sub header, with no border on top - - , - -
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.
- - this.prevPage()}>Go to Page One - this.nextPage()} class='e2eCordovaPage3'>Go to Page Three - this.openModal()} class='e2eCordovaOpenModal'>Open Modal - - - ]; - } -} diff --git a/packages/core/src/components/app/test/cordova/tabs-page.js b/packages/core/src/components/app/test/cordova/tabs-page.js new file mode 100644 index 0000000000..64d043703f --- /dev/null +++ b/packages/core/src/components/app/test/cordova/tabs-page.js @@ -0,0 +1,48 @@ + +export class TabsPage { + constructor(nav) { + this.nav = nav; + } + + getElement() { + const element = document.createElement('div'); + element.innerHTML = ` + + + + + + + + + + + + + +`; + + this.element = element; + return element; + } + + async initialize() { + const navOne = this.element.querySelector('ion-tab.tab-one ion-nav'); + await navOne.componentOnReady(); + const pageOneModule = await import('./page-one.js');; + const pageOne = new pageOneModule.PageOne(navOne); + await navOne.setRoot(pageOne.getElement()); + + const navTwo = this.element.querySelector('ion-tab.tab-two ion-nav'); + await navTwo.componentOnReady(); + const pageTwoModule = await import('./page-two.js');; + const pageTwo = new pageTwoModule.PageTwo(navTwo); + await navTwo.setRoot(pageTwo.getElement()); + + const navThree = this.element.querySelector('ion-tab.tab-three ion-nav'); + await navThree.componentOnReady(); + const pageThreeModule = await import('./page-three.js');; + const pageThree = new pageThreeModule.PageThree(navThree); + await navThree.setRoot(pageThree.getElement()); + } +} \ No newline at end of file