mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
refactor(tabs): remove router, get the basic happy path working with and without nav. - /gif its working (kinda)
This commit is contained in:
Dan Bucholtz
@ -224,3 +224,7 @@ ion-tabbar.scrollable ion-button.inactive {
|
||||
ion-tabs {
|
||||
@extend .ion-page
|
||||
}
|
||||
|
||||
ion-tab-button {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = {useRouter: true};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<div class="div-one">Div One</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-two">Div Two</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-three">Div Three</div>
|
||||
</ion-tabs>
|
||||
|
||||
<style>
|
||||
.div-one {
|
||||
background-color: blue;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.div-two {
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.div-three {
|
||||
background-color: green;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
166
packages/core/src/components/tabs/test/nav/e2e.js
Normal file
166
packages/core/src/components/tabs/test/nav/e2e.js
Normal file
@ -0,0 +1,166 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const expect = require('chai').expect;
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/tabs/test/nav?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('tabs/nav', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
|
||||
register('should push three pages on each nav stack', async (driver, testContext) => {
|
||||
|
||||
testContext.timeout(60000);
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
|
||||
await waitForTransition(300);
|
||||
|
||||
console.log('On Tab One Page One');
|
||||
const tabOnePageOneNextButtonSelector = 'page-one ion-button.next.hydrated';
|
||||
const tabOnePageOneNextButton = await waitAndGetElement(driver, tabOnePageOneNextButtonSelector);
|
||||
tabOnePageOneNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab One Page Two');
|
||||
const tabOnePageTwoNextButtonSelector = 'page-two ion-button.next.hydrated';
|
||||
const tabOnePageTwoNextButton = await waitAndGetElement(driver, tabOnePageTwoNextButtonSelector);
|
||||
tabOnePageTwoNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab One Page Three');
|
||||
|
||||
console.log('Switching to Tab Two');
|
||||
const tabTwoButton = await waitAndGetElementById(driver, 'tab-t-0-1');
|
||||
tabTwoButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page One');
|
||||
const tabTwoPageOneNextButtonSelector = 'page-four ion-button.next.hydrated';
|
||||
const tabTwoPageOneNextButton = await waitAndGetElement(driver, tabTwoPageOneNextButtonSelector);
|
||||
tabTwoPageOneNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page Two');
|
||||
const tabTwoPageTwoNextButtonSelector = 'page-five ion-button.next.hydrated';
|
||||
const tabTwoPageTwoNextButton = await waitAndGetElement(driver, tabTwoPageTwoNextButtonSelector);
|
||||
tabTwoPageTwoNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab two Page Three');
|
||||
|
||||
console.log('Switching to Tab Three');
|
||||
const tabThreeButton = await waitAndGetElementById(driver, 'tab-t-0-2');
|
||||
tabThreeButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page One');
|
||||
const tabThreePageOneNextButtonSelector = 'page-seven ion-button.next.hydrated';
|
||||
const tabThreePageOneNextButton = await waitAndGetElement(driver, tabThreePageOneNextButtonSelector);
|
||||
tabThreePageOneNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page Two');
|
||||
const tabThreePageTwoNextButtonSelector = 'page-eight ion-button.next.hydrated';
|
||||
const tabThreePageTwoNextButton = await waitAndGetElement(driver, tabThreePageTwoNextButtonSelector);
|
||||
tabThreePageTwoNextButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page Three');
|
||||
|
||||
console.log('Switching to Tab One');
|
||||
const tabOneButton = await waitAndGetElementById(driver, 'tab-t-0-0');
|
||||
tabOneButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab One Page Three');
|
||||
const tabOnePageThreeBackButtonSelector = 'page-three ion-button.back.hydrated';
|
||||
const tabOnePageThreeBackButton = await waitAndGetElement(driver, tabOnePageThreeBackButtonSelector);
|
||||
tabOnePageThreeBackButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('Switching to Tab Three');
|
||||
tabThreeButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page Three');
|
||||
const tabThreePageThreeBackButtonSelector = 'page-nine ion-button.back.hydrated';
|
||||
const tabThreePageThreeBackButton = await waitAndGetElement(driver, tabThreePageThreeBackButtonSelector);
|
||||
tabThreePageThreeBackButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page Two');
|
||||
|
||||
console.log('Switching to Tab Two');
|
||||
tabTwoButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page Three');
|
||||
const tabTwoPageThreeBackButtonSelector = 'page-six ion-button.back.hydrated';
|
||||
const tabTwoPageThreeBackButton = await waitAndGetElement(driver, tabTwoPageThreeBackButtonSelector);
|
||||
tabTwoPageThreeBackButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page Two');
|
||||
const tabTwoPageTwoBackButtonSelector = 'page-five ion-button.back.hydrated';
|
||||
const tabTwoPageTwoBackButton = await waitAndGetElement(driver, tabTwoPageTwoBackButtonSelector);
|
||||
tabTwoPageTwoBackButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Two Page One');
|
||||
|
||||
console.log('Switching to Tab One');
|
||||
tabOneButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab One Page Two');
|
||||
const tabOnePageTwoBackButtonSelector = 'page-two ion-button.back.hydrated';
|
||||
const tabOnePageTwoBackButton = await waitAndGetElement(driver, tabOnePageTwoBackButtonSelector);
|
||||
tabOnePageTwoBackButton.click();
|
||||
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab One Page One');
|
||||
|
||||
console.log('Switching to Tab Three');
|
||||
tabThreeButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page Two');
|
||||
const tabThreePageTwoBackButtonSelector = 'page-eight ion-button.back.hydrated';
|
||||
const tabThreePageTwoBackButton = await waitAndGetElement(driver, tabThreePageTwoBackButtonSelector);
|
||||
tabThreePageTwoBackButton.click();
|
||||
await waitForTransition(600);
|
||||
|
||||
console.log('On Tab Three Page One');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function waitAndGetElement(driver, selector) {
|
||||
driver.wait(until.elementLocated(By.css(selector)));
|
||||
const element = driver.findElement(By.css(selector));
|
||||
await driver.wait(until.elementIsVisible(driver.findElement(By.css(selector))));
|
||||
return element;
|
||||
}
|
||||
|
||||
async function waitAndGetElementById(driver, selector) {
|
||||
driver.wait(until.elementLocated(By.id(selector)));
|
||||
const element = driver.findElement(By.id(selector));
|
||||
await driver.wait(until.elementIsVisible(driver.findElement(By.id(selector))));
|
||||
return element;
|
||||
}
|
||||
|
||||
function waitForTransition(duration) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(resolve, duration);
|
||||
})
|
||||
}
|
||||
267
packages/core/src/components/tabs/test/nav/index.html
Normal file
267
packages/core/src/components/tabs/test/nav/index.html
Normal file
@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = {useRouter: true};
|
||||
</script>
|
||||
<script>
|
||||
|
||||
class PageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = this.getHtml();
|
||||
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
if (nextButton) {
|
||||
nextButton.addEventListener('click', () => {
|
||||
this.goToNext();
|
||||
});
|
||||
}
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
if (backButton) {
|
||||
backButton.addEventListener('click', () => {
|
||||
this.goBack();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page One
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
goToNext() {
|
||||
const nav = this.closest('ion-nav');
|
||||
nav.push(this.getNextPage());
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-two';
|
||||
}
|
||||
|
||||
goBack() {
|
||||
const nav = this.closest('ion-nav');
|
||||
nav.pop();
|
||||
}
|
||||
}
|
||||
|
||||
class PageTwo extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Two
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-three';
|
||||
}
|
||||
}
|
||||
|
||||
class PageThree extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Three
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class PageFour extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Four</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Four
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Five</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-five';
|
||||
}
|
||||
}
|
||||
|
||||
class PageFive extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Five</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Five
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Six</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-six';
|
||||
}
|
||||
}
|
||||
|
||||
class PageSix extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Six</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Six
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class PageSeven extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Seven</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Seven
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Eight</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-eight';
|
||||
}
|
||||
}
|
||||
|
||||
class PageEight extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Eight</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Eight
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Nine</ion-button>
|
||||
</div>
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
getNextPage() {
|
||||
return 'page-nine';
|
||||
}
|
||||
}
|
||||
|
||||
class PageNine extends PageOne {
|
||||
getHtml() {
|
||||
return `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Nine</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Page Nine
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
customElements.define('page-one', PageOne);
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
customElements.define('page-four', PageFour);
|
||||
customElements.define('page-five', PageFive);
|
||||
customElements.define('page-six', PageSix);
|
||||
customElements.define('page-seven', PageSeven);
|
||||
customElements.define('page-eight', PageEight);
|
||||
customElements.define('page-nine', PageNine);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ion-app useRouter='false'>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<ion-nav root="page-four"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
|
||||
<ion-nav root="page-seven"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = {useRouter: true};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<div class="div-one">Div One</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-two">Div Two</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-three">Div Three</div>
|
||||
</ion-tabs>
|
||||
<style>
|
||||
.div-one {
|
||||
background-color: blue;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.div-two {
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.div-three {
|
||||
background-color: green;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
19
packages/core/src/components/tabs/test/vanilla/e2e.js
Normal file
19
packages/core/src/components/tabs/test/vanilla/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/tabs/test/vanilla?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('tabs/vanilla', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -10,20 +10,18 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<div class="div-one">Div One</div>
|
||||
</ion-tab>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<div class="div-one">Div One</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-two">Div Two</div>
|
||||
</ion-tab>
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-two">Div Two</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<div class="div-three">Div Three</div>
|
||||
</ion-tabs>
|
||||
</ion-app>
|
||||
<ion-tab title="Schedule" icon="save" path="tab2">
|
||||
<div class="div-three">Div Three</div>
|
||||
</ion-tabs>
|
||||
|
||||
<style>
|
||||
.div-one {
|
||||
|
||||
Reference in New Issue
Block a user