dimsum-e2e-tests 1.0.35 → 1.1.0

package/ds-floating-context/placement/DSFloatingContext.placement.visual.spec.js

@@ -0,0 +1,48 @@
+// Tests for the fix introduced in PUI-14527 (useFloatingContext placement string type mismatch)
+import { mouseOver } from '../../helpers';
+import DSFloatingContextCO from '../DSFloatingContextCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18529 - DSFloatingContext:: useFloatingContext placement directions - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFloatingContextCO.positionsTestURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display tooltip with right placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[0]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-right'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display tooltip with top placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[1]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-top'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display tooltip with bottom placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[2]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-bottom'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: should display tooltip with left placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[3]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-left'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-floating-context/slots/DSFloatingContext.slots.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import DSFloatingContextCO from '../DSFloatingContextCO';
+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-15675 - DSFloatingContextCO:: slots - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFloatingContextCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a custom Floating Context and pass axe-core', async () => {
+      const tooltip = await DSFloatingContextCO.getFloatingContextContentSlot();
+      await tooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-floating-context/slots/DSFloatingContext.slots.func.spec.js

@@ -0,0 +1,41 @@
+import DSFloatingContextCO from '../DSFloatingContextCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15676 - DSFloatingContextCO:: slots - globalAttributes test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFloatingContextCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-*', async () => {
+      const contentSlot = await DSFloatingContextCO.getFloatingContextContentSlot();
+      const rootSlot = await DSFloatingContextCO.getFloatingContextRootSlot();
+
+      await expect(contentSlot).toHaveAttribute('data-testid', 'floating-content-custom-data-testid');
+      await expect(rootSlot).toHaveAttribute('data-testid', 'floating-root-custom-data-testid');
+    });
+    it('02: should have custom aria-*', async () => {
+      // const arrowSlot = DSFloatingContextCO.getFloatingContextArrowSlot();
+      const contentSlot = await DSFloatingContextCO.getFloatingContextContentSlot();
+      const rootSlot = await DSFloatingContextCO.getFloatingContextRootSlot();
+
+      // await expect(arrowSlot).toHaveAttribute('aria-label', 'arrow-custom-aria-label');
+      await expect(contentSlot).toHaveAttribute('aria-label', 'content-custom-aria-label');
+      await expect(rootSlot).toHaveAttribute('aria-label', 'root-custom-aria-label');
+    });
+    it('03: should have custom global attributes', async () => {
+      const contentSlot = await DSFloatingContextCO.getFloatingContextContentSlot();
+      const rootSlot = await DSFloatingContextCO.getFloatingContextRootSlot();
+      const zIndexRoot = await rootSlot.getCSSProperty('z-index');
+
+      await expect(contentSlot).toHaveAttribute('id', 'floating-content-id');
+      await expect(rootSlot).toHaveAttribute('id', 'floating-root-id');
+      await expect(rootSlot).toHaveAttribute('role', 'tooltip');
+      await expect(zIndexRoot.value).toEqual(5000);
+    });
+  });
+}

package/ds-floating-context/slots/DSFloatingContext.slots.visual.spec.js

@@ -0,0 +1,18 @@
+/* eslint-disable wdio/no-pause */
+import DSFloatingContextCO from '../DSFloatingContextCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15677 - DSFloatingContext:: slots - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFloatingContextCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a custom Floating Context', async () => {
+      await browser.eyesOpen();
+      const tooltip = await DSFloatingContextCO.getFloatingContextRootSlot();
+      await tooltip.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSFloatingContextCO.snapshotPath('floating-context-slots'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItemCO.js

@@ -39,15 +39,15 @@ export default class DSFormLayoutBlockItemCO extends PageObject {
   }
 
   static async getTextInput() {
-    return $('[data-testid="ds-input-text-input"]');
+    return $('[data-testid="ds-inputtext-input"]');
   }
 
   static async getTextInputs(index = 0) {
-    return $$('[data-testid="ds-input-text-input"]')[index];
+    return $$('[data-testid="ds-inputtext-input"]')[index];
   }
 
   static async getTextFocuseableByIndex(index = 0) {
-    return $$(`[data-testid="ds-input-text-root"]`)[index];
+    return $$(`[data-testid="ds-inputtext-root"]`)[index];
   }
 
   static async middleNameLabel() {

package/ds-form-layout-label/DSFormLayoutLabelCO.js

@@ -1,7 +1,9 @@
-import { DSFormLayoutBlockItemDataTestId } from '../../packages/ds-form-layout-label/src/index.ts';
 import { PATH_FORM_LAYOUT_LABEL } from '../../environments/storybook/paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
+// Literal on purpose: importing the package runtime here loads its CJS graph inside the wdio (node) process.
+const DSFormLayoutBlockItemDataTestId = { LABEL: 'ds-form-layout-label-label' };
+
 export default class DSFormLayoutLabel extends PageObject {
   static basic = new Urlbuilder(PATH_FORM_LAYOUT_LABEL, 'basic');
 

package/ds-hooks/DSHook.usetree.func.spec.js

@@ -107,8 +107,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
       await drillFirstItemBtn.click();
       const drillFirstChildBtn = await DSHookCO.getDrillThisBtnByIndex(0);
-      const isDisabled = await drillFirstChildBtn.getAttribute('aria-disabled');
-      await expect(isDisabled).toBe('true');
+      // Since PUI-17909 DSButtonV2 renders the native `disabled` attribute and intentionally omits
+      // aria-disabled (that is reserved for applyAriaDisabled/readOnly), so assert the native disabled state.
+      await expect(drillFirstChildBtn).toBeDisabled();
     });
   });
 }

package/ds-hooks/DSHookCO.js

@@ -71,7 +71,7 @@ export default class DSHookCO extends PageObject {
   static getAddChildBtnByIndex = async (index) => getElementByIndex(this.getAddChildButtons, index);
 
   static async getBreadCrumbItems() {
-    return $$('[data-testid="ds-typography-element"]');
+    return $$('[data-testid="ds-breadcrumb-item"]');
   }
 
   static getBreadCrumbItemByIndex = async (index) => getElementByIndex(this.getBreadCrumbItems, index);

package/ds-hooks/useFocusTrap/UseFocusTrap.func.spec.js

@@ -0,0 +1,36 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import UseFocusTrapCO from './UseFocusTrapCO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-12975, useFocusTrap hook -Func', () => {
+    before(async () => {
+      const errorOnGo = await UseFocusTrapCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should normally tab to third item', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const button = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(button).toBeFocused();
+    });
+    it('02: should tab and cycle back to second item (instead of the fourth)', async () => {
+      await browser.keys(Key.Tab);
+      const button = await DSButtonV3CO.getButtonByIndex(1);
+      await expect(button).toBeFocused();
+    });
+    it('03: should shif+tab and cycle back to third item (instead of the first)', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const button = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(button).toBeFocused();
+    });
+    it('04: should tab x2 and reach the same item (third)', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const button = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(button).toBeFocused();
+    });
+  });
+}

package/ds-hooks/useFocusTrap/UseFocusTrapCO.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_USE_FOCUS_TRAP } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class UseFocusTrapCO extends PageObject {
+  // Desktop
+  static basicTest = new Urlbuilder(PATH_E2E_USE_FOCUS_TRAP, 'basic-test');
+
+  static toggleTest = new Urlbuilder(PATH_E2E_USE_FOCUS_TRAP, 'toggle-test');
+}

package/ds-hooks/useKeyboardNavigation/DSHook.useKeyboardNavigation.func.spec.js

@@ -0,0 +1,145 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import UseKeyboardNavCO from './UseKeyboardNavigationCO';
+// import DSCardV3CO from '../../ds-card-v3/DSCardV3CO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+import DSMenuItemsCO from '../../ds-menu-item/DSMenuItemsCO';
+import { tabStops } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Uncomment after CardV3 is completely released
+  // describe('PUI-12538 [useKeyboardNav] Card Select:: DisableRoving true + agnostic direction', () => {
+  //   before(async () => {
+  //     const errorOnGo = await UseKeyboardNavCO.cardSelect.go();
+  //     if (errorOnGo) throw errorOnGo;
+  //   });
+  //   it('01: should focus on the 4th card after 3 tab stops', async () => {
+  //     await tabStops(3);
+  //     const card4 = await DSCardV3CO.getActionAreaByIndex(3);
+  //     await expect(card4).toBeFocused();
+  //   });
+  //   it('02: should focus on the 2nd card after moving up with ArrowUp', async () => {
+  //     await browser.keys(Key.ArrowUp);
+  //     const card2 = await DSCardV3CO.getActionAreaByIndex(1);
+  //     await expect(card2).toBeFocused();
+  //   });
+  //   it('03: should focus on the 1st card after moving up with ArrowLeft', async () => {
+  //     await browser.keys(Key.ArrowLeft);
+  //     const card1 = await DSCardV3CO.getActionAreaByIndex(0);
+  //     await expect(card1).toBeFocused();
+  //   });
+  //   it('04: should focus on the 2nd card after moving down with ArrowDown', async () => {
+  //     await browser.keys(Key.ArrowDown);
+  //     const card2 = await DSCardV3CO.getActionAreaByIndex(1);
+  //     await expect(card2).toBeFocused();
+  //   });
+  //   it('05: should focus on the 4th card after moving down with ArrowRight', async () => {
+  //     await browser.keys(Key.ArrowRight);
+  //     const card4 = await DSCardV3CO.getActionAreaByIndex(3);
+  //     await expect(card4).toBeFocused();
+  //   });
+  // });
+  describe('PUI-12539 [useKeyboardNav] disabledRovingTab:: DisableRoving true + horizontal direction', () => {
+    before(async () => {
+      const errorOnGo = await UseKeyboardNavCO.disabledRovingTab.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus on 4th item after 3 tab stops', async () => {
+      await tabStops(3);
+      const item4 = await DSButtonV3CO.getButtonByIndex(3);
+      await expect(item4).toBeFocused();
+    });
+    it('02: should not move to the previous item when using ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      const item4 = await DSButtonV3CO.getButtonByIndex(3);
+      await expect(item4).toBeFocused();
+    });
+    it('03: should focus on the 2nd item after moving to the previous item using ArrowLeft', async () => {
+      await browser.keys(Key.ArrowLeft);
+      const item2 = await DSButtonV3CO.getButtonByIndex(1);
+      await expect(item2).toBeFocused();
+    });
+    it('04: should not move to the next item when using ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      const item2 = await DSButtonV3CO.getButtonByIndex(1);
+      await expect(item2).toBeFocused();
+    });
+    it('05: should focus on the 4th item after moving to the next item using ArrowRight', async () => {
+      await browser.keys(Key.ArrowRight);
+      const item4 = await DSButtonV3CO.getButtonByIndex(3);
+      await expect(item4).toBeFocused();
+    });
+  });
+  describe('PUI-12540 [useKeyboardNav] focusCriteria:: DisableRoving false + vertical direction', () => {
+    before(async () => {
+      const errorOnGo = await UseKeyboardNavCO.focusCriteria.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus on the inputText after 2 tab stops', async () => {
+      await tabStops(2);
+      const inputText = await UseKeyboardNavCO.getInputText();
+      await expect(inputText).toBeFocused();
+    });
+    it('02: should focus on the first item after Shift+Tab', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const item1 = await DSButtonV3CO.getButtonByIndex(0);
+      await expect(item1).toBeFocused();
+    });
+    it('03: should move to the next item when using ArrowDown', async () => {
+      await browser.keys(Key.ArrowRight);
+      const item3 = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(item3).toBeFocused();
+    });
+    it('04: should not focus on the next item when using ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      const item3 = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(item3).toBeFocused();
+    });
+    it('05: should not focus on the prev item when using ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      const item3 = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(item3).toBeFocused();
+    });
+    it('06: should move to the prev item when using ArrowLeft', async () => {
+      await browser.keys(Key.ArrowLeft);
+      const item1 = await DSButtonV3CO.getButtonByIndex(0);
+      await expect(item1).toBeFocused();
+    });
+  });
+  describe('PUI-12541 [useKeyboardNav] menuItems:: DisableRoving false + agnostic direction', () => {
+    before(async () => {
+      const errorOnGo = await UseKeyboardNavCO.menuItems.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus on the inputText after 2 tab stops', async () => {
+      await tabStops(2);
+      const inputText = await UseKeyboardNavCO.getInputText();
+      await expect(inputText).toBeFocused();
+    });
+    it('02: should focus on the first item after Shift+Tab', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const menuItem1 = await DSMenuItemsCO.getMenuItem('1');
+      await expect(menuItem1).toBeFocused();
+    });
+    it('03: should move to the prev item when using ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      const menuItem4 = await DSMenuItemsCO.getMenuItem('4');
+      await expect(menuItem4).toBeFocused();
+    });
+    it('04: should move to the prev item when using ArrowLeft', async () => {
+      await browser.keys(Key.ArrowLeft);
+      const menuItem3 = await DSMenuItemsCO.getMenuItem('3');
+      await expect(menuItem3).toBeFocused();
+    });
+    it('05: should move to the next item when using ArrowRight', async () => {
+      await browser.keys(Key.ArrowRight);
+      const menuItem4 = await DSMenuItemsCO.getMenuItem('4');
+      await expect(menuItem4).toBeFocused();
+    });
+    it('06: should move to the next item when using ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      const menuItem1 = await DSMenuItemsCO.getMenuItem('1');
+      await expect(menuItem1).toBeFocused();
+    });
+  });
+}

package/ds-hooks/useKeyboardNavigation/UseKeyboardNavigationCO.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_USE_KEYBOARD_NAVIGATION } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class UseKeyboardNavCO extends PageObject {
+  // direction: agnostic -- disabledRoving: true -- focusCriteria: undefined
+  static cardSelect = new Urlbuilder(PATH_E2E_USE_KEYBOARD_NAVIGATION, 'card-select-test');
+
+  // direction: horizontal -- disabledRoving: true -- focusCriteria: defined
+  static disabledRovingTab = new Urlbuilder(PATH_E2E_USE_KEYBOARD_NAVIGATION, 'disable-roving-tab-index-test');
+
+  // direction: vertical -- disabledRoving: false -- focusCriteria: defined
+  static focusCriteria = new Urlbuilder(PATH_E2E_USE_KEYBOARD_NAVIGATION, 'focus-criteria-test');
+
+  // direction: agnostic -- disabledRoving: false -- focusCriteria: undefined
+  static menuItems = new Urlbuilder(PATH_E2E_USE_KEYBOARD_NAVIGATION, 'menu-items-test');
+
+  static async getBtns() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getBtnByIndex = async (index) => getElementByIndex(this.getBtns, index);
+
+  static async getInputText() {
+    return $('[data-testid="input-text"]');
+  }
+
+  // mostly used
+  static getInfo = async () => getElementByIndex(this.getH3s, 3);
+
+  // used for first focus in story
+  static getInfo2 = async () => getElementByIndex(this.getH3s, 4);
+}

package/ds-hooks/useOnBlurOut/UseOnBlurOut.axe-core.func.spec.js

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import useOnBlurOutCO from './UseOnBlurOutCO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
+  describe('PUI-12892 - UseOnBlurOut, Basic -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await useOnBlurOutCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should trigger useOnBlurOut and pass axe-core scan', async () => {
+      const childButton1 = await DSButtonV3CO.getButtonByIndex(0);
+      await childButton1.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const onBlurData = await useOnBlurOutCO.getOnBlurData();
+      await onBlurData.waitForDisplayed();
+      const result = await axeCoreCheck();
+      await expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-hooks/useOnBlurOut/UseOnBlurOut.func.spec.js

@@ -0,0 +1,83 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import useOnBlurOutCO from './UseOnBlurOutCO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
+  // Unskip for safari after PUI12887 is fixed
+  describe('PUI-12891 - UseOnBlurOut, Basic Mouse -Func', () => {
+    before(async () => {
+      const errorOnGo = await useOnBlurOutCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: click child should not trigger useOnBlurOut', async () => {
+      const childButton1 = await DSButtonV3CO.getButtonByIndex(0);
+      await childButton1.waitForDisplayed();
+      await childButton1.click();
+      await childButton1.click();
+      const onBlurData = await useOnBlurOutCO.getOnBlurData();
+      await expect(onBlurData).not.toBeDisplayed();
+    });
+    it('02: click different child (of same parent) should not trigger useOnBlurOut', async () => {
+      const childButton2 = await DSButtonV3CO.getButtonByIndex(1);
+      await childButton2.click();
+      const onBlurData = await useOnBlurOutCO.getOnBlurData();
+      await expect(onBlurData).not.toBeDisplayed();
+    });
+    it('03: click parent (of focused child) should trigger useOnBlurOut', async () => {
+      const childButton1 = await DSButtonV3CO.getButtonByIndex(0);
+      await childButton1.click({ x: 120 }); // clicks outside button
+      const onBlurData = await (await useOnBlurOutCO.getOnBlurData()).getText();
+      await expect(onBlurData).toEqual('Parent 1, Child 2');
+    });
+    it('04: click different parent should trigger useOnBlurOut', async () => {
+      const childButton2 = await DSButtonV3CO.getButtonByIndex(0);
+      await childButton2.click();
+      const childButton3 = await DSButtonV3CO.getButtonByIndex(2);
+      await childButton3.click({ x: 120 }); // clicks outside button
+      const onBlurData = await (await useOnBlurOutCO.getOnBlurData()).getText();
+      await expect(onBlurData).toEqual('Parent 1, Child 1');
+    });
+    it('05: click children of different parent should trigger useOnBlurOut', async () => {
+      const childButton2 = await DSButtonV3CO.getButtonByIndex(1);
+      await childButton2.click();
+      const childButton3 = await DSButtonV3CO.getButtonByIndex(2);
+      await childButton3.click();
+      const onBlurData = await (await useOnBlurOutCO.getOnBlurData()).getText();
+      await expect(onBlurData).toEqual('Parent 1, Child 2');
+    });
+  });
+
+  describe('PUI-12892 - UseOnBlurOut, Basic KB -Func', () => {
+    before(async () => {
+      const errorOnGo = await useOnBlurOutCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: focusing child should not trigger useOnBlurOut', async () => {
+      const childButton1 = await DSButtonV3CO.getButtonByIndex(0);
+      await childButton1.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const onBlurData = await useOnBlurOutCO.getOnBlurData();
+      await expect(onBlurData).not.toBeDisplayed();
+    });
+    it('02: tabbing to  differet child should not trigger useOnBlurOut', async () => {
+      await browser.keys(Key.Tab);
+      const onBlurData = await useOnBlurOutCO.getOnBlurData();
+      await expect(onBlurData).not.toBeDisplayed();
+    });
+    it('03: leaving parent with tab should trigger useOnBlurOut', async () => {
+      await browser.keys(Key.Tab);
+      const onBlurData = await (await useOnBlurOutCO.getOnBlurData()).getText();
+      await expect(onBlurData).toEqual('Parent 1, Child 2');
+    });
+    it('04: leaving parent with shift+tab should trigger useOnBlurOut', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const onBlurData = await (await useOnBlurOutCO.getOnBlurData()).getText();
+      await expect(onBlurData).toEqual('Parent 2, Child 1');
+    });
+  });
+}

package/ds-hooks/useOnBlurOut/UseOnBlurOutCO.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_USE_ON_BLUR_OUT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class UseKeyboardNavCO extends PageObject {
+  static basicTest = new Urlbuilder(PATH_E2E_USE_ON_BLUR_OUT, 'basic-test');
+
+  static async getOnBlurData() {
+    return $('[data-testid="onblurdata"]');
+  }
+}

package/ds-icons/DSIcons.visual.spec.js

@@ -0,0 +1,45 @@
+import DSIconsCO from './DSIconsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8715 :: Icons, Showcase -Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIconsCO.showCaseTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display icons correctly', async () => {
+      await browser.eyesOpen();
+      const anyIcon = await DSIconsCO.getIconsByIndex(1);
+      await anyIcon.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSIconsCO.snapshotPath('icons-showcase-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-4223 :: Icons, Showcase ICE -Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIconsCO.showCaseICETest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display icons correctly', async () => {
+      await browser.eyesOpen();
+      const anyIcon = await DSIconsCO.getSVGByIndex(0);
+      await anyIcon.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSIconsCO.snapshotPath('icons-showcase-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('01: PUI-6400 :: Icons, Showcase Products -Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIconsCO.showCaseProductsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display icons correctly', async () => {
+      await browser.eyesOpen();
+      const anyIcon = await DSIconsCO.getIconsByIndex(1);
+      await anyIcon.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSIconsCO.snapshotPath('icons-showcase-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-icons/DSIconsCO.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_ICONS } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSIconsCO extends PageObject {
+  // URL's
+  static showCaseTest = new Urlbuilder(PATH_E2E_ICONS, 'show-case-test');
+
+  static showCaseICETest = new Urlbuilder(PATH_E2E_ICONS, 'show-case-ice-test');
+
+  static showCaseProductsTest = new Urlbuilder(PATH_E2E_ICONS, 'show-case-products-test');
+
+  // Get's
+  static async getIconsByIndex(index = 0) {
+    return $$(`[data-testid="ds-icon-root"]`)[index];
+  }
+
+  static async getSVGByIndex(index = 0) {
+    return $$(`[data-testid="ds-icon-svg"]`)[index];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Icons', example);
+  }
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_E2E_ICONS, component);
+  }
+}

package/ds-image/DSImageCO.js

@@ -1,7 +1,9 @@
-import { IMAGE_DATA_TESTID } from '@elliemae/ds-legacy-image';
 import { PATH_E2E_IMAGE } from '../../environments/storybook/paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
+// Literal on purpose: importing the package runtime here loads its CJS graph inside the wdio (node) process.
+const IMAGE_DATA_TESTID = { ROOT: 'ds-image-wrapper' };
+
 export default class DSImage extends PageObject {
   static basic = new Urlbuilder(PATH_E2E_IMAGE, 'basic');