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

package/ds-button-v3/theme-font/DSButtonV3.theme-font.func.spec.js

@@ -0,0 +1,30 @@
+import DSButtonV3CO from '../DSButtonV3CO';
+
+// Tests the theme-driven font-family support shipped under PUI-18210
+// (V3 buttons reuse the b1 typography base → typographyFontFamily → theme.fonts.default,
+// falling back to proxima-nova). Theme-agnostic: uses a sentinel font, never the
+// dsConsumer POC theme values, so it survives any future theme change.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18708 - DSButtonV3:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSButtonV3CO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSButtonV3CO.getThemedButton();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const fallback = await DSButtonV3CO.getFallbackButton();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}

package/ds-card/DSCard.cardv2_v1.func.spec.js

@@ -0,0 +1,54 @@
+import DSCardCO from './DSCardCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18706 - Card V2, no native title attribute on container', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardCO.V2URL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: the card container does not render a native title attribute', async () => {
+      const card = await DSCardCO.getCard();
+      const titleAttr = await card.getAttribute('title');
+      await expect(titleAttr).toBeNull();
+    });
+    it('02: the title still renders as visible header text', async () => {
+      const header = await DSCardCO.getCardHeader();
+      await expect(header).toBeDisplayed();
+      await expect(header).toHaveText(expect.stringContaining('Card Title'));
+    });
+    it('03: hovering inside the card never exposes the section name as a native tooltip', async () => {
+      const card = await DSCardCO.getCard();
+      await card.moveTo();
+      const sectionTitleTooltip = await card.$('[title="Card Title"]');
+      await expect(sectionTitleTooltip).not.toBeExisting();
+    });
+  });
+
+  describe('PUI-18724 - Card V1, no native title attribute on header', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardCO.button.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: the card header does not render a native title attribute', async () => {
+      const header = await DSCardCO.getV1CardHeader();
+      const titleAttr = await header.getAttribute('title');
+      await expect(titleAttr).toBeNull();
+    });
+    it('02: the title still renders as visible header text', async () => {
+      const header = await DSCardCO.getV1CardHeader();
+      await expect(header).toBeDisplayed();
+      await expect(header).toHaveText(expect.stringContaining('Loren ipsum dolor'));
+    });
+    it('03: hovering inside the card never exposes the section name as a native tooltip', async () => {
+      const header = await DSCardCO.getV1CardHeader();
+      await header.moveTo();
+      const sectionTitleTooltip = await header.$('[title="Loren ipsum dolor"]');
+      await expect(sectionTitleTooltip).not.toBeExisting();
+    });
+  });
+}

package/ds-card/DSCard.cardv2_v1.visual.spec.js

@@ -0,0 +1,29 @@
+import DSCardCO from './DSCardCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18728 - DSCard:: V2 header title renders unchanged - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardCO.V2URL.go();
+      if (errorOnGo) throw errorOnGo;
+      const card = await DSCardCO.getCard();
+      await card.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should render the V2 card header title unchanged', async () => {
+      const snapshot = await browser.checkSnapshot(DSCardCO.snapshotPath('cardv2-header-title'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-18729 - DSCard:: V1 header title renders unchanged - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardCO.button.go();
+      if (errorOnGo) throw errorOnGo;
+      const header = await DSCardCO.getV1CardHeader();
+      await header.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should render the V1 card header title unchanged', async () => {
+      const snapshot = await browser.checkSnapshot(DSCardCO.snapshotPath('cardv1-header-title'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card/DSCardCO.js

@@ -24,6 +24,8 @@ export default class DSCardCO extends PageObject {
 
   static slotsTest = new Urlbuilder(PATH_E2E_CARD, 'slots-test');
 
+  static detailSlotsTest = new Urlbuilder(PATH_E2E_CARD, 'detail-slots-test');
+
   static ucDetailCardLongTitleURL = new Urlbuilder(PATH_E2E_CARD, 'detail-card-long-title');
 
   static detailExpandableURL = new Urlbuilder(PATH_E2E_CARD, 'detail-expandable-test');
@@ -48,6 +50,10 @@ export default class DSCardCO extends PageObject {
     return $('[data-testid="em-ds-card-header"]');
   }
 
+  static async getV1CardHeader() {
+    return $('[data-testid="ds-card-header"]');
+  }
+
   static async getCardDetailContainer() {
     return $('[data-testid="card-detail-container"]');
   }
@@ -128,4 +134,48 @@ export default class DSCardCO extends PageObject {
   static async getCardNavigationTypeSlotByIndex(index = 0) {
     return $$('[data-dimsum-slot="dsCardnavigationType"]')[index];
   }
+
+  // DetailCard (ds-card-v1-detail) slots — PUI-15889.
+  // SELECTABLE (checkbox) and EXPAND_CONTENT_BUTTON (chevron) are nested Dimsum
+  // components, so the consumer slot name surfaces as data-dimsum-parent-slot on
+  // the inner root (input / button); the rest use data-dimsum-slot directly.
+  static async getDetailContainerSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailContainer"]');
+  }
+
+  static async getDetailTitleSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailTitle"]');
+  }
+
+  static async getDetailDescriptionSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailDescription"]');
+  }
+
+  static async getDetailSelectableSlot() {
+    return $('[data-dimsum-parent-slot="dsCardv1detailSelectable"]');
+  }
+
+  static async getDetailExpandContentButtonSlot() {
+    return $('[data-dimsum-parent-slot="dsCardv1detailExpandContentButton"]');
+  }
+
+  static async getDetailExpandContentSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailExpandContent"]');
+  }
+
+  static async getDetailSeparatorSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailSeparator"]');
+  }
+
+  static async getDetailRightAddonSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailRightAddon"]');
+  }
+
+  static async getDetailRightDescriptionSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailRightDescription"]');
+  }
+
+  static async getDetailRightValueSlot() {
+    return $('[data-dimsum-slot="dsCardv1detailRightValue"]');
+  }
 }

package/ds-card/detail-slots/DSCard.detail-slots.axe-core.func.spec.js

@@ -0,0 +1,29 @@
+// Tests for the fix introduced in PUI-15889 (DetailCard selectable/expandable slots).
+import DSCardCO from '../DSCardCO';
+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-18691 - Card:: DetailCard slot attribute injection - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSCardCO.detailSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations with slot customizations', async () => {
+      await (await DSCardCO.getDetailContainerSlot()).waitForDisplayed();
+      // The slots story injects synthetic aria-labels onto every slot to prove
+      // attribute pass-through — including decorative elements (the description
+      // <p>, the right-side Grid <div>s) whose role prohibits aria-label. That is
+      // a test probe, not real consumer usage, so aria-prohibited-attr is disabled
+      // here — the same rationale axeCoreCheck already uses to disable valid-lang
+      // for the synthetic lang codes these slots tests inject.
+      const result = await axeCoreCheck({ extraDisabledRules: ['aria-prohibited-attr'] });
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-card/detail-slots/DSCard.detail-slots.func.spec.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-statements */
+// Tests for the fix introduced in PUI-15889 (DetailCard selectable/expandable slots).
+// Verifies consumer slot function props thread aria-label / data-testid / lang through
+// to each DetailCard slot, including the checkbox (SELECTABLE) and chevron
+// (EXPAND_CONTENT_BUTTON) sub-components that previously could not be addressed.
+import DSCardCO from '../DSCardCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18689 - Card:: DetailCard slot attribute injection - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardCO.detailSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-label for each slot', async () => {
+      await (await DSCardCO.getDetailContainerSlot()).waitForDisplayed();
+      await expect(await DSCardCO.getDetailContainerSlot()).toHaveAttribute('aria-label', 'container aria');
+      await expect(await DSCardCO.getDetailTitleSlot()).toHaveAttribute('aria-label', 'title aria');
+      await expect(await DSCardCO.getDetailDescriptionSlot()).toHaveAttribute('aria-label', 'description aria');
+      await expect(await DSCardCO.getDetailSelectableSlot()).toHaveAttribute('aria-label', 'selectable aria');
+      await expect(await DSCardCO.getDetailExpandContentButtonSlot()).toHaveAttribute(
+        'aria-label',
+        'expand content button aria',
+      );
+      await expect(await DSCardCO.getDetailExpandContentSlot()).toHaveAttribute('aria-label', 'expand content aria');
+      await expect(await DSCardCO.getDetailSeparatorSlot()).toHaveAttribute('aria-label', 'separator aria');
+      await expect(await DSCardCO.getDetailRightAddonSlot()).toHaveAttribute('aria-label', 'right addon aria');
+      await expect(await DSCardCO.getDetailRightDescriptionSlot()).toHaveAttribute(
+        'aria-label',
+        'right description aria',
+      );
+      await expect(await DSCardCO.getDetailRightValueSlot()).toHaveAttribute('aria-label', 'right value aria');
+    });
+
+    it('02: should have custom data-testid for each slot', async () => {
+      await expect(await DSCardCO.getDetailContainerSlot()).toHaveAttribute('data-testid', 'container data');
+      await expect(await DSCardCO.getDetailTitleSlot()).toHaveAttribute('data-testid', 'title data');
+      await expect(await DSCardCO.getDetailDescriptionSlot()).toHaveAttribute('data-testid', 'description data');
+      await expect(await DSCardCO.getDetailSelectableSlot()).toHaveAttribute('data-testid', 'selectable data');
+      await expect(await DSCardCO.getDetailExpandContentButtonSlot()).toHaveAttribute(
+        'data-testid',
+        'expand content button data',
+      );
+      await expect(await DSCardCO.getDetailExpandContentSlot()).toHaveAttribute('data-testid', 'expand content data');
+      await expect(await DSCardCO.getDetailSeparatorSlot()).toHaveAttribute('data-testid', 'separator data');
+      await expect(await DSCardCO.getDetailRightAddonSlot()).toHaveAttribute('data-testid', 'right addon data');
+      await expect(await DSCardCO.getDetailRightDescriptionSlot()).toHaveAttribute(
+        'data-testid',
+        'right description data',
+      );
+      await expect(await DSCardCO.getDetailRightValueSlot()).toHaveAttribute('data-testid', 'right value data');
+    });
+
+    it('03: should have custom lang for each slot', async () => {
+      await expect(await DSCardCO.getDetailContainerSlot()).toHaveAttribute('lang', 'es');
+      await expect(await DSCardCO.getDetailTitleSlot()).toHaveAttribute('lang', 'fr');
+      await expect(await DSCardCO.getDetailDescriptionSlot()).toHaveAttribute('lang', 'de');
+      await expect(await DSCardCO.getDetailSelectableSlot()).toHaveAttribute('lang', 'it');
+      await expect(await DSCardCO.getDetailExpandContentButtonSlot()).toHaveAttribute('lang', 'pt');
+      await expect(await DSCardCO.getDetailExpandContentSlot()).toHaveAttribute('lang', 'ja');
+      await expect(await DSCardCO.getDetailSeparatorSlot()).toHaveAttribute('lang', 'nl');
+      await expect(await DSCardCO.getDetailRightAddonSlot()).toHaveAttribute('lang', 'sv');
+      await expect(await DSCardCO.getDetailRightDescriptionSlot()).toHaveAttribute('lang', 'ko');
+      await expect(await DSCardCO.getDetailRightValueSlot()).toHaveAttribute('lang', 'en');
+    });
+  });
+}

package/ds-card/detail-slots/DSCard.detail-slots.visual.spec.js

@@ -0,0 +1,19 @@
+// Tests for the fix introduced in PUI-15889 (DetailCard selectable/expandable slots).
+// Snapshots the DetailCard with per-slot styleOverrides applied via ThemeProvider,
+// exercising the slot theming API end to end.
+import DSCardCO from '../DSCardCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18690 - Card:: DetailCard slot theming - Visual', () => {
+    before(async () => {
+      const errorOnGo = await DSCardCO.detailSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the detail card with slot theming overrides', async () => {
+      await (await DSCardCO.getDetailContainerSlot()).waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSCardCO.snapshotPath('detail-slot-theming'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card-v3/DSCardV3CO.js

@@ -7,13 +7,17 @@ export default class DSCardV3CO extends PageObject {
   // URL's
   static accordionURL = new Urlbuilder(PATH_E2E_CARD_V3, 'accordion-test');
 
+  static accordionAriaURL = new Urlbuilder(PATH_E2E_CARD_V3, 'accordion-aria-test');
+
   static actionURL = new Urlbuilder(PATH_E2E_CARD_V3, 'action-test');
 
   static disabledURL = new Urlbuilder(PATH_E2E_CARD_V3, 'disabled-test');
 
   static dragAndDropURL = new Urlbuilder(PATH_E2E_CARD_V3, 'drag-and-drop-test');
 
-  static multiActionURL = new Urlbuilder(PATH_E2E_CARD_V3, 'multi-action-test');
+  static multiActionURL = new Urlbuilder(PATH_E2E_CARD_V3, 'multiple-action-test');
+
+  static multipleControlURL = new Urlbuilder(PATH_E2E_CARD_V3, 'multiple-control-test');
 
   static multiSelectURL = new Urlbuilder(PATH_E2E_CARD_V3, 'multi-select-test');
 
@@ -29,6 +33,12 @@ export default class DSCardV3CO extends PageObject {
 
   static globalAttributesURL = new Urlbuilder(PATH_E2E_CARD_V3, 'global-attributes-test');
 
+  static variantDisabledURL = new Urlbuilder(PATH_E2E_CARD_V3, 'variant-disabled-test');
+
+  static variantAccentURL = new Urlbuilder(PATH_E2E_CARD_V3, 'variant-accented-test');
+
+  static variantAccentedDisabledURL = new Urlbuilder(PATH_E2E_CARD_V3, 'variant-accented-disabled-test');
+
   // selectors
   static async getActionAreaByIndex(index = 0) {
     return $$('[data-testid="ds-cardv3-action-area"]')[index];
@@ -90,6 +100,18 @@ export default class DSCardV3CO extends PageObject {
     return $('[data-testid="ds-button"][aria-label="Expand Card Content"]');
   }
 
+  static async getAccordionButton() {
+    return $('button[aria-expanded]');
+  }
+
+  static async getGroupContainer() {
+    return $('[role="group"]');
+  }
+
+  static async getRadioGroupContainer() {
+    return $('[role="radiogroup"]');
+  }
+
   static async getCardHandlerByIndex(index) {
     return $$('button[aria-label="drag and drop gripper"]')[index];
   }
@@ -116,4 +138,74 @@ export default class DSCardV3CO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('card-v3', example);
   }
+
+  static async getButtonByIndex(index) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  static async getCardCheckBoxByIndex(index) {
+    return $$('[data-testid="ds-checkbox"]')[index];
+  }
+
+  static async getByRole() {
+    return $('div[role="img"][aria-label="3 new notifications"]');
+  }
+
+  static async getElement(index) {
+    return $$('[data-testid="ds-typography-element"]')[index];
+  }
+
+  static async getRadioButtonByIndex(index) {
+    return $$('[data-testid="ds-radio"]')[index];
+  }
+
+  static async getDnDLiveRegion() {
+    return $('[id^="DndLiveRegion"]');
+  }
+
+  static async getDnDInstructions() {
+    return $('[id^="DndDescribedBy"]');
+  }
+
+  static async getDnDLists() {
+    return $$('[role="list"]');
+  }
+
+  static async getDnDListByIndex(index = 0) {
+    return $$('[role="list"]')[index];
+  }
+
+  static async getDnDListItems() {
+    return $$('[role="listitem"]');
+  }
+
+  static async getElementById(id) {
+    return $(`#${id}`);
+  }
+
+  static async getCardByDataId(id) {
+    return $(`[data-id="${id}"]`);
+  }
+
+  static async getCardDataIdsByListIndex(index = 0) {
+    const list = await DSCardV3CO.getDnDListByIndex(index);
+    const cards = await list.$$('[data-id]');
+    return cards.map((card) => card.getAttribute('data-id'));
+  }
+
+  static async expectCardOrderInList(index, expectedOrder) {
+    let actualOrder = [];
+    await browser.waitUntil(
+      async () => {
+        actualOrder = await DSCardV3CO.getCardDataIdsByListIndex(index);
+        return JSON.stringify(actualOrder) === JSON.stringify(expectedOrder);
+      },
+      {
+        timeout: 5000,
+        timeoutMsg: `Expected list ${index} to be ordered ${JSON.stringify(expectedOrder)} but was ${JSON.stringify(
+          actualOrder,
+        )}`,
+      },
+    );
+  }
 }

package/ds-card-v3/accordion/DSCardV3.accordion-aria-structure.func.spec.js

@@ -0,0 +1,41 @@
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Tests for the fix introduced in PUI-17887 (accordion heading/button/panel ARIA relationship)
+  describe('PUI-18597 - DSCardV3:: accordion ARIA structure - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.accordionAriaURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: button and panel have correct ARIA relationship (controls, labelledby, region, h3 container)', async () => {
+      const button = await DSCardV3CO.getAccordionButton();
+      const panelId = await button.getAttribute('aria-controls');
+      expect(panelId).toBeTruthy();
+      const panel = await $(`#${panelId}`);
+      await expect(panel).toBeExisting();
+      const labelId = await button.getAttribute('aria-labelledby');
+      expect(labelId).toBeTruthy();
+      const title = await $(`#${labelId}`);
+      await expect(title).toBeExisting();
+      await expect(panel).toHaveAttribute('role', 'region');
+      const buttonId = await button.getAttribute('id');
+      await expect(panel).toHaveAttribute('aria-labelledby', buttonId);
+      const h3 = await $('h3');
+      const buttonInsideH3 = await h3.$('button');
+      await expect(buttonInsideH3).toBeExisting();
+    });
+
+    it('02: aria-expanded toggles from false to true after clicking the button', async () => {
+      const button = await DSCardV3CO.getAccordionButton();
+      await expect(button).toHaveAttribute('aria-expanded', 'false');
+      await button.click();
+      await expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+}

package/ds-card-v3/accordion/DSCardV3.accordion-aria.keyboard.func.spec.js

@@ -0,0 +1,49 @@
+import { Key } from 'webdriverio';
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18823 - DSCardV3:: accordion ARIA keyboard operation - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.accordionAriaURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should move focus to the accordion trigger as the first tab stop - [TAB]', async () => {
+      const trigger = await DSCardV3CO.getAccordionButton();
+      await trigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+
+      await expect(trigger).toBeFocused();
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('02: should expand the panel and keep focus on the trigger - [ENTER]', async () => {
+      const trigger = await DSCardV3CO.getAccordionButton();
+      await browser.keys(Key.Enter);
+
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true');
+      await expect(trigger).toBeFocused();
+    });
+
+    it('03: should collapse the panel and keep focus on the trigger - [SPACE]', async () => {
+      const trigger = await DSCardV3CO.getAccordionButton();
+      await browser.keys(Key.Space);
+
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      await expect(trigger).toBeFocused();
+    });
+
+    it('04: should move focus from the trigger to the card actions button - [TAB]', async () => {
+      await browser.keys(Key.Tab);
+      const cardActions = await DSCardV3CO.getButtonByIndex(1);
+
+      await expect(cardActions).toBeFocused();
+      await expect(cardActions).toHaveAttribute('aria-label', 'Card actions');
+    });
+  });
+}

package/ds-card-v3/accordion/DSCardV3.accordion.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import DSCardV3CO from '../DSCardV3CO';
+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-18713 - Accordion, basic -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.accordionURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the accordion closed and pass axecore test', async () => {
+      await (await DSCardV3CO.getAccordionButton()).waitForDisplayed();
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+    it('02: should open the accordion and pass axecore test', async () => {
+      await (await DSCardV3CO.getAccordionButton()).click();
+      const getAccordionFirstElement = await DSCardV3CO.getElement(2);
+      await getAccordionFirstElement.waitForDisplayed();
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/accordion/DSCardV3.accordion.visual.spec.js

@@ -7,15 +7,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display accordion card-v3 closed', async () => {
-      await browser.eyesOpen();
-      const snapshot = await browser.eyesCheckSnapshot(DSCardV3CO.snapshotPath('card-v3-closed'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('02: should display accordion card-v3 expanded', async () => {
-      await browser.eyesOpen();
-      const expandContentButton = await DSCardV3CO.getExpandContentButton();
-      await expandContentButton.click();
-      const snapshot = await browser.eyesCheckSnapshot(DSCardV3CO.snapshotPath('card-v3-expanded'));
+      const accordionButton = await DSCardV3CO.getAccordionButton();
+      await accordionButton.click();
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-card-v3/action/DSCardV3.action.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+import DSCardV3CO from '../DSCardV3CO';
+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-18803 - DSCardV3:: action button card accessibility - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.actionURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/action/DSCardV3.action.func.spec.js

@@ -0,0 +1,53 @@
+import { Key } from 'webdriverio';
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18802 - DSCardV3:: action button structure and keyboard focus - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.actionURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the card root, header, title, subtitle and a single action button', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const header = await DSCardV3CO.getCardHeader();
+      await expect(header).toBeDisplayed();
+
+      const title = await DSCardV3CO.getElement(0);
+      await expect(title).toBeDisplayed();
+      await expect(title).toHaveText('Card Title');
+      await expect(await title.getTagName()).toBe('h3');
+
+      const subtitle = await DSCardV3CO.getElement(1);
+      await expect(subtitle).toBeDisplayed();
+      await expect(subtitle).toHaveText('Card Subtitle');
+
+      const deleteAction = await DSCardV3CO.getButtonByIndex(0);
+      await expect(deleteAction).toBeDisplayed();
+      await expect(deleteAction).toHaveAttribute('aria-label', 'Delete Action');
+      await expect(deleteAction).toHaveAttribute('type', 'button');
+
+      const actionButtons = await $$('[data-testid="ds-button"]');
+      await expect(actionButtons).toBeElementsArrayOfSize(1);
+    });
+
+    it('02: should move focus to the action button - [TAB]', async () => {
+      await browser.keys(Key.Tab);
+      const deleteAction = await DSCardV3CO.getButtonByIndex(0);
+      await expect(deleteAction).toBeFocused();
+    });
+
+    it('03: should move focus away from the action button - [SHIFT+TAB]', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const deleteAction = await DSCardV3CO.getButtonByIndex(0);
+      await expect(deleteAction).not.toBeFocused();
+    });
+  });
+}