dimsum-e2e-tests 3.70.0-next.62 → 3.70.0-next.63

package/ds-apppicker/DSAppPickerCO.js

@@ -126,8 +126,14 @@ export default class DSAppPickerCO extends PageObject {
     return $$('[data-testid="ds-chip-label"]')[index];
   }
 
+  // Selection is exposed as `aria-current="true"`, not `aria-selected`. The chips are `role="button"`,
+  // which does not support `aria-selected` — PUI-17213/PUI-17860 (#8260) swapped it for `aria-current`
+  // plus the "X of Y" position announcement, signed off with the A11y SME.
+  // The attribute is omitted (not `false`) when unselected, so `getAttribute` resolves to null: compare
+  // the value instead of calling a string method on it, so an unselected chip returns false rather than
+  // throwing.
   static async isSelected(element) {
-    return (await element.getAttribute('aria-selected')).includes('true');
+    return (await element.getAttribute('aria-current')) === 'true';
   }
 
   // Slots

package/ds-apppicker/basic/DSAppPicker.basic.keyboard-nav.func.spec.js

@@ -1,11 +1,7 @@
 import { Key } from 'webdriverio';
 import DSAppPickerCO from '../DSAppPickerCO';
 
-if (
-  !browser.capabilities['ice:options'].isPhone &&
-  !browser.capabilities['ice:options'].isTablet &&
-  browser.capabilities.browserName !== 'Safari'
-) {
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-8030 - AppPicker:: Basic - keyboard nav func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAppPickerCO.basicURL.go();
@@ -34,12 +30,27 @@ if (
       const appPickerChip = await DSAppPickerCO.getChipByIndex(1);
       await expect(appPickerChip).toBeFocused();
     });
-    it('05: should close the menu - Escape', async () => {
+    // PUI-17950 made Escape the dismissal mechanism for a chip's expanded label, satisfying the
+    // "Dismissible" clause of WCAG 2.1 AA 1.4.13. Escape on an open panel is therefore two-stage
+    // whenever the focused chip's label truncates: the first press dismisses the expansion, only
+    // the second reaches the dialog. Chip 1 here truncates, so both presses are needed. The
+    // dismissal is conditional, not blanket — on a chip whose label fits, Escape still closes the
+    // panel in a single press, so this is not a rule that can be applied by rote to every spec.
+    it('05: should dismiss the expanded chip label and keep the menu open - Escape', async () => {
+      const appPickerChip = await DSAppPickerCO.getChipByIndex(1);
+      expect(await appPickerChip.getAttribute('data-expanded')).toEqual('true');
+      await browser.keys(Key.Escape);
+      const appPicker = await DSAppPickerCO.getAppPickerRoot();
+      await expect(appPicker).toBeDisplayedInViewport();
+      await expect(appPickerChip).toBeFocused();
+      expect(await appPickerChip.getAttribute('data-expanded')).not.toEqual('true');
+    });
+    it('06: should close the menu - Escape', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await browser.keys(Key.Escape);
       await expect(openAppPickerBtn).toBeFocused();
     });
-    it('06: should reopen the menu and focus the first enabled chip - Space', async () => {
+    it('07: should reopen the menu and focus the first enabled chip - Space', async () => {
       await browser.keys(Key.Space);
       const appPicker = await DSAppPickerCO.getAppPickerRoot();
       const appPickerChip = await DSAppPickerCO.getChipByIndex(1);

package/ds-apppicker/closeAfterSelection/DSAppPicker.closeAfterSelection.func.spec.js

@@ -20,7 +20,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(appPicker).not.toBeDisplayedInViewport();
       await expect(triggerBtn).toBeFocused();
     });
-    it('03: should open appPicker and have the third chip still focused', async () => {
+    it('03: should reopen appPicker with the selected app still marked as current', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await openAppPickerBtn.click();
       const reportChip = await DSAppPickerCO.getChipByIndex(6);

package/ds-apppicker/reflow/DSAppPicker.reflow.visual.spec.js

@@ -1,18 +1,19 @@
 /* eslint-disable wdio/no-pause */
 import DSAppPickerCO from '../DSAppPickerCO';
+import { setTextSize } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-17867 - AppPicker:: Reflow test -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAppPickerCO.reflowURL.go();
       if (errorOnGo) throw errorOnGo;
-      await browser.maximizeWindow();
+      await setTextSize('26');
     });
 
     it('01: should show appPicker open', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await openAppPickerBtn.click();
-      const snapshot = await browser.percyCheckScreenshot(DSAppPickerCO.snapshotPath('reflow-appPicker-open'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
 
@@ -20,16 +21,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const secondPipelineChip = await DSAppPickerCO.getChipByLabelAndIndex('Pipeline', 1);
       await secondPipelineChip.scrollIntoView();
       await browser.pause(300);
-      const snapshot = await browser.percyCheckScreenshot(DSAppPickerCO.snapshotPath('reflow-appPicker-scrolled'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
 
     it('03: should select the 2nd Pipeline chip', async () => {
       const secondPipelineChip = await DSAppPickerCO.getChipByLabelAndIndex('Pipeline', 1);
       await secondPipelineChip.click();
-      const snapshot = await browser.percyCheckScreenshot(
-        DSAppPickerCO.snapshotPath('reflow-appPicker-pipeline-selected'),
-      );
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-banner/DSBanner.text-resize.visual.spec.js

@@ -1,14 +1,17 @@
 import DSBannerCO from './DSBannerCO';
+import { setTextSize } from '../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-17535 - DSBanner - Text Resize In Different Layouts - Visual Test', () => {
     before('loading page', async () => {
       const errorOnGo = await DSBannerCO.textResizeInDifferentLayoutsTest.go();
       if (errorOnGo) throw errorOnGo;
+      await setTextSize('26');
     });
     it('01: should display text resize in different layouts properly', async () => {
-      await browser.eyesOpen();
-      const snapshot = await browser.eyesCheckSnapshot(DSBannerCO.snapshotPath('text-resize-in-different-layouts'));
+      const banner = await DSBannerCO.getBannerByIndex();
+      await banner.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-banner/DSBannerCO.js

@@ -62,6 +62,10 @@ export default class DSBannerCO extends PageObject {
     return $('[data-testid="ds-banner"');
   }
 
+  static async getBannerByIndex(index = 0) {
+    return $$('[data-testid="ds-banner"]')[index];
+  }
+
   static async getBannerContainer() {
     return $('[data-testid="ds-banner-container"]');
   }

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

@@ -1,10 +1,12 @@
 import DSCardV3CO from '../DSCardV3CO';
+import { setTextSize } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-13981 - CardV3: Reflow -Visual Test', () => {
     before('loading page', async () => {
       const errorOnGo = await DSCardV3CO.reflowURL.go();
       if (errorOnGo) throw errorOnGo;
+      await setTextSize('26');
     });
     it('01: should display cards after a 200% of text resize', async () => {
       const expandContentButton = await DSCardV3CO.getExpandContentButton();

package/ds-dataviz/DSDataViz.axis.visual.spec.js

@@ -65,8 +65,7 @@ if (!browser.capabilities['ice:options'].isPhone) {
 
   // fails on firefox due to fake-positive of infinte loop
   if (browser.capabilities.browserName !== 'Firefox') {
-    // Skipped until PUI-16334 gets fixed
-    describe.skip('PUI-9401 - DSDataViz, TimeLinear axis -Visual', () => {
+    describe('PUI-9401 - DSDataViz, TimeLinear axis -Visual', () => {
       before('loading page', async () => {
         const errorOnGo = await DSDataVizCO.timeLinearAxis.go();
         if (errorOnGo) throw errorOnGo;

package/ds-dataviz/DSDataViz.ticks.visual.spec.js

@@ -62,8 +62,7 @@ if (!browser.capabilities['ice:options'].isPhone) {
     });
   });
 
-  // Skipped until PUI-16334 gets fixed
-  describe.skip('PUI-10321 - DSDataViz, Force ticks -Visual', () => {
+  describe('PUI-10321 - DSDataViz, Force ticks -Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataVizCO.forceTicks.go();
       if (errorOnGo) throw errorOnGo;

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

@@ -11,8 +11,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('01: The first aria-disabled combobox should be focused', async () => {
       await browser.eyesOpen();
-      const firstCombobox = await DSComboboxMultiCO.getComboboxByIndex(0);
-      await firstCombobox.click();
+      // the container centre lands on the aria-hidden overlay input, which never focuses the
+      // combobox; the selected-values area is the only pointer target that reliably focuses it
+      const firstComboboxValues = await DSComboboxMultiCO.getSelectedValuesByIndex(0);
+      await firstComboboxValues.click();
       const snapshot = await browser.eyesCheckSnapshot(
         DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-click'),
       );

package/ds-grid/DSGridCO.js

@@ -43,6 +43,8 @@ export default class DSGridCO extends PageObject {
 
   static breakpointsV2 = new Urlbuilder(PATH_E2E_GRID, 'with-breakpoints-v-2-test');
 
+  static layoutMode = new Urlbuilder(PATH_E2E_GRID, 'with-layout-mode-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_GRID, component);
   }
@@ -70,6 +72,24 @@ export default class DSGridCO extends PageObject {
     return $(`//div[text()="Scrollable Body"]`);
   }
 
+  static async getGridByTestId(testId) {
+    return $(`[data-testid="${testId}"]`);
+  }
+
+  // Computed grid-template-columns, e.g. "640px 640px 640px". Returned as a string so callers can
+  //   compare two grids to each other without depending on the resolved px values.
+  static async getResolvedColumns(testId) {
+    const grid = await this.getGridByTestId(testId);
+    await grid.waitForDisplayed();
+    return String((await grid.getCSSProperty('grid-template-columns')).value);
+  }
+
+  // Number of resolved column tracks. This is the only cross-browser-stable signal of which
+  //   breakpoint definition won, and it never asserts px values.
+  static async getResolvedColumnCount(testId) {
+    return (await this.getResolvedColumns(testId)).trim().split(/\s+/).filter(Boolean).length;
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Grid', example);

package/ds-grid/layout-mode/DSGrid.layout-mode.func.spec.js

@@ -0,0 +1,51 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417: an opted-in Grid collapses its
+// responsive cols/rows/span OBJECT definitions to the single value selected by the ancestor
+// DSLayoutProvider layoutMode instead of the viewport media-query ladder. The feature has no DOM
+// footprint - the only observable effect is the emitted CSS, since the collapsed array takes the
+// Array.isArray branch of manageCols and emits ONE unconditional grid-template-columns. So we
+// assert the resolved column COUNT (whitespace separated tracks of the computed value), never the
+// px values. Chrome only: a computed CSS read is identical across engines.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18978 - DSGrid:: withLayoutMode breakpoint resolution - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should resolve cols from the ancestor layoutMode when opted in', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-l')).toEqual(3);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-m')).toEqual(2);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s')).toEqual(1);
+    });
+
+    it('02: should honor an explicit xsmall definition, keeping xs distinct from s', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-explicit')).toEqual(1);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s-explicit')).toEqual(2);
+    });
+
+    it('03: should resolve xs to the small definition when xsmall is not declared', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-backfilled')).toEqual(1);
+    });
+
+    it('04: should ignore the ancestor layoutMode when not opted in', async () => {
+      // Width independent invariant: opting out inside a provider must render exactly what the same
+      //   grid renders with no provider at all. The layoutMode path can never satisfy this.
+      const optedOut = await DSGridCO.getResolvedColumns('ds-grid-opt-out-in-provider');
+      const noProvider = await DSGridCO.getResolvedColumns('ds-grid-opt-out-no-provider');
+      await expect(optedOut).toEqual(noProvider);
+
+      // The failure mode being guarded against is the provider mode s leaking in, which is exactly
+      //   1 column. The correct value is whatever the viewport resolves to (3 above 1024px), so we
+      //   assert more than one column rather than pinning a viewport width.
+      const columnCount = await DSGridCO.getResolvedColumnCount('ds-grid-opt-out-in-provider');
+      await expect(columnCount).toBeGreaterThan(1);
+    });
+  });
+}

package/ds-grid/layout-mode/DSGrid.layout-mode.visual.spec.js

@@ -0,0 +1,22 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417. Every grid in the story shares one
+// responsive cols definition and one viewport width, so this single snapshot is the human readable
+// proof that each grid lays out for the DSLayoutProvider mode of the container it lives in - and
+// that the two opted-out grids stay viewport driven.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18979 - DSGrid:: withLayoutMode breakpoint resolution - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display each grid laid out for its own LayoutProvider mode', async () => {
+      const firstGrid = await DSGridCO.getGridByTestId('ds-grid-layout-mode-l');
+      await firstGrid.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(DSGridCO.snapshotPath('layout-mode'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-hooks/DSHook.UseFontSizeMedia.visual.spec.js

@@ -7,6 +7,7 @@ describe('PUI-11669 - UseFontSizeMedia:: Basic ', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: should render correctly initial font size values (4 columns)', async () => {
+    await DSHookCO.waitForColumnCount(4);
     const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-initial-values'));
     await expect(snapshot).toEqual(0);
   });
@@ -15,12 +16,14 @@ describe('PUI-11669 - UseFontSizeMedia:: Basic ', () => {
     !browser.capabilities?.['bstack:options']?.deviceName?.includes('iPad')
   ) {
     it('02: should increase font size correctly (1 column)', async () => {
-      await DSHookCO.increaseFontSize(10);
+      await DSHookCO.setFontSizeForRatio(DSHookCO.FONT_SIZE_RATIOS.large);
+      await DSHookCO.waitForColumnCount(1);
       const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-increase-size'));
       await expect(snapshot).toEqual(0);
     });
     it('03: should decrease font size correctly (2 columns)', async () => {
-      await DSHookCO.decreaseFontSize(2);
+      await DSHookCO.setFontSizeForRatio(DSHookCO.FONT_SIZE_RATIOS.medium);
+      await DSHookCO.waitForColumnCount(2);
       const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-decrease-size'));
       await expect(snapshot).toEqual(0);
     });

package/ds-hooks/DSHookCO.js

@@ -1,8 +1,20 @@
 /* eslint-disable import/no-relative-packages */
 import { PATH_HOOKS, PATH_E2E_HOOKS, PATH_E2E_USE_FONT_SIZE_DETECTOR, PATH_E2E_USE_FONT_SIZE_MEDIA } from '../paths';
-import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+import { PageObject, Urlbuilder, getElementByIndex, setTextSize } from '../helpers';
+
+// useFontSizeDetector reduces the page to a single number:
+//   ratio = floor(documentElement.clientWidth / heightOf(#DS_FONT_DETECTOR))
+// and useFontsizeMedia buckets it against BREAKPOINTS (ds-hooks-fontsize-detector):
+//   ratio <= 30 -> largeFont | 31..40 -> mediumFont | > 40 -> smallFont
+// The ratio depends on the viewport width, which BrowserStack decides per platform,
+// so a hardcoded font size lands in a different bucket on every browser. Aim at the
+// middle of each bucket instead and let setFontSizeForRatio solve for the px.
+const FONT_DETECTOR_SELECTOR = '[data-testid="DS_FONT_DETECTOR"]';
+const FONT_SIZE_RATIOS = { large: 25, medium: 35, small: 50 };
 
 export default class DSHookCO extends PageObject {
+  static FONT_SIZE_RATIOS = FONT_SIZE_RATIOS;
+
   // Desktop
   static specificFocus = new Urlbuilder(PATH_HOOKS, 'use-on-specific-focus');
 
@@ -173,5 +185,47 @@ export default class DSHookCO extends PageObject {
     }
   }
 
+  // Solve for the root font size that puts the detector ratio at targetRatio, then
+  // apply it with setTextSize. The line-height factor is measured live instead of
+  // assumed: #DS_FONT_DETECTOR is a `<p>&nbsp;</p>` appended to body, so its height
+  // tracks the root font size by a constant that depends on the stylesheet.
+  static async setFontSizeForRatio(targetRatio) {
+    const fontSize = await browser.execute(
+      (ratio, detectorSelector) => {
+        const root = document.documentElement;
+        const detector = document.querySelector(detectorSelector);
+        if (!detector) return null;
+        const rootFontSize = parseFloat(window.getComputedStyle(root).fontSize);
+        const lineHeightFactor = detector.getBoundingClientRect().height / rootFontSize;
+        return Math.floor(root.clientWidth / (ratio * lineHeightFactor));
+      },
+      targetRatio,
+      FONT_DETECTOR_SELECTOR,
+    );
+    if (!fontSize) throw new Error(`${FONT_DETECTOR_SELECTOR} not found: useFontSizeDetector never mounted`);
+    await setTextSize(fontSize);
+    return fontSize;
+  }
+
   // utils
+
+  static async getResponsiveGrid() {
+    return $('[data-testid="fontsize-media-responsive-grid"]');
+  }
+
+  static async getColumnCount() {
+    const grid = await this.getResponsiveGrid();
+    const { value } = await grid.getCSSProperty('grid-template-columns');
+    return String(value).trim().split(/\s+/).filter(Boolean).length;
+  }
+
+  // The ResizeObserver behind useFontSizeDetector reports the new detector height a
+  // frame after the font size lands, so the grid reflows after setTextSize returns.
+  // Wait for the reflow instead of snapshotting a half-applied layout.
+  static async waitForColumnCount(expected) {
+    await browser.waitUntil(async () => (await this.getColumnCount()) === expected, {
+      timeout: 10000,
+      timeoutMsg: `expected the responsive grid to reflow to ${expected} column(s)`,
+    });
+  }
 }

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

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