test(item-sliding): migrate to generators (#27324)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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. -->

Item sliding tests use legacy syntax

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

- Item sliding tests use modern syntax

## 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. -->

core/src/components/item-sliding/test/async/item-sliding.e2e-legacy.ts

@@ -1,23 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('item-sliding: async', () => {
-  test('should open even when item is added async', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-
-    await page.goto(`/src/components/item-sliding/test/async`);
-
-    const itemEl = page.locator('ion-item');
-    const itemSlidingEl = page.locator('ion-item-sliding');
-
-    // Wait for item to be added to DOM
-    await page.waitForSelector('ion-item');
-
-    // Click item to open ion-item-sliding
-    await itemEl.click();
-
-    // This class is added when the item sliding component is fully open
-    await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/);
-  });
-});

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

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('item-sliding: async'), () => {
+    test('should open even when item is added async', async ({ page }) => {
+      await page.goto(`/src/components/item-sliding/test/async`, config);
+
+      const itemEl = page.locator('ion-item');
+      const itemSlidingEl = page.locator('ion-item-sliding');
+
+      // Wait for item to be added to DOM
+      await page.waitForSelector('ion-item');
+
+      // Click item to open ion-item-sliding
+      await itemEl.click();
+
+      // This class is added when the item sliding component is fully open
+      await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/);
+    });
+  });
+});

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

@@ -1,75 +0,0 @@
-import { expect } from '@playwright/test';
-import { dragElementBy, test } from '@utils/test/playwright';
-
-import { testSlidingItem } from '../test.utils';
-
-test.describe('item-sliding: basic', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.mode('ios', "item-sliding doesn't have mode-specific styling");
-  });
-
-  // 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`);
-    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.rtl();
-    skip.browser(
-      (browserName: string) => browserName !== 'chromium',
-      'dragElementBy is flaky outside of Chrome browsers.'
-    );
-
-    await page.goto(`/src/components/item-sliding/test/basic`);
-    const item = page.locator('#item2');
-
-    await dragElementBy(item, page, -150);
-    await page.waitForChanges();
-
-    // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
-    await expect(item).toHaveScreenshot(`item-sliding-gesture-${page.getSnapshotSettings()}.png`);
-  });
-
-  // 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');
-    skip.rtl();
-
-    await page.goto(`/src/components/item-sliding/test/basic`);
-
-    const itemSlidingEl = page.locator('#item2');
-    const scrollEl = page.locator('ion-content .inner-scroll');
-
-    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);
-
-    /**
-     * Do not use scrollToBottom() or other scrolling methods
-     * on ion-content as those will update the scroll position.
-     * Setting scrollTop still works even with overflow-y: hidden.
-     * However, simulating a user gesture should not scroll the content.
-     */
-    await page.mouse.wheel(0, 100);
-    await page.waitForChanges();
-
-    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
-  });
-});

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

@@ -0,0 +1,74 @@
+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
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, 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(
+        (browserName: string) => browserName !== 'chromium',
+        'dragElementBy is flaky outside of Chrome browsers.'
+      );
+
+      await page.goto(`/src/components/item-sliding/test/basic`, config);
+      const item = page.locator('#item2');
+
+      await dragElementBy(item, page, -150);
+      await page.waitForChanges();
+
+      // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
+      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');
+
+      await page.goto(`/src/components/item-sliding/test/basic`, config);
+
+      const itemSlidingEl = page.locator('#item2');
+      const scrollEl = page.locator('ion-content .inner-scroll');
+
+      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);
+
+      /**
+       * Do not use scrollToBottom() or other scrolling methods
+       * on ion-content as those will update the scroll position.
+       * Setting scrollTop still works even with overflow-y: hidden.
+       * However, simulating a user gesture should not scroll the content.
+       */
+      await page.mouse.wheel(0, 100);
+      await page.waitForChanges();
+
+      expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+    });
+  });
+});

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

@@ -1,22 +0,0 @@
-import { test } from '@utils/test/playwright';
-
-import { testSlidingItem } from '../test.utils';
-
-// TODO FW-3006
-test.describe.skip('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");
-    await page.goto(`/src/components/item-sliding/test/icons`);
-
-    const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
-    for (const itemID of itemIDs) {
-      await testSlidingItem(page, page.locator(`#${itemID}`), itemID);
-    }
-  });
-});

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

@@ -0,0 +1,24 @@
+import { configs, test } from '@utils/test/playwright';
+
+import { testSlidingItem } from '../test.utils';
+
+// TODO FW-3006
+configs().forEach(({ title, 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");
+      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);
+      }
+    });
+  });
+});

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

@@ -1,36 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('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 }) => {
-    skip.browser('webkit', 'mouse.wheel is not available in WebKit');
-    skip.rtl();
-
-    await page.goto(`/src/components/item-sliding/test/scroll-target`);
-
-    const itemSlidingEl = page.locator('ion-item-sliding');
-    const scrollEl = page.locator('.ion-content-scroll-host');
-
-    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);
-
-    /**
-     * Do not use scrollToBottom() or other scrolling methods
-     * on ion-content as those will update the scroll position.
-     * Setting scrollTop still works even with overflow-y: hidden.
-     * However, simulating a user gesture should not scroll the content.
-     */
-    await page.mouse.wheel(0, 100);
-    await page.waitForChanges();
-
-    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
-  });
-});

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

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { configs, test } 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 }) => {
+      skip.browser('webkit', 'mouse.wheel is not available in WebKit');
+
+      await page.goto(`/src/components/item-sliding/test/scroll-target`, config);
+
+      const itemSlidingEl = page.locator('ion-item-sliding');
+      const scrollEl = page.locator('.ion-content-scroll-host');
+
+      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);
+
+      /**
+       * Do not use scrollToBottom() or other scrolling methods
+       * on ion-content as those will update the scroll position.
+       * Setting scrollTop still works even with overflow-y: hidden.
+       * However, simulating a user gesture should not scroll the content.
+       */
+      await page.mouse.wheel(0, 100);
+      await page.waitForChanges();
+
+      expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+    });
+  });
+});