mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Cam Wiegert
@@ -1,24 +0,0 @@
|
||||
'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/menu/test/basic?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('menu/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#left');
|
||||
});
|
||||
|
||||
register('should Open start menu', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.present('#left', { waitFor: '.menu-inner' });
|
||||
});
|
||||
});
|
||||
});
|
||||
29
core/src/components/menu/test/basic/e2e.ts
Normal file
29
core/src/components/menu/test/basic/e2e.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('menu: basic', async () => {
|
||||
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/menu/test/basic?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const start = await page.find('ion-menu[side="start"]');
|
||||
expect(start).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-start'
|
||||
]);
|
||||
|
||||
await start.callMethod('open');
|
||||
expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
|
||||
await start.callMethod('close');
|
||||
|
||||
const end = await page.find('ion-menu[side="end"]');
|
||||
expect(end).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-end'
|
||||
]);
|
||||
|
||||
await end.callMethod('open');
|
||||
expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
|
||||
});
|
||||
@@ -8,168 +8,54 @@
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" href="/css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="/scripts/testing/styles.css">
|
||||
|
||||
<style>
|
||||
.f {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<ion-menu side="start" class="e2eLeftMenu">
|
||||
|
||||
<ion-menu side="start">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
<ion-toolbar>
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item button onclick="openEnd()">Open end Menu</ion-item>
|
||||
<ion-item button onclick="createModal()">Open Modal</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hola</ion-title>
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
hola macho
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" main>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<ion-button id="left" onclick="openStart()">Open start menu</ion-button>
|
||||
<ion-button onclick="openEnd()">Open end menu</ion-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>
|
||||
|
||||
<ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
|
||||
</p>
|
||||
|
||||
<div class="f"></div>
|
||||
<div class="f"></div>
|
||||
<div class="f"></div>
|
||||
<div class="f"></div>
|
||||
<div class="f"></div>
|
||||
<div class="f"></div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
|
||||
<script>
|
||||
const menu = document.querySelector('ion-menu-controller');
|
||||
start();
|
||||
|
||||
async function start() {
|
||||
await menu.componentOnReady();
|
||||
menu.open('start');
|
||||
}
|
||||
|
||||
function openStart() {
|
||||
console.log('Open start menu');
|
||||
menu.open('start');
|
||||
}
|
||||
function openEnd() {
|
||||
console.log('Open end menu');
|
||||
menu.open('end');
|
||||
}
|
||||
async function setPush() {
|
||||
(await menu.get('start')).type = 'push';
|
||||
(await menu.get('end')).type = 'push';
|
||||
}
|
||||
async function setOverlay() {
|
||||
(await menu.get('start')).type = 'overlay';
|
||||
(await menu.get('end')).type = 'overlay';
|
||||
}
|
||||
async function setReveal() {
|
||||
(await menu.get('start')).type = 'reveal';
|
||||
(await menu.get('end')).type = 'reveal';
|
||||
}
|
||||
async function setEnabled() {
|
||||
(await menu.get('start')).swipeGesture = false;
|
||||
}
|
||||
|
||||
async function createModal() {
|
||||
// initialize controller
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
|
||||
// create component to open
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Super Modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<h1>Content of doom</h1>
|
||||
<div>Here's some more content</div>
|
||||
<ion-button class="dismiss">Dismiss Modal</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
// listen for close event
|
||||
const button = element.querySelector('ion-button');
|
||||
button.addEventListener('click', () => {
|
||||
modalController.dismiss();
|
||||
});
|
||||
|
||||
// present the modal
|
||||
const modalElement = await modalController.create({
|
||||
component: element
|
||||
});
|
||||
await modalElement.present();
|
||||
return modalElement;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('menu', () => {
|
||||
|
||||
it('should open menu', async () => {
|
||||
// create a new e2e test page
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<ion-app>
|
||||
<ion-menu type="overlay">
|
||||
<ion-content>Content</ion-content>
|
||||
</ion-menu>
|
||||
<div main></div>
|
||||
</ion-app>
|
||||
`
|
||||
});
|
||||
|
||||
const menu = await page.find('ion-menu');
|
||||
|
||||
expect(menu).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-start',
|
||||
]);
|
||||
|
||||
await menu.callMethod('open', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(menu).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-start',
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
'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/menu/test/standalone?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('menu/standalone', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('.ion-page');
|
||||
});
|
||||
});
|
||||
});
|
||||
29
core/src/components/menu/test/standalone/e2e.ts
Normal file
29
core/src/components/menu/test/standalone/e2e.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('menu: standalone', async () => {
|
||||
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/menu/test/standalone?ionic:_testing=true'
|
||||
});
|
||||
|
||||
const start = await page.find('ion-menu[side="start"]');
|
||||
expect(start).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-start'
|
||||
]);
|
||||
|
||||
await start.callMethod('open');
|
||||
expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
|
||||
await start.callMethod('close');
|
||||
|
||||
const end = await page.find('ion-menu[side="end"]');
|
||||
expect(end).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-enabled',
|
||||
'menu-side-end'
|
||||
]);
|
||||
|
||||
await end.callMethod('open');
|
||||
expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
|
||||
});
|
||||
@@ -4,84 +4,56 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Menu - Standalone</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, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" href="/css/core.css">
|
||||
<link rel="stylesheet" href="/css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="/scripts/testing/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-menu side="start">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-menu side="start">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Start Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Open end Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
<ion-item>Close Menu</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
<ion-menu side="end">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>End Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
<div class="ion-page" main>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu - Standalone</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
</div>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" main>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu - Standalone</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<button class="e2eOpenLeftMenu" onclick="openStart()">Open start menu</button>
|
||||
<button onclick="openEnd()">Open end menu</button>
|
||||
</p>
|
||||
<p>
|
||||
<button onclick="setPush()">Set Push</button>
|
||||
<button onclick="setOverlay()">Set Overlay</button>
|
||||
<button onclick="setReveal()">Set Reveal</button>
|
||||
|
||||
<button onclick="setEnabled()">Set Swipe Enabled False</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user