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:
Cam Wiegert
2018-11-06 11:55:34 -06:00
committed by GitHub
parent fda48a0e52
commit 3ecefcbf1e
4 changed files with 44 additions and 4 deletions

View File

@@ -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'
]);

View File

@@ -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>

View File

@@ -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'
]);

View File

@@ -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>