diff --git a/packages/core/src/components/modal/test/basic/index.html b/packages/core/src/components/modal/test/basic/index.html index 417ff0a2d2..0d3e5525b6 100644 --- a/packages/core/src/components/modal/test/basic/index.html +++ b/packages/core/src/components/modal/test/basic/index.html @@ -38,9 +38,16 @@ // create component to open const element = document.createElement('ion-page'); element.innerHTML = ` -
- Close the modal -
+ + + Super Modal + + + +

Content of doom

+
Here's some more content
+ Dismiss Modal + `; // listen for close event diff --git a/packages/core/src/components/modal/test/host-elements/index.html b/packages/core/src/components/modal/test/host-elements/index.html new file mode 100644 index 0000000000..973f09ed1d --- /dev/null +++ b/packages/core/src/components/modal/test/host-elements/index.html @@ -0,0 +1,74 @@ + + + + + + Modal - Basic + + + + + + + + + + Modal - Basic + + + + + +

+ Present modal +

+ + + + + + + diff --git a/packages/core/src/components/nav/test/basic/index.html b/packages/core/src/components/nav/test/basic/index.html index 9769efa160..634ae35350 100644 --- a/packages/core/src/components/nav/test/basic/index.html +++ b/packages/core/src/components/nav/test/basic/index.html @@ -30,7 +30,7 @@ async function loadFirstPage() { const nav = document.querySelector('ion-nav'); await nav.componentOnReady(); - const firstPage = document.createElement('div'); + const firstPage = document.createElement('ion-page'); firstPage.classList.add('first-page'); firstPage.innerHTML = ` @@ -54,7 +54,7 @@ } async function goToPageTwo(nav) { - const secondPage = document.createElement('div'); + const secondPage = document.createElement('ion-page'); secondPage.classList.add('second-page'); secondPage.innerHTML = ` @@ -84,7 +84,7 @@ } async function goToPageThree(nav) { - const thirdPage = document.createElement('div'); + const thirdPage = document.createElement('ion-page'); thirdPage.classList.add('third-page'); thirdPage.innerHTML = ` diff --git a/packages/core/src/components/nav/test/host-elements/e2e.js b/packages/core/src/components/nav/test/host-elements/e2e.js new file mode 100644 index 0000000000..b58f4f1110 --- /dev/null +++ b/packages/core/src/components/nav/test/host-elements/e2e.js @@ -0,0 +1,52 @@ +'use strict'; + +const { register, Page, platforms } = require('../../../../../scripts/e2e'); +const { getElement, waitForTransition } = require('../../../../../scripts/e2e/utils'); + +class E2ETestPage extends Page { + constructor(driver, platform) { + super(driver, `http://localhost:3333/src/components/nav/test/host-elements?ionicplatform=${platform}`); + } +} + +platforms.forEach(platform => { + describe('nav/host-elements', () => { + + register('should init', driver => { + const page = new E2ETestPage(driver, platform); + return page.navigate(); + }); + + register('should go to page-one, page-two, page-three, then back to page-two, page-one', async (driver, testContext) => { + + testContext.timeout(10000); + const page = new E2ETestPage(driver, platform); + + // go to page two + const pageOneNextButtonSelector = 'page-one ion-button.next.hydrated'; + const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector); + pageOneNextButton.click(); + await waitForTransition(600); + + // go to page three + const pageTwoNextButtonSelector = 'page-two ion-button.next.hydrated'; + const pageTwoNextButton = await getElement(driver, pageTwoNextButtonSelector); + pageTwoNextButton.click(); + await waitForTransition(600); + + // go back to page two + const pageThreeBackButtonSelector = 'page-three ion-button.previous.hydrated'; + const pageThreeBackButton = await getElement(driver, pageThreeBackButtonSelector); + pageThreeBackButton.click(); + await waitForTransition(600); + + // go back to page two + const pageTwoBackButtonSelector = 'page-two ion-button.previous.hydrated'; + const pageTwoBackButton = await getElement(driver, pageTwoBackButtonSelector); + pageTwoBackButton.click(); + await waitForTransition(600); + + // we're back on page one now + }); + }); +}); diff --git a/packages/core/src/components/nav/test/host-elements/index.html b/packages/core/src/components/nav/test/host-elements/index.html new file mode 100644 index 0000000000..0b0a6078b8 --- /dev/null +++ b/packages/core/src/components/nav/test/host-elements/index.html @@ -0,0 +1,94 @@ + + + + + Nav + + + + + + + + + + + diff --git a/packages/core/src/utils/dom-framework-delegate.ts b/packages/core/src/utils/dom-framework-delegate.ts index b15c2c6d02..b9e54c06d9 100644 --- a/packages/core/src/utils/dom-framework-delegate.ts +++ b/packages/core/src/utils/dom-framework-delegate.ts @@ -1,5 +1,5 @@ import { FrameworkDelegate, FrameworkMountingData, } from '../index'; -import { isElementModal, isElementNav, isString } from './helpers'; +import { isString } from './helpers'; export class DomFrameworkDelegate implements FrameworkDelegate { @@ -14,11 +14,10 @@ export class DomFrameworkDelegate implements FrameworkDelegate { } } - const elementToAppend = shouldWrapInIonPage(parentElement) ? createIonPageAndAppendUserElement(usersElement) : usersElement; - parentElement.appendChild(elementToAppend); + parentElement.appendChild(usersElement); resolve({ - element: elementToAppend + element: usersElement }); }); } @@ -30,13 +29,3 @@ export class DomFrameworkDelegate implements FrameworkDelegate { }); } } - -export function shouldWrapInIonPage(element: HTMLElement) { - return isElementModal(element) || isElementNav(element); -} - -export function createIonPageAndAppendUserElement(userElement: HTMLElement) { - const wrappingElement = document.createElement('ion-page'); - wrappingElement.appendChild(userElement); - return wrappingElement; -} diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts index 3ee36eea0b..80f57160ee 100644 --- a/packages/core/src/utils/helpers.ts +++ b/packages/core/src/utils/helpers.ts @@ -24,14 +24,6 @@ export function isStringOrNumber(v: any): v is (string | number) { return isStri export function isBlank(val: any): val is null { return val === undefined || val === null; } -export function isElementNav(element: HTMLElement) { - return element.tagName.toUpperCase() === 'ION-NAV'; -} - -export function isElementModal(element: HTMLElement) { - return element.classList.contains('modal-wrapper'); -} - /** @hidden */ export function isCheckedProperty(a: any, b: any): boolean { if (a === undefined || a === null || a === '') {