mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
@ -1,4 +1,5 @@
|
||||
import { E2EPage, newE2EPage } from '@stencil/core/testing';
|
||||
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.
|
||||
@ -11,13 +12,12 @@ const scrollIonContentPage = async (page: E2EPage) => {
|
||||
|
||||
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();
|
||||
@ -25,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');
|
||||
@ -41,7 +40,5 @@ describe('infinite-scroll: basic', () => {
|
||||
|
||||
expect(updatedItems.length).toBe(60);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -1,79 +1,72 @@
|
||||
<!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-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
|
||||
|
||||
<ion-list id="list"></ion-list>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Infinite Scroll - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<ion-content class="ion-padding" id="content">
|
||||
<script>
|
||||
const list = document.getElementById('list');
|
||||
const infiniteScroll = document.getElementById('infinite-scroll');
|
||||
|
||||
<ion-button onclick="toggleInfiniteScroll()" expand="block">
|
||||
Toggle InfiniteScroll
|
||||
</ion-button>
|
||||
|
||||
<ion-list id="list"></ion-list>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</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 () {
|
||||
await wait(500);
|
||||
infiniteScroll.complete();
|
||||
appendItems();
|
||||
// Custom event consumed in the e2e tests
|
||||
document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
|
||||
});
|
||||
|
||||
function appendItems() {
|
||||
for (var i = 0; i < 30; i++) {
|
||||
const el = document.createElement('ion-item');
|
||||
el.textContent = `${1 + i}`;
|
||||
list.appendChild(el);
|
||||
function toggleInfiniteScroll() {
|
||||
infiniteScroll.disabled = !infiniteScroll.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
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,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();
|
||||
|
@ -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,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();
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user