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

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

@ -5,34 +5,11 @@
<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>
</head> <script>
<body onload="loadFirstPage()"> class PageOne extends HTMLElement {
<ion-app> connectedCallback() {
<ion-nav></ion-nav> this.innerHTML = `
</ion-app> <ion-page>
<style>
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
f:last-of-type {
background: yellow;
}
</style>
</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-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
@ -40,23 +17,19 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Page One</h1> <h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
}
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) { class PageTwo extends HTMLElement {
const secondPage = document.createElement('ion-page'); connectedCallback() {
secondPage.classList.add('second-page'); this.innerHTML = `
secondPage.innerHTML = ` <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Two</ion-title> <ion-title>Page Two</ion-title>
@ -64,29 +37,26 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Page Two</h1> <h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button> <div>
<ion-button class="previous">Go Back</ion-button> <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-content>
</ion-page>
`; `;
}
// 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) { class PageThree extends HTMLElement {
const thirdPage = document.createElement('ion-page'); connectedCallback() {
thirdPage.classList.add('third-page'); this.innerHTML = `
thirdPage.innerHTML = ` <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Three</ion-title> <ion-title>Page Three</ion-title>
@ -94,17 +64,57 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Page Three</h1> <h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button> <div>
<ion-nav-pop>
<ion-button class="next">Go Back</ion-button>
</ion-nav-pop>
</div>
</ion-content> </ion-content>
</ion-page>
`; `;
}
}
// okay cool, we're in the DOM now customElements.define('page-one', PageOne);
await nav.push(thirdPage); customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
const previousButton = thirdPage.querySelector('ion-button .previous'); function regularElement() {
previousButton.addEventListener('click', async () => { const start = Date.now();
await nav.pop(); 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`);
}); });
} }
</script>
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>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
</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>