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

test(action-sheet): update e2e screenshots

Browse Source
This commit is contained in:
Adam Bradley
2018-09-20 13:48:41 -05:00
parent f0e95c477a
commit e9800fc66d
17 changed files with 709 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts Normal file
View File

@ -0,0 +1,34 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: alertFromActionSheet', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/alert-from-action-sheet?ionic:animate=false`
});
const presentBtn = await page.find('#alertFromActionSheet');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
let compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const openAlertBtn = await page.find({ text: 'Open Alert' });
await openAlertBtn.click();
const alert = await page.find('ion-alert');
await alert.waitForVisible();
compare = await page.compareScreenshot(`alert open`);
expect(compare).toMatchScreenshot();
const alertOkayBtn = await page.find({ contains: 'Okay' });
await alertOkayBtn.click();
await Promise.all([
alert.waitForNotVisible(),
actionSheet.waitForNotVisible()
]);
});

68
core/src/components/action-sheet/test/alert-from-action-sheet/index.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Alert From Action Sheet</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Alert From Action Sheet</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
</ion-content>
</ion-app>
<script>
async function presentAlert() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
buttons: [{
text: 'Open Alert',
handler: async () => {
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();
const alert = await alertController.create({
header: 'Alert from Action Sheet',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: [{
text: 'Okay',
handler: async () => {
await actionSheetElement.dismiss();
}
}]
});
await alert.present();
return false;
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheetElement.present();
}
</script>
</body>
</html>

67
core/src/components/action-sheet/test/basic/e2e.js
View File

@ -1,67 +0,0 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { Page, platforms, register } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/action-sheet/test/basic?ionic:mode=${platform}`);
}
async present(buttonId) {
await this.navigate('#basic');
this.driver.findElement(By.id(buttonId)).click();
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 => {
describe('action-sheet/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#basic');
});
register('should open action sheet', driver => {
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');
});
});
});

30
core/src/components/action-sheet/test/basic/e2e.ts Normal file
View File

@ -0,0 +1,30 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: basic', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/basic?ionic:animate=false`
});
let compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const presentBtn = await page.find('#basic');
await presentBtn.click();
let actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
compare = await page.compareScreenshot(`presented`);
expect(compare).toMatchScreenshot();
const backdrop = await page.find('ion-backdrop');
await backdrop.click();
await actionSheet.waitForNotVisible();
compare = await page.compareScreenshot(`dismissed`);
expect(compare).toMatchScreenshot();
actionSheet = await page.find('ion-action-sheet');
expect(actionSheet).toBe(null);
});

298
core/src/components/action-sheet/test/basic/index.html
View File

@ -22,26 +22,8 @@
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 40px;
}
.my-custom-class {
--max-width: 300px;
}
</style>
</ion-app>
<script>
@ -90,286 +72,6 @@
});
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({
header: "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',
role: 'selected',
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({
backdropDismiss: false,
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({
header: "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>

16
core/src/components/action-sheet/test/cancel-only/e2e.ts Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: cancelOnly', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/cancel-only?ionic:animate=false`
});
const presentBtn = await page.find('#cancelOnly');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

50
core/src/components/action-sheet/test/cancel-only/index.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Cancel Only</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Cancel Only</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
</ion-content>
</ion-app>
<script>
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();
}
</script>
</body>
</html>

16
core/src/components/action-sheet/test/custom-css/e2e.ts Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: cssClass', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/custom-css?ionic:animate=false`
});
const presentBtn = await page.find('#cssClass');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

64
core/src/components/action-sheet/test/custom-css/index.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Custom CSS Class</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Custom CSS Class</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 40px;
}
.my-custom-class {
--max-width: 300px;
}
</style>
</ion-app>
<script>
async function presentWithCssClass() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
header: "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>

16
core/src/components/action-sheet/test/icons/e2e.ts Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: icons', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/icons?ionic:animate=false`
});
const presentBtn = await page.find('#icons');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

77
core/src/components/action-sheet/test/icons/index.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Icons</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Icons</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
</ion-content>
</ion-app>
<script>
async function presentIcons() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
header: "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',
role: 'selected',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
icon: 'close',
handler: () => {
console.log('Cancel clicked');
}
}]
})
await actionSheetElement.present();
}
</script>
</body>
</html>

33
core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts Normal file
View File

@ -0,0 +1,33 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: noBackdropDismiss', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/no-backdrop-dismiss?ionic:animate=false`
});
const presentBtn = await page.find('#noBackdropDismiss');
await presentBtn.click();
let actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
let compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const backdrop = await page.find('ion-backdrop');
await backdrop.click();
compare = await page.compareScreenshot(`dismissed`);
expect(compare).toMatchScreenshot();
const isVisible = await actionSheet.isVisible();
expect(isVisible).toBe(true);
const cancel = await page.find('.action-sheet-cancel');
await cancel.click();
await actionSheet.waitForNotVisible();
actionSheet = await page.find('ion-action-sheet');
expect(actionSheet).toBe(null);
});

59
core/src/components/action-sheet/test/no-backdrop-dismiss/index.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - No Backdrop Dismiss</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - No Backdrop Dismiss</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
</ion-content>
</ion-app>
<script>
async function presentNoBackdropDismiss() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
backdropDismiss: false,
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();
}
</script>
</body>
</html>

16
core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: scrollWithoutCancel', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/scroll-without-cancel?ionic:animate=false`
});
const presentBtn = await page.find('#scrollWithoutCancel');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

104
core/src/components/action-sheet/test/scroll-without-cancel/index.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Scroll Without Cancel</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Scroll Without Cancel</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
</ion-content>
</ion-app>
<script>
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();
}
</script>
</body>
</html>

16
core/src/components/action-sheet/test/scrollable-options/e2e.ts Normal file
View File

@ -0,0 +1,16 @@
import { newE2EPage } from '@stencil/core/testing';
it('action-sheet: scrollableOptions', async () => {
const page = await newE2EPage({
url: `/src/components/action-sheet/test/scrollable-options?ionic:animate=false`
});
const presentBtn = await page.find('#scrollableOptions');
await presentBtn.click();
const actionSheet = await page.find('ion-action-sheet');
await actionSheet.waitForVisible();
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

110
core/src/components/action-sheet/test/scrollable-options/index.html Normal file
View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Action Sheet - Scrollable Options</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>
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Scrollable Options</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
</ion-content>
</ion-app>
<script>
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();
}
</script>
</body>
</html>