tests(standalone): update standalone overlay tests to remove buttons

having the ion-buttons in the standalone tests was providing button
styles that some of the components needed, we need to make sure they
look good without those styles
This commit is contained in:
Brandy Carney
2018-02-07 13:03:34 -05:00
parent 1495046d4a
commit 0f616338d7
13 changed files with 555 additions and 19 deletions

View File

@@ -23,6 +23,7 @@
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-loading-controller></ion-loading-controller>
<ion-grid>

View File

@@ -7,6 +7,13 @@ class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/loading/test/standalone?ionicplatform=${platform}`);
}
async present(buttonId) {
await this.navigate('#basic');
this.driver.findElement(By.id(buttonId)).click();
await this.driver.wait(until.elementLocated(By.css('.loading-wrapper')));
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.loading-wrapper'))));
}
}
platforms.forEach(platform => {
@@ -15,5 +22,10 @@ platforms.forEach(platform => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#basic');
});
register('should open loading', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('basic');
});
});
});

View File

@@ -9,10 +9,28 @@
</head>
<body>
<ion-button id="basic" expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
<button id="basic" onclick="presentLoading()">Show Loading</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
<ion-loading-controller></ion-loading-controller>
<style>
body > 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>
<script>
async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
@@ -23,6 +41,13 @@
});
return await loadingElement.present();
}
async function presentLoadingWithOptions(opts) {
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create(opts);
return await loadingElement.present();
}
</script>
</body>
</html>