dimsum-e2e-tests 3.70.0-next.4 → 3.70.0-next.40

package/ds-tooltip-v3/DSTooltipV3CO.js

@@ -8,8 +8,12 @@ export default class DSTooltipV3CO extends PageObject {
 
   static uncontrolledTestUrl = new Urlbuilder(PATH_E2E_TOOLTIP_V3, 'uncontrolled-test');
 
+  static basicTestUrl = new Urlbuilder(PATH_E2E_TOOLTIP_V3, 'basic-test');
+
   static slotsURL = new Urlbuilder(PATH_E2E_TOOLTIP_V3, 'slots-test');
 
+  static inADialogTestUrl = new Urlbuilder(PATH_E2E_TOOLTIP_V3, 'in-a-dialog-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('TooltipV3', example);
@@ -20,10 +24,27 @@ export default class DSTooltipV3CO extends PageObject {
     return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
   }
 
+  static async getBasicTestTriggerButton() {
+    return $('button[aria-describedby="basic-tooltip"]');
+  }
+
   static async getTooltipContentByIndex(index = 0) {
     return $$('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"] [data-testid="ds-typography-element"]')[index];
   }
 
+  // "tooltip in a dialog" selectors (PUI-18012 dismissal mechanism)
+  static async getOpenDialogButton() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+
+  static async getDialogContainer() {
+    return $('[data-testid="ds-dialog-container"]');
+  }
+
+  static async getInADialogTriggerButton() {
+    return $('button[aria-describedby="in-a-dialog-tooltip"]');
+  }
+
   // slot selectors
   static async getRootSlot() {
     return $('[data-dimsum-slot="dsTooltipv3Root"]');

package/ds-tooltip-v3/aria-tooltip-pattern/DSTooltipV3.aria-tooltip-pattern.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+import DSTooltipV3CO from '../DSTooltipV3CO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18498 - TooltipV3:: WAI-ARIA tooltip pattern - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipV3CO.basicTestUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the basic tooltip pattern and pass axe-core scan', async () => {
+      const tooltipContainer = await DSTooltipV3CO.getTooltip();
+      await tooltipContainer.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-tooltip-v3/aria-tooltip-pattern/DSTooltipV3.aria-tooltip-pattern.func.spec.js

@@ -0,0 +1,29 @@
+import DSTooltipV3CO from '../DSTooltipV3CO';
+
+// Tests for the fix introduced in PUI-18011 / PUI-18010:
+// the tooltip container must expose role="tooltip" and its `id` so that consumers
+// can wire `aria-describedby` from the trigger element (W3C WAI-ARIA tooltip pattern).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18495 - TooltipV3:: WAI-ARIA tooltip pattern (role + aria-describedby) - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipV3CO.basicTestUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose role="tooltip", a matching id on the container and aria-describedby on trigger', async () => {
+      const tooltipContainer = await DSTooltipV3CO.getTooltip();
+      const triggerButton = await DSTooltipV3CO.getBasicTestTriggerButton();
+
+      await expect(tooltipContainer).toBeExisting();
+      await expect(tooltipContainer).toHaveAttribute('role', 'tooltip');
+      await expect(tooltipContainer).toHaveAttribute('id', 'basic-tooltip');
+
+      await expect(triggerButton).toBeExisting();
+      await expect(triggerButton).toHaveAttribute('aria-describedby', 'basic-tooltip');
+
+      const containerId = await tooltipContainer.getAttribute('id');
+      const triggerDescribedBy = await triggerButton.getAttribute('aria-describedby');
+      await expect(containerId).toBe(triggerDescribedBy);
+    });
+  });
+}

package/ds-tooltip-v3/dialog/DSTooltipV3.dialog.func.spec.js

@@ -0,0 +1,45 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../../helpers';
+import DSTooltipV3CO from '../DSTooltipV3CO';
+
+// Tests for the fix introduced in PUI-18012 (a tooltip inside a dialog must be dismissible with ESC
+// without closing the dialog — WCAG 2.2 SC 1.4.13 Content on Hover or Focus, Dismissible).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18592 - TooltipV3:: dismissal and behavior of a tooltip inside a dialog -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipV3CO.inADialogTestUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should open the dialog and show the tooltip with its text on hover', async () => {
+      const openButton = await DSTooltipV3CO.getOpenDialogButton();
+      await openButton.click();
+
+      const dialog = await DSTooltipV3CO.getDialogContainer();
+      await expect(dialog).toBeDisplayed();
+
+      const trigger = await DSTooltipV3CO.getInADialogTriggerButton();
+      await mouseOver(trigger);
+
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+      await expect(tooltip).toHaveText(expect.stringContaining('Tooltip text 3'));
+    });
+
+    it('02: should dismiss only the tooltip on ESC, keeping the dialog open', async () => {
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await browser.keys(Key.Escape);
+
+      await expect(tooltip).not.toBeDisplayed();
+      const dialog = await DSTooltipV3CO.getDialogContainer();
+      await expect(dialog).toBeDisplayed();
+    });
+
+    it('03: should close the dialog on a subsequent ESC once the tooltip is dismissed', async () => {
+      await browser.keys(Key.Escape);
+
+      const dialog = await DSTooltipV3CO.getDialogContainer();
+      await expect(dialog).not.toBeDisplayed();
+    });
+  });
+}

package/ds-tooltip-v3/dialog/DSTooltipV3.dialog.visual.spec.js

@@ -0,0 +1,29 @@
+import { mouseOver } from '../../helpers';
+import DSTooltipV3CO from '../DSTooltipV3CO';
+
+// Visual coverage for PUI-18012: how a tooltip looks when displayed inside a dialog.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18593 - TooltipV3:: tooltip displayed inside a dialog -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipV3CO.inADialogTestUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the tooltip inside the open dialog', async () => {
+      const openButton = await DSTooltipV3CO.getOpenDialogButton();
+      await openButton.click();
+
+      const dialog = await DSTooltipV3CO.getDialogContainer();
+      await expect(dialog).toBeDisplayed();
+
+      const trigger = await DSTooltipV3CO.getInADialogTriggerButton();
+      await mouseOver(trigger);
+
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(DSTooltipV3CO.snapshotPath('tooltip-in-dialog'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-treeview/DSTreeViewCO.js

@@ -226,7 +226,7 @@ export default class DSTreeViewCO extends PageObject {
   }
 
   static async getElementsTexts() {
-    return $$('[data-testid="DS-SimpleTruncateText"]');
+    return $$('[data-testid="tree-item-content"]');
   }
 
   static async getCollapseBtn() {
@@ -241,6 +241,12 @@ export default class DSTreeViewCO extends PageObject {
     return (await $$('[data-testid="drag-handle"]'))[index];
   }
 
+  // Drag handles carry a stable id of the form `${itemId}-drag-handle`, so this selects a row's
+  // handle independent of its current position/index (which shifts with the expansion state).
+  static async getDragHandleByItemId(itemId) {
+    return $(`[id="${itemId}-drag-handle"]`);
+  }
+
   static async getFirstDragHandle() {
     return $$('[data-testid="drag-handle"]')[0];
   }
@@ -269,7 +275,7 @@ export default class DSTreeViewCO extends PageObject {
   }
 
   static async getTooltip() {
-    return $('[data-testid="popover-container"]');
+    return $('[data-testid="ds-floating-wrapper-root"]');
   }
 
   static async noItemsFound() {
@@ -317,6 +323,23 @@ export default class DSTreeViewCO extends PageObject {
     ]);
   }
 
+  // Expands a row identified by its content text, but only if it is currently collapsed.
+  // Idempotent on purpose: after a drag-and-drop, whether the target group is auto-expanded
+  // varies by browser, so a blind toggle would re-collapse an already-expanded row.
+  static async ensureRowExpandedByText(text) {
+    return browser.execute((rowText) => {
+      const items = Array.from(document.querySelectorAll('[data-testid="tree-item"]'));
+      const item = items.find((node) => {
+        const content = node.querySelector('[data-testid="tree-item-content"]');
+        return content && content.textContent.trim() === rowText;
+      });
+      if (item && item.getAttribute('aria-expanded') === 'false') {
+        const toggle = item.querySelector('[data-testid="tree-item-expand-toggle"]');
+        if (toggle) toggle.click();
+      }
+    }, text);
+  }
+
   static async isExpanded(index) {
     return (await this.getRow(index)).getAttribute('aria-expanded');
   }

package/ds-treeview/dragAndDrop/TreeView-dnd_keyboard.func.spec.js

@@ -0,0 +1,96 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSTreeViewCO from '../DSTreeViewCO';
+
+// The TreeView uses @dnd-kit (pointer + keyboard sensors), not HTML5 native drag.
+// WDIO's mouse `.dragAndDrop()` only actuates the pointer sensor reliably under
+// geckodriver (Firefox); Chromedriver/safaridriver synthesize the drag differently,
+// so the mouse-driven version of these tests passed only in Firefox. These tests are
+// therefore driven through the dnd-kit keyboard sensor (Space to pick up, ArrowDown
+// to move/nest, Space to drop), which is deterministic and stable across all browsers
+// — mirroring the keyboard-driven dnd tests in ds-data-table-async. Do not convert
+// back to mouse `.dragAndDrop()`.
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11320 - TreeView, Basic Drag and Drop Functionality (keyboard)', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.dragAndDrop.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: drag and drop in the same position - parent item', async () => {
+      const dragHandleFirstRow = await DSTreeViewCO.getDragHandle(0);
+      await dragHandleFirstRow.click();
+      await browser.keys(Key.Space); // pick up
+      await browser.pause(300);
+      await browser.keys(Key.Space); // drop in place
+      await browser.pause(300);
+      const firstRow = await DSTreeViewCO.getRowContent(0);
+      await expect(firstRow).toHaveText(expect.stringContaining('Parent. id: 1'));
+    });
+    it('02: drag and drop in the same position - child item', async () => {
+      const expandableBtnFirstRow = await DSTreeViewCO.getToggleBtn(0);
+      await expandableBtnFirstRow.click();
+      await browser.pause(300);
+      const dragHandleFirstChild = await DSTreeViewCO.getDragHandle(1);
+      await dragHandleFirstChild.click();
+      await browser.keys(Key.Space); // pick up
+      await browser.pause(300);
+      await browser.keys(Key.Space); // drop in place
+      await browser.pause(300);
+      const firstChildRow = await DSTreeViewCO.getRowContent(1);
+      await expect(firstChildRow).toHaveText(expect.stringContaining('Child of 1. id: 2'));
+    });
+    it('03: drag a parent and drop it in another parent', async () => {
+      const dragHandleParentId1 = await DSTreeViewCO.getDragHandle(0);
+      await dragHandleParentId1.click();
+      await browser.keys(Key.Space); // pick up Parent id 1
+      await browser.pause(300);
+      await browser.keys(Key.ArrowDown); // move into Parent id 4
+      await browser.pause(300);
+      await browser.keys(Key.Space); // drop
+      await browser.pause(300);
+      await DSTreeViewCO.expandCollapseAll();
+      await browser.pause(300);
+      const firstRow = await DSTreeViewCO.getRowContent(0);
+      await expect(firstRow).toHaveText(expect.stringContaining('Parent. id: 4'));
+    });
+    // Safari's WebKit driver is non-deterministic for TreeView keyboard drag-and-drop (the drag
+    // intermittently fails to nest the item), so this scenario is not registered on Safari —
+    // consistent with PUI-8198, which is also skipped on Safari. It still runs on Chrome, Edge and
+    // Firefox.
+    if (browser.capabilities.browserName !== 'Safari') {
+      it('04: drag a child of a parent and drop it in another parent with no children', async () => {
+        // Make the dragged child (id 3) visible regardless of the expansion state the previous test
+        // left behind (expandCollapseAll is browser-dependent), then select it by its stable handle
+        // id instead of an absolute index — an absolute index points at the wrong row when an
+        // ancestor group is collapsed.
+        await DSTreeViewCO.ensureRowExpandedByText('Parent. id: 4');
+        await DSTreeViewCO.ensureRowExpandedByText('Parent. id: 1');
+        await browser.pause(300);
+        const dragHandleChildOfParent1 = await DSTreeViewCO.getDragHandleByItemId(3);
+        await dragHandleChildOfParent1.click();
+        await browser.keys(Key.Space); // pick up Child of 1. Also parent. id 3
+        await browser.pause(300);
+        await browser.keys(Key.ArrowDown); // move into Item with no children. id 7
+        await browser.pause(300);
+        await browser.keys(Key.Space); // drop
+        await browser.pause(300);
+        // Reveal the dragged child by expanding its new parent (id 7), but only when collapsed.
+        // expandCollapseAll() is avoided: it is a focus-dependent toggle that behaves inconsistently
+        // across browsers after a keyboard drop, and whether the drop auto-expands id 7 also varies.
+        await DSTreeViewCO.ensureRowExpandedByText('Item with no children. id: 7');
+        await browser.pause(300);
+
+        // Assert relative to id 7 rather than an absolute row index: the exact indices depend on how
+        // many ancestor groups are expanded (which varies across browsers). The dragged child (id 3)
+        // is always the row immediately after its new parent (id 7).
+        const rowContents = await DSTreeViewCO.getElementsTexts();
+        // WebdriverIO's element-array `.map()` is an async helper that resolves to the values
+        // directly — do not wrap it in Promise.all (that passes a Promise to Promise.all).
+        const rowTexts = await rowContents.map((row) => row.getText());
+        const parentId7Index = rowTexts.indexOf('Item with no children. id: 7');
+        await expect(rowTexts[parentId7Index + 1]).toEqual('Child of 1. Also parent. id: 3');
+      });
+    }
+  });
+}