javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): sync feature-6.1 with main

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-04 15:27:16 -04:00
parent f5cb1f8444 83186598ed
commit 083a31acdc
940 changed files with 79771 additions and 96056 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/infinite-scroll/test/basic/e2e.ts
View File

@ -1,25 +1,23 @@
import { newE2EPage } from '@stencil/core/testing';
import type { E2EPage } from '@stencil/core/testing';
/**
* Scrolls an `ion-content` element to the bottom, triggering the `ionInfinite` event.
* Waits for the custom event to complete.
*/
async function scrollIonContentPage(page: E2EPage) {
const scrollIonContentPage = async (page: E2EPage) => {
const content = await page.find('ion-content');
await content.callMethod('scrollToBottom');
await page.waitForChanges();
const ev = await page.spyOnEvent('ionInfiniteComplete', 'document');
await ev.next();
}
};
describe('infinite-scroll: basic', () => {
it('should match existing visual screenshots', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
});
const compare = await page.compareScreenshot();
@ -27,10 +25,9 @@ describe('infinite-scroll: basic', () => {
});
describe('when enabled', () => {
it('should load more items when scrolled to the bottom', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
});
const initialItems = await page.findAll('ion-item');
@ -43,7 +40,5 @@ describe('infinite-scroll: basic', () => {
expect(updatedItems.length).toBe(60);
});
});
});

33
core/src/components/infinite-scroll/test/basic/index.html
View File

@ -60,19 +60,32 @@
el.textContent = `${1 + i}`;
list.appendChild(el);
}
}
function wait(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
infiniteScroll.addEventListener('ionInfinite', async function () {
await wait(500);
infiniteScroll.complete();
appendItems();
// Custom event consumed in the e2e tests
document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
});
}
appendItems();
function appendItems() {
for (var i = 0; i < 30; i++) {
const el = document.createElement('ion-item');
el.textContent = `${1 + i}`;
list.appendChild(el);
}
}
</script>
</body>
function wait(time) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, time);
});
}
appendItems();
</script>
</body>
</html>

2
core/src/components/infinite-scroll/test/standalone/e2e.ts
View File

@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
test('infinite-scroll: standalone', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/standalone?ionic:_testing=true'
url: '/src/components/infinite-scroll/test/standalone?ionic:_testing=true',
});
const compare = await page.compareScreenshot();

117
core/src/components/infinite-scroll/test/standalone/index.html
View File

@ -1,69 +1,68 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Infinite Scroll - Standalone</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/core.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-content id="content">
<ion-list id="list"> </ion-list>
<body>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<ion-content id="content">
<ion-list id="list"> </ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );
}
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
infiniteScroll.addEventListener('ionInfinite', async function() {
console.log('Loading data...');
const data = await getAsyncData();
items = items.concat(data);
infiniteScroll.complete();
render();
console.log('Done');
});
function render() {
let html = '';
for(let item of items) {
html += `<ion-item>${item}</ion-item>`;
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push(i + 1);
}
list.innerHTML = html;
}
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
function getAsyncData() {
// async return mock data
return new Promise(resolve => {
setTimeout(() => {
let data = [];
for (var i = 0; i < 30; i++) {
data.push(i);
}
resolve(data);
}, 500);
infiniteScroll.addEventListener('ionInfinite', async function () {
console.log('Loading data...');
const data = await getAsyncData();
items = items.concat(data);
infiniteScroll.complete();
render();
console.log('Done');
});
}
render();
</script>
</body>
function render() {
let html = '';
for (let item of items) {
html += `<ion-item>${item}</ion-item>`;
}
list.innerHTML = html;
}
function getAsyncData() {
// async return mock data
return new Promise((resolve) => {
setTimeout(() => {
let data = [];
for (var i = 0; i < 30; i++) {
data.push(i);
}
resolve(data);
}, 500);
});
}
render();
</script>
</body>
</html>

2
core/src/components/infinite-scroll/test/top/e2e.ts
View File

@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
test('infinite-scroll: basic', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
});
const compare = await page.compareScreenshot();

122
core/src/components/infinite-scroll/test/top/index.html
View File

@ -1,79 +1,73 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Infinite Scroll - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<head>
<meta charset="UTF-8">
<title>Infinite Scroll - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Basic</ion-title>
</ion-toolbar>
</ion-header>
<body>
<ion-app>
<ion-content class="ion-padding" id="content">
<ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
<ion-header>
<ion-toolbar>
<ion-title>Infinite Scroll - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-list id="list"></ion-list>
</ion-content>
</ion-app>
<ion-content class="ion-padding" id="content">
<script>
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
<ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-button onclick="toggleInfiniteScroll()" expand="block">
Toggle InfiniteScroll
</ion-button>
<ion-list id="list"></ion-list>
</ion-content>
</ion-app>
<script>
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
infiniteScroll.addEventListener('ionInfinite', async function () {
console.log('Loading data...');
await wait(500);
infiniteScroll.complete();
appendItems();
console.log('Done');
});
function appendItems() {
for (var i = 0; i < 30; i++) {
const el = document.createElement('ion-item');
el.textContent = `${1 + i}`;
list.prepend(el);
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
}
function wait(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
infiniteScroll.addEventListener('ionInfinite', async function () {
console.log('Loading data...');
await wait(500);
infiniteScroll.complete();
appendItems();
console.log('Done');
});
}
appendItems();
function appendItems() {
for (var i = 0; i < 30; i++) {
const el = document.createElement('ion-item');
el.textContent = `${1 + i}`;
list.prepend(el);
}
}
</script>
</body>
function wait(time) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, time);
});
}
appendItems();
</script>
</body>
</html>