test(item-sliding): update visual regressions (#27695)

Issue number: -

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

I forgot to address the tests when working on FW-2608 to address issue
#26103

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the visual regressions tests to verify that the item-sliding
displays correctly on LTR/RTL.
- Updated the item sliding tests to use the generators

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

The tests for item-sliding are disabled due to gesture flakiness. This
will be addressed in another ticket. I recommend testing locally by
adding the `.only` to all tests called `should not have visual
regressions` and running `npm run test.e2e item-sliding`.

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

@@ -3,26 +3,27 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 import { testSlidingItem } from '../test.utils';
 
+// TODO FW-3006
 /**
  * item-sliding doesn't have mode-specific styling
  */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: basic'), () => {
+    test.fixme('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item-sliding/test/basic`, config);
+
+      await testSlidingItem(page, 'item2', 'start', screenshot, true);
+      await testSlidingItem(page, 'item2', 'end', screenshot);
+    });
+  });
+});
+
+// TODO FW-3006
+/**
+ * This behavior does not vary across modes/directions
+ */
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    // TODO FW-3006
-    test.skip('should not have visual regressions', async ({ page, browserName }, testInfo) => {
-      // TODO(FW-2608)
-      test.fixme(
-        testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
-        'https://github.com/ionic-team/ionic-framework/issues/26103'
-      );
-
-      await page.goto(`/src/components/item-sliding/test/basic`, config);
-      const item = page.locator('#item2');
-
-      await testSlidingItem(page, item, 'start', true);
-      await testSlidingItem(page, item, 'end');
-    });
-
     // mouse gesture is flaky on CI, skip for now
     test.fixme('should open when swiped', async ({ page, skip }) => {
       skip.browser(
@@ -40,7 +41,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(item).toHaveScreenshot(screenshot(`item-sliding-gesture`));
     });
 
-    // TODO FW-3006
     test.skip('should not scroll when the item-sliding is swiped', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 

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

@@ -3,21 +3,17 @@ import { configs, test } from '@utils/test/playwright';
 import { testSlidingItem } from '../test.utils';
 
 // TODO FW-3006
-configs().forEach(({ title, config }) => {
+/**
+ * item-sliding doesn't have mode-specific styling
+ */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe.skip(title('item-sliding: icons'), () => {
-    test('should not have visual regressions', async ({ page, browserName, skip }, testInfo) => {
-      // TODO(FW-2608)
-      test.fixme(
-        testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
-        'https://github.com/ionic-team/ionic-framework/issues/26103'
-      );
-
-      skip.mode('ios', "item-sliding doesn't have mode-specific styling");
+    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, page.locator(`#${itemID}`), itemID);
+        await testSlidingItem(page, itemID, itemID, screenshot);
       }
     });
   });

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

@@ -1,13 +1,15 @@
 import { expect } from '@playwright/test';
-import type { Locator } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
+import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
 export const testSlidingItem = async (
   page: E2EPage,
-  item: Locator,
+  itemID: string,
   screenshotNameSuffix: string,
+  screenshot: ScreenshotFn,
   openStart = false
 ) => {
+  const item = page.locator(`#${itemID}`);
+
   // passing a param into the eval callback is tricky due to execution context
   // so just do the check outside the callback instead to make things easy
   if (openStart) {
@@ -23,7 +25,7 @@ export const testSlidingItem = async (
   // opening animation takes longer than waitForChanges accounts for
   await page.waitForTimeout(500);
 
-  await expect(item).toHaveScreenshot(`item-sliding-${screenshotNameSuffix}-${page.getSnapshotSettings()}.png`);
+  await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));
 
   await item.evaluate(async (el: HTMLIonItemSlidingElement) => {
     await el.close();