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,36 @@
-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();
+
+ // 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}`));
  }
  });
  });

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): Remove the `directions` config when this issue preventing
+ * tests from passing in RTL mode is resolved.
+ */
 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}`));