dimsum-e2e-tests 3.70.0-next.3 → 3.70.0-next.30

package/ds-chat/bubbles/slots/DSChatBubble.slots.func.spec.js

@@ -0,0 +1,49 @@
+// Tests for PUI-17908 (ds-chat-bubble slots implementation)
+import { BubbleCO } from '../../components';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18459 - DSChatBubble:: slot wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await BubbleCO.bubbleSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-* for each slot', async () => {
+      await (await BubbleCO.getWrapperSlot()).waitForDisplayed();
+      await expect(await BubbleCO.getWrapperSlot()).toHaveAttribute('aria-label', 'wrapper aria');
+      await expect(await BubbleCO.getColoredBubbleSlot()).toHaveAttribute('aria-label', 'colored-bubble aria');
+      await expect(await BubbleCO.getHeaderSlot()).toHaveAttribute('aria-label', 'header aria');
+      await expect(await BubbleCO.getHeaderLeftSlot()).toHaveAttribute('aria-label', 'header-left aria');
+      await expect(await BubbleCO.getHeaderRightSlot()).toHaveAttribute('aria-label', 'header-right aria');
+      await expect(await BubbleCO.getBodyWrapperSlot()).toHaveAttribute('aria-label', 'body-wrapper aria');
+      await expect(await BubbleCO.getErrorMessageSlot()).toHaveAttribute('aria-label', 'error-message aria');
+      await expect(await BubbleCO.getHelpMessageSlot()).toHaveAttribute('aria-label', 'help-message aria');
+    });
+
+    it('02: should have custom data-testid for each slot', async () => {
+      await expect(await BubbleCO.getWrapperSlot()).toHaveAttribute('data-testid', 'wrapper data');
+      await expect(await BubbleCO.getColoredBubbleSlot()).toHaveAttribute('data-testid', 'colored-bubble data');
+      await expect(await BubbleCO.getHeaderSlot()).toHaveAttribute('data-testid', 'header data');
+      await expect(await BubbleCO.getHeaderLeftSlot()).toHaveAttribute('data-testid', 'header-left data');
+      await expect(await BubbleCO.getHeaderRightSlot()).toHaveAttribute('data-testid', 'header-right data');
+      await expect(await BubbleCO.getBodyWrapperSlot()).toHaveAttribute('data-testid', 'body-wrapper data');
+      await expect(await BubbleCO.getErrorMessageSlot()).toHaveAttribute('data-testid', 'error-message data');
+      await expect(await BubbleCO.getHelpMessageSlot()).toHaveAttribute('data-testid', 'help-message data');
+    });
+
+    it('03: should have custom lang for each slot', async () => {
+      await expect(await BubbleCO.getWrapperSlot()).toHaveAttribute('lang', 'pt');
+      await expect(await BubbleCO.getHeaderSlot()).toHaveAttribute('lang', 'de');
+      await expect(await BubbleCO.getHeaderLeftSlot()).toHaveAttribute('lang', 'en');
+      await expect(await BubbleCO.getHeaderRightSlot()).toHaveAttribute('lang', 'fr');
+      await expect(await BubbleCO.getBodyWrapperSlot()).toHaveAttribute('lang', 'it');
+      await expect(await BubbleCO.getErrorMessageSlot()).toHaveAttribute('lang', 'sv');
+      await expect(await BubbleCO.getHelpMessageSlot()).toHaveAttribute('lang', 'ja');
+    });
+  });
+}

package/ds-chat/bubbles/slots/DSChatBubble.slots.visual.spec.js

@@ -0,0 +1,25 @@
+// Tests for PUI-17908 (ds-chat-bubble slots implementation)
+import { BubbleCO } from '../../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18458 - DSChatBubble:: bubble slot variants - Visual', () => {
+    before(async () => {
+      const errorOnGo = await BubbleCO.bubbleSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display sender and recipient bubble variants', async () => {
+      const senderWrapper = await BubbleCO.getWrapperSlot();
+      await senderWrapper.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(BubbleCO.snapshotPath('bubble-slots-sender-recipient'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display bubble with errorMessage and helpMessage', async () => {
+      const errorBubble = await BubbleCO.getErrorMessageSlot();
+      await errorBubble.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(BubbleCO.snapshotPath('bubble-slots-error-help'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chat/card/slots/DSChatCard.slots.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+// Tests for PUI-17908 (ds-chat-card slots implementation)
+import { CardCO } from '../../components';
+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-18463 - DSChatCard:: axe-core - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await CardCO.cardSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should pass axe-core on all card variants', async () => {
+      const titleCard = await CardCO.getRootSlot();
+      await titleCard.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-chat/card/slots/DSChatCard.slots.func.spec.js

@@ -0,0 +1,47 @@
+// Tests for PUI-17908 (ds-chat-card slots implementation)
+import { CardCO } from '../../components';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18462 - DSChatCard:: slot wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardCO.cardSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-* for each slot', async () => {
+      await (await CardCO.getRootSlot()).waitForDisplayed();
+      await expect(await CardCO.getRootSlot()).toHaveAttribute('aria-label', 'root aria');
+      await expect(await CardCO.getMainContentSlot()).toHaveAttribute('aria-label', 'main-content aria');
+      await expect(await CardCO.getTitleSlot()).toHaveAttribute('aria-label', 'title aria');
+      await expect(await CardCO.getContentSlot()).toHaveAttribute('aria-label', 'content aria');
+      await expect(await CardCO.getTimeSlot()).toHaveAttribute('aria-label', 'time aria');
+      await expect(await CardCO.getRightAddonSlot()).toHaveAttribute('aria-label', 'right-addon aria');
+      await expect(await CardCO.getTruncatedSpanSlot()).toHaveAttribute('aria-label', 'truncated-span aria');
+    });
+
+    it('02: should have custom data-testid for each slot', async () => {
+      await expect(await CardCO.getRootSlot()).toHaveAttribute('data-testid', 'root data');
+      await expect(await CardCO.getMainContentSlot()).toHaveAttribute('data-testid', 'main-content data');
+      await expect(await CardCO.getTitleSlot()).toHaveAttribute('data-testid', 'title data');
+      await expect(await CardCO.getContentSlot()).toHaveAttribute('data-testid', 'content data');
+      await expect(await CardCO.getTimeSlot()).toHaveAttribute('data-testid', 'time data');
+      await expect(await CardCO.getRightAddonSlot()).toHaveAttribute('data-testid', 'right-addon data');
+      await expect(await CardCO.getTruncatedSpanSlot()).toHaveAttribute('data-testid', 'truncated-span data');
+    });
+
+    it('03: should have custom lang for each slot', async () => {
+      await expect(await CardCO.getRootSlot()).toHaveAttribute('lang', 'pt');
+      await expect(await CardCO.getMainContentSlot()).toHaveAttribute('lang', 'es');
+      await expect(await CardCO.getTitleSlot()).toHaveAttribute('lang', 'de');
+      await expect(await CardCO.getContentSlot()).toHaveAttribute('lang', 'en');
+      await expect(await CardCO.getTimeSlot()).toHaveAttribute('lang', 'fr');
+      await expect(await CardCO.getRightAddonSlot()).toHaveAttribute('lang', 'it');
+      await expect(await CardCO.getTruncatedSpanSlot()).toHaveAttribute('lang', 'nl');
+    });
+  });
+}

package/ds-chat/card/slots/DSChatCard.slots.visual.spec.js

@@ -0,0 +1,18 @@
+// Tests for PUI-17908 (ds-chat-card slots implementation)
+import { CardCO } from '../../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18461 - DSChatCard:: card slot variants - Visual', () => {
+    before(async () => {
+      const errorOnGo = await CardCO.cardSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display card with all slot props and style customization', async () => {
+      const root = await CardCO.getRootSlot();
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(CardCO.snapshotPath('card-slot-variants'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chat/card/truncated-text/DSChatCard.truncated-text.func.spec.js

@@ -0,0 +1,32 @@
+import { CardCO } from '../../components';
+import { mouseOver } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18484 - DSChatCard:: truncated text - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardCO.cardTruncatedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render TruncatedSpan for each card with long content', async () => {
+      const span = await CardCO.getTruncatedSpan(0);
+      await span.waitForDisplayed();
+      await expect(span).toBeDisplayed();
+      await expect(await CardCO.getTruncatedSpan(1)).toBeDisplayed();
+      await expect(await CardCO.getTruncatedSpan(2)).toBeDisplayed();
+    });
+
+    it('02: should show tooltip on hover when content overflows', async () => {
+      const span = await CardCO.getTruncatedSpan(0);
+      await mouseOver(span);
+      const tooltip = await CardCO.getTooltipContainer();
+      await tooltip.waitForDisplayed({ timeout: 3000 });
+      await expect(tooltip).toBeDisplayed();
+    });
+  });
+}

package/ds-chat/card/truncated-text/DSChatCard.truncated-text.visual.spec.js

@@ -0,0 +1,26 @@
+import { CardCO } from '../../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18483 - DSChatCard:: truncated text - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardCO.cardTruncatedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display cards with truncated content at rest', async () => {
+      const span = await CardCO.getTruncatedSpan(0);
+      await span.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(CardCO.snapshotPath('truncated-text'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display tooltip on hover over truncated content', async () => {
+      const span = await CardCO.getTruncatedSpan(0);
+      await span.moveTo();
+      const tooltip = await CardCO.getTooltipContainer();
+      await tooltip.waitForDisplayed({ timeout: 3000 });
+      const snapshot = await browser.percyCheckScreenshot(CardCO.snapshotPath('truncated-text-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chat/card/with-notification-badges/DSChatCard.with-notification-badges.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+import { CardCO } from '../../components';
+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-18486 - DSChatCard:: with notification badges - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardCO.cardWithNotificationBadgesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should pass axe-core with notification badge variants', async () => {
+      const cards = await CardCO.getCards();
+      await cards[0].waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-chat/card/with-notification-badges/DSChatCard.with-notification-badges.visual.spec.js

@@ -0,0 +1,17 @@
+import { CardCO } from '../../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18485 - DSChatCard:: with notification badges - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardCO.cardWithNotificationBadgesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display cards with notification badges', async () => {
+      const cards = await CardCO.getCards();
+      await cards[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(CardCO.snapshotPath('with-notification-badges'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chat/components/BubbleCO.js

@@ -1,13 +1,15 @@
-import { PATH_E2E_CHAT } from '../../paths';
+import { PATH_E2E_CHAT, PATH_E2E_CHAT_BUBBLE } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class BubbleCO extends PageObject {
-  static bubbleURL = new Urlbuilder(PATH_E2E_CHAT, 'bubble-test');
+  static bubbleURL = new Urlbuilder(PATH_E2E_CHAT_BUBBLE, 'bubble-test');
 
-  static bubbleWrapping = new Urlbuilder(PATH_E2E_CHAT, 'bubble-wrapping-test');
+  static bubbleWrapping = new Urlbuilder(PATH_E2E_CHAT_BUBBLE, 'bubble-wrapping-test');
 
   static systemMessageInContainerUCURL = new Urlbuilder(PATH_E2E_CHAT, 'system-message-in-container');
 
+  static bubbleSlotsURL = new Urlbuilder(PATH_E2E_CHAT_BUBBLE, 'slots-test');
+
   // selectors
   static async getErrorMessage(bubbleId) {
     return $(`[data-testid="chat-bubble-error-message-${bubbleId}"]`);
@@ -56,6 +58,47 @@ export default class BubbleCO extends PageObject {
     }, bubbleId);
   }
 
+  static async getBubbleWrapper(bubbleId) {
+    return $(`[data-testid="ds-chat-bubble-${bubbleId}"]`);
+  }
+
+  // Slot selectors (used by slots func spec — one bubble per story)
+  static async getWrapperSlot() {
+    return $('[data-dimsum-slot="dsBubbleWrapper"]');
+  }
+
+  static async getColoredBubbleSlot() {
+    return $('[data-dimsum-slot="dsBubbleColoredBubble"]');
+  }
+
+  static async getHeaderSlot() {
+    return $('[data-dimsum-slot="dsBubbleHeader"]');
+  }
+
+  static async getHeaderLeftSlot() {
+    return $('[data-dimsum-slot="dsBubbleHeaderLeft"]');
+  }
+
+  static async getHeaderRightSlot() {
+    return $('[data-dimsum-slot="dsBubbleHeaderRight"]');
+  }
+
+  static async getBodyWrapperSlot() {
+    return $('[data-dimsum-slot="dsBubbleBodyWrapper"]');
+  }
+
+  static async getArrowSlot() {
+    return $('[data-dimsum-slot="dsBubbleArrow"]');
+  }
+
+  static async getErrorMessageSlot() {
+    return $('[data-dimsum-slot="dsBubbleErrorMessage"]');
+  }
+
+  static async getHelpMessageSlot() {
+    return $('[data-dimsum-slot="dsBubbleHelpMessage"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Bubble', example, 'ds-chat');

package/ds-chat/components/CardCO.js

@@ -0,0 +1,77 @@
+import { PATH_CHAT_PARTS, PATH_E2E_CHAT_CARD } from '../../paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class CardCO extends PageObject {
+  static chatCardURL = new Urlbuilder(PATH_CHAT_PARTS, 'chat-card');
+
+  static cardBasicURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'basic-test');
+
+  static cardWithNotificationBadgesURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'with-notification-badges-test');
+
+  static cardTruncatedURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'truncated-text-test');
+
+  static cardSlotsURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'slots-test');
+
+  static async getCards() {
+    return $$('[data-testid="chat-card-wrapper"]');
+  }
+
+  static async getCardRoot(cardId) {
+    return $(`[data-testid="chat-card-wrapper-${cardId}"]`);
+  }
+
+  static async getCardTitle(cardId) {
+    return $(`[data-testid="chat-card-title-${cardId}"]`);
+  }
+
+  static async getCardContent(cardId) {
+    return $(`[data-testid="chat-card-content-${cardId}"]`);
+  }
+
+  static async getCardTime(cardId) {
+    return $(`[data-testid="chat-card-time-${cardId}"]`);
+  }
+
+  // Truncated text selectors
+  static async getTruncatedSpan(index = 0) {
+    return $$('[data-dimsum-slot="dsChatcardTruncatedSpan"]')[index];
+  }
+
+  static async getTooltipContainer() {
+    return $('[data-dimsum-slot="dsChatcardTooltipContainer"]');
+  }
+
+  // Slot selectors (used by slots func spec — one card per story)
+  static async getRootSlot() {
+    return $('[data-dimsum-slot="dsChatcardRoot"]');
+  }
+
+  static async getMainContentSlot() {
+    return $('[data-dimsum-slot="dsChatcardMainContent"]');
+  }
+
+  static async getTitleSlot() {
+    return $('[data-dimsum-slot="dsChatcardTitle"]');
+  }
+
+  static async getContentSlot() {
+    return $('[data-dimsum-slot="dsChatcardContent"]');
+  }
+
+  static async getTimeSlot() {
+    return $('[data-dimsum-slot="dsChatcardTime"]');
+  }
+
+  static async getRightAddonSlot() {
+    return $('[data-dimsum-slot="dsChatcardRightAddon"]');
+  }
+
+  static async getTruncatedSpanSlot() {
+    return $('[data-dimsum-slot="dsChatcardTruncatedSpan"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Card', example, 'ds-chat');
+  }
+}

package/ds-chat/components/ComposerCO.js

@@ -1,19 +1,19 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_CHAT_EXAMPLES, PATH_E2E_CHAT, PATH_CHAT_PARTS } from '../../paths';
+import { PATH_E2E_CHAT } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class ComposerCO extends PageObject {
-  static composerURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer');
+  static composerURL = new Urlbuilder(PATH_E2E_CHAT, 'composer');
 
-  static mobileComposerURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'mobile-container');
+  static mobileComposerURL = new Urlbuilder(PATH_E2E_CHAT, 'mobile-container');
 
-  static characterCountURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer-character-count');
+  static characterCountURL = new Urlbuilder(PATH_E2E_CHAT, 'composer-character-count');
 
-  static characterCountCustomURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer-character-count-custom-message');
+  static characterCountCustomURL = new Urlbuilder(PATH_E2E_CHAT, 'composer-character-count-custom-message');
 
   static responsiveContainerUCURL = new Urlbuilder(PATH_E2E_CHAT, 'responsive-container');
 
-  static containerFocusCasesURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'container-focus-cases');
+  static containerFocusCasesURL = new Urlbuilder(PATH_E2E_CHAT, 'container-focus-cases');
 
   static LONG_STRING = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula bibendum nulla';
 

package/ds-chat/components/FloatingButtonCO.js

@@ -1,8 +1,8 @@
-import { PATH_CHAT_PARTS, PATH_E2E_CHAT } from '../../paths';
+import { PATH_E2E_CHAT } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class FloatingButtonCO extends PageObject {
-  static floatingButtonURL = new Urlbuilder(PATH_CHAT_PARTS, 'float-button');
+  static floatingButtonURL = new Urlbuilder(PATH_E2E_CHAT, 'float-button');
 
   static floatingExampleURL = new Urlbuilder(PATH_E2E_CHAT, 'floating-example-test');
 

package/ds-chat/components/HeaderCO.js

@@ -1,9 +1,9 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_CHAT_PARTS, PATH_E2E_CHAT } from '../../paths';
+import { PATH_E2E_CHAT } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class HeaderCO extends PageObject {
-  static headerURL = new Urlbuilder(PATH_CHAT_PARTS, 'header');
+  static headerURL = new Urlbuilder(PATH_E2E_CHAT, 'header');
 
   static withConditionalRenderingUCURL = new Urlbuilder(PATH_E2E_CHAT, 'conditional-rendering-header-buttons');
 

package/ds-chat/components/TileCO.js

@@ -0,0 +1,82 @@
+import { PATH_E2E_CHAT, PATH_E2E_CHAT_TILE } from '../../paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class TileCO extends PageObject {
+  static tilesURL = new Urlbuilder(PATH_E2E_CHAT, 'tile');
+
+  static sidebarURL = new Urlbuilder(PATH_E2E_CHAT, 'sidebar');
+
+  static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_CHAT_TILE, 'apply-aria-disabled-test');
+
+  static slotsTestURL = new Urlbuilder(PATH_E2E_CHAT_TILE, 'slots-test');
+
+  static async getChatTile(tileId) {
+    return $(`[data-testid="tile-button-${tileId}"]`);
+  }
+
+  static async getChatTileButtonItem(tileId) {
+    return $(`[data-testid="tile-button-item-id-${tileId}"]`);
+  }
+
+  static async getSideBarSelectedTile() {
+    return $(`[data-testid="selected-tile"]`).getText();
+  }
+
+  static async getTileTooltip(id) {
+    return $(`[data-testid="ds-tooltip-v3-trigger-wrapper_ds-chat-tile-tooltip-button-item-id-${id}"]`);
+  }
+
+  static async getCounter() {
+    return $('[data-testid="counter"]');
+  }
+
+  static async getTileBadge(tileId) {
+    return $(`[data-testid="tile-badge-${tileId}"]`);
+  }
+
+  static async getTileCloseButton(tileId) {
+    return $(`[data-testid="tile-close-btn-${tileId}"]`);
+  }
+
+  // Slot selectors (used by slots func spec — one tile per story)
+  static async getRootSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonRoot"]');
+  }
+
+  static async getTooltipWrapperSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonTooltipWrapper"]');
+  }
+
+  static async getWrapperSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonWrapper"]');
+  }
+
+  static async getLeftBorderSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonLeftBorder"]');
+  }
+
+  static async getCentralContentSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonCentralContent"]');
+  }
+
+  static async getIconSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonIcon"]');
+  }
+
+  static async getLabelSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonLabel"]');
+  }
+
+  static async getBadgeSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonBadge"]');
+  }
+
+  static async getCloseButtonSlot() {
+    return $('[data-dimsum-slot="dsChattilebuttonCloseButton"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tile', example, 'ds-chat');
+  }
+}

package/ds-chat/components/index.js

@@ -1,8 +1,9 @@
 import BubbleCO from './BubbleCO';
+import CardCO from './CardCO';
 import FloatingButtonCO from './FloatingButtonCO';
-import TileCO from '../../ds-chat-tile/TileCO';
+import TileCO from './TileCO';
 import HeaderCO from './HeaderCO';
 import ComposerCO from './ComposerCO';
 import ChatCO from '../DSChatCO';
 import StoryBtnsCO from './StoryBtnsCO';
-export { BubbleCO, FloatingButtonCO, TileCO, HeaderCO, ComposerCO, ChatCO, StoryBtnsCO };
+export { BubbleCO, CardCO, FloatingButtonCO, TileCO, HeaderCO, ComposerCO, ChatCO, StoryBtnsCO };

package/ds-chat/loadmore/DSChat-loadmore.func.spec.js

@@ -21,7 +21,7 @@ if (!browser.capabilities['ice:options'].isPhone) {
       await browser.pause(2000);
       const howManyMsgs = (await DSChatCO.getBubbleContainers()).length;
       await expect(howManyMsgs).toEqual(20);
-      await expect(bubble0).toBeDisplayedInViewport();
+      await expect(bubble0).toBeDisplayed();
     });
   });
 }

package/{ds-chat-tile → ds-chat/tile}/DSChat-tile.axe-core.func.spec.js

@@ -1,6 +1,6 @@
 import { Key } from 'webdriverio';
-import { axeCoreCheck } from '../helpers';
-import TileCO from './TileCO';
+import { axeCoreCheck } from '../../helpers';
+import { TileCO } from '../components';
 
 if (
   (!browser.capabilities['ice:options'].isPhone &&

package/{ds-chat-tile → ds-chat/tile}/DSChat-tile.func.spec.js

@@ -1,5 +1,5 @@
 import { Key } from 'webdriverio';
-import TileCO from './TileCO';
+import { TileCO } from '../components';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-6684 - Chat, Tile, Keyboard Navigation', () => {

package/{ds-chat-tile → ds-chat/tile}/DSChat-tile.visual.spec.js

@@ -1,6 +1,6 @@
 import { Key } from 'webdriverio';
-import TileCO from './TileCO';
-import { mouseOver, keyboardActions, tickActions, performKeyboardAction } from '../helpers';
+import { TileCO } from '../components';
+import { mouseOver, keyboardActions, tickActions, performKeyboardAction } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone) {
   describe('PUI-6674 - Chat, Tile, Visual Tests', () => {

package/{ds-chat-tile → ds-chat/tile}/aria-disabled/DSChat-tile.aria-disabled.axe-core.func.spec.js

@@ -1,5 +1,5 @@
-import { axeCoreCheck } from '../../helpers';
-import TileCO from '../TileCO';
+import { axeCoreCheck } from '../../../helpers';
+import { TileCO } from '../../components';
 
 if (
   (!browser.capabilities['ice:options'].isPhone &&

package/{ds-chat-tile → ds-chat/tile}/aria-disabled/DSChat-tile.aria-disabled.visual.spec.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { Key } from 'webdriverio';
-import TileCO from '../TileCO';
+import { TileCO } from '../../components';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14368 - [Tile] applyAriaDisabled prop - visual Test', () => {