From 1fc1305dd5080b8dfdb68abbe6363c8a821a2165 Mon Sep 17 00:00:00 2001 From: Daniel Imhoff Date: Fri, 3 Mar 2017 16:04:51 -0600 Subject: [PATCH] test(e2e): modal/basic --- .../menu/test/basic/pages/page1/page1.html | 2 +- src/components/modal/test/basic/app.module.ts | 681 ------------------ .../modal/test/basic/app/app.component.ts | 8 + .../modal/test/basic/app/app.module.ts | 44 ++ .../modal/test/basic/{ => app}/main.ts | 0 .../basic/components/some-app-provider.ts | 13 + .../test/basic/pages/contact-us/contact-us.ts | 30 + .../test/basic/{ => pages/main}/main.html | 0 .../test/basic/pages/main/main.module.ts | 17 + .../modal/test/basic/pages/main/main.ts | 126 ++++ .../modal-first-page.module.ts | 17 + .../modal-first-page/modal-first-page.ts | 191 +++++ .../pages/modal-pass-data/modal-pass-data.ts | 139 ++++ .../modal-second-page.module.ts | 17 + .../modal-second-page/modal-second-page.ts | 36 + .../modal-with-inputs/modal-with-inputs.ts | 56 ++ .../pages/toolbar-modal/toolbar-modal.ts | 58 ++ 17 files changed, 753 insertions(+), 682 deletions(-) delete mode 100644 src/components/modal/test/basic/app.module.ts create mode 100644 src/components/modal/test/basic/app/app.component.ts create mode 100644 src/components/modal/test/basic/app/app.module.ts rename src/components/modal/test/basic/{ => app}/main.ts (100%) create mode 100644 src/components/modal/test/basic/components/some-app-provider.ts create mode 100644 src/components/modal/test/basic/pages/contact-us/contact-us.ts rename src/components/modal/test/basic/{ => pages/main}/main.html (100%) create mode 100644 src/components/modal/test/basic/pages/main/main.module.ts create mode 100644 src/components/modal/test/basic/pages/main/main.ts create mode 100644 src/components/modal/test/basic/pages/modal-first-page/modal-first-page.module.ts create mode 100644 src/components/modal/test/basic/pages/modal-first-page/modal-first-page.ts create mode 100644 src/components/modal/test/basic/pages/modal-pass-data/modal-pass-data.ts create mode 100644 src/components/modal/test/basic/pages/modal-second-page/modal-second-page.module.ts create mode 100644 src/components/modal/test/basic/pages/modal-second-page/modal-second-page.ts create mode 100644 src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts create mode 100644 src/components/modal/test/basic/pages/toolbar-modal/toolbar-modal.ts diff --git a/src/components/menu/test/basic/pages/page1/page1.html b/src/components/menu/test/basic/pages/page1/page1.html index 4be4824e20..a3b5f273c4 100644 --- a/src/components/menu/test/basic/pages/page1/page1.html +++ b/src/components/menu/test/basic/pages/page1/page1.html @@ -7,7 +7,7 @@ - Menu!!!!!!!!! + Menu diff --git a/src/components/modal/test/basic/app.module.ts b/src/components/modal/test/basic/app.module.ts deleted file mode 100644 index 8dc3a6fe7f..0000000000 --- a/src/components/modal/test/basic/app.module.ts +++ /dev/null @@ -1,681 +0,0 @@ -import { Component, Injectable, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { ActionSheetController, AlertController, App, Config, - IonicApp, IonicModule, ModalController, NavController, - NavParams, Platform, ToastController, ViewController } from '../../../..'; - - -@Injectable() -export class SomeComponentProvider { - constructor(public config: Config) { - console.log('SomeComponentProvider constructor'); - } - - getName() { - return 'Jenny'; - } -} - -@Injectable() -export class SomeAppProvider { - constructor(public config: Config) { - console.log('SomeAppProvider constructor'); - } - - getData() { - return 'Some data'; - } -} - - -@Component({ - templateUrl: 'main.html' -}) -export class E2EPage { - platforms: string[]; - - constructor( - public navCtrl: NavController, - public modalCtrl: ModalController, - public toastCtrl: ToastController, - config: Config, plt: Platform) { - console.log('platforms', plt.platforms()); - console.log('mode', config.get('mode')); - - console.log('isRTL', plt.isRTL()); - console.log('core', plt.is('core')); - console.log('cordova', plt.is('cordova')); - console.log('mobile', plt.is('mobile')); - console.log('mobileweb', plt.is('mobileweb')); - console.log('ipad', plt.is('ipad')); - console.log('iphone', plt.is('iphone')); - console.log('phablet', plt.is('phablet')); - console.log('tablet', plt.is('tablet')); - console.log('ios', plt.is('ios')); - console.log('android', plt.is('android')); - console.log('windows phone', plt.is('windows')); - - plt.ready().then((readySource: string) => { - console.log('platform.ready, readySource:', readySource); - }); - - this.platforms = plt.platforms(); - } - - push() { - this.navCtrl.push(E2EPage); - } - - presentModal() { - let modal = this.modalCtrl.create(ModalPassData, { userId: 8675309 }, { - enterAnimation: 'modal-slide-in', - leaveAnimation: 'modal-slide-out' - }); - modal.present(); - - modal.onWillDismiss((data: any) => { - console.log('WILL DISMISS with data', data); - console.timeEnd('modal'); - }); - modal.onDidDismiss((data: any) => { - console.log('DID DISMISS modal data', data); - console.timeEnd('modal'); - }); - } - - presentModalChildNav() { - this.modalCtrl.create(ContactUs, null, { - enableBackdropDismiss: false - }).present(); - } - - presentToolbarModal() { - this.modalCtrl.create(ToolbarModal, null, { - enterAnimation: 'modal-md-slide-in', - leaveAnimation: 'modal-md-slide-out' - }).present(); - } - - presentModalWithInputs() { - let modal = this.modalCtrl.create(ModalWithInputs); - modal.onDidDismiss((data: any) => { - console.log('Modal with inputs data:', data); - }); - modal.present(); - } - - presentNavModalWithToast() { - this.toastCtrl.create({ - message: 'Will present a modal with child nav...', - duration: 1000, - }).present(); - - setTimeout(() => { - this.modalCtrl.create(ContactUs).present(); - }, 500); - } - - presentToolbarModalWithToast() { - this.toastCtrl.create({ - message: 'Will present a modal with toolbars...', - duration: 1000, - }).present(); - - setTimeout(() => { - this.modalCtrl.create(ToolbarModal).present(); - }, 500); - } - - ionViewDidLoad() { - console.log('E2EPage ionViewDidLoad fired'); - } - - ionViewWillEnter() { - console.log('E2EPage ionViewWillEnter fired'); - } - - ionViewDidEnter() { - console.log('E2EPage ionViewDidEnter fired'); - } - - ionViewWillLeave() { - console.log('E2EPage ionViewWillLeave fired'); - } - - ionViewDidLeave() { - console.log('E2EPage ionViewDidLeave fired'); - } -} - - -@Component({ - template: ` - - - Data in/out - - - - - - UserId - - - - Name - - - - -
-

ionViewCanEnter ({{called.ionViewCanEnter}})

-

ionViewCanLeave ({{called.ionViewCanLeave}})

-

ionViewWillLoad ({{called.ionViewWillLoad}})

-

ionViewDidLoad ({{called.ionViewDidLoad}})

-

ionViewWillEnter ({{called.ionViewWillEnter}})

-

ionViewDidEnter ({{called.ionViewDidEnter}})

-

ionViewWillLeave ({{called.ionViewWillLeave}})

-

ionViewDidLeave ({{called.ionViewDidLeave}})

-
- - `, - providers: [SomeComponentProvider] -}) -export class ModalPassData { - data: any; - called: any; - - constructor( - public viewCtrl: ViewController, - public toastCtrl: ToastController, - public alertCtrl: AlertController, - params: NavParams, - someComponentProvider: SomeComponentProvider, - someAppProvider: SomeAppProvider) { - this.data = { - userId: params.get('userId'), - name: someComponentProvider.getName() - }; - console.log('SomeAppProvider Data', someAppProvider.getData()); - - this.called = { - ionViewCanEnter: 0, - ionViewCanLeave: 0, - ionViewWillLoad: 0, - ionViewDidLoad: 0, - ionViewWillEnter: 0, - ionViewDidEnter: 0, - ionViewWillLeave: 0, - ionViewDidLeave: 0 - }; - } - - submit() { - console.time('modal'); - this.viewCtrl.dismiss(this.data).catch(() => { - console.log('submit was cancelled'); - }); - } - - ionViewCanEnter() { - console.log('ModalPassData ionViewCanEnter fired'); - this.called.ionViewCanEnter++; - - return true; - } - - ionViewCanLeave() { - console.log('ModalPassData ionViewCanLeave fired'); - this.called.ionViewCanLeave++; - - return new Promise((resolve: any, reject: any) => { - let alert = this.alertCtrl.create(); - alert.setTitle('Do you want to submit?'); - alert.addButton({ text: 'Submit', handler: resolve }); - alert.addButton({ text: 'Cancel', role: 'cancel', handler: reject }); - alert.present(); - }); - } - - ionViewWillLoad() { - console.log('ModalPassData ionViewWillLoad fired'); - this.called.ionViewWillLoad++; - } - - ionViewDidLoad() { - console.log('ModalPassData ionViewDidLoad fired'); - this.called.ionViewDidLoad++; - } - - ionViewWillEnter() { - console.log('ModalPassData ionViewWillEnter fired'); - this.called.ionViewWillEnter++; - } - - ionViewDidEnter() { - console.log('ModalPassData ionViewDidEnter fired'); - this.toastCtrl.create({ - message: 'test toast', - duration: 1000 - }).present(); - this.called.ionViewDidEnter++; - } - - ionViewWillLeave() { - console.log('ModalPassData ionViewWillLeave fired'); - this.called.ionViewWillLeave++; - } - - ionViewDidLeave() { - console.log('ModalPassData ionViewDidLeave fired'); - this.called.ionViewDidLeave++; - } -} - - -@Component({ - template: ` - - - Toolbar 1 - - - - Toolbar 2 - - - - - - -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- -
Mauris ac ligula elit. Nulla pulvinar eget leo ut aliquet. Praesent sit amet luctus quam. Nam fringilla iaculis mi, ut maximus mauris molestie feugiat. Curabitur nec scelerisque elit. Nunc eu odio facilisis, tempor enim eget, venenatis sem. Sed vitae lorem vehicula, auctor orci ultrices, finibus mauris. Donec vitae pulvinar diam. Nulla luctus congue quam, sed lacinia arcu dictum a.
- -
Morbi laoreet magna elit, id dapibus massa varius consequat. Praesent rhoncus nunc quam, eu mollis velit commodo ut. Etiam euismod elit mi, non auctor velit blandit ut. Aenean vitae pulvinar mi, ac pretium tellus. Morbi eu auctor sem, sollicitudin cursus felis. Praesent vestibulum velit sed eros iaculis ornare. Praesent diam diam, pellentesque eget scelerisque sed, bibendum ut risus. Sed sed fermentum sem. Integer vel justo felis. Proin eget quam est. In sit amet ipsum sagittis, convallis ipsum fringilla, interdum ante. Etiam vel tincidunt mauris. Nunc feugiat eros nunc, et vestibulum metus mollis et. Nullam eu viverra velit, id ultrices nisl. Donec non enim elementum, laoreet sapien id, feugiat tellus.
- -
Sed pellentesque ipsum eget ante hendrerit maximus. Aliquam id venenatis nulla. Nullam in nibh at enim vestibulum ullamcorper. Nam felis dolor, lobortis vel est non, condimentum malesuada nisl. In metus sapien, malesuada at nulla in, pretium aliquam turpis. Quisque elementum purus mi, sed tristique turpis ultricies in. Donec feugiat dolor non ultricies ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ut purus et diam porta cursus vitae semper mi. Donec fringilla tellus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vitae commodo sem. Duis vehicula quam sit amet imperdiet facilisis. Pellentesque eget dignissim neque, et scelerisque libero. Maecenas molestie metus sed orci cursus, in venenatis justo dapibus.
- -
Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
- - - - ` -}) -export class ToolbarModal { - - constructor(public viewCtrl: ViewController, public alertCtrl: AlertController) {} - - ionViewDidEnter() { - let alert = this.alertCtrl.create({ - title: 'Test', - buttons: [ - { - text: 'Something', - role: 'cancel' - } - ] - }); - alert.present(); - } - - dismiss() { - this.viewCtrl.dismiss(); - } - -} - - -@Component({ - template: ` - - - - - - Modal w/ Inputs - - - - -
- - - Title (Required) - - - - Note (Required) - - - - Icon - - - -
- -
-
- - ` -}) -export class ModalWithInputs { - data: any; - - constructor(public viewCtrl: ViewController) { - this.data = { - title: 'Title', - note: 'Note', - icon: 'home' - }; - } - - public save(ev: any) { - this.viewCtrl.dismiss(this.data); - } - - public dismiss() { - this.viewCtrl.dismiss(null); - } -} - - -@Component({ - template: '' -}) -export class ContactUs { - root = ModalFirstPage; - - constructor() { - console.log('ContactUs constructor'); - } - ionViewDidLoad() { - console.log('ContactUs ionViewDidLoad'); - } - ionViewWillEnter() { - console.log('ContactUs ionViewWillEnter'); - } - ionViewDidEnter() { - console.log('ContactUs ionViewDidEnter'); - } - ionViewWillLeave() { - console.log('ContactUs ionViewWillLeave'); - } - ionViewDidLeave() { - console.log('ContactUs ionViewDidLeave'); - } - ionViewWillUnload() { - console.log('ContactUs ionViewWillUnload'); - } -} - - -@Component({ - template: ` - - - First Page Header - - - - - - - -

ionViewCanEnter ({{called.ionViewCanEnter}})

-

ionViewCanLeave ({{called.ionViewCanLeave}})

-

ionViewWillLoad ({{called.ionViewWillLoad}})

-

ionViewDidLoad ({{called.ionViewDidLoad}})

-

ionViewWillEnter ({{called.ionViewWillEnter}})

-

ionViewDidEnter ({{called.ionViewDidEnter}})

-

ionViewWillLeave ({{called.ionViewWillLeave}})

-

ionViewDidLeave ({{called.ionViewDidLeave}})

-

- -

-

- -

-

- -

-
-
- - - Item Number: {{item.value}} - - - - ` -}) -export class ModalFirstPage { - items: any[] = []; - called: any; - - constructor( - public navCtrl: NavController, - public app: App, - public actionSheetCtrl: ActionSheetController, - public toastCtrl: ToastController, - public alertCtrl: AlertController, - public modalCtrl: ModalController, - ) { - for (let i = 0; i < 50; i++) { - this.items.push({ - value: (i + 1) - }); - } - - this.called = { - ionViewCanEnter: 0, - ionViewCanLeave: 0, - ionViewWillLoad: 0, - ionViewDidLoad: 0, - ionViewWillEnter: 0, - ionViewDidEnter: 0, - ionViewWillLeave: 0, - ionViewDidLeave: 0 - }; - } - - push() { - this.toastCtrl.create({ - message: 'Will push a page in a moment...', - duration: 1000, - }).present(); - - setTimeout(() => { - this.navCtrl.push(ModalSecondPage, { - id: 8675309, - myData: [1, 2, 3, 4] - }); - }, 500); - } - - dismiss() { - this.navCtrl.parent.pop(); - } - - ionViewCanEnter() { - console.log('ModalFirstPage ionViewCanEnter fired'); - this.called.ionViewCanEnter++; - return true; - } - - ionViewCanLeave() { - console.log('ModalFirstPage ionViewCanLeave fired'); - this.called.ionViewCanLeave++; - return true; - } - - ionViewWillLoad() { - console.log('ModalFirstPage ionViewWillLoad fired'); - this.called.ionViewWillLoad++; - } - - ionViewDidLoad() { - console.log('ModalFirstPage ionViewDidLoad fired'); - this.called.ionViewDidLoad++; - } - - ionViewWillEnter() { - console.log('ModalFirstPage ionViewWillEnter fired'); - this.called.ionViewWillEnter++; - } - - ionViewDidEnter() { - console.log('ModalFirstPage ionViewDidEnter fired'); - let alert = this.alertCtrl.create({ - title: 'Test', - buttons: [ - { - text: 'Something', - role: 'cancel' - } - ] - }); - alert.present(); - this.called.ionViewDidEnter++; - } - - ionViewWillLeave() { - console.log('ModalFirstPage ionViewWillLeave fired'); - this.called.ionViewWillLeave++; - } - - ionViewDidLeave() { - console.log('ModalFirstPage ionViewDidLeave fired'); - this.called.ionViewDidLeave++; - } - - openModal() { - this.modalCtrl.create(ContactUs).present(); - } - - openActionSheet() { - let actionSheet = this.actionSheetCtrl.create({ - buttons: [ - { - text: 'Destructive', - role: 'destructive', - handler: () => { - console.log('Destructive clicked'); - } - }, - { - text: 'Archive', - handler: () => { - console.log('Archive clicked'); - } - }, - { - text: 'Go To Root', - handler: () => { - actionSheet.dismiss().then(() => { - this.navCtrl.parent.pop(); - }); - - // by default an alert will dismiss itself - // however, we don't want to use the default - // but rather fire off our own pop navigation - // return false so it doesn't pop automatically - return false; - } - }, - { - text: 'Cancel', - role: 'cancel', - handler: () => { - console.log('cancel this clicked'); - } - } - ] - }); - - actionSheet.present(); - } -} - - -@Component({ - template: ` - - - Second Page Header - - - -

- -

-
-
- - ` -}) -export class ModalSecondPage { - constructor(public navCtrl: NavController, params: NavParams) { - console.log('Second page params:', params); - } - - ionViewDidLoad() { - console.log('ModalSecondPage ionViewDidLoad'); - } - - ionViewWillEnter() { - console.log('ModalSecondPage ionViewWillEnter'); - } - - ionViewDidEnter() { - console.log('ModalSecondPage ionViewDidEnter'); - } -} - - -@Component({ - template: '' -}) -export class E2EApp { - root = E2EPage; -} - -@NgModule({ - declarations: [ - E2EApp, - E2EPage, - ModalFirstPage, - ModalSecondPage, - ModalWithInputs, - ContactUs, - ModalPassData, - ToolbarModal - ], - imports: [ - BrowserModule, - IonicModule.forRoot(E2EApp, { - statusbarPadding: true, - swipeBackEnabled: true - }) - ], - bootstrap: [IonicApp], - providers: [SomeAppProvider], - entryComponents: [ - E2EApp, - E2EPage, - ModalFirstPage, - ModalSecondPage, - ModalWithInputs, - ContactUs, - ModalPassData, - ToolbarModal - ] -}) -export class AppModule {} - diff --git a/src/components/modal/test/basic/app/app.component.ts b/src/components/modal/test/basic/app/app.component.ts new file mode 100644 index 0000000000..af92e1d42e --- /dev/null +++ b/src/components/modal/test/basic/app/app.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + template: '' +}) +export class E2EApp { + root = 'E2EPage'; +} diff --git a/src/components/modal/test/basic/app/app.module.ts b/src/components/modal/test/basic/app/app.module.ts new file mode 100644 index 0000000000..f01fa35893 --- /dev/null +++ b/src/components/modal/test/basic/app/app.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { IonicModule, IonicApp } from '../../../../..'; + +import { E2EApp } from './app.component'; +import { ModalWithInputs } from '../pages/modal-with-inputs/modal-with-inputs'; +import { ContactUs } from '../pages/contact-us/contact-us'; +import { ModalPassData } from '../pages/modal-pass-data/modal-pass-data'; +import { ToolbarModal } from '../pages/toolbar-modal/toolbar-modal'; +import { SomeAppProvider } from '../components/some-app-provider'; + +@NgModule({ + declarations: [ + E2EApp, + ModalWithInputs, + ContactUs, + ModalPassData, + ToolbarModal + ], + imports: [ + BrowserModule, + IonicModule.forRoot(E2EApp, { + statusbarPadding: true, + swipeBackEnabled: true + }, { + links: [ + { loadChildren: '../pages/main/main.module#E2EPageModule', name: 'E2EPage' }, + { loadChildren: '../pages/modal-first-page/modal-first-page.module#ModalFirstPageModule', name: 'ModalFirstPage' }, + { loadChildren: '../pages/modal-second-page/modal-second-page.module#ModalSecondPageModule', name: 'ModalSecondPage' } + ] + }) + ], + bootstrap: [IonicApp], + providers: [SomeAppProvider], + entryComponents: [ + E2EApp, + ModalWithInputs, + ContactUs, + ModalPassData, + ToolbarModal + ] +}) +export class AppModule {} + diff --git a/src/components/modal/test/basic/main.ts b/src/components/modal/test/basic/app/main.ts similarity index 100% rename from src/components/modal/test/basic/main.ts rename to src/components/modal/test/basic/app/main.ts diff --git a/src/components/modal/test/basic/components/some-app-provider.ts b/src/components/modal/test/basic/components/some-app-provider.ts new file mode 100644 index 0000000000..a8f3f3c95f --- /dev/null +++ b/src/components/modal/test/basic/components/some-app-provider.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; +import { Config } from '../../../../..'; + +@Injectable() +export class SomeAppProvider { + constructor(public config: Config) { + console.log('SomeAppProvider constructor'); + } + + getData() { + return 'Some data'; + } +} diff --git a/src/components/modal/test/basic/pages/contact-us/contact-us.ts b/src/components/modal/test/basic/pages/contact-us/contact-us.ts new file mode 100644 index 0000000000..3d9011b5a4 --- /dev/null +++ b/src/components/modal/test/basic/pages/contact-us/contact-us.ts @@ -0,0 +1,30 @@ +import { Component } from '@angular/core'; + +@Component({ + template: '' +}) +export class ContactUs { + root = 'ModalFirstPage'; + + constructor() { + console.log('ContactUs constructor'); + } + ionViewDidLoad() { + console.log('ContactUs ionViewDidLoad'); + } + ionViewWillEnter() { + console.log('ContactUs ionViewWillEnter'); + } + ionViewDidEnter() { + console.log('ContactUs ionViewDidEnter'); + } + ionViewWillLeave() { + console.log('ContactUs ionViewWillLeave'); + } + ionViewDidLeave() { + console.log('ContactUs ionViewDidLeave'); + } + ionViewWillUnload() { + console.log('ContactUs ionViewWillUnload'); + } +} diff --git a/src/components/modal/test/basic/main.html b/src/components/modal/test/basic/pages/main/main.html similarity index 100% rename from src/components/modal/test/basic/main.html rename to src/components/modal/test/basic/pages/main/main.html diff --git a/src/components/modal/test/basic/pages/main/main.module.ts b/src/components/modal/test/basic/pages/main/main.module.ts new file mode 100644 index 0000000000..1cc785fd59 --- /dev/null +++ b/src/components/modal/test/basic/pages/main/main.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { DeepLinkModule } from '../../../../../..'; + +import { E2EPage } from './main'; + +@NgModule({ + declarations: [ + E2EPage, + ], + imports: [ + DeepLinkModule.forChild(E2EPage) + ], + entryComponents: [ + E2EPage, + ] +}) +export class E2EPageModule {} diff --git a/src/components/modal/test/basic/pages/main/main.ts b/src/components/modal/test/basic/pages/main/main.ts new file mode 100644 index 0000000000..bad2b99cb4 --- /dev/null +++ b/src/components/modal/test/basic/pages/main/main.ts @@ -0,0 +1,126 @@ +import { Component } from '@angular/core'; +import { NavController, ModalController, ToastController, Config, Platform } from '../../../../../..'; + +import { ModalPassData } from '../modal-pass-data/modal-pass-data'; +import { ContactUs } from '../contact-us/contact-us'; +import { ToolbarModal } from '../toolbar-modal/toolbar-modal'; +import { ModalWithInputs } from '../modal-with-inputs/modal-with-inputs'; + +@Component({ + templateUrl: 'main.html' +}) +export class E2EPage { + platforms: string[]; + + constructor( + public navCtrl: NavController, + public modalCtrl: ModalController, + public toastCtrl: ToastController, + config: Config, plt: Platform) { + console.log('platforms', plt.platforms()); + console.log('mode', config.get('mode')); + + console.log('isRTL', plt.isRTL()); + console.log('core', plt.is('core')); + console.log('cordova', plt.is('cordova')); + console.log('mobile', plt.is('mobile')); + console.log('mobileweb', plt.is('mobileweb')); + console.log('ipad', plt.is('ipad')); + console.log('iphone', plt.is('iphone')); + console.log('phablet', plt.is('phablet')); + console.log('tablet', plt.is('tablet')); + console.log('ios', plt.is('ios')); + console.log('android', plt.is('android')); + console.log('windows phone', plt.is('windows')); + + plt.ready().then((readySource: string) => { + console.log('platform.ready, readySource:', readySource); + }); + + this.platforms = plt.platforms(); + } + + push() { + this.navCtrl.push(E2EPage); + } + + presentModal() { + let modal = this.modalCtrl.create(ModalPassData, { userId: 8675309 }, { + enterAnimation: 'modal-slide-in', + leaveAnimation: 'modal-slide-out' + }); + modal.present(); + + modal.onWillDismiss((data: any) => { + console.log('WILL DISMISS with data', data); + console.timeEnd('modal'); + }); + modal.onDidDismiss((data: any) => { + console.log('DID DISMISS modal data', data); + console.timeEnd('modal'); + }); + } + + presentModalChildNav() { + this.modalCtrl.create(ContactUs, null, { + enableBackdropDismiss: false + }).present(); + } + + presentToolbarModal() { + this.modalCtrl.create(ToolbarModal, null, { + enterAnimation: 'modal-md-slide-in', + leaveAnimation: 'modal-md-slide-out' + }).present(); + } + + presentModalWithInputs() { + let modal = this.modalCtrl.create(ModalWithInputs); + modal.onDidDismiss((data: any) => { + console.log('Modal with inputs data:', data); + }); + modal.present(); + } + + presentNavModalWithToast() { + this.toastCtrl.create({ + message: 'Will present a modal with child nav...', + duration: 1000, + }).present(); + + setTimeout(() => { + this.modalCtrl.create(ContactUs).present(); + }, 500); + } + + presentToolbarModalWithToast() { + this.toastCtrl.create({ + message: 'Will present a modal with toolbars...', + duration: 1000, + }).present(); + + setTimeout(() => { + this.modalCtrl.create(ToolbarModal).present(); + }, 500); + } + + ionViewDidLoad() { + console.log('E2EPage ionViewDidLoad fired'); + } + + ionViewWillEnter() { + console.log('E2EPage ionViewWillEnter fired'); + } + + ionViewDidEnter() { + console.log('E2EPage ionViewDidEnter fired'); + } + + ionViewWillLeave() { + console.log('E2EPage ionViewWillLeave fired'); + } + + ionViewDidLeave() { + console.log('E2EPage ionViewDidLeave fired'); + } +} diff --git a/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.module.ts b/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.module.ts new file mode 100644 index 0000000000..444a0c1046 --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { DeepLinkModule } from '../../../../../..'; + +import { ModalFirstPage } from './modal-first-page'; + +@NgModule({ + declarations: [ + ModalFirstPage, + ], + imports: [ + DeepLinkModule.forChild(ModalFirstPage) + ], + entryComponents: [ + ModalFirstPage, + ] +}) +export class ModalFirstPageModule {} diff --git a/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.ts b/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.ts new file mode 100644 index 0000000000..be1df0a8d3 --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-first-page/modal-first-page.ts @@ -0,0 +1,191 @@ +import { Component } from '@angular/core'; +import { NavController, App, ActionSheetController, ToastController, AlertController, ModalController } from '../../../../../..'; + +import { ContactUs } from '../contact-us/contact-us'; + +@Component({ + template: ` + + + First Page Header + + + + + + + +

ionViewCanEnter ({{called.ionViewCanEnter}})

+

ionViewCanLeave ({{called.ionViewCanLeave}})

+

ionViewWillLoad ({{called.ionViewWillLoad}})

+

ionViewDidLoad ({{called.ionViewDidLoad}})

+

ionViewWillEnter ({{called.ionViewWillEnter}})

+

ionViewDidEnter ({{called.ionViewDidEnter}})

+

ionViewWillLeave ({{called.ionViewWillLeave}})

+

ionViewDidLeave ({{called.ionViewDidLeave}})

+

+ +

+

+ +

+

+ +

+
+
+ + + Item Number: {{item.value}} + + + + ` +}) +export class ModalFirstPage { + items: any[] = []; + called: any; + + constructor( + public navCtrl: NavController, + public app: App, + public actionSheetCtrl: ActionSheetController, + public toastCtrl: ToastController, + public alertCtrl: AlertController, + public modalCtrl: ModalController, + ) { + for (let i = 0; i < 50; i++) { + this.items.push({ + value: (i + 1) + }); + } + + this.called = { + ionViewCanEnter: 0, + ionViewCanLeave: 0, + ionViewWillLoad: 0, + ionViewDidLoad: 0, + ionViewWillEnter: 0, + ionViewDidEnter: 0, + ionViewWillLeave: 0, + ionViewDidLeave: 0 + }; + } + + push() { + this.toastCtrl.create({ + message: 'Will push a page in a moment...', + duration: 1000, + }).present(); + + setTimeout(() => { + this.navCtrl.push('ModalSecondPage', { + id: 8675309, + myData: [1, 2, 3, 4] + }); + }, 500); + } + + dismiss() { + this.navCtrl.parent.pop(); + } + + ionViewCanEnter() { + console.log('ModalFirstPage ionViewCanEnter fired'); + this.called.ionViewCanEnter++; + return true; + } + + ionViewCanLeave() { + console.log('ModalFirstPage ionViewCanLeave fired'); + this.called.ionViewCanLeave++; + return true; + } + + ionViewWillLoad() { + console.log('ModalFirstPage ionViewWillLoad fired'); + this.called.ionViewWillLoad++; + } + + ionViewDidLoad() { + console.log('ModalFirstPage ionViewDidLoad fired'); + this.called.ionViewDidLoad++; + } + + ionViewWillEnter() { + console.log('ModalFirstPage ionViewWillEnter fired'); + this.called.ionViewWillEnter++; + } + + ionViewDidEnter() { + console.log('ModalFirstPage ionViewDidEnter fired'); + let alert = this.alertCtrl.create({ + title: 'Test', + buttons: [ + { + text: 'Something', + role: 'cancel' + } + ] + }); + alert.present(); + this.called.ionViewDidEnter++; + } + + ionViewWillLeave() { + console.log('ModalFirstPage ionViewWillLeave fired'); + this.called.ionViewWillLeave++; + } + + ionViewDidLeave() { + console.log('ModalFirstPage ionViewDidLeave fired'); + this.called.ionViewDidLeave++; + } + + openModal() { + this.modalCtrl.create(ContactUs).present(); + } + + openActionSheet() { + let actionSheet = this.actionSheetCtrl.create({ + buttons: [ + { + text: 'Destructive', + role: 'destructive', + handler: () => { + console.log('Destructive clicked'); + } + }, + { + text: 'Archive', + handler: () => { + console.log('Archive clicked'); + } + }, + { + text: 'Go To Root', + handler: () => { + actionSheet.dismiss().then(() => { + this.navCtrl.parent.pop(); + }); + + // by default an alert will dismiss itself + // however, we don't want to use the default + // but rather fire off our own pop navigation + // return false so it doesn't pop automatically + return false; + } + }, + { + text: 'Cancel', + role: 'cancel', + handler: () => { + console.log('cancel this clicked'); + } + } + ] + }); + + actionSheet.present(); + } +} diff --git a/src/components/modal/test/basic/pages/modal-pass-data/modal-pass-data.ts b/src/components/modal/test/basic/pages/modal-pass-data/modal-pass-data.ts new file mode 100644 index 0000000000..bde37c068f --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-pass-data/modal-pass-data.ts @@ -0,0 +1,139 @@ +import { Injectable, Component } from '@angular/core'; +import { ViewController, ToastController, AlertController, NavParams, Config } from '../../../../../..'; + +import { SomeAppProvider } from '../../components/some-app-provider'; + +@Injectable() +export class SomeComponentProvider { + constructor(public config: Config) { + console.log('SomeComponentProvider constructor'); + } + + getName() { + return 'Jenny'; + } +} + +@Component({ + template: ` + + + Data in/out + + + + + + UserId + + + + Name + + + + +
+

ionViewCanEnter ({{called.ionViewCanEnter}})

+

ionViewCanLeave ({{called.ionViewCanLeave}})

+

ionViewWillLoad ({{called.ionViewWillLoad}})

+

ionViewDidLoad ({{called.ionViewDidLoad}})

+

ionViewWillEnter ({{called.ionViewWillEnter}})

+

ionViewDidEnter ({{called.ionViewDidEnter}})

+

ionViewWillLeave ({{called.ionViewWillLeave}})

+

ionViewDidLeave ({{called.ionViewDidLeave}})

+
+ + `, + providers: [SomeComponentProvider] +}) +export class ModalPassData { + data: any; + called: any; + + constructor( + public viewCtrl: ViewController, + public toastCtrl: ToastController, + public alertCtrl: AlertController, + params: NavParams, + someComponentProvider: SomeComponentProvider, + someAppProvider: SomeAppProvider) { + this.data = { + userId: params.get('userId'), + name: someComponentProvider.getName() + }; + console.log('SomeAppProvider Data', someAppProvider.getData()); + + this.called = { + ionViewCanEnter: 0, + ionViewCanLeave: 0, + ionViewWillLoad: 0, + ionViewDidLoad: 0, + ionViewWillEnter: 0, + ionViewDidEnter: 0, + ionViewWillLeave: 0, + ionViewDidLeave: 0 + }; + } + + submit() { + console.time('modal'); + this.viewCtrl.dismiss(this.data).catch(() => { + console.log('submit was cancelled'); + }); + } + + ionViewCanEnter() { + console.log('ModalPassData ionViewCanEnter fired'); + this.called.ionViewCanEnter++; + + return true; + } + + ionViewCanLeave() { + console.log('ModalPassData ionViewCanLeave fired'); + this.called.ionViewCanLeave++; + + return new Promise((resolve: any, reject: any) => { + let alert = this.alertCtrl.create(); + alert.setTitle('Do you want to submit?'); + alert.addButton({ text: 'Submit', handler: resolve }); + alert.addButton({ text: 'Cancel', role: 'cancel', handler: reject }); + alert.present(); + }); + } + + ionViewWillLoad() { + console.log('ModalPassData ionViewWillLoad fired'); + this.called.ionViewWillLoad++; + } + + ionViewDidLoad() { + console.log('ModalPassData ionViewDidLoad fired'); + this.called.ionViewDidLoad++; + } + + ionViewWillEnter() { + console.log('ModalPassData ionViewWillEnter fired'); + this.called.ionViewWillEnter++; + } + + ionViewDidEnter() { + console.log('ModalPassData ionViewDidEnter fired'); + this.toastCtrl.create({ + message: 'test toast', + duration: 1000 + }).present(); + this.called.ionViewDidEnter++; + } + + ionViewWillLeave() { + console.log('ModalPassData ionViewWillLeave fired'); + this.called.ionViewWillLeave++; + } + + ionViewDidLeave() { + console.log('ModalPassData ionViewDidLeave fired'); + this.called.ionViewDidLeave++; + } +} diff --git a/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.module.ts b/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.module.ts new file mode 100644 index 0000000000..128477f8d1 --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { DeepLinkModule } from '../../../../../..'; + +import { ModalSecondPage } from './modal-second-page'; + +@NgModule({ + declarations: [ + ModalSecondPage, + ], + imports: [ + DeepLinkModule.forChild(ModalSecondPage) + ], + entryComponents: [ + ModalSecondPage, + ] +}) +export class ModalSecondPageModule {} diff --git a/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.ts b/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.ts new file mode 100644 index 0000000000..63099ae2c1 --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-second-page/modal-second-page.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; +import { NavController, NavParams } from '../../../../../..'; + +@Component({ + template: ` + + + Second Page Header + + + +

+ +

+
+
+ + ` +}) +export class ModalSecondPage { + constructor(public navCtrl: NavController, params: NavParams) { + console.log('Second page params:', params); + } + + ionViewDidLoad() { + console.log('ModalSecondPage ionViewDidLoad'); + } + + ionViewWillEnter() { + console.log('ModalSecondPage ionViewWillEnter'); + } + + ionViewDidEnter() { + console.log('ModalSecondPage ionViewDidEnter'); + } +} diff --git a/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts b/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts new file mode 100644 index 0000000000..31ba682123 --- /dev/null +++ b/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts @@ -0,0 +1,56 @@ +import { Component } from '@angular/core'; +import { ViewController } from '../../../../../..'; + +@Component({ + template: ` + + + + + + Modal w/ Inputs + + + + +
+ + + Title (Required) + + + + Note (Required) + + + + Icon + + + +
+ +
+
+ + ` +}) +export class ModalWithInputs { + data: any; + + constructor(public viewCtrl: ViewController) { + this.data = { + title: 'Title', + note: 'Note', + icon: 'home' + }; + } + + public save(ev: any) { + this.viewCtrl.dismiss(this.data); + } + + public dismiss() { + this.viewCtrl.dismiss(null); + } +} diff --git a/src/components/modal/test/basic/pages/toolbar-modal/toolbar-modal.ts b/src/components/modal/test/basic/pages/toolbar-modal/toolbar-modal.ts new file mode 100644 index 0000000000..5c9899f0a1 --- /dev/null +++ b/src/components/modal/test/basic/pages/toolbar-modal/toolbar-modal.ts @@ -0,0 +1,58 @@ +import { Component } from '@angular/core'; +import { ViewController, AlertController } from '../../../../../..'; + +@Component({ + template: ` + + + Toolbar 1 + + + + Toolbar 2 + + + + + + +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+ +
Mauris ac ligula elit. Nulla pulvinar eget leo ut aliquet. Praesent sit amet luctus quam. Nam fringilla iaculis mi, ut maximus mauris molestie feugiat. Curabitur nec scelerisque elit. Nunc eu odio facilisis, tempor enim eget, venenatis sem. Sed vitae lorem vehicula, auctor orci ultrices, finibus mauris. Donec vitae pulvinar diam. Nulla luctus congue quam, sed lacinia arcu dictum a.
+ +
Morbi laoreet magna elit, id dapibus massa varius consequat. Praesent rhoncus nunc quam, eu mollis velit commodo ut. Etiam euismod elit mi, non auctor velit blandit ut. Aenean vitae pulvinar mi, ac pretium tellus. Morbi eu auctor sem, sollicitudin cursus felis. Praesent vestibulum velit sed eros iaculis ornare. Praesent diam diam, pellentesque eget scelerisque sed, bibendum ut risus. Sed sed fermentum sem. Integer vel justo felis. Proin eget quam est. In sit amet ipsum sagittis, convallis ipsum fringilla, interdum ante. Etiam vel tincidunt mauris. Nunc feugiat eros nunc, et vestibulum metus mollis et. Nullam eu viverra velit, id ultrices nisl. Donec non enim elementum, laoreet sapien id, feugiat tellus.
+ +
Sed pellentesque ipsum eget ante hendrerit maximus. Aliquam id venenatis nulla. Nullam in nibh at enim vestibulum ullamcorper. Nam felis dolor, lobortis vel est non, condimentum malesuada nisl. In metus sapien, malesuada at nulla in, pretium aliquam turpis. Quisque elementum purus mi, sed tristique turpis ultricies in. Donec feugiat dolor non ultricies ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ut purus et diam porta cursus vitae semper mi. Donec fringilla tellus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vitae commodo sem. Duis vehicula quam sit amet imperdiet facilisis. Pellentesque eget dignissim neque, et scelerisque libero. Maecenas molestie metus sed orci cursus, in venenatis justo dapibus.
+ +
Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+ + + + ` +}) +export class ToolbarModal { + + constructor(public viewCtrl: ViewController, public alertCtrl: AlertController) {} + + ionViewDidEnter() { + let alert = this.alertCtrl.create({ + title: 'Test', + buttons: [ + { + text: 'Something', + role: 'cancel' + } + ] + }); + alert.present(); + } + + dismiss() { + this.viewCtrl.dismiss(); + } + +}