From 63848d5df42904d91163aa5757f32dad99e108fc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Nov 2023 10:46:56 -0500 Subject: [PATCH 1/5] test(infinite-scroll): add failing test --- .../test/small-dom-update/index.html | 63 +++++++++++++++++++ .../small-dom-update/infinite-scroll.e2e.ts | 34 ++++++++++ 2 files changed, 97 insertions(+) create mode 100644 core/src/components/infinite-scroll/test/small-dom-update/index.html create mode 100644 core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts diff --git a/core/src/components/infinite-scroll/test/small-dom-update/index.html b/core/src/components/infinite-scroll/test/small-dom-update/index.html new file mode 100644 index 00000000000..39c973172db --- /dev/null +++ b/core/src/components/infinite-scroll/test/small-dom-update/index.html @@ -0,0 +1,63 @@ + + + + + Infinite Scroll - Basic + + + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts b/core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts new file mode 100644 index 00000000000..c76140657d7 --- /dev/null +++ b/core/src/components/infinite-scroll/test/small-dom-update/infinite-scroll.e2e.ts @@ -0,0 +1,34 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('infinite-scroll: appending small amounts to dom'), () => { + test('should load more after remaining in threshold', async ({ page }) => { + await page.goto('/src/components/infinite-scroll/test/small-dom-update', config); + + const ionInfiniteComplete = await page.spyOnEvent('ionInfiniteComplete'); + const content = page.locator('ion-content'); + const items = page.locator('#list .item'); + expect(await items.count()).toBe(30); + + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await ionInfiniteComplete.next(); + + /** + * Even after appending we'll still be within + * the infinite scroll's threshold + */ + expect(await items.count()).toBe(33); + + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await ionInfiniteComplete.next(); + + /** + * Scrolling down again without leaving + * the threshold should still trigger + * infinite scroll again. + */ + expect(await items.count()).toBe(36); + }); + }); +}); From e7155a14c2891e1e0c759464dfae113fe144f0c7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Nov 2023 16:16:08 -0500 Subject: [PATCH 2/5] fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll --- .../components/infinite-scroll/infinite-scroll.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx index 190fab58633..25de713eeb2 100644 --- a/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -12,6 +12,14 @@ export class InfiniteScroll implements ComponentInterface { private thrPx = 0; private thrPc = 0; private scrollEl?: HTMLElement; + + /** + * didFire exists so that ionInfinite + * does not fire multiple times if + * users continue to scroll after + * scrolling into the infinite + * scroll threshold. + */ private didFire = false; private isBusy = false; @@ -127,8 +135,6 @@ export class InfiniteScroll implements ComponentInterface { this.ionInfinite.emit(); return 3; } - } else { - this.didFire = false; } return 4; @@ -190,10 +196,13 @@ export class InfiniteScroll implements ComponentInterface { writeTask(() => { scrollEl.scrollTop = newScrollTop; this.isBusy = false; + this.didFire = false; }); }); }); }); + } else { + this.didFire = false; } } From c9f2b2bd0f2087490681e6e37adee2b7b9a554e8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Nov 2023 16:42:01 -0500 Subject: [PATCH 3/5] test --- core/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 936ca8621f6..27a0f1ab16a 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -1,5 +1,5 @@ # Change Log - +test All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. From c0e88fefc0d28c3f7cb0e438554f56d2b96b1ce8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Nov 2023 16:42:06 -0500 Subject: [PATCH 4/5] Revert "test" This reverts commit c9f2b2bd0f2087490681e6e37adee2b7b9a554e8. --- core/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 27a0f1ab16a..936ca8621f6 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -1,5 +1,5 @@ # Change Log -test + All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. From c40f02c2b2256e452e9e8b78b191bfc3259c966a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 29 Nov 2023 11:56:39 -0500 Subject: [PATCH 5/5] Update core/src/components/infinite-scroll/test/small-dom-update/index.html Co-authored-by: Maria Hutt --- .../components/infinite-scroll/test/small-dom-update/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/infinite-scroll/test/small-dom-update/index.html b/core/src/components/infinite-scroll/test/small-dom-update/index.html index 39c973172db..16a67ae7633 100644 --- a/core/src/components/infinite-scroll/test/small-dom-update/index.html +++ b/core/src/components/infinite-scroll/test/small-dom-update/index.html @@ -2,7 +2,7 @@ - Infinite Scroll - Basic + Infinite Scroll - Small DOM Update