javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(nav): migrate e2e tests (#16013)

Browse Source 
* test(nav): migrate basic e2e test
* chore(nav): remove redundant host-elements test
* test(nav): rewrite nested e2e test
* test(nav): migrate routing e2e test
* chore(nav): remove unused set-root test page

references #15803
This commit is contained in:
Cam Wiegert
2018-10-19 17:01:15 -05:00
committed by GitHub
parent a9fd3399de
commit 36b41996fe
13 changed files with 289 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
core/src/components/nav/test/basic/e2e.js
View File

@@ -1,52 +0,0 @@
// '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/basic?ionic:mode=${platform}`);
// }
// }
// platforms.forEach(platform => {
// describe('nav/basic', () => {
// 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 = '.first-page ion-button.next.hydrated';
// const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector);
// pageOneNextButton.click();
// await waitForTransition(600);
// // go to page three
// const pageTwoNextButtonSelector = '.second-page ion-button.next.hydrated';
// const pageTwoNextButton = await getElement(driver, pageTwoNextButtonSelector);
// pageTwoNextButton.click();
// await waitForTransition(600);
// // go back to page two
// const pageThreeBackButtonSelector = '.third-page ion-button.previous.hydrated';
// const pageThreeBackButton = await getElement(driver, pageThreeBackButtonSelector);
// pageThreeBackButton.click();
// await waitForTransition(600);
// // go back to page two
// const pageTwoBackButtonSelector = '.second-page ion-button.previous.hydrated';
// const pageTwoBackButton = await getElement(driver, pageTwoBackButtonSelector);
// pageTwoBackButton.click();
// await waitForTransition(600);
// // we're back on page one now
// });
// });
// });

23
core/src/components/nav/test/basic/e2e.ts Normal file
View File

@@ -0,0 +1,23 @@
import { newE2EPage } from '@stencil/core/testing';
const navChanged = () => new Promise(resolve => window.addEventListener('ionNavDidChange', resolve));
it('nav: basic', async () => {
const page = await newE2EPage({
url: '/src/components/nav/test/basic?ionic:_testing=true'
});
expect(await page.compareScreenshot()).toMatchScreenshot();
await page.click('page-one ion-button.next');
await page.waitFor(navChanged);
await page.click('page-two ion-button.next');
await page.waitFor(navChanged);
await page.click('page-three ion-back-button');
await page.waitFor(navChanged);
await page.click('page-two ion-back-button');
await page.waitFor(navChanged);
expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
});

27
core/src/components/nav/test/basic/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Nav</title>
<title>Nav - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
@@ -18,9 +18,6 @@
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
@@ -33,34 +30,20 @@
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar color="primary">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page One"></ion-back-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<h1>Page Two</h1>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Two</ion-button>
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push>
</div>
<ion-list>
<ion-item-sliding>
<ion-item>Some item</ion-item>
<ion-item-options>
<ion-item-option>
Some options
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
`;
}
@@ -71,7 +54,7 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page Two"></ion-back-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>

52
core/src/components/nav/test/host-elements/e2e.js
View File

@@ -1,52 +0,0 @@
// '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?ionic:mode=${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
// });
// });
// });

96
core/src/components/nav/test/host-elements/index.html
View File

@@ -1,96 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
<script>
class PageOne extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button>
</ion-content>`;
const button = this.querySelector('ion-button');
button.addEventListener('click', async () => {
this.closest('ion-nav').push('page-two');
});
}
}
class PageTwo extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button>
<ion-button class="previous">Go Back</ion-button>
</ion-content>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
const nextButton = this.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await this.closest('ion-nav').push('page-three');
});
}
}
class PageThree extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button>
</ion-content>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</html>

28
core/src/components/nav/test/nested/e2e.ts Normal file
View File

@@ -0,0 +1,28 @@
import { newE2EPage } from '@stencil/core/testing';
const navChanged = () => new Promise(resolve => window.addEventListener('ionNavDidChange', resolve));
// TODO: get this to pass
it.skip('nav: nested', async () => {
const page = await newE2EPage({
url: '/src/components/nav/test/nested?ionic:_testing=true'
});
expect(await page.compareScreenshot()).toMatchScreenshot();
await page.click('page-one ion-button.next');
await page.waitFor(navChanged);
await page.click('page-two-one ion-button.next');
await page.waitFor(navChanged);
await page.click('page-two-two ion-button.next');
await page.waitFor(navChanged);
await page.click('page-three ion-back-button');
await page.waitFor(navChanged);
await page.click('page-two-two ion-back-button');
await page.waitFor(navChanged);
await page.click('page-two-one ion-back-button');
await page.waitFor(navChanged);
expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
});

117
core/src/components/nav/test/nested/index.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav - Nested</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page 1</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page 2</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-nav root="page-two-one"></ion-nav>
`;
}
}
class PageTwoOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page 2.1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page 2.1</h1>
<div>
<ion-nav-push component="page-two-two">
<ion-button class="next">Go to Page 2.2</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageTwoTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page 2.2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page 2.2</h1>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page 3</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page 3</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page 3</h1>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-two-one', PageTwoOne);
customElements.define('page-two-two', PageTwoTwo);
customElements.define('page-three', PageThree);
</script>
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
</html>

52
core/src/components/nav/test/routing/e2e.js
View File

@@ -1,52 +0,0 @@
// '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/basic?ionic:mode=${platform}`);
// }
// }
// platforms.forEach(platform => {
// describe('nav/basic', () => {
// 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 = '.first-page ion-button.next.hydrated';
// const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector);
// pageOneNextButton.click();
// await waitForTransition(600);
// // go to page three
// const pageTwoNextButtonSelector = '.second-page ion-button.next.hydrated';
// const pageTwoNextButton = await getElement(driver, pageTwoNextButtonSelector);
// pageTwoNextButton.click();
// await waitForTransition(600);
// // go back to page two
// const pageThreeBackButtonSelector = '.third-page ion-button.previous.hydrated';
// const pageThreeBackButton = await getElement(driver, pageThreeBackButtonSelector);
// pageThreeBackButton.click();
// await waitForTransition(600);
// // go back to page two
// const pageTwoBackButtonSelector = '.second-page ion-button.previous.hydrated';
// const pageTwoBackButton = await getElement(driver, pageTwoBackButtonSelector);
// pageTwoBackButton.click();
// await waitForTransition(600);
// // we're back on page one now
// });
// });
// });

27
core/src/components/nav/test/routing/e2e.ts Normal file
View File

@@ -0,0 +1,27 @@
import { newE2EPage } from '@stencil/core/testing';
const navChanged = () => new Promise(resolve => window.addEventListener('ionRouteDidChange', resolve));
it('nav: routing', async () => {
const page = await newE2EPage({
url: '/src/components/nav/test/routing?ionic:_testing=true'
});
expect(await page.compareScreenshot()).toMatchScreenshot();
await page.click('page-root ion-button.next');
await page.waitFor(navChanged);
await page.click('page-one ion-button.next');
await page.waitFor(navChanged);
await page.click('page-two ion-button.next');
await page.waitFor(navChanged);
await page.click('page-three ion-back-button');
await page.waitFor(navChanged);
await page.click('page-two ion-back-button');
await page.waitFor(navChanged);
await page.click('page-one ion-back-button');
await page.waitFor(navChanged);
expect(await page.compareScreenshot('stack traversal')).toMatchScreenshot();
});

122
core/src/components/nav/test/routing/index.html
View File

@@ -3,51 +3,107 @@
<head>
<meta charset="UTF-8">
<title>Nav</title>
<title>Nav - Routing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
<script src="/test-components/build/app.js"></script>
<script>
class PageRoot extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Root</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Root</h1>
<div>
<ion-nav-push component="page-one">
<ion-button class="next">Go to Page One</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
</ion-content>
`;
}
}
customElements.define('page-root', PageRoot);
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</head>
<body>
<ion-app>
<ion-router>
<ion-route path="/" component="page-one">
<ion-route path="/nested" component="page-nested-one"></ion-route>
<ion-route path="/nestes2" component="page-nested-two"></ion-route>
</ion-route>
<ion-route path="/two" component="page-two"></ion-route>
<ion-route url="/" component="page-root"></ion-route>
<ion-route url="/page-one" component="page-one"></ion-route>
<ion-route url="/page-two" component="page-two"></ion-route>
<ion-route url="/page-three" component="page-three"></ion-route>
</ion-router>
<ion-nav></ion-nav>
</ion-app>
<style>
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
f:last-of-type {
background: yellow;
}
</style>
</body>
<script>
</script>
</html>

115
core/src/components/nav/test/set-root/index.html
View File

@@ -1,115 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
</head>
<body onload="initiaize()">
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
<script>
class PageOne extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button>
</ion-content>
</ion-page>`;
const button = this.querySelector('ion-button');
button.addEventListener('click', async () => {
this.closest('ion-nav').push('page-two');
});
}
}
class PageTwo extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
const nextButton = this.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await this.closest('ion-nav').push('page-three');
});
}
}
class PageThree extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
async function initiaize() {
const nav = document.querySelector('ion-nav');
await nav.componentOnReady();
nav.root = 'page-one';
setInterval(() => {
if (nav.root === 'page-one') {
nav.root = 'page-two';
} else if (nav.root === 'page-two') {
nav.root = 'page-three';
} else {
nav.root = 'page-one';
}
}, 1000);
}
</script>
</html>

276
core/src/components/nav/test/simple-nested-navs/e2e.js
View File

@@ -1,276 +0,0 @@
// 'use strict';
// const expect = require('chai').expect;
// 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/simple-nested-navs?ionic:mode=${platform}`);
// }
// }
// platforms.forEach(platform => {
// describe('nav/simple-nested-navs', () => {
// register('should init', driver => {
// const page = new E2ETestPage(driver, platform);
// return page.navigate();
// });
// register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-one-page-three, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// console.log('On Nav One Page One');
// const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
// const navOnePageOneNextButton = await getElement(driver, navOnePageOneNextButtonSelector);
// navOnePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
// const navOnePageTwoNextButton = await getElement(driver, navOnePageTwoNextButtonSelector);
// navOnePageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-one.hydrated';
// const navTwoPageOneNextButton = await getElement(driver, navTwoPageOneNextButtonSelector);
// navTwoPageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Three');
// const navOnePageThreePreviousButtonSelector = '.nav-one-page-three ion-button.previous.hydrated';
// const navOnePageThreePreviousButton = await getElement(driver, navOnePageThreePreviousButtonSelector);
// navOnePageThreePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
// const navTwoPageOnePreviousButton = await getElement(driver, navTwoPageOnePreviousButtonSelector);
// navTwoPageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
// const navOnePageTwoPreviousButton = await getElement(driver, navOnePageTwoPreviousButtonSelector);
// navOnePageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page One');
// const navOnePageOneSelector = '.nav-one-page-one';
// const navOnePageOne = await getElement(driver, navOnePageOneSelector);
// });
// register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav two-page-three and so on', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// console.log('On Nav One Page One');
// const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
// const navOnePageOneNextButton = await getElement(driver, navOnePageOneNextButtonSelector);
// navOnePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
// const navOnePageTwoNextButton = await getElement(driver, navOnePageTwoNextButtonSelector);
// navOnePageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
// const navTwoPageOneNextButton = await getElement(driver, navTwoPageOneNextButtonSelector);
// navTwoPageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Two');
// const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
// const navTwoPageTwoNextButton = await getElement(driver, navTwoPageTwoNextButtonSelector);
// navTwoPageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page One');
// const navThreePageOneNextButtonSelector = '.nav-three-page-one ion-button.next.nav-two.hydrated';
// const navThreePageOneNextButton = await getElement(driver, navThreePageOneNextButtonSelector);
// navThreePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Three');
// const navTwoPageThreePreviousButtonSelector = '.nav-two-page-three ion-button.previous.hydrated';
// const navTwoPageThreePreviousButton = await getElement(driver, navTwoPageThreePreviousButtonSelector);
// navTwoPageThreePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page One');
// const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.previous.nav-two.hydrated';
// const navThreePageOnePreviousButton = await getElement(driver, navThreePageOnePreviousButtonSelector);
// navThreePageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Two');
// const navTwoPageTwoPreviousButtonSelector = '.nav-two-page-two ion-button.previous.hydrated';
// const navTwoPageTwoPreviousButton = await getElement(driver, navTwoPageTwoPreviousButtonSelector);
// navTwoPageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
// const navTwoPageOnePreviousButton = await getElement(driver, navTwoPageOnePreviousButtonSelector);
// navTwoPageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
// const navOnePageTwoPreviousButton = await getElement(driver, navOnePageTwoPreviousButtonSelector);
// navOnePageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page One');
// const navOnePageOneSelector = '.nav-one-page-one';
// const navOnePageOne = await getElement(driver, navOnePageOneSelector);
// });
// register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// console.log('On Nav One Page One');
// const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
// const navOnePageOneNextButton = await getElement(driver, navOnePageOneNextButtonSelector);
// navOnePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
// const navOnePageTwoNextButton = await getElement(driver, navOnePageTwoNextButtonSelector);
// navOnePageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
// const navTwoPageOneNextButton = await getElement(driver, navTwoPageOneNextButtonSelector);
// navTwoPageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Two');
// const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
// const navTwoPageTwoNextButton = await getElement(driver, navTwoPageTwoNextButtonSelector);
// navTwoPageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page One');
// const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.previous.nav-one.hydrated';
// const navThreePageOnePreviousButton = await getElement(driver, navThreePageOnePreviousButtonSelector);
// navThreePageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
// const navOnePageTwoPreviousButton = await getElement(driver, navOnePageTwoPreviousButtonSelector);
// navOnePageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page One');
// const navOnePageOneSelector = '.nav-one-page-one';
// const navOnePageOne = await getElement(driver, navOnePageOneSelector);
// });
// register('should go from nav-one-page-one, nav-one-page-two, nav-two-page-one, nav-two-page-two, nav-three-page-one, nav-three-page-two, nav-three-page-three, nav-three-page-two, nav-three-page-one, nav-two-page-two, nav-two-page-one, nav-one-page-two, nav-one-page-one', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// console.log('On Nav One Page One');
// const navOnePageOneNextButtonSelector = '.nav-one-page-one ion-button.next.hydrated';
// const navOnePageOneNextButton = await getElement(driver, navOnePageOneNextButtonSelector);
// navOnePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoNextButtonSelector = '.nav-one-page-two ion-button.next.hydrated';
// const navOnePageTwoNextButton = await getElement(driver, navOnePageTwoNextButtonSelector);
// navOnePageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOneNextButtonSelector = '.nav-two-page-one ion-button.next.nav-two.hydrated';
// const navTwoPageOneNextButton = await getElement(driver, navTwoPageOneNextButtonSelector);
// navTwoPageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Two');
// const navTwoPageTwoNextButtonSelector = '.nav-two-page-two ion-button.next.hydrated';
// const navTwoPageTwoNextButton = await getElement(driver, navTwoPageTwoNextButtonSelector);
// navTwoPageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page One');
// const navThreePageOneNextButtonSelector = '.nav-three-page-one ion-button.next.nav-three.hydrated';
// const navThreePageOneNextButton = await getElement(driver, navThreePageOneNextButtonSelector);
// navThreePageOneNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page Two');
// const navThreePageTwoNextButtonSelector = '.nav-three-page-two ion-button.next.hydrated';
// const navThreePageTwoNextButton = await getElement(driver, navThreePageTwoNextButtonSelector);
// navThreePageTwoNextButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page Three');
// const navThreePageThreePreviousButtonSelector = '.nav-three-page-three ion-button.previous.hydrated';
// const navThreePageThreePreviousButton = await getElement(driver, navThreePageThreePreviousButtonSelector);
// navThreePageThreePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page Two');
// const navThreePageTwoPreviousButtonSelector = '.nav-three-page-two ion-button.previous.hydrated';
// const navThreePageTwoPreviousButton = await getElement(driver, navThreePageTwoPreviousButtonSelector);
// navThreePageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Three Page One');
// const navThreePageOnePreviousButtonSelector = '.nav-three-page-one ion-button.nav-two.previous.hydrated';
// const navThreePageOnePreviousButton = await getElement(driver, navThreePageOnePreviousButtonSelector);
// navThreePageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page Two');
// const navTwoPageTwoPreviousButtonSelector = '.nav-two-page-two ion-button.previous.hydrated';
// const navTwoPageTwoPreviousButton = await getElement(driver, navTwoPageTwoPreviousButtonSelector);
// navTwoPageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav Two Page One');
// const navTwoPageOnePreviousButtonSelector = '.nav-two-page-one ion-button.previous.nav-one.hydrated';
// const navTwoPageOnePreviousButton = await getElement(driver, navTwoPageOnePreviousButtonSelector);
// navTwoPageOnePreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page Two');
// const navOnePageTwoPreviousButtonSelector = '.nav-one-page-two ion-button.previous.hydrated';
// const navOnePageTwoPreviousButton = await getElement(driver, navOnePageTwoPreviousButtonSelector);
// navOnePageTwoPreviousButton.click();
// await waitForTransition(600);
// console.log('On Nav One Page One');
// const navOnePageTwoSelector = '.nav-one-page-one';
// const navOnePageTwo = await getElement(driver, navOnePageTwoSelector);
// });
// });
// });

135
core/src/components/nav/test/simple-nested-navs/index.html
View File

@@ -1,135 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Simple Nested Navs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" href="/css/ionic.bundle.css">
<link rel="stylesheet" href="/scripts/testing/styles.css">
<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-nav root="page-two-section-one"></ion-nav>
`;
}
}
class PageTwoSectionOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two Section One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two Section One</h1>
<ion-nav-push component="page-two-section-two">
<ion-button class="next">Go to Page Two Section Two</ion-button>
</ion-nav-push>
<div>
<ion-button class="previous">Go Back</ion-button>
</div>
</ion-content>
`;
const button = this.querySelector('ion-button.previous');
button.addEventListener('click', () => {
const nav = this.closest('ion-nav');
if (nav.parent) {
nav.parent.pop();
}
});
}
}
class PageTwoSectionTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two Section Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two Section Two</h1>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
<ion-nav-pop>
<ion-button class="previous">Go Back</ion-button>
</ion-nav-pop>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-two-section-one', PageTwoSectionOne);
customElements.define('page-two-section-two', PageTwoSectionTwo);
customElements.define('page-three', PageThree);
</script>
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
</html>