test(infinite-scroll): adding tests for preserve rerender scroll position

Author: ShaneK

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -157,28 +157,35 @@ export class InfiniteScroll implements ComponentInterface {
     return 4;
   };
 
+  /**
+   * Loop through our sibling elements and lock or unlock their min height.
+   * This keeps our siblings, for example `ion-list`, the same height as their
+   * content currently is, so when it loads new data and the DOM removes the old
+   * data, the height of the container doesn't change and we don't lose our scroll position.
+   *
+   * We preserve existing min-height values, if they're set, so we don't erase what
+   * has been previously set by the user when we restore after complete is called.
+   */
   private lockSiblingMinHeight(lock: boolean) {
     if (!this.preserveRerenderScrollPosition) {
       return;
     }
 
     // Loop through all the siblings of the infinite scroll, but ignore the infinite scroll itself
-    const siblings = this.el.parentElement?.children;
-    if (siblings) {
-      for (const sibling of siblings) {
-        if (sibling !== this.el && sibling instanceof HTMLElement) {
-          if (lock) {
-            const elementHeight = sibling.getBoundingClientRect().height;
-            const previousMinHeight = sibling.style.minHeight;
-            if (previousMinHeight) {
-              sibling.style.setProperty('--ion-previous-min-height', previousMinHeight);
-            }
-            sibling.style.minHeight = `${elementHeight}px`;
-          } else {
-            const previousMinHeight = sibling.style.getPropertyValue('--ion-previous-min-height');
-            sibling.style.minHeight = previousMinHeight || 'auto';
-            sibling.style.removeProperty('--ion-previous-min-height');
+    const siblings = this.el.parentElement?.children || [];
+    for (const sibling of siblings) {
+      if (sibling !== this.el && sibling instanceof HTMLElement) {
+        if (lock) {
+          const elementHeight = sibling.getBoundingClientRect().height;
+          const previousMinHeight = sibling.style.minHeight;
+          if (previousMinHeight) {
+            sibling.style.setProperty('--ion-previous-min-height', previousMinHeight);
           }
+          sibling.style.minHeight = `${elementHeight}px`;
+        } else {
+          const previousMinHeight = sibling.style.getPropertyValue('--ion-previous-min-height');
+          sibling.style.minHeight = previousMinHeight || 'auto';
+          sibling.style.removeProperty('--ion-previous-min-height');
         }
       }
     }

core/src/components/infinite-scroll/test/item-replacement/index.html renamed to core/src/components/infinite-scroll/test/preserve-rerender-scroll-position/index.html

@@ -0,0 +1,33 @@
+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: preserve rerender scroll position'), () => {
+    test('should load more items when scrolled to the bottom', async ({ page }) => {
+      await page.goto('/src/components/infinite-scroll/test/preserve-rerender-scroll-position', config);
+
+      const ionInfiniteComplete = await page.spyOnEvent('ionInfiniteComplete');
+      const content = page.locator('ion-content');
+      const items = page.locator('ion-item');
+      const innerScroll = page.locator('.inner-scroll');
+      expect(await items.count()).toBe(30);
+
+      let previousScrollTop = 0;
+      for (let i = 0; i < 10; i++) {
+        await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+        const currentScrollTop = await innerScroll.evaluate((el: HTMLIonContentElement) => el.scrollTop);
+        expect(currentScrollTop).toBeGreaterThan(previousScrollTop);
+        await ionInfiniteComplete.next();
+        const newScrollTop = await innerScroll.evaluate((el: HTMLIonContentElement) => el.scrollTop);
+        console.log(`Scroll position should be preserved after ${i + 1} iterations`, newScrollTop, previousScrollTop);
+        expect(newScrollTop, `Scroll position should be preserved after ${i + 1} iterations`).toBeGreaterThanOrEqual(previousScrollTop);
+        previousScrollTop = currentScrollTop;
+
+        // Timeout to allow the browser to catch up.
+        // For some reason, without this, the scroll top gets reset to 0. Adding this
+        // prevents that, which implies it's an issue with Playwright, not the feature.
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+    });
+  });
+});