javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(nav): update tests

Browse Source
This commit is contained in:
Dan Bucholtz
2018-02-15 11:13:57 -06:00
parent b34ee5cd87
commit bc381f62f6
2 changed files with 109 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,106 +5,116 @@
<title>Nav</title> <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"> <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> <script src="/dist/ionic.js"></script>
<script>
class PageOne extends HTMLElement {
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-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content>
</ion-page>
`;
}
}
class PageTwo extends HTMLElement {
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>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</div>
<div>
<ion-nav-pop>
<ion-button class="next">Go Back</ion-button>
</ion-nav-pop>
</div>
</ion-content>
</ion-page>
`;
}
}
class PageThree extends HTMLElement {
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>
<div>
<ion-nav-pop>
<ion-button class="next">Go Back</ion-button>
</ion-nav-pop>
</div>
</ion-content>
</ion-page>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
function regularElement() {
const start = Date.now();
const element = document.createElement('page-three');
document.body.appendChild(element);
const end = Date.now();
console.log(`It took ${end - start} millis to create the custom element, add it to the DOM`);
return Promise.resolve().then(() => {
}).then(() => {
}).then(() => {
const endTwo = Date.now();
console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
});
}
function stencilElement() {
const start = Date.now();
const element = document.createElement('ion-nav');
document.body.appendChild(element);
const end = Date.now();
console.log(`It took ${end - start} millis to create the stencil element, add it to the DOM`);
return element.componentOnReady().then(() => {
}).then(() => {
}).then(() => {
const endTwo = Date.now();
console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
});
}
</script>
</head> </head>
<body onload="loadFirstPage()"> <body>
<ion-app> <ion-app>
<ion-nav></ion-nav> <ion-nav root="page-one"></ion-nav>
</ion-app> </ion-app>
<style>
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
f:last-of-type {
background: yellow;
}
</style>
</body> </body>
<script>
async function loadFirstPage() {
const nav = document.querySelector('ion-nav');
await nav.componentOnReady();
const firstPage = document.createElement('ion-page');
firstPage.classList.add('first-page');
firstPage.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>
`;
await nav.push(firstPage);
// okay cool, we're in the DOM now
const button = firstPage.querySelector('ion-button');
button.addEventListener('click', async () => {
await goToPageTwo(nav);
});
}
async function goToPageTwo(nav) {
const secondPage = document.createElement('ion-page');
secondPage.classList.add('second-page');
secondPage.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>
`;
// okay cool, we're in the DOM now
await nav.push(secondPage);
const previousButton = secondPage.querySelector('ion-button .previous');
previousButton.addEventListener('click', async () => {
await nav.pop();
});
const nextButton = secondPage.querySelector('ion-button .next');
nextButton.addEventListener('click', async () => {
await goToPageThree(nav);
});
}
async function goToPageThree(nav) {
const thirdPage = document.createElement('ion-page');
thirdPage.classList.add('third-page');
thirdPage.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>
`;
// okay cool, we're in the DOM now
await nav.push(thirdPage);
const previousButton = thirdPage.querySelector('ion-button .previous');
previousButton.addEventListener('click', async () => {
await nav.pop();
});
}
</script>
</html> </html>

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

@ -2,7 +2,7 @@
<html dir="ltr"> <html dir="ltr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Nav</title> <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"> <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> <script src="/dist/ionic.js"></script>
<script> <script>