mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
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:
@@ -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>
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user