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

test(infinite-scroll): scroll threshold (#24902)

Browse Source
This commit is contained in:
Sean Perkins
2022-03-09 10:31:10 -05:00
committed by GitHub
parent 11a5edfd9d
commit b193b83c7c
3 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,49 @@
import { 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.
* Waits for the custom event to complete.
*/
async function scrollIonContentPage(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'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
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'
});
const initialItems = await page.findAll('ion-item');
expect(initialItems.length).toBe(30);
await scrollIonContentPage(page);
const updatedItems = await page.findAll('ion-item');
expect(updatedItems.length).toBe(60);
});
test('infinite-scroll: basic', async () => {
const page = await newE2EPage({
url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
}); });
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
}); });

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

@ -4,12 +4,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Infinite Scroll - Basic</title> <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"> <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="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body> <body>
<ion-app> <ion-app>
@ -35,8 +37,6 @@
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
</ion-app> </ion-app>
<script> <script>
@ -48,12 +48,11 @@
} }
infiniteScroll.addEventListener('ionInfinite', async function () { infiniteScroll.addEventListener('ionInfinite', async function () {
console.log('Loading data...');
await wait(500); await wait(500);
infiniteScroll.complete(); infiniteScroll.complete();
appendItems(); appendItems();
// Custom event consumed in the e2e tests
console.log('Done'); document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
}); });
function appendItems() { function appendItems() {

10
core/src/utils/test/utils.ts
View File

@ -61,11 +61,11 @@ export const getElementProperty = async (element: any, property: string): Promis
*/ */
export const listenForEvent = async (page: any, eventType: string, element: any, callbackName: string): Promise<any> => { export const listenForEvent = async (page: any, eventType: string, element: any, callbackName: string): Promise<any> => {
try { try {
return await page.evaluate((scopeEventType: string, scopeElement: any, scopeCallbackName: string) => { return await page.evaluate((scopeEventType: string, scopeElement: any, scopeCallbackName: string) => {
scopeElement.addEventListener(scopeEventType, (e: any) => { scopeElement.addEventListener(scopeEventType, (e: any) => {
(window as any)[scopeCallbackName]({ detail: e.detail }); (window as any)[scopeCallbackName]({ detail: e.detail });
}); });
}, eventType, element, callbackName); }, eventType, element, callbackName);
} catch (err) { } catch (err) {
throw err; throw err;
} }