@ionic/core 7.4.1-nightly.20230920 → 7.4.2-dev.11695319270.1e2fa2e5

package/dist/collection/components/item-sliding/test/basic/item-sliding.e2e.js

@@ -3,16 +3,46 @@
  */
 import { expect } from "@playwright/test";
 import { configs, dragElementBy, test } from "../../../../utils/test/playwright/index";
-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);
-      await testSlidingItem(page, 'item2', 'start', screenshot, true);
-      await testSlidingItem(page, 'item2', 'end', screenshot);
+    });
+    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 expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+      });
     });
   });
 });

package/dist/collection/components/item-sliding/test/icons/item-sliding.e2e.js

@@ -1,19 +1,34 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { configs, test } from "../../../../utils/test/playwright/index";
-import { testSlidingItem } from "../test.utils";
-// TODO FW-3006
+import { expect } from "@playwright/test";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
- * 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}`));
       }
     });
   });

package/dist/collection/components/item-sliding/test/scroll-target/item-sliding.e2e.js

@@ -2,25 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
  * 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);
       const itemSlidingEl = page.locator('ion-item-sliding');
       const scrollEl = page.locator('.ion-content-scroll-host');
       expect(await scrollEl.evaluate((el) => 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
        * on ion-content as those will update the scroll position.

package/dist/collection/components/item-sliding/test/test.utils.js

@@ -2,6 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { expect } from "@playwright/test";
+/**
+ * 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, itemID, screenshotNameSuffix, screenshot, openStart = false) => {
   const item = page.locator(`#${itemID}`);
   // passing a param into the eval callback is tricky due to execution context
@@ -17,6 +22,9 @@ export const testSlidingItem = async (page, itemID, screenshotNameSuffix, screen
     });
   }
   // 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}`));
   await item.evaluate(async (el) => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-20T06:03:54",
+  "timestamp": "2023-09-21T18:03:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.3.0",

package/dist/types/components/item-sliding/test/test.utils.d.ts

@@ -1,2 +1,7 @@
 import type { E2EPage, ScreenshotFn } from "../../../utils/test/playwright/index";
+/**
+ * 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 declare const testSlidingItem: (page: E2EPage, itemID: string, screenshotNameSuffix: string, screenshot: ScreenshotFn, openStart?: boolean) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.1-nightly.20230920",
+  "version": "7.4.2-dev.11695319270.1e2fa2e5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",