javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(loading): use loading overlay inline (#26153)

Browse Source
This commit is contained in:
Sean Perkins
2022-10-24 16:49:17 -04:00
committed by GitHub
parent d1fb7b039b
commit 34ca337b8a
13 changed files with 536 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
core/src/components/loading/test/isOpen/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Loading - isOpen</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.grid-item {
margin: 0 auto;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Loading - isOpen</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Default</h2>
<ion-button id="default" onclick="openLoading()">Open Loading</ion-button>
</div>
<div class="grid-item">
<h2>Open, then close after 500ms</h2>
<ion-button id="timeout" onclick="openLoading(500)">Open Loading</ion-button>
</div>
</div>
<ion-loading message="Hello world"></ion-loading>
</ion-content>
</ion-app>
<script>
const loading = document.querySelector('ion-loading');
const openLoading = (timeout) => {
loading.isOpen = true;
if (timeout) {
setTimeout(() => {
loading.isOpen = false;
}, timeout);
}
};
loading.addEventListener('ionLoadingDidDismiss', () => {
loading.isOpen = false;
});
</script>
</body>
</html>

30
core/src/components/loading/test/isOpen/loading.e2e.ts Normal file
View File

@@ -0,0 +1,30 @@
import { test } from '@utils/test/playwright';
test.describe('loading: isOpen', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl('isOpen does not behave differently in RTL');
skip.mode('md', 'isOpen does not behave differently in MD');
await page.goto('/src/components/loading/test/isOpen');
});
test('should open the loading indicator', async ({ page }) => {
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
await page.click('#default');
await ionLoadingDidPresent.next();
await page.waitForSelector('ion-loading', { state: 'visible' });
});
test('should open the loading indicator then close after a timeout', async ({ page }) => {
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
await page.click('#timeout');
await ionLoadingDidPresent.next();
await page.waitForSelector('ion-loading', { state: 'visible' });
await ionLoadingDidDismiss.next();
await page.waitForSelector('ion-loading', { state: 'hidden' });
});
});

71
core/src/components/loading/test/trigger/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Loading - trigger</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
}
.grid-item {
margin: 0 auto;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
margin-left: 5px;
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Loading - trigger</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Default</h2>
<ion-button id="default">Open Loading</ion-button>
</div>
<div class="grid-item">
<h2>Open, then close after 500ms</h2>
<ion-button id="timeout">Open Loading</ion-button>
</div>
</div>
<ion-loading id="default-loading" trigger="default" message="Hello world"></ion-loading>
<ion-loading id="timeout-loading" trigger="timeout" message="Hello world"></ion-loading>
</ion-content>
</ion-app>
<script>
const loadingTimeout = document.getElementById('timeout-loading');
loadingTimeout.addEventListener('didPresent', () => {
setTimeout(() => {
loadingTimeout.dismiss();
}, 500);
});
</script>
</body>
</html>

31
core/src/components/loading/test/trigger/loading.e2e.ts Normal file
View File

@@ -0,0 +1,31 @@
import { test } from '@utils/test/playwright';
test.describe('loading: trigger', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl('trigger does not behave differently in RTL');
skip.mode('md');
await page.goto('/src/components/loading/test/trigger');
});
test('should open the loading indicator', async ({ page }) => {
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
await page.click('#default');
await ionLoadingDidPresent.next();
await page.waitForSelector('#default-loading', { state: 'visible' });
});
test('should present a previously presented loading indicator', async ({ page }) => {
const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
await page.click('#timeout');
await ionLoadingDidDismiss.next();
await page.click('#timeout');
await ionLoadingDidPresent.next();
await page.waitForSelector('#timeout-loading', { state: 'visible' });
});
});