refactor(nav): add initial support for url in general, add integration w/ ng-router

packages/demos/angular/e2e/action-sheet.e2e-spec.ts

@@ -0,0 +1,34 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { ActionSheetPage } from './action-sheet.po';
+import { sleep } from './utils/helpers';
+
+describe('Action Sheet Page', () => {
+  let page: ActionSheetPage;
+
+  beforeEach(() => {
+    page = new ActionSheetPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the action sheet, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let actionSheet = await page.getActionSheet();
+    expect(await actionSheet.isPresent()).toBeTruthy();
+    const closeButton = await page.getActionSheetCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    actionSheet = null;
+    actionSheet = await page.getActionSheet();
+    expect(await actionSheet.isPresent()).toBeFalsy();
+    done();
+  });
+
+});

packages/demos/angular/e2e/action-sheet.po.ts

@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class ActionSheetPage {
+  navigateTo() {
+    return browser.get('/actionSheet');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getActionSheet() {
+    return element(by.css('ion-action-sheet'));
+  }
+
+  getActionSheetCloseButton() {
+    return element(by.css('.action-sheet-cancel'));
+  }
+}

packages/demos/angular/e2e/alert.e2e-spec.ts

@@ -0,0 +1,33 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { AlertPage } from './alert.po';
+import { sleep } from './utils/helpers';
+
+describe('Alert Page', () => {
+  let page: AlertPage;
+
+  beforeEach(() => {
+    page = new AlertPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the alert, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let alert = await page.getAlert();
+    expect(await alert.isPresent()).toBeTruthy();
+    const closeButton = await page.getCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    alert = null;
+    alert = await page.getAlert();
+    expect(await alert.isPresent()).toBeFalsy();
+    done();
+  });
+});

packages/demos/angular/e2e/alert.po.ts

@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class AlertPage {
+  navigateTo() {
+    return browser.get('/alert');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getAlert() {
+    return element(by.css('ion-alert'));
+  }
+
+  getCloseButton() {
+    return element(by.css('.alert-button'));
+  }
+}

packages/demos/angular/e2e/basic-inputs.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, ElementFinder, promise } from 'protractor/built';
+import { browser, ElementFinder } from 'protractor/built';
 
 import { BasicInputsPage } from './basic-inputs.po';
 

packages/demos/angular/e2e/loading.e2e-spec.ts

@@ -0,0 +1,31 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { LoadingPage } from './loading.po';
+import { sleep } from './utils/helpers';
+
+describe('Loading Page', () => {
+  let page: LoadingPage;
+
+  beforeEach(() => {
+    page = new LoadingPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the loading indicator, then close it', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let loading = await page.getLoading();
+    expect(loading).toBeTruthy();
+    await sleep(1000);
+    loading = null;
+    loading = await page.getLoading();
+    expect(await loading.isPresent()).toBeFalsy();
+    done();
+  });
+});

packages/demos/angular/e2e/loading.po.ts

@@ -0,0 +1,16 @@
+import { browser, by, element } from 'protractor';
+
+export class LoadingPage {
+  navigateTo() {
+    return browser.get('/loading');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getLoading() {
+    return element(by.css('ion-loading'));
+  }
+
+}

packages/demos/angular/e2e/modal.e2e-spec.ts

@@ -0,0 +1,49 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { ModalPage } from './modal.po';
+import { sleep } from './utils/helpers';
+
+describe('Modal Page', () => {
+  let page: ModalPage;
+
+  beforeEach(() => {
+    page = new ModalPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the modal', async (done) => {
+    /*const button = await page.getButton();
+    await button.click();
+    await sleep(500);
+    const blah = page.getModal();
+    blah.isPresent().then((present) => {
+      console.log('boom boom boom: ', present);
+      done();
+    }).catch((ex) => {
+      console.log('caught it: ', ex);
+      done();
+    });
+    */
+    // console.log('blah: ', await blah.isPresent());
+    /*page.getModal().then((modal) => {
+      return modal.isPresent();
+    }).then((present) => {
+      console.log('boom boom boom: ', present);
+      done();
+    }).catch(() => {
+      console.log('caught it');
+      done();
+    })
+    */
+    done();
+    /*console.log('modal: ', modal);
+    console.log('modal.isPresent: ', modal.isPresent);
+    console.log('Got the modal: ', await modal.isPresent());
+    expect(await modal.isPresent()).toBeTruthy();
+    */
+  });
+});

packages/demos/angular/e2e/modal.po.ts

@@ -0,0 +1,20 @@
+import { browser, by, element } from 'protractor';
+
+export class ModalPage {
+  navigateTo() {
+    return browser.get('/modal');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getModal() {
+    return element(by.css('page-one'));
+  }
+
+  getDismissButton() {
+    return element(by.css('button.dismiss-btn'));
+  }
+
+}

packages/demos/angular/e2e/popover.e2e-spec.ts

@@ -0,0 +1,33 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { PopoverPage } from './popover.po';
+import { sleep } from './utils/helpers';
+
+describe('Popover Page', () => {
+  let page: PopoverPage;
+
+  beforeEach(() => {
+    page = new PopoverPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the popover, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let popover = await page.getPopover();
+    expect(await popover.isPresent()).toBeTruthy();
+    const closeButton = await page.getCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    popover = null;
+    popover = await page.getPopover();
+    expect(await popover.isPresent()).toBeFalsy();
+    done();
+  });
+});

packages/demos/angular/e2e/popover.po.ts

@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class PopoverPage {
+  navigateTo() {
+    return browser.get('/popover');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getPopover() {
+    return element(by.css('ion-popover'));
+  }
+
+  getCloseButton() {
+    return element(by.css('.popover-button'));
+  }
+}

packages/demos/angular/e2e/utils/helpers.ts

@@ -0,0 +1,6 @@
+
+export function sleep(duration: number = 300) {
+  return new Promise(resolve => {
+    setTimeout(resolve, duration);
+  });
+}

packages/demos/angular/package.json

@@ -31,7 +31,7 @@
     "@angular/cli": "latest",
     "@angular/compiler-cli": "latest",
     "@angular/language-service": "latest",
-    "@stencil/core": "0.0.7",
+    "@stencil/core": "next",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

packages/demos/angular/src/app/action-sheet/action-sheet-page.component.ts

@@ -62,7 +62,7 @@ export class ActionSheetPageComponent {
         }
       }]
     });
-    actionSheet.present();
+    return actionSheet.present();
   }
 
 }

packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts

@@ -2,8 +2,8 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { IonicAngularModule } from '@ionic/angular';
 
-import { SharedModule } from '../shared/shared.module';
 import { BasicInputsPageComponent } from './basic-inputs-page.component';
 
 describe('InputsTestPageComponent', () => {
@@ -14,7 +14,7 @@ describe('InputsTestPageComponent', () => {
     async(() => {
       TestBed.configureTestingModule({
         declarations: [BasicInputsPageComponent],
-        imports: [FormsModule, SharedModule],
+        imports: [FormsModule, IonicAngularModule.forRoot()],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
       }).compileComponents();
     })

packages/demos/angular/src/app/group-inputs-page/group-inputs-page.component.spec.ts

@@ -1,9 +1,9 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
 
 import { GroupInputsPageComponent } from './group-inputs-page.component';
-import { SharedModule } from '../shared/shared.module';
 
 describe('GroupInputsPageComponent', () => {
   let component: GroupInputsPageComponent;
@@ -12,7 +12,7 @@ describe('GroupInputsPageComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        imports: [FormsModule, SharedModule],
+        imports: [FormsModule, IonicAngularModule],
         declarations: [GroupInputsPageComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
       }).compileComponents();

packages/demos/angular/src/app/loading/loading-page.component.ts

@@ -27,7 +27,7 @@ export class LoadingPageComponent {
 
   clickMe() {
     const loading = this.loadingController.create({
-      duration: 2000,
+      duration: 1000,
       content: 'Ahem. Please wait.'
     });
     loading.present();

packages/demos/angular/src/app/modal/modal-page-to-present.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 
 @Component({
@@ -15,10 +15,11 @@ import { ModalController } from '@ionic/angular';
     <ul>
       <li>ngOnInit - {{ngOnInitDetection}}</li>
     </ul>
-    <ion-button (click)="dismiss()">Close Modal</ion-button>
+    <ion-button class="dismiss-btn" (click)="dismiss()">Close Modal</ion-button>
   </ion-content>
 </ion-page>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None
 })
 export class ModalPageToPresent {
 

packages/demos/angular/src/app/modal/modal-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import { ModalController } from '@ionic/angular';
 import { ModalPageToPresent } from './modal-page-to-present';
@@ -17,8 +17,9 @@ import { ModalPageToPresent } from './modal-page-to-present';
         <ion-button (click)="clickMe()">Open Basic Modal</ion-button>
       </ion-content>
     </ion-page>
-</ion-app>
-  `
+</ion-app>,
+  `,
+  encapsulation: ViewEncapsulation.None
 })
 export class ModalPageComponent {
 
@@ -31,5 +32,4 @@ export class ModalPageComponent {
     });
     return modal.present();
   }
-
 }

packages/demos/angular/src/app/popover/popover-page-to-present.ts

@@ -1,27 +1,20 @@
 import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'page-one',
   template: `
-    <ion-header>
-      <ion-toolbar>
-      <ion-title>Page One</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      Page One
-      <ul>
-        <li>ngOnInit - {{ngOnInitDetection}}</li>
-      </ul>
-    </ion-content>
+    <div style="height: 200px; background-color: blue">
+      {{ngOnInitDetection}}
+      <ion-button (click)="dismiss()">Close Popover</ion-button>
+    </div>
   `
 })
 export class PopoverPageToPresent {
 
   ngOnInitDetection = 'initial';
 
-  constructor() {
-
+  constructor(private controller: PopoverController) {
   }
 
 
@@ -32,4 +25,7 @@ export class PopoverPageToPresent {
     }, 500);
   }
 
+  dismiss() {
+    return this.controller.
+  }
 }