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

tests(standalone): update standalone overlay tests to remove buttons

Browse Source 
having the ion-buttons in the standalone tests was providing button
styles that some of the components needed, we need to make sure they
look good without those styles
This commit is contained in:
Brandy Carney
2018-02-07 13:03:34 -05:00
parent 1495046d4a
commit 0f616338d7
13 changed files with 555 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/core/src/components/action-sheet/test/standalone/e2e.js
View File

@ -1,7 +1,7 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
const { Page, platforms, register } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
@ -14,6 +14,11 @@ class E2ETestPage extends Page {
await this.driver.wait(until.elementLocated(By.css('.action-sheet-container')));
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.action-sheet-container'))));
}
async closeWithBackdrop() {
this.driver.findElement(By.css('ion-backdrop')).click();
return await this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
}
}
platforms.forEach(platform => {
@ -27,5 +32,36 @@ platforms.forEach(platform => {
const page = new E2ETestPage(driver, platform);
return page.present('basic');
});
register('should close with backdrop click', async driver => {
const page = new E2ETestPage(driver, platform);
await page.present('basic');
return page.closeWithBackdrop();
});
register('shows noBackdropDismiss', (driver) => {
const page = new E2ETestPage(driver, platform);
return page.present('noBackdropDismiss');
});
register('shows alertFromActionSheet', (driver) => {
const page = new E2ETestPage(driver, platform);
return page.present('alertFromActionSheet');
});
register('shows scrollableOptions', (driver) => {
const page = new E2ETestPage(driver, platform);
return page.present('scrollableOptions');
});
register('shows scrollWithoutCancel', (driver) => {
const page = new E2ETestPage(driver, platform);
return page.present('scrollWithoutCancel');
});
register('shows cancelOnly', (driver) => {
const page = new E2ETestPage(driver, platform);
return page.present('cancelOnly');
});
});
});

310
packages/core/src/components/action-sheet/test/standalone/index.html
View File

@ -9,14 +9,34 @@
</head>
<body>
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<button id="basic" onclick="presentBasic()">Basic</button>
<button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
<button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
<button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
<button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
<button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
<button id="icons" onclick="presentIcons()">Icons</button>
<button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
<ion-action-sheet-controller></ion-action-sheet-controller>
<script>
async function presentBasic() {
const mode = Ionic.mode;
<style>
body > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
<script>
window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
async function presentBasic() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
@ -24,21 +44,26 @@
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
role: 'selected',
handler: () => {
console.log('Favorite clicked');
}
@ -53,6 +78,283 @@
await actionSheetElement.present();
}
async function presentIcons() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
icon: 'close',
handler: () => {
console.log('Cancel clicked');
}
}]
})
await actionSheetElement.present();
}
async function presentNoBackdropDismiss() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [{
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
}, {
text: 'Destructive',
role: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheetElement.present();
}
async function presentAlert() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [{
text: 'Open Alert',
handler: () => {
console.log('Open Alert clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheetElement.present();
}
async function presentScroll() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [
{
text: 'Add Reaction',
handler: () => {
console.log('Add Reaction clicked');
}
}, {
text: 'Copy Text',
handler: () => {
console.log('Copy Text clicked');
}
}, {
text: 'Share Text',
handler: () => {
console.log('Share Text clicked');
}
}, {
text: 'Copy Link to Message',
handler: () => {
console.log('Copy Link to Message clicked');
}
}, {
text: 'Remind Me',
handler: () => {
console.log('Remind Me clicked');
}
}, {
text: 'Pin File',
handler: () => {
console.log('Pin File clicked');
}
}, {
text: 'Star File',
handler: () => {
console.log('Star File clicked');
}
}, {
text: 'Mark Unread',
handler: () => {
console.log('Mark Unread clicked');
}
}, {
text: 'Edit Title',
handler: () => {
console.log('Edit Title clicked');
}
}, {
text: 'Save Image',
handler: () => {
console.log('Save Image clicked');
}
}, {
text: 'Copy Image',
handler: () => {
console.log('Copy Image clicked');
}
}, {
text: 'Delete File',
role: 'destructive',
handler: () => {
console.log('Delete File clicked');
}
}, {
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
handler: () => {
console.log('Cancel clicked');
}
}
]
});
await actionSheetElement.present();
}
async function presentScrollNoCancel() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [
{
text: 'Add Reaction',
handler: () => {
console.log('Add Reaction clicked');
}
}, {
text: 'Copy Text',
handler: () => {
console.log('Copy Text clicked');
}
}, {
text: 'Share Text',
handler: () => {
console.log('Share Text clicked');
}
}, {
text: 'Copy Link to Message',
handler: () => {
console.log('Copy Link to Message clicked');
}
}, {
text: 'Remind Me',
handler: () => {
console.log('Remind Me clicked');
}
}, {
text: 'Pin File',
handler: () => {
console.log('Pin File clicked');
}
}, {
text: 'Star File',
handler: () => {
console.log('Star File clicked');
}
}, {
text: 'Mark Unread',
handler: () => {
console.log('Mark Unread clicked');
}
}, {
text: 'Edit Title',
handler: () => {
console.log('Edit Title clicked');
}
}, {
text: 'Save Image',
handler: () => {
console.log('Save Image clicked');
}
}, {
text: 'Copy Image',
handler: () => {
console.log('Copy Image clicked');
}
}, {
text: 'Delete File',
role: 'destructive',
handler: () => {
console.log('Delete File clicked');
}
}
]
});
await actionSheetElement.present();
}
async function presentCancelOnly() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
handler: () => {
console.log('Cancel clicked');
}
}
]
});
await actionSheetElement.present();
}
async function presentWithCssClass() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
title: "Custom Css Class",
cssClass: "my-class my-custom-class",
buttons: [
{
text: 'Test',
role: 'test',
cssClass: 'my-cancel-button my-custom-button customClass',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
await actionSheetElement.present();
}
</script>
</body>
</html>

42
packages/core/src/components/alert/test/standalone/e2e.js
View File

@ -14,6 +14,11 @@ class E2ETestPage extends Page {
await this.driver.wait(until.elementLocated(By.css('.alert-wrapper')));
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.alert-wrapper'))));
}
async closeWithBackdrop() {
this.driver.findElement(By.css('ion-backdrop')).click();
return await this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
}
}
platforms.forEach(platform => {
@ -23,9 +28,44 @@ platforms.forEach(platform => {
return page.navigate('#basic');
});
register('should open alert', driver => {
register('should open basic alert', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('basic');
});
register('should open alert long message', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('longMessage');
});
register('should open alert multiple buttons', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('multipleButtons');
});
register('should open alert no message', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('noMessage');
});
register('should open confirm alert', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('confirm');
});
register('should open prompt alert', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('prompt');
});
register('should open radio alert', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('radio');
});
register('should open checkbox alert', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('checkbox');
});
});
});

2
packages/core/src/components/item-divider/test/standalone/index.html
View File

@ -11,7 +11,7 @@
<body>
<ion-item-divider>
<ion-label>Item Divider</ion-label>
<ion-button slot="end">button</ion-button>
<button slot="end">button</button>
</ion-item-divider>
</body>

4
packages/core/src/components/item/test/standalone/index.html
View File

@ -29,8 +29,8 @@
<ion-item>
<ion-label>Item Button</ion-label>
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
<button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</button>
<button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></button>
</ion-item>
<ion-item>

1
packages/core/src/components/loading/test/basic/index.html
View File

@ -23,6 +23,7 @@
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-loading-controller></ion-loading-controller>
<ion-grid>

12
packages/core/src/components/loading/test/standalone/e2e.js
View File

@ -7,6 +7,13 @@ class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/loading/test/standalone?ionicplatform=${platform}`);
}
async present(buttonId) {
await this.navigate('#basic');
this.driver.findElement(By.id(buttonId)).click();
await this.driver.wait(until.elementLocated(By.css('.loading-wrapper')));
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.loading-wrapper'))));
}
}
platforms.forEach(platform => {
@ -15,5 +22,10 @@ platforms.forEach(platform => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#basic');
});
register('should open loading', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('basic');
});
});
});

27
packages/core/src/components/loading/test/standalone/index.html
View File

@ -9,10 +9,28 @@
</head>
<body>
<ion-button id="basic" expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
<button id="basic" onclick="presentLoading()">Show Loading</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
<ion-loading-controller></ion-loading-controller>
<style>
body > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
<script>
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
@ -23,6 +41,13 @@
});
return await loadingElement.present();
}
async function presentLoadingWithOptions(opts) {
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create(opts);
return await loadingElement.present();
}
</script>
</body>
</html>

30
packages/core/src/components/menu/test/standalone/index.html
View File

@ -51,18 +51,36 @@
<ion-content padding>
<p>
<ion-button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</ion-button>
<ion-button onclick="openRight()">Open right menu</ion-button>
<button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</button>
<button onclick="openRight()">Open right menu</button>
</p>
<p>
<ion-button onclick="setPush()">Set Push</ion-button>
<ion-button onclick="setOverlay()">Set Overlay</ion-button>
<ion-button onclick="setReveal()">Set Reveal</ion-button>
<button onclick="setPush()">Set Push</button>
<button onclick="setOverlay()">Set Overlay</button>
<button onclick="setReveal()">Set Reveal</button>
<ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
<button onclick="setEnabled()">Set Swipe Enabled False</button>
</p>
</ion-content>
</ion-page>
<style>
body {
margin: 0;
}
p > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
</body>
</html>

16
packages/core/src/components/modal/test/standalone/index.html
View File

@ -9,10 +9,24 @@
</head>
<body>
<ion-button id="basic" expand="block" onclick="presentModal()">Present Modal</ion-button>
<button id="basic" onclick="presentModal()">Present Modal</button>
<ion-modal-controller></ion-modal-controller>
<style>
body > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
<script>
async function presentModal() {
const modalController = document.querySelector('ion-modal-controller');

59
packages/core/src/components/popover/test/standalone/index.html
View File

@ -9,10 +9,27 @@
</head>
<body>
<ion-button id="basic" expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
<button id="basic" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</button>
<button onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</button>
<button color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</button>
<button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
<ion-popover-controller></ion-popover-controller>
<style>
body > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
<script>
async function presentPopover(opts) {
const popoverController = document.querySelector('ion-popover-controller');
@ -42,6 +59,46 @@
}
customElements.define('profile-page', ProfilePage);
class ListPage extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
let items = '';
for (var i = 0; i < 30; i++) {
items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
}
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
` + items + `
</ion-list>
</ion-content>
`;
}
}
customElements.define('list-page', ListPage);
class TranslucentPage extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div padding>
<h1>Translucent Popover</h1>
</div>
`;
}
}
customElements.define('translucent-page', TranslucentPage);
</script>
</body>
</html>

1
packages/core/src/components/toast/test/basic/index.html
View File

@ -25,6 +25,7 @@
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
<ion-toast-controller></ion-toast-controller>
<ion-grid>

32
packages/core/src/components/toast/test/standalone/index.html
View File

@ -9,11 +9,34 @@
</head>
<body>
<ion-button id="basic" expand="block" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
<button id="basic" onclick="presentToast('bottom')">Show Toast Bottom</button>
<button onclick="presentToast('top')">Show Toast Top</button>
<button onclick="presentToast('middle')">Show Toast Middle</button>
<button onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</button>
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</button>
<button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</button>
<ion-toast-controller></ion-toast-controller>
<style>
body > button {
display: block;
clear: both;
width: 100%;
padding: 12px 8px;
font-size: 1em;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 8px;
}
</style>
<script>
window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
async function presentToast(position) {
const toastController = document.querySelector('ion-toast-controller');
await toastController.componentOnReady();
@ -24,6 +47,13 @@
});
return await toastElement.present();
}
async function presentToastWithOptions(opts) {
const toastController = document.querySelector('ion-toast-controller');
await toastController.componentOnReady();
const toastElement = await toastController.create(opts);
return await toastElement.present();
}
</script>
</body>
</html>