test(drag-element, item-sliding): prevent full swipe (#31097)

Issue number: resolves internal

Co-authored-by: Shane <shane@shanessite.net>

Author: thetaPC

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -1,6 +1,12 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
+import {
+  DRAG_DISTANCE_SINGLE_OPTION,
+  DRAG_DISTANCE_MULTIPLE_OPTIONS,
+  DRAG_STEPS_UNDER_FULL_SWIPE,
+} from '../test.utils';
+
 /**
  * item-sliding doesn't have mode-specific styling,
  * but the child components, item-options and item-option, do.
@@ -23,9 +29,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
          * Positive dragByX value to drag element from the left to the right
          * to reveal the options on the left side.
          */
-        const dragByX = config.direction === 'rtl' ? -100 : 100;
+        const dragByX = config.direction === 'rtl' ? -DRAG_DISTANCE_SINGLE_OPTION : DRAG_DISTANCE_SINGLE_OPTION;
 
-        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
         await page.waitForChanges();
 
         await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
@@ -42,9 +48,10 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
          * Positive dragByX value to drag element from the left to the right
          * to reveal the options on the left side.
          */
-        const dragByX = config.direction === 'rtl' ? 150 : -150;
+        const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
 
-        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
+        await page.waitForChanges();
 
         await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
       });
@@ -61,7 +68,16 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await page.goto(`/src/components/item-sliding/test/basic`, config);
       const item = page.locator('#item2');
 
-      await dragElementBy(item, page, -150, 0, undefined, undefined, true, 20);
+      await dragElementBy(
+        item,
+        page,
+        -DRAG_DISTANCE_MULTIPLE_OPTIONS,
+        0,
+        undefined,
+        undefined,
+        true,
+        DRAG_STEPS_UNDER_FULL_SWIPE
+      );
       await page.waitForChanges();
 
       // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
@@ -140,8 +156,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
         const direction = config.direction;
         const item = page.locator('ion-item-sliding');
 
-        const dragByX = direction == 'rtl' ? -150 : 150;
-        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
+        const dragByX = direction == 'rtl' ? -DRAG_DISTANCE_MULTIPLE_OPTIONS : DRAG_DISTANCE_MULTIPLE_OPTIONS;
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
         await page.waitForChanges();
 
         await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
@@ -181,8 +197,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
         const direction = config.direction;
         const item = page.locator('ion-item-sliding');
 
-        const dragByX = direction == 'rtl' ? 150 : -150;
-        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
+        const dragByX = direction == 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
         await page.waitForChanges();
 
         await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));

core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts

@@ -27,7 +27,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
               <ion-item-option expandable="true">Delete</ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
-         `,
+        `,
         config
       );
 
@@ -52,7 +52,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
               <ion-item-option expandable="true">Archive</ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
-         `,
+        `,
         config
       );
 
@@ -77,7 +77,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
               <ion-item-option expandable="true">Delete</ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
-         `,
+        `,
         config
       );
 
@@ -132,7 +132,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
                 <ion-item-option>Edit</ion-item-option>
               </ion-item-options>
             </ion-item-sliding>
-           `,
+          `,
         config
       );
 
@@ -166,7 +166,7 @@ configs({ modes: ['md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config
               <ion-item-option expandable="true">Delete</ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
-         `,
+        `,
         config
       );
 

core/src/components/item-sliding/test/icons/item-sliding.e2e.ts

@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS, DRAG_STEPS_UNDER_FULL_SWIPE } from '../test.utils';
+
 /**
  * item-sliding doesn't have mode-specific styling,
  * but the child components, item-options and item-option, do.
@@ -10,28 +12,29 @@ import { configs, test, dragElementBy } from '@utils/test/playwright';
  */
 configs({ modes: ['ionic-md', 'ios', 'md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: icons'), () => {
-    test('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
+    });
 
-      const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
-      for (const itemID of itemIDs) {
-        const item = page.locator(`#${itemID}`);
+    ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'].forEach((position) => {
+      test(`${position} - should not have visual regressions`, async ({ page }) => {
+        const item = page.locator(`#${position}`);
 
         /**
          * Negative dragByX value to drag element from the right to the left
          * to reveal the options on the right side.
          * Positive dragByX value to drag element from the left to the right
          * to reveal the options on the left side.
          */
-        const dragByX = config.direction === 'rtl' ? 150 : -150;
+        const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
 
-        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
         await page.waitForChanges();
 
         // Convert camelCase ids to kebab-case for screenshot file names
-        const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
-      }
+        const positionKebab = position.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${positionKebab}`));
+      });
     });
   });
 });

core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts

@@ -1,5 +1,8 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS } from '../test.utils';
+
 /**
  * This behavior does not vary across modes/directions
  */
@@ -15,7 +18,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
 
-      await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
+      /**
+       * No need to increase steps to prevent the full swipe threshold
+       * from being crossed because:
+       * - we are not testing swipe behavior here
+       * - increasing steps is only in Webkit since it accumulates velocity
+       * faster than other browsers, and this test is skipped in Webkit, so
+       * the default step count is safe to use
+       */
+      await dragElementBy(itemSlidingEl, page, -DRAG_DISTANCE_MULTIPLE_OPTIONS, 0, undefined, undefined, false);
 
       /**
        * Do not use scrollToBottom() or other scrolling methods

core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts

@@ -1,33 +1,33 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS, DRAG_STEPS_UNDER_FULL_SWIPE } from '../test.utils';
+
 /**
  * The shapes on the `item-option` do not vary by direction
  * when they are not being dragged.
  */
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: shapes'), () => {
-    test('should not have visual regressions when not expanded', async ({ page, skip }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/shapes`, config);
+    });
 
-      // TODO(FW-7288): Remove skip once fix has been implemented
-      skip.browser('webkit', 'Flaky test in Safari');
-
-      const itemIDs = ['round', 'soft', 'rectangular'];
-      for (const itemID of itemIDs) {
-        const item = page.locator(`#${itemID}`);
+    ['round', 'soft', 'rectangular'].forEach((shape) => {
+      test(`${shape} - should not have visual regressions when not expanded`, async ({ page }) => {
+        const item = page.locator(`#${shape}`);
 
         /**
          * Negative dragByX value to drag element from the right to the left
          * to reveal the options on the right side.
          */
-        const dragByX = -150;
+        const dragByX = -DRAG_DISTANCE_MULTIPLE_OPTIONS;
 
-        await dragElementBy(item, page, dragByX);
+        await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
         await page.waitForChanges();
 
-        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemID}`));
-      }
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${shape}`));
+      });
     });
   });
 });

core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png

@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS } from '../test.utils';
+
 /**
  * This behavior does not vary across modes
  */
@@ -16,8 +18,13 @@ configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ ti
          * Negative dragByX value to drag element from the right to the left
          * to reveal the options on the right side.
          */
-        const dragByX = -150;
+        const dragByX = -DRAG_DISTANCE_MULTIPLE_OPTIONS;
 
+        /**
+         * No need to increase steps to prevent the full swipe threshold from
+         * being crossed because the option is disabled, so the option will
+         * never expand fully regardless of drag speed.
+         */
         await dragElementBy(item, page, dragByX);
         await page.waitForChanges();
 

core/src/components/item-sliding/test/states/item-sliding.e2e.ts

@@ -1,6 +1,21 @@
 import { expect } from '@playwright/test';
 import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
+/**
+ * Drag distances that reveal options without crossing the full swipe
+ * threshold (`optsWidth` + `SWIPE_MARGIN`). A narrower options panel
+ * requires a shorter drag.
+ */
+export const DRAG_DISTANCE_SINGLE_OPTION = 100;
+export const DRAG_DISTANCE_MULTIPLE_OPTIONS = 150;
+
+/**
+ * The number of drag steps used when revealing options. A higher step
+ * count slows the drag velocity, keeping it below the full swipe
+ * threshold in WebKit. See `dragElementBy` for more details.
+ */
+export const DRAG_STEPS_UNDER_FULL_SWIPE = 15;
+
 /**
  * Warning: This function will fail when in RTL mode.
  * TODO(FW-3711): Remove the `directions` config when this issue preventing

core/src/components/item-sliding/test/test.utils.ts

@@ -10,6 +10,18 @@ import type { ElementHandle, Locator } from '@playwright/test';
 
 import type { E2EPage } from './';
 
+/**
+ * Drags an element by the given number of pixels on the X and Y axes.
+ *
+ * @param el The element to drag.
+ * @param page The E2E Page object.
+ * @param dragByX The number of pixels to drag on the X axis. Negative values drag left, positive values drag right.
+ * @param dragByY The number of pixels to drag on the Y axis. Negative values drag up, positive values drag down.
+ * @param startXCoord The X coordinate to start the drag from. Defaults to the center of the element.
+ * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
+ * @param releaseDrag Whether to release the drag at the end of the gesture. Defaults to `true`.
+ * @param steps The number of steps to divide the drag into. More steps reduce velocity; fewer steps increase it. Use this to control whether velocity-based thresholds (e.g. full-swipe) are triggered, particularly in Safari where gesture velocity is calculated relative to animation frames. Defaults to `10`.
+ */
 export const dragElementBy = async (
   el: Locator | ElementHandle<SVGElement | HTMLElement>,
   page: E2EPage,
@@ -46,10 +58,11 @@ export const dragElementBy = async (
 
 /**
  * Drags an element by the given amount of pixels on the Y axis.
+ *
  * @param el The element to drag.
  * @param page The E2E Page object.
- * @param dragByY The amount of pixels to drag the element by.
- * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
+ * @param dragByY The number of pixels to drag on the Y axis.
+ * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
  */
 export const dragElementByYAxis = async (
   el: Locator | ElementHandle<SVGElement | HTMLElement>,
@@ -139,10 +152,21 @@ const moveElement = async (page: E2EPage, startX: number, startY: number, dragBy
 
     await page.mouse.move(middleX, middleY);
 
-    // Safari needs to wait for a repaint to occur before moving the mouse again.
+    /**
+     * In Safari, gesture velocity is calculated relative to animation
+     * frames, causing velocity to accumulate faster than in other
+     * browsers. Without waiting for a repaint, consecutive `mouse.move`
+     * events arrive with ~0ms time delta and velocity never accumulates,
+     * causing gesture
+     * detection to fail.
+     */
     if (browser === 'webkit' && i % 2 === 0) {
-      // Repainting every 2 steps is enough to keep the drag gesture smooth.
-      // Anything past 4 steps will cause the drag gesture to be flaky.
+      /**
+       * Repainting every 2 steps is enough to keep the drag gesture
+       * smooth. Repainting on every step makes the test slow, and
+       * repainting every 4+ steps means Safari does not see enough
+       * frames to track the gesture reliably.
+       */
       await page.evaluate(() => new Promise(requestAnimationFrame));
     }
   }