dimsum-e2e-tests 3.70.0-next.28 → 3.70.0-next.29

package/ds-accordion-native/scrollable-content/DSAccordionNative.scrollable-content.visual.spec.js

@@ -0,0 +1,48 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative: Scrollable content -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.scrollableContent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display first accordion header focused', async () => {
+      await browser.eyesOpen();
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-scrollable-default'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display scrollable content focused', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Tab);
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-scrollable-top'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display scrollable content scrolled to the bottom', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-scrollable-bottom'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-accordion-native/slots/DSAccordionNative.slots.axe-core.func.spec.js

@@ -0,0 +1,25 @@
+/* eslint-disable max-lines */
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+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-18083 - AccordionNative: Slots -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have accordion with custom slots (aria & data) and pass axe-core scan', async () => {
+      const summary = await DSAccordionNativeCO.getAccordionItemSummarySlotByIndex(0);
+      await summary.click();
+      const content = await DSAccordionNativeCO.getAccordionItemContentContainerSlotByIndex(0);
+      await content.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-accordion-native/slots/DSAccordionNative.slots.func.spec.js

@@ -0,0 +1,73 @@
+/* eslint-disable max-lines, max-statements */
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18083 - AccordionNative: Slots -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a custom aria-label for each slot', async () => {
+      const root = await DSAccordionNativeCO.getAccordionContainerSlotByIndex();
+      const itemContainer = await DSAccordionNativeCO.getAccordionItemContainerSlotByIndex();
+      const itemDetails = await DSAccordionNativeCO.getAccordionItemDetailsSlotByIndex();
+      const itemSummary = await DSAccordionNativeCO.getAccordionItemSummarySlotByIndex();
+      const itemHeading = await DSAccordionNativeCO.getAccordionItemHeadingSlotByIndex();
+      const itemChevron = await DSAccordionNativeCO.getAccordionItemChevronSlotByIndex();
+      const titlesContainer = await DSAccordionNativeCO.getAccordionItemTitlesContainerSlotByIndex();
+      const primaryTitle = await DSAccordionNativeCO.getAccordionItemPrimaryTitleSlotByIndex();
+      const secondaryTitle = await DSAccordionNativeCO.getAccordionItemSecondaryTitleSlotByIndex();
+      await itemSummary.click();
+      const contentContainer = await DSAccordionNativeCO.getAccordionItemContentContainerSlotByIndex();
+      await contentContainer.waitForDisplayed();
+      await expect(root).toHaveAttribute('aria-label', 'im container aria');
+      await expect(itemContainer).toHaveAttribute('aria-label', 'im item container aria');
+      await expect(itemDetails).toHaveAttribute('aria-label', 'im itemdetails aria');
+      await expect(itemSummary).toHaveAttribute('aria-label', 'im itemsummary aria');
+      await expect(itemHeading).toHaveAttribute('aria-label', 'im itemheading aria');
+      await expect(itemChevron).toHaveAttribute('aria-label', 'im itemchevron aria');
+      await expect(titlesContainer).toHaveAttribute('aria-label', 'im itemtitlecontainer aria');
+      await expect(primaryTitle).toHaveAttribute('aria-label', 'im itemprimarytitle aria');
+      await expect(secondaryTitle).toHaveAttribute('aria-label', 'im itemsecondarytitle aria');
+      await expect(contentContainer).toHaveAttribute('aria-label', 'im itemcontentcontainer aria');
+    });
+
+    it('02: should have a custom data-testid for each slot', async () => {
+      const root = await DSAccordionNativeCO.getAccordionContainerSlotByIndex();
+      const itemContainer = await DSAccordionNativeCO.getAccordionItemContainerSlotByIndex();
+      const itemDetails = await DSAccordionNativeCO.getAccordionItemDetailsSlotByIndex();
+      const itemSummary = await DSAccordionNativeCO.getAccordionItemSummarySlotByIndex();
+      const itemHeading = await DSAccordionNativeCO.getAccordionItemHeadingSlotByIndex();
+      const itemChevron = await DSAccordionNativeCO.getAccordionItemChevronSlotByIndex();
+      const titlesContainer = await DSAccordionNativeCO.getAccordionItemTitlesContainerSlotByIndex();
+      const primaryTitle = await DSAccordionNativeCO.getAccordionItemPrimaryTitleSlotByIndex();
+      const secondaryTitle = await DSAccordionNativeCO.getAccordionItemSecondaryTitleSlotByIndex();
+      const contentContainer = await DSAccordionNativeCO.getAccordionItemContentContainerSlotByIndex();
+      await contentContainer.waitForDisplayed();
+      await expect(root).toHaveAttribute('data-testid', 'im container data');
+      await expect(itemContainer).toHaveAttribute('data-testid', 'im item container data');
+      await expect(itemDetails).toHaveAttribute('data-testid', 'im itemdetails data');
+      await expect(itemSummary).toHaveAttribute('data-testid', 'im itemsummary data');
+      await expect(itemHeading).toHaveAttribute('data-testid', 'im itemheading data');
+      await expect(itemChevron).toHaveAttribute('data-testid', 'im itemchevron data');
+      await expect(titlesContainer).toHaveAttribute('data-testid', 'im itemtitlecontainer data');
+      await expect(primaryTitle).toHaveAttribute('data-testid', 'im itemprimarytitle data');
+      await expect(secondaryTitle).toHaveAttribute('data-testid', 'im itemsecondarytitle data');
+      await expect(contentContainer).toHaveAttribute('data-testid', 'im itemcontentcontainer data');
+    });
+
+    it('03: should have a custom lang attribute for summary, primary and secondary titles', async () => {
+      const primaryTitle = await DSAccordionNativeCO.getAccordionItemPrimaryTitleSlotByIndex();
+      const secondaryTitle = await DSAccordionNativeCO.getAccordionItemSecondaryTitleSlotByIndex();
+      const summary = await DSAccordionNativeCO.getAccordionItemSummarySlotByIndex();
+      await expect(primaryTitle).toHaveAttribute('lang', 'en-US');
+      await expect(secondaryTitle).toHaveAttribute('lang', 'es-ES');
+      await expect(summary).toHaveAttribute('lang', 'en-US');
+    });
+  });
+}

package/ds-accordion-native/slots/DSAccordionNative.slots.visual.spec.js

@@ -0,0 +1,18 @@
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative: Slots -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display visually customized-slots (colors) accordion and matchbaseline', async () => {
+      const header = await DSAccordionNativeCO.getAccordionItemPrimaryTitleSlotByIndex(0);
+      await header.click();
+      const content = await DSAccordionNativeCO.getAccordionItemContentContainerSlotByIndex(0);
+      await content.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-slots'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-accordion-native/wrapLabel/DSAccordionNative.wrap-label.visual.spec.js

@@ -0,0 +1,22 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative: wrapLabel -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.wrapLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display accordion title and secondary title wrapped', async () => {
+      await browser.eyesOpen();
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-wrap-label'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/DSComboboxMultiCO.js

@@ -33,6 +33,8 @@ export default class DSComboboxMultiCO extends PageObject {
 
   static disabled = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'disabled-test');
 
+  static inlineTest = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'inline-test');
+
   static controlledMenuStateWithSectionsSlotsTest = new Urlbuilder(
     PATH_E2E_COMBOBOX_MULTI_SLOTS,
     'controlled-menu-state-with-section-slots-test',

package/ds-form-combobox-multi/aria-busy-loading/DSComboboxMulti.aria-busy-loading.axe-core.func.spec.js

@@ -24,7 +24,13 @@ if (
       const listbox = await DSComboboxMultiCO.getComboListbox();
       await listbox.waitForExist();
 
-      const result = await axeCoreCheck();
+      // `scrollable-region-focusable` is disabled here as a documented false positive:
+      // in the busy/isLoading state the fast-list container is empty, so the region is
+      // not authentically scrollable from a user's perspective — TanStack Virtual leaves
+      // a residual scrollHeight that triggers the rule. The container's tabindex=-1 is a
+      // long-standing Firefox scroll-prevention workaround. The rule remains active for
+      // all other states (open menu with items, read-only, etc.).
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
       expect(result.length).toBe(0);
     });
   });

package/ds-form-combobox-multi/aria-disabled/DSComboboxMulti.aria-disabled.visual.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14364 - ComboboxMulti:: applyAriaDisabled prop - visual', () => {
@@ -43,5 +44,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    // PUI-15476: aria-disabled item text color must change to n600 on hover
+    it('04: listbox with aria-disabled item hovered should display n600 text color', async () => {
+      await browser.eyesOpen();
+      const secondCombobox = await DSComboboxMultiCO.getComboboxWrapperByIndex(1);
+      await secondCombobox.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const ariaDisabledOption = await DSComboboxMultiCO.getOptionByIndex(1);
+      await mouseOver(ariaDisabledOption);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-item-hovered'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-combobox-multi/inline/DSComboboxMulti.inline.visual.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-lines */
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the fix introduced in PUI-15481 (inline padding 8px top/bottom — was 10px)
+  describe('PUI-18560 - ComboboxMulti:: inline config padding - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.inlineTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inline combobox should render with the corrected 8px padding', async () => {
+      await browser.eyesOpen();
+      const pillDropdownBtn = await DSComboboxMultiCO.getPillDropDownBtn();
+      await pillDropdownBtn.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath('combobox-multi-inline-padding'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/DSComboboxSingleCO.js

@@ -37,6 +37,8 @@ export default class DSComboboxSingleCO extends PageObject {
 
   static disabled = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'disabled-test');
 
+  static inlineTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'inline-test');
+
   // COMBOBOX - INPUT
   static async getCombobox() {
     return $('[data-testid="combobox-container"]');

package/ds-form-combobox-single/aria-disabled/DSComboboxSingle.aria-disabled.visual.spec.js

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSComboboxSingleCO from '../DSComboboxSingleCO';
+import DSControlledCheckboxCO from '../../ds-controlled-form/ds-controlled-checkbox/DSControlledCheckboxCO';
+import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14367 - ComboboxSingle:: applyAriaDisabled prop - visual', () => {
@@ -16,5 +18,21 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    // PUI-15476: aria-disabled item text color must change to n600 on hover
+    it('02: listbox with aria-disabled item hovered should display n600 text color', async () => {
+      await browser.eyesOpen();
+      const checkbox = await DSControlledCheckboxCO.getCheckbox();
+      await checkbox.click();
+      const combobox = await DSComboboxSingleCO.getCombobox();
+      await combobox.click();
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const ariaDisabledOption = await DSComboboxSingleCO.getOptionByIndex(1);
+      await mouseOver(ariaDisabledOption);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-aria-disabled-item-hovered'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-combobox-single/inline/DSComboboxSingle.inline.visual.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the fix introduced in PUI-15481 (inline padding 8px top/bottom — was 10px)
+  describe('PUI-18559 - ComboboxSingle:: inline config padding - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.inlineTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inline combobox should render with the corrected 8px padding', async () => {
+      await browser.eyesOpen();
+      const pillDropdownBtn = await DSComboboxSingleCO.getPillDropDownBtn();
+      await pillDropdownBtn.click();
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-inline-padding'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-native-select/NativeSelect.visual.spec.js

@@ -0,0 +1,33 @@
+import NativeSelect from './NativeSelectCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18537 - NativeSelect:: basic state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the basic controlled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // Coverage for the fix introduced in PUI-14617
+  // (disabled-state colors aligned with Combobox disabled-state colors to meet WCAG 1.4.3).
+  describe('PUI-18538 - NativeSelect:: disabled state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the disabled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-native-select/option-selection/NativeSelect.option-selection.func.spec.js

@@ -0,0 +1,25 @@
+import NativeSelect from '../NativeSelectCO';
+
+// Tests for the option selection behavior of the native select introduced in PUI-14617.
+// Selecting an option must update the <select> value (options use value={index}).
+// Uses the WebDriver native select command (selectByIndex) so the native popup is opened and an
+// option committed the same way in every browser — simulated keystrokes on the OS-drawn popup are
+// not reachable by WebDriver on macOS/Safari, which is why a keystroke-based assertion is not portable.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18563 - NativeSelect:: Option selection updates value -Func', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should update the value when selecting an option from the popup', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+
+      const input = await NativeSelect.getInputSlotByIndex(0);
+      await input.selectByIndex(2);
+
+      await expect(input).toHaveValue('2');
+    });
+  });
+}