From b193b83c7c498522beddbbde1e982e062c75b28e Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 9 Mar 2022 10:31:10 -0500 Subject: [PATCH] test(infinite-scroll): scroll threshold (#24902) --- .../infinite-scroll/test/basic/e2e.ts | 49 +++++++++++++++++-- .../infinite-scroll/test/basic/index.html | 13 +++-- core/src/utils/test/utils.ts | 10 ++-- 3 files changed, 55 insertions(+), 17 deletions(-) diff --git a/core/src/components/infinite-scroll/test/basic/e2e.ts b/core/src/components/infinite-scroll/test/basic/e2e.ts index c406cf961b..e3b0c22ecc 100644 --- a/core/src/components/infinite-scroll/test/basic/e2e.ts +++ b/core/src/components/infinite-scroll/test/basic/e2e.ts @@ -1,10 +1,49 @@ 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(); }); diff --git a/core/src/components/infinite-scroll/test/basic/index.html b/core/src/components/infinite-scroll/test/basic/index.html index 53e7f3700b..113f39a45c 100644 --- a/core/src/components/infinite-scroll/test/basic/index.html +++ b/core/src/components/infinite-scroll/test/basic/index.html @@ -4,12 +4,14 @@ Infinite Scroll - Basic - + - + + @@ -35,8 +37,6 @@ - -