mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(menu): add buttons and test push type (#16247)
- Augments the menu component's tests to include buttons for non-automated usage - Uses the push type for one of the menus.
This commit is contained in:
@@ -19,7 +19,7 @@ test('menu: basic', async () => {
|
||||
|
||||
const end = await page.find('ion-menu[side="end"]');
|
||||
expect(end).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-type-push',
|
||||
'menu-enabled',
|
||||
'menu-side-end'
|
||||
]);
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end">
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>End Menu</ion-title>
|
||||
@@ -52,10 +52,26 @@
|
||||
<ion-title>Menu - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<ion-button expand="block" onclick="openStart()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
|
||||
<script>
|
||||
function openStart() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('start');
|
||||
}
|
||||
|
||||
function openEnd() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('end');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -19,7 +19,7 @@ test('menu: standalone', async () => {
|
||||
|
||||
const end = await page.find('ion-menu[side="end"]');
|
||||
expect(end).toHaveClasses([
|
||||
'menu-type-overlay',
|
||||
'menu-type-push',
|
||||
'menu-enabled',
|
||||
'menu-side-end'
|
||||
]);
|
||||
|
||||
@@ -8,6 +8,14 @@
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
<style>
|
||||
.ion-page ion-content {
|
||||
--padding-top: 16px;
|
||||
--padding-end: 16px;
|
||||
--padding-bottom: 16px;
|
||||
--padding-start: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -28,7 +36,7 @@
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end">
|
||||
<ion-menu side="end" type="push">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>End Menu</ion-title>
|
||||
@@ -51,9 +59,25 @@
|
||||
<ion-title>Menu - Standalone</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-button expand="block" onclick="openStart()">Open Start Menu</ion-button>
|
||||
<ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
|
||||
</ion-content>
|
||||
</div>
|
||||
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
|
||||
<script>
|
||||
function openStart() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('start');
|
||||
}
|
||||
|
||||
function openEnd() {
|
||||
document.querySelector('ion-menu-controller')
|
||||
.open('end');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user