test(item-sliding): re-enable flaky tests

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

@@ -1,18 +1,53 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.fixme('should not have visual regressions', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
+    });
+    test.describe('start options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+
+        /**
+         * 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;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+      });
+    });
+
+    test.describe('end options', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const item = page.locator('#item2');
+
+        /**
+         * 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;
+
+        await dragElementBy(item, page, dragByX);
 
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });

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

@@ -1,19 +1,34 @@
-import { configs, test } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-import { testSlidingItem } from '../test.utils';
-
-// TODO FW-3006
 /**
- * item-sliding doesn't have mode-specific styling
+ * item-sliding doesn't have mode-specific styling,
+ * but the child components, item-options and item-option, do.
+ *
+ * It is important to test all modes to ensure that the
+ * child components are being rendered correctly.
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe.skip(title('item-sliding: icons'), () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
 
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        await testSlidingItem(page, itemID, itemID, screenshot);
+        const item = page.locator(`#${itemID}`);
+
+        /**
+         * 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;
+
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemID}`));
       }
     });
   });

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

@@ -1,12 +1,11 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 /**
  * This behavior does not vary across modes/directions
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: scroll-target'), () => {
-    // TODO FW-3006
-    test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
+    test('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 
       await page.goto(`/src/components/item-sliding/test/scroll-target`, config);
@@ -16,13 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
 
-      const box = (await itemSlidingEl.boundingBox())!;
-      const centerX = box.x + box.width / 2;
-      const centerY = box.y + box.height / 2;
-
-      await page.mouse.move(centerX, centerY);
-      await page.mouse.down();
-      await page.mouse.move(centerX - 30, centerY);
+      await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
 
       /**
        * Do not use scrollToBottom() or other scrolling methods

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

@@ -1,6 +1,11 @@
 import { expect } from '@playwright/test';
 import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
+/**
+ * Warning: This function will fail when in RTL mode.
+ * TODO FW-3711: There's an issue that prevents tests in RTL mode to pass.
+ * Once the issue is resolved, we can remove the `directions` config.
+ */
 export const testSlidingItem = async (
   page: E2EPage,
   itemID: string,
@@ -23,6 +28,9 @@ export const testSlidingItem = async (
   }
 
   // opening animation takes longer than waitForChanges accounts for
+  // especially if another item sliding is already open,
+  // so we wait to ensure the opened item is closed before
+  // opening another
   await page.waitForTimeout(500);
 
   await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));