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

test(tabs): fix tabs tests (#16146)

Browse Source
This commit is contained in:
Adam Bradley
2018-10-30 13:30:08 -05:00
committed by GitHub
parent e94b5221d4
commit 38db1fb167
9 changed files with 16 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/item/test/inputs/e2e.ts
View File

@ -11,12 +11,16 @@ test('item: inputs', async () => {
// Disable everything
await page.click('#btnDisabled');
await page.waitFor(250);
compare = await page.compareScreenshot('should disable all');
expect(compare).toMatchScreenshot();
// Reenable and set some value
await page.click('#btnDisabled');
await page.click('#btnSomeValue');
await page.waitFor(250);
compare = await page.compareScreenshot('should reenable and set value');
expect(compare).toMatchScreenshot();

3
core/src/components/loading/test/basic/e2e.ts
View File

@ -7,8 +7,7 @@ test('loading: basic', async () => {
await page.click('#basic');
const loading = await page.find('ion-loading');
expect(loading).not.toBeNull();
await page.waitFor(250);
await loading.waitForVisible();
const compare = await page.compareScreenshot();

10
core/src/components/tabs/test/basic/e2e.ts
View File

@ -1,8 +1,8 @@
import { newE2EPage } from '@stencil/core/testing';
test('tab-group: basic', async () => {
test('tabs: basic', async () => {
const page = await newE2EPage({
url: '/src/components/tab-group/test/basic?ionic:_testing=true'
url: '/src/components/tabs/test/basic?ionic:_testing=true'
});
let compare = await page.compareScreenshot();
@ -10,16 +10,16 @@ test('tab-group: basic', async () => {
const button2 = await page.find('.e2eTabTwoButton');
await button2.click();
compare = await page.compareScreenshot();
compare = await page.compareScreenshot(`tab two`);
expect(compare).toMatchScreenshot();
const button3 = await page.find('.e2eTabThreeButton');
await button3.click();
compare = await page.compareScreenshot();
compare = await page.compareScreenshot(`tab three, disabled`);
expect(compare).toMatchScreenshot();
const button4 = await page.find('.e2eTabFourButton');
await button4.click();
compare = await page.compareScreenshot();
compare = await page.compareScreenshot(`tab four`);
expect(compare).toMatchScreenshot();
});

8
core/src/components/tabs/test/basic/index.html
View File

@ -65,18 +65,18 @@
<ion-tab-bar>
<ion-tab-button href="" tab="tab-one" class="e2eTabOneButton">
<ion-label>Plain List</ion-label>
<ion-label>Tab One</ion-label>
<ion-icon name="star"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
<ion-label>Schedule</ion-label>
<ion-label>Tab Two</ion-label>
<ion-icon name="globe"></ion-icon>
<ion-badge color="danger">6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-three" class="e2eTabThreeButton" disabled>
<ion-label>Stopwatch</ion-label>
<ion-label>Tab Three</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
<ion-badge color="primary">6</ion-badge>
</ion-tab-button>
@ -87,7 +87,7 @@
</ion-tab-button>
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
<ion-label>Messages</ion-label>
<ion-label>Tab Four</ion-label>
<ion-icon name="chatboxes"></ion-icon>
</ion-tab-button>

11
core/src/components/tabs/test/basic/readme.md
View File

@ -1,11 +0,0 @@
# page-tab
<!-- Auto Generated Below -->
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

146
core/src/components/tabs/test/nav/e2e.js
View File

@ -1,146 +0,0 @@
// 'use strict';
// const expect = require('chai').expect;
// const { register, Page, platforms } = require('../../../../../scripts/e2e');
// const { getElement, waitAndGetElementById, waitForTransition } = require('../../../../../scripts/e2e/utils');
// class E2ETestPage extends Page {
// constructor(driver, platform) {
// super(driver, `http://localhost:3333/src/components/tabs/test/nav?ionic:mode=${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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(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 getElement(driver, tabThreePageTwoBackButtonSelector);
// tabThreePageTwoBackButton.click();
// await waitForTransition(600);
// console.log('On Tab Three Page One');
// });
// });
// });

289
core/src/components/tabs/test/nav/index.html
View File

@ -1,289 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Nav</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">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<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>
<ion-tabs>
<ion-tab tab="plain-list">
<ion-nav root="page-one"></ion-nav>
</ion-tab>
<ion-tab tab="schedule">
<ion-nav root="page-four"></ion-nav>
</ion-tab>
<ion-tab tab="stopwatch">
<ion-nav root="page-seven"></ion-nav>
</ion-tab>
<ion-tab-bar>
<ion-tab-button tab="plain-list">
<ion-label>Plain List</ion-label>
<ion-icon name="star"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="schedule">
<ion-label>Schedule</ion-label>
<ion-icon name="globe"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="stopwatch">
<ion-label>Stopwatch</ion-label>
<ion-icon name="logo-facebook"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
</body>
</html>

4
core/src/components/tabs/test/placements/e2e.ts
View File

@ -1,8 +1,8 @@
import { newE2EPage } from '@stencil/core/testing';
test('tab-group: placements', async () => {
test('tab: placements', async () => {
const page = await newE2EPage({
url: '/src/components/tab-group/test/placements?ionic:_testing=true'
url: '/src/components/tabs/test/placements?ionic:_testing=true'
});
const compare = await page.compareScreenshot();

11
core/src/components/tabs/test/placements/readme.md
View File

@ -1,11 +0,0 @@
# page-tab
<!-- Auto Generated Below -->
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*