test(menu-button): add a standalone test with menu buttons

references #14853
This commit is contained in:
Brandy Carney
2018-10-11 16:20:42 -05:00
parent 0e3ade60f6
commit a7fae3bf1f
4 changed files with 53 additions and 3 deletions

View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
it('menu-button: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/menu-button/test/standalone?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Menu Button - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/core.css">
<link rel="stylesheet" type="text/css" href="/scripts/screenshot/testing.css">
</head>
<body>
<h1>Default</h1>
<ion-menu-button auto-hide="false"></ion-menu-button>
<h1>Custom</h1>
<ion-menu-button auto-hide="false" class="custom"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
<h1>Colors</h1>
<ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="tertiary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="success"></ion-menu-button>
<ion-menu-button auto-hide="false" color="warning"></ion-menu-button>
<ion-menu-button auto-hide="false" color="danger"></ion-menu-button>
<ion-menu-button auto-hide="false" color="light"></ion-menu-button>
<ion-menu-button auto-hide="false" color="medium"></ion-menu-button>
<ion-menu-button auto-hide="false" color="dark"></ion-menu-button>
<style>
ion-menu-button {
display: inline-block;
}
.custom {
--color: hotpink;
}
</style>
</body>
</html>