Enable e2e for Mobile Safari

e2e/VList.ios.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from "@playwright/test";
+import {
+  storyUrl,
+  scrollableSelector,
+  getLastItem,
+  scrollWithTouch,
+  getScrollTop,
+} from "./utils";
+
+test.describe("check if scroll jump compensation in iOS WebKit works", () => {
+  test("reverse scroll", async ({ page }) => {
+    await page.goto(storyUrl("basics-vlist--reverse"));
+
+    const component = await page.waitForSelector(scrollableSelector);
+    await component.waitForElementState("stable");
+
+    // check if last is displayed
+    const last = await getLastItem(component);
+    await expect(last.text).toEqual("999");
+    await expect(last.bottom).toBeLessThanOrEqual(1); // FIXME: may not be 0 in Safari
+
+    await component.tap();
+
+    const [w, h] = await page.evaluate(() => [
+      window.outerWidth,
+      window.outerHeight,
+    ]);
+    const centerX = w / 2;
+    const centerY = h / 2;
+
+    let top: number = await getScrollTop(component);
+    for (let i = 0; i < 10; i++) {
+      await scrollWithTouch(component, {
+        fromX: centerX,
+        fromY: centerY - h / 8,
+        toX: centerX,
+        toY: centerY + h / 8,
+      });
+
+      // wait flush
+      const [nextTopBeforeFlush /* nextLastItemBeforeFlush */] =
+        await Promise.all([
+          getScrollTop(component),
+          // getLastItem(component),
+        ]);
+      await page.waitForTimeout(300);
+      const [nextTop /* nextLastItem */] = await Promise.all([
+        getScrollTop(component),
+        // getLastItem(component),
+      ]);
+
+      expect(nextTop).toBeLessThan(top);
+      expect(nextTop).not.toBe(nextTopBeforeFlush);
+      // expect(nextLastItem).toEqual(nextLastItemBeforeFlush);
+
+      top = nextTop;
+    }
+  });
+
+  // TODO momentum scroll
+
+  // TODO shift/unshift
+
+  // TODO display none
+});

e2e/utils.ts

@@ -184,3 +184,89 @@ export const windowScrollToRight = async (
   });
   await scrollable.waitForElementState("stable");
 };
+
+export const scrollWithTouch = (
+  scrollable: ElementHandle<HTMLElement | SVGElement>,
+  target: { fromX: number; toX: number; fromY: number; toY: number }
+) => {
+  return scrollable.evaluate(
+    async (e, [fromX, toX, fromY, toY]) => {
+      e.addEventListener(
+        "touchstart",
+        () => {
+          e.dispatchEvent(
+            new TouchEvent(
+              "touchmove"
+              //  {
+              //   bubbles: true,
+              //   cancelable: true,
+              //   composed: true,
+              //   touches: [
+              //     new Touch({
+              //       identifier: 1,
+              //       target: e,
+              //       clientX: fromX,
+              //       clientY: fromY,
+              //     }),
+              //   ],
+              // }
+            )
+          );
+          e.scrollTop += fromY - toY;
+          e.scrollLeft += fromX - toX;
+        },
+        { once: true, passive: true }
+      );
+
+      e.addEventListener(
+        "scroll",
+        () => {
+          e.dispatchEvent(
+            new TouchEvent(
+              "touchend"
+              //  {
+              //   bubbles: true,
+              //   cancelable: true,
+              //   composed: true,
+              //   touches: [],
+              // }
+            )
+          );
+        },
+        { once: true, passive: true }
+      );
+
+      let resolve: () => void;
+      const touchEnded = new Promise<void>((r) => (resolve = r));
+      e.addEventListener(
+        "touchend",
+        () => {
+          resolve();
+        },
+        { once: true, passive: true }
+      );
+
+      e.dispatchEvent(
+        new TouchEvent(
+          "touchstart"
+          // {
+          //   bubbles: true,
+          //   cancelable: true,
+          //   composed: true,
+          //   touches: [
+          //     new Touch({
+          //       identifier: 1,
+          //       target: e,
+          //       clientX: fromX,
+          //       clientY: fromY,
+          //     }),
+          //   ],
+          // }
+        )
+      );
+
+      await touchEnded;
+    },
+    [target.fromX, target.toX, target.fromY, target.toY]
+  );
+};

playwright.config.ts

@@ -6,6 +6,8 @@ import { defineConfig, devices } from "@playwright/test";
  */
 // require('dotenv').config();
 
+const IOS_SPECS = /.ios.spec.ts$/;
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -35,27 +37,31 @@ export default defineConfig({
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
+      testIgnore: IOS_SPECS,
     },
 
     {
       name: "firefox",
       use: { ...devices["Desktop Firefox"] },
+      testIgnore: IOS_SPECS,
     },
 
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] },
+      testIgnore: IOS_SPECS,
     },
 
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
     //   use: { ...devices['Pixel 5'] },
     // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 13"] },
+      testMatch: IOS_SPECS,
+    },
 
     /* Test against branded browsers. */
     // {