dimsum-e2e-tests 3.70.0-next.7 → 3.70.0-next.71

package/ds-menu-button/slots/DSMenuButton.slots.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import { axeCoreCheck } from '../../helpers';
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-17845 - DSMenuButton:: Slots - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render slots story with custom theme and pass axe-core scan with menu open', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.waitForDisplayed();
+      await triggerBtn.click();
+
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-menu-button/slots/DSMenuButton.slots.func.spec.js

@@ -0,0 +1,59 @@
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18356 - DSMenuButton:: Slots - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-label to each slot', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await expect(triggerBtn).toHaveAttribute('aria-label', 'im dsOpinionatedbuttonRoot aria');
+      await triggerBtn.click();
+
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+      const listWrapper = await DSMenuButtonCO.getSlotsListWrapper();
+      const floatingWrapper = await DSMenuButtonCO.getSlotsFloatingWrapper();
+      const menuItem = await DSMenuButtonCO.getSlotsMenuItemWrappers();
+      await expect(listWrapper).toHaveAttribute('aria-label', 'im dsFlyoutmenuListWrapper aria');
+      await expect(flyoutRoot).toHaveAttribute('aria-label', 'im dsFlyoutmenuRoot aria');
+      await expect(floatingWrapper).toHaveAttribute('aria-label', 'im dsFlyoutmenuFloatingWrapper aria');
+      await expect(menuItem).toHaveAttribute('aria-label', 'im dsMenuitemMenuItemWrapper aria');
+    });
+
+    it('02: should apply custom data-testid to each slot', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      const listWrapper = await DSMenuButtonCO.getSlotsListWrapper();
+      const floatingWrapper = await DSMenuButtonCO.getSlotsFloatingWrapper();
+      const menuItem = await DSMenuButtonCO.getSlotsMenuItemWrappers();
+
+      await expect(triggerBtn).toHaveAttribute('data-testid', 'im dsOpinionatedbuttonRoot data');
+      await expect(flyoutRoot).toHaveAttribute('data-testid', 'im dsFlyoutmenuRoot data');
+      await expect(listWrapper).toHaveAttribute('data-testid', 'im dsFlyoutmenuListWrapper data');
+      await expect(floatingWrapper).toHaveAttribute('data-testid', 'im dsFlyoutmenuFloatingWrapper data');
+      await expect(menuItem).toHaveAttribute('data-testid', 'im dsMenuitemMenuItemWrapper data');
+    });
+
+    it('03: should apply per-item attributes from the item-slot function to each menu item', async () => {
+      const firstItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(0);
+      const secondItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(1);
+      const thirdItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(2);
+
+      await expect(firstItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 1',
+      );
+      await expect(secondItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 2',
+      );
+      await expect(thirdItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 3',
+      );
+    });
+  });
+}

package/ds-menu-button/slots/DSMenuButton.slots.visual.spec.js

@@ -0,0 +1,26 @@
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18357 - DSMenuButton:: Slots - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display slots story in dark theme default state correctly', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSMenuButtonCO.snapshotPath('slots-default'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display slots story with menu open in dark theme correctly', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.click();
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSMenuButtonCO.snapshotPath('slots-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal-slide/ModalSlideCO.js

@@ -33,6 +33,8 @@ export default class ModalSlideCO extends PageObject {
 
   static slotsTest = new Urlbuilder(PATH_E2E_MODALSLIDE, 'slots-test');
 
+  static headingLevelURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'heading-level-test');
+
   static async getModalSlide() {
     return $('[data-testid="ds-modal-slide"]');
   }
@@ -134,6 +136,11 @@ export default class ModalSlideCO extends PageObject {
     return $('[data-dimsum-parent-slot="dsModalslideTitle"]');
   }
 
+  // Title element — the heading whose tag is driven by the `headingLevel` prop
+  static async getModalTitle() {
+    return $('[data-dimsum-parent-slot="dsModalslideTitle"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('ModalSlide', example, 'ds-modal-slide');

package/ds-modal-slide/custom-header/ModalSlide.customHeader.focusRing.visual.spec.js

@@ -10,7 +10,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
 
     it('01: should show consistent focus ring on modal body (5th tab stop)', async () => {
-      await ModalSlideCO.openModalSlide();
+      const trigger = await ModalSlideCO.getOpenModalSlideBtn();
+      await trigger.click();
       // Tab through CustomHeader: backarrow(1) -> breadcrumb items(2,3,4) -> body(5)
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);

package/ds-modal-slide/heading-level/ModalSlide.headingLevel.axe-core.func.spec.js

@@ -0,0 +1,25 @@
+// Tests for the feature introduced in PUI-15612 (ModalSlide flexible title heading level).
+// The story models correct usage: an h2 title above h3/h4 content, producing a valid outline.
+import ModalSlideCO from '../ModalSlideCO';
+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-18688 - ModalSlide:: title headingLevel prop - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.headingLevelURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations with a nested heading hierarchy', async () => {
+      await ModalSlideCO.openModalSlide();
+      await (await ModalSlideCO.getModalTitle()).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-modal-slide/heading-level/ModalSlide.headingLevel.func.spec.js

@@ -0,0 +1,25 @@
+// Tests for the feature introduced in PUI-15612 (ModalSlide flexible title heading level).
+// The `headingLevel` prop drives the semantic tag of the title element; the default is `h3`.
+import ModalSlideCO from '../ModalSlideCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18687 - ModalSlide:: title headingLevel prop - Func', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.headingLevelURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the title with the tag from headingLevel (h2)', async () => {
+      await ModalSlideCO.openModalSlide();
+      const title = await ModalSlideCO.getModalTitle();
+      await title.waitForDisplayed();
+      await expect(await title.getTagName()).toBe('h2');
+      await expect(title).toHaveText('Loan Summary');
+    });
+  });
+}

package/ds-modal-slide/slots/ModalSlide.slots.func.spec.js

@@ -52,5 +52,23 @@ if (
       await expect(overlay).toHaveAttribute('data-testid', 'overlay data');
       await expect(root).toHaveAttribute('data-testid', 'root data');
     });
+    it('03: each ModalSlide slot to have custom lang attribute', async () => {
+      const actualContent = await ModalSlideCO.getSlotActualContent();
+      const content = await ModalSlideCO.getSlotContent();
+      const contentWrapper = await ModalSlideCO.getSlotContentWrapper();
+      const footerSeparator = await ModalSlideCO.getSlotFooterSeparator();
+      const gridContent = await ModalSlideCO.getSlotGridContent();
+      const headerSeparator = await ModalSlideCO.getSlotHeaderSeparator();
+      const overlay = await ModalSlideCO.getSlotOverlay();
+      const root = await ModalSlideCO.getSlotRoot();
+      await expect(actualContent).toHaveAttribute('lang', 'en');
+      await expect(content).toHaveAttribute('lang', 'es');
+      await expect(contentWrapper).toHaveAttribute('lang', 'fr');
+      await expect(footerSeparator).toHaveAttribute('lang', 'de');
+      await expect(gridContent).toHaveAttribute('lang', 'it');
+      await expect(headerSeparator).toHaveAttribute('lang', 'pt');
+      await expect(overlay).toHaveAttribute('lang', 'ja');
+      await expect(root).toHaveAttribute('lang', 'zh');
+    });
   });
 }

package/ds-notification-badge/DSNotificationBadge.visual.spec.js

@@ -7,8 +7,8 @@ describe('PUI-9354:: Notification Badge: Relate to component', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display relate to component', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-relate-to-component'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -19,8 +19,8 @@ describe('PUI-9353:: Notification Badge: Disabled', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display disabled badge', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-disabled'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -31,8 +31,8 @@ describe('PUI-9352:: Notification Badge: Background color', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display custom background color badges', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-background-color'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -43,8 +43,8 @@ describe('PUI-9355:: Notification Badge: Alphanumerical', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display custom background color badges', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-alpha-chars'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -55,8 +55,8 @@ describe('PUI-11412:: Notification Badge: Chip, Icon and Button integration -Vis
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display integration with Chips and Button components correctly', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-chip-default'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -66,8 +66,8 @@ describe('PUI-11413:: Notification Badge: Custom Component Integration -Visual T
     if (errorOnGo) throw errorOnGo;
   });
   it('01: Should display integration with custom components correctly', async () => {
-    await browser.eyesOpen();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-custom-component'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(0).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -81,7 +81,7 @@ describe('PUI-11817:: NotificationBadge: with LeftNavigation example -Visual', (
     await browser.eyesOpen();
     const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
     await notification.waitForDisplayed();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-leftnav-default'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
   it('02: should display left nav with badged items selected, one focused correctly', async () => {
@@ -89,7 +89,7 @@ describe('PUI-11817:: NotificationBadge: with LeftNavigation example -Visual', (
 
     const item = await DSNotificationBadgeCO.getIconByIndex(2);
     await item.click();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-leftnav-selected'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -99,10 +99,8 @@ describe('PUI-14185:: NotificationBadge: textColor prop - Visual Test ', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: should display notification badge with custom textColor', async () => {
-    await browser.eyesOpen();
-    const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
-    await notification.waitForDisplayed();
-    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-with-custom-textColor'));
+    await DSNotificationBadgeCO.getNotificationBadgeByIndex(1).waitForDisplayed();
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });
@@ -114,12 +112,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display toolbar with toolbar correctly', async () => {
-      await browser.eyesOpen();
       const notification = await DSNotificationBadgeCO.getNotificationBadgeByIndex(1);
       await notification.waitForDisplayed();
       await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowRight);
-      const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-with-toolbar'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-page-layout/PageLayoutCO.js

@@ -1,12 +1,12 @@
-import { PATH_PAGE_LAYOUT_TEMPLATE } from '../paths';
+import { PATH_E2E_PAGE_LAYOUT } from '../paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
 export default class PageLayoutCO extends PageObject {
-  static basicURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'basic');
+  static basicURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'basic-test');
 
-  static complexURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'complex-page');
+  static complexURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'complex-page-test');
 
-  static integratedURL = new Urlbuilder(PATH_PAGE_LAYOUT_TEMPLATE, 'integrated-example');
+  static integratedURL = new Urlbuilder(PATH_E2E_PAGE_LAYOUT, 'integrated-example-test');
 
   // Snapshots
   static snapshotPath(example = 'basic') {

package/ds-pills-v2/DSPillsV2CO.js

@@ -63,6 +63,18 @@ export default class DSPillsV2CO extends PageObject {
     return $$(' [data-testid="ds-pill-wrapper"]');
   }
 
+  static async getRemovablePills() {
+    return $$('.ds-pill-wrapper-removable');
+  }
+
+  static async getPillByLabel(label) {
+    return $(`[data-testid="ds-pill-wrapper"][data-label="${label}"]`);
+  }
+
+  static async getCloseButtonByPillLabel(label) {
+    return $(`[data-testid="ds-pill-wrapper"][data-label="${label}"] [data-testid="ds-pill-close-icon"]`);
+  }
+
   static async getFloatingWrapper() {
     return $('[data-testid="ds-floating-wrapper-root"]');
   }

package/ds-pills-v2/apply-aria-disabled/DSPills.applyAriaDisabled.func.spec.js

@@ -0,0 +1,53 @@
+import { Key } from 'webdriverio';
+import DSPillsV2CO from '../DSPillsV2CO';
+import { tabStops } from '../../helpers';
+
+// Tests for the fix delivered in PUI-17870 (missing disabled behaviour on the removable pill button,
+// originally shipped with PUI-17861). Unlike `disabled`, `applyAriaDisabled` must keep the remove
+// button FOCUSABLE (WCAG 2.1.1) while blocking the removal on both mouse and keyboard activation.
+// The `apply-aria-disabled-test` story renders 6 aria-disabled removable pills; the first 4 tab
+// stops belong to the aria-disabled tooltip buttons of the value pills above them.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18841 - DSPillsV2:: aria-disabled removable pill remove button - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose aria-disabled on the remove button while keeping it focusable', async () => {
+      const closeBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment');
+      await closeBtn.waitForDisplayed();
+
+      await tabStops(5);
+      const closeBtnFocused = await closeBtn.isFocused();
+
+      await expect(closeBtn).toHaveAttribute('aria-disabled', 'true');
+      // aria-disabled must NOT fall back to the native disabled attribute
+      await expect(closeBtn).toBeEnabled();
+      await expect(closeBtn).toHaveAttribute('tabindex', '0');
+      await expect(closeBtnFocused).toEqual(true);
+    });
+
+    it('02: should not remove the pill when Enter or Space is pressed on the remove button', async () => {
+      await browser.keys(Key.Enter);
+      const removableAfterEnter = (await DSPillsV2CO.getRemovablePills()).length;
+
+      await browser.keys(Key.Space);
+      const removableAfterSpace = (await DSPillsV2CO.getRemovablePills()).length;
+
+      await expect(removableAfterEnter).toEqual(6);
+      await expect(removableAfterSpace).toEqual(6);
+    });
+
+    it('03: should not remove the pill when the remove button is clicked', async () => {
+      const closeBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment');
+      await closeBtn.click();
+
+      const pill = await DSPillsV2CO.getPillByLabel('Value segment');
+      const removablePills = await DSPillsV2CO.getRemovablePills();
+
+      await expect(pill).toBeExisting();
+      await expect(removablePills.length).toEqual(6);
+    });
+  });
+}

package/ds-pills-v2/apply-aria-disabled/DSPills.applyAriaDisabled.visual.spec.js

@@ -0,0 +1,26 @@
+import DSPillsV2CO from '../DSPillsV2CO';
+import { mouseOver } from '../../helpers';
+
+// Tests for the fix delivered in PUI-17870 (missing icon color and hover style on the removable pill
+// button, originally shipped with PUI-17861). An `applyAriaDisabled` removable pill must render a
+// dimmed remove icon and must NOT paint the hover background that an enabled one does.
+// Applitools Eyes is used instead of Percy on purpose: Percy serializes the DOM and re-renders it
+// without a pointer, so a CSS-only `:hover` state would be lost from the snapshot.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18842 - DSPillsV2:: aria-disabled removable pill remove button hover - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should keep the aria-disabled remove button dimmed with no hover background', async () => {
+      await browser.eyesOpen();
+      const closeBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment');
+      await closeBtn.waitForDisplayed();
+      await mouseOver(closeBtn);
+      const snapshotName = 'pills-v2-aria-disabled-remove-hover';
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath(snapshotName));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-pills-v2/disabled/DSPills.disabled.func.spec.js

@@ -0,0 +1,53 @@
+import { Key } from 'webdriverio';
+import DSPillsV2CO from '../DSPillsV2CO';
+import { tabStops } from '../../helpers';
+
+// Tests for the fix delivered in PUI-17870 (missing disabled behaviour on the removable pill button,
+// originally shipped with PUI-17861). A removable pill rendered with `disabled` must expose a
+// natively disabled remove button: out of the tab order, unreachable via ArrowRight, and unable to
+// remove the pill. The `removable-pill-test` story renders 6 pills where the last one
+// ("Value segment 3") is the disabled one.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18839 - DSPillsV2:: disabled removable pill remove button - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should keep the disabled remove button unfocusable via Tab and ArrowRight', async () => {
+      const disabledCloseBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment 3');
+      await disabledCloseBtn.waitForDisplayed();
+      const lastEnabledCloseBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment 2');
+      const resetBtn = await DSPillsV2CO.getResetBtn();
+
+      // 5 Tab stops reach the remove button of the last ENABLED pill
+      await tabStops(5);
+      const enabledFocusedAfterTabs = await lastEnabledCloseBtn.isFocused();
+
+      // ArrowRight cannot move focus onto the disabled remove button, so focus stays where it was
+      await browser.keys(Key.ArrowRight);
+      const enabledFocusedAfterArrowRight = await lastEnabledCloseBtn.isFocused();
+
+      // Tab skips the disabled remove button entirely and lands on the Reset button
+      await browser.keys(Key.Tab);
+      const resetFocusedAfterTab = await resetBtn.isFocused();
+
+      await expect(disabledCloseBtn).toBeDisabled();
+      await expect(disabledCloseBtn).toHaveAttribute('tabindex', '-1');
+      await expect(enabledFocusedAfterTabs).toEqual(true);
+      await expect(enabledFocusedAfterArrowRight).toEqual(true);
+      await expect(resetFocusedAfterTab).toEqual(true);
+    });
+
+    it('02: should not remove the disabled pill when its remove button is clicked', async () => {
+      const disabledCloseBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment 3');
+      await disabledCloseBtn.click();
+
+      const disabledPill = await DSPillsV2CO.getPillByLabel('Value segment 3');
+      const pills = await DSPillsV2CO.getPills();
+
+      await expect(disabledPill).toBeExisting();
+      await expect(pills.length).toEqual(6);
+    });
+  });
+}

package/ds-pills-v2/disabled/DSPills.disabled.visual.spec.js

@@ -0,0 +1,33 @@
+import DSPillsV2CO from '../DSPillsV2CO';
+import { mouseOver } from '../../helpers';
+
+// Tests for the fix delivered in PUI-17870 (missing icon color and hover style on the removable pill
+// button, originally shipped with PUI-17861). A `disabled` removable pill must render a dimmed remove
+// icon and must NOT paint the hover background that an enabled one does.
+// Applitools Eyes is used instead of Percy on purpose: Percy serializes the DOM and re-renders it
+// without a pointer, so a CSS-only `:hover` state would be lost from the snapshot.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18840 - DSPillsV2:: disabled removable pill remove button hover - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should paint the hover background on an enabled remove button', async () => {
+      await browser.eyesOpen();
+      const enabledCloseBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment 2');
+      await enabledCloseBtn.waitForDisplayed();
+      await mouseOver(enabledCloseBtn);
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pills-v2-remove-hover-enabled'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should keep the disabled remove button dimmed with no hover background', async () => {
+      await browser.eyesOpen();
+      const disabledCloseBtn = await DSPillsV2CO.getCloseButtonByPillLabel('Value segment 3');
+      await mouseOver(disabledCloseBtn);
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pills-v2-remove-hover-disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-progress-indicator/DSProgressIndicator.axe-core.func.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable wdio/no-pause */
 import DSProgressIndicatorCO from './DSProgressIndicatorCO';
 import { axeCoreCheck } from '../helpers';
 
@@ -14,6 +15,7 @@ if (
     });
     it('01: should display basic progress indicator and pass axe-core', async () => {
       await (await DSProgressIndicatorCO.getUploadLabel()).waitForDisplayed();
+      await browser.pause(500);
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });

package/ds-progress-indicator/DSProgressIndicatorCO.js

@@ -12,7 +12,7 @@ export default class DSProgressIndicatorCO extends PageObject {
   }
 
   static async getUploadLabel() {
-    return $('//div[contains(text(), "upload")]');
+    return $('//span[contains(text(), "upload")]');
   }
 
   // Snapshots

package/ds-query-builder/DSQueryBuilder.visual.spec.js

@@ -8,22 +8,22 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSQueryBuilderCO.dateRangeV2.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should be displayed date range inputs empties', async () => {
+    it('01: should be displayed date range inputs empties', async () => {
       await (await DSQueryBuilderCO.getDatePickerBtn()).waitForDisplayed();
-      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-empty'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
-    it('should be displayed calendar opened and range selected', async () => {
+    it('should be displayed date range inputs filled', async () => {
       await (await DSQueryBuilderCO.getDatePickerBtn()).click();
       await (await DSQueryBuilderCO.getDate(12)).waitForDisplayed();
       await (await DSQueryBuilderCO.getDate(12)).click();
       await (await DSQueryBuilderCO.getDate(16)).click();
-      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-calendar-opened'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
-    it('should be displayed date range values entered', async () => {
+    it('03: should be displayed date range values entered', async () => {
       await (await DSQueryBuilderCO.getDatePickerBtn()).click();
-      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-completed'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });