dimsum-e2e-tests 3.80.0-next.3 → 3.80.0-next.31

package/ds-progress-indicator/variant/DSProgressIndicator.single-bar-variant.func.spec.js

@@ -0,0 +1,44 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+
+// Tests for the fix introduced in PUI-18677: `variant` used to be ignored in single-bar mode, so every
+// single bar rendered the default fill.
+//
+// Theme-agnostic on purpose: no colour value is pinned. Each variant only has to paint a fill that differs
+// from the default one; the exact palette is guarded by the visual spec.
+//
+// Chrome only: a computed style of a static story does not vary by engine. The `|| 'Chrome'` branch is
+// mandatory, BrowserStack reports the capitalised name and a lowercase-only guard registers zero tests.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19235 - DSProgressIndicator:: single-bar variant fill colour - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.singleBarVariantURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should paint each single-bar variant fill differently from the default', async () => {
+      const fillColour = async (caseId) => {
+        const bar = await DSProgressIndicatorCO.getProgress(caseId);
+        await bar.waitForDisplayed();
+        return (await bar.getCSSProperty('background-color')).parsed.hex;
+      };
+
+      const defaultColour = await fillColour('default-case');
+      const success = await fillColour('success-case');
+      const warning = await fillColour('warning-case');
+      const info = await fillColour('info-case');
+      const error = await fillColour('error-case');
+
+      await expect(success).not.toEqual(defaultColour);
+      await expect(warning).not.toEqual(defaultColour);
+      await expect(info).not.toEqual(defaultColour);
+      await expect(error).not.toEqual(defaultColour);
+      // The variants must also be told apart from each other, not just from the default.
+      await expect(new Set([defaultColour, success, warning, info, error]).size).toBe(5);
+    });
+  });
+}

package/ds-progress-indicator/variant/DSProgressIndicator.single-bar-variant.visual.spec.js

@@ -0,0 +1,19 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+
+// Tests for the fix introduced in PUI-18677: the single-bar `variant` now reaches the fill. The functional
+// spec only proves the colours differ; this baseline records the actual palette per variant.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19236 - DSProgressIndicator:: single-bar variant fill colour - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.singleBarVariantURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display one single-bar indicator per variant', async () => {
+      await (await DSProgressIndicatorCO.getProgress('error-case')).waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-slider-v2/DSSliderV2.axe-core.func.spec.js

@@ -118,4 +118,25 @@ if (
       expect(result.length).toBe(0);
     });
   });
+
+  // Tests for the hasError state introduced in PUI-18434 (spec v1.5.0 Error row).
+  describe('PUI-19224 - DSSliderV2:: hasError state - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.hasErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display idle error sliders and pass axe-core scan', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex();
+      await slider.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display focused error slider handle and pass axe-core scan', async () => {
+      await browser.keys(Key.Tab);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-slider-v2/DSSliderV2.visual.spec.js

@@ -1,6 +1,6 @@
 import { Key } from 'webdriverio';
 import DSSliderV2CO from './DSSliderV2CO';
-import { setTextSize } from '../helpers';
+import { mouseOver, setTextSize } from '../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-12332 - SliderV2 - Disabled - Visual Test', () => {
@@ -15,6 +15,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const snapshot = await browser.eyesCheckSnapshot(DSSliderV2CO.snapshotPath('slider-v2-disabled'));
       await expect(snapshot).toEqual(0);
     });
+    it('02: should display disabled single slider handle hovered', async () => {
+      // Spec v1.5.0 "Disabled + Hover": only the cursor changes (not-allowed). The snapshot guards that
+      // no hover tint or background change reappears on the handle or the track (PUI-18434).
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
   });
   describe('PUI-14389 - SliderV2 - applyAriaDisabled - Visual Test', () => {
     before('loading page', async () => {
@@ -36,6 +44,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const snapshot = await browser.eyesCheckSnapshot(DSSliderV2CO.snapshotPath('slider-v2-aria-disabled-kb-nav'));
       await expect(snapshot).toEqual(0);
     });
+    it('03: should display aria-disabled single slider handle hovered, not focused', async () => {
+      // Spec v1.5.0 "Aria-Disabled + Hover": only the cursor changes. Before PUI-18434 the handle background
+      // turned N-050 on hover; the snapshot guards against that regression. 01/02 left a handle focused and
+      // the story has three focusable handles, so the focus is released explicitly first.
+      await browser.execute(() => document.activeElement && document.activeElement.blur());
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
   });
 
   describe('PUI-12333 - SliderV2 - Custom tick marks values - Visual Test', () => {

package/ds-slider-v2/DSSliderV2CO.js

@@ -33,6 +33,10 @@ export default class DSSliderCO extends PageObject {
 
   static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'apply-aria-disabled-test');
 
+  static hasErrorURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'has-error-test');
+
+  static interactionStatesURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'interaction-states-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Slider', example);
@@ -129,7 +133,8 @@ export default class DSSliderCO extends PageObject {
   }
 
   static async getSliderTickMarkValueSlot(index = 0) {
-    return $$('[data-dimsum-slot="dsSliderv2TickMarkValue"]')[index];
+    // Nested slot since 3.80.0-next: the slot name lives on data-dimsum-parent-slot (see PUI-18434)
+    return $$('[data-dimsum-parent-slot="dsSliderv2TickMarkValue"]')[index];
   }
 
   static async getSliderRangeWrapperSlot(index = 0) {

package/ds-slider-v2/has-error/DSSliderV2.has-error.visual.spec.js

@@ -0,0 +1,44 @@
+import DSSliderV2CO from '../DSSliderV2CO';
+import { mouseOver, tabStops } from '../../helpers';
+
+// Where the pointer rests when a snapshot must NOT include a hover state.
+const PARKED_X = 500;
+const PARKED_Y = 400;
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the hasError state introduced in PUI-18434 (spec v1.5.0 Error row): active track E-900,
+  // inactive track E-200, handle border 2px solid E-900, handle background N-000.
+  describe('PUI-19223 - DSSliderV2:: hasError state - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.hasErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display idle error single and range sliders, mouse parked', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex(0);
+      await slider.waitForDisplayed();
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display error single slider handle hovered', async () => {
+      // Spec v1.5.0 defines no Error + Hover row. Current behavior: the error tokens stay as they are.
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display error single slider handle focused, not hovered', async () => {
+      // Spec v1.5.0 defines no Error + Focus row. Current behavior: the handle border switches to the
+      // focus token (B-800) while both track segments keep the error tokens.
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      await tabStops(1);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-slider-v2/interaction-states/DSSliderV2.interaction-states.visual.spec.js

@@ -0,0 +1,53 @@
+import DSSliderV2CO from '../DSSliderV2CO';
+import { mouseOver, tabStops } from '../../helpers';
+
+// Where the pointer rests when a snapshot must NOT include a hover state.
+const PARKED_X = 500;
+const PARKED_Y = 400;
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the spec v1.5.0 alignment introduced in PUI-18434: hover and focus tint the handle border
+  // AND the active track segment together (idle B-600 -> hover B-700 -> focus B-800), focus renders no
+  // outline. The story starts mid-range so the active segment is long enough for the tint to be visible.
+  describe('PUI-19222 - DSSliderV2:: handle and track hover and focus states - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.interactionStatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display idle single and range sliders, mouse parked', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex(0);
+      await slider.waitForDisplayed();
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display single slider handle hovered', async () => {
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display range slider min handle hovered', async () => {
+      // The handle and the track are shared between single and range mode, so the hover tint must also
+      // apply to the range slider (PUI-18434 scope note).
+      const thumb = await DSSliderV2CO.getSliderThumb(1);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    // Focus is reached through Tab on purpose. PUI-19226: in range mode a mouse click on a handle does not
+    // focus it, so the focus tokens can only be captured via keyboard until that defect is fixed.
+    it('04: should display single slider handle focused, not hovered', async () => {
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      await tabStops(1);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-virtuallist/DSVirtualList.visual.spec.js

@@ -10,13 +10,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const addChildrenBtn = await DSVirtualListCO.getAdd1Btn();
       await addChildrenBtn.click();
       await addChildrenBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2children'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('should add content to a children and display properly', async () => {
       const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
       await addContentBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-1content'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('should add a children and content to that children and display properly', async () => {
@@ -24,7 +24,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await addChildrenBtn.click();
       const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
       await addContentBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2content'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });
@@ -34,10 +34,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display a virtual list with customization correctly', async () => {
-      await browser.eyesOpen();
       const virtualListContainer = await DSVirtualListCO.getVirtualListContainer();
       await virtualListContainer.waitForDisplayed();
-      const snapshot = await browser.eyesCheckSnapshot(DSVirtualListCO.snapshotPath('virtual-list-customization'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-virtuallist/DSVirtualListCO.js

@@ -1,12 +1,12 @@
-import { PATH_VIRTUALLIST, PATH_E2E_VIRTUAL_LIST, PATH_E2E_CUSTOMIZATION_SUPPORT } from '../paths';
+import { PATH_E2E_VIRTUAL_LIST, PATH_E2E_CUSTOMIZATION_SUPPORT } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSVirtualListCO extends PageObject {
-  static basicURL = new Urlbuilder(PATH_VIRTUALLIST, 'basic');
+  static testChanges = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'test-element-changes');
 
-  static dynamicChanges = new Urlbuilder(PATH_VIRTUALLIST, 'dynamic-element-changes');
+  static basicTest = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'basic-test');
 
-  static testChanges = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'test-element-changes');
+  static scrollToIndexTest = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'scroll-to-index-test');
 
   static customization = new Urlbuilder(PATH_E2E_CUSTOMIZATION_SUPPORT, 'theming-virtual-list');
 
@@ -18,12 +18,31 @@ export default class DSVirtualListCO extends PageObject {
     return $('[data-testid="virtual-list-container"]');
   }
 
-  static getAdd1Btn = async () => getElementByIndex(this.getButtons, 0);
+  static async getListWrapper() {
+    return $('[data-testid="ds-virtuallist-list-wrapper"]');
+  }
 
-  static getChangeTimeBtn = async () => getElementByIndex(this.getButtons, 1);
+  static async getItems() {
+    return $$('[data-testid="ds-virtuallist-item-wrapper"]');
+  }
+
+  // Only items inside the virtualization window exist in the DOM, so this resolves
+  // to nothing for indexes outside it — that absence is the assertion we rely on.
+  static async getItemByIndex(index) {
+    return $(`[data-testid="ds-virtuallist-item-wrapper"][data-index="${index}"]`);
+  }
+
+  // The scroll-to-index story renders a single input and a single button, so the
+  // component-owned data-testids are unambiguous there.
+  static async getJumpInput() {
+    return $('[data-testid="ds-inputtext-input"]');
+  }
 
-  // Snapshots
-  static snapshotPath(example = 'basic') {
-    return PageObject.getSnapshotPathBuilder('VirtualList', example, 'ds-virtuallist');
+  static async getJumpButton() {
+    return $('[data-testid="ds-button"]');
   }
+
+  static getAdd1Btn = async () => getElementByIndex(this.getButtons, 0);
+
+  static getChangeTimeBtn = async () => getElementByIndex(this.getButtons, 1);
 }

package/ds-virtuallist/basic/DSVirtualList.basic.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import DSVirtualListCO from '../DSVirtualListCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Coverage for the ds-virtual-list compliance remediation in PUI-19125.
+// DOM-attribute/a11y assertions are identical across engines, so this runs Chrome only.
+// The `|| browserName === 'Chrome'` fallback is mandatory: BrowserStack reports the
+// capitalized name and a lowercase-only guard would register 0 tests (false green).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19196 - DSVirtualList:: virtualized list accessibility - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSVirtualListCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations on the rendered list', async () => {
+      const container = await DSVirtualListCO.getVirtualListContainer();
+      await container.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-virtuallist/scroll-to-index/DSVirtualList.scroll-to-index.func.spec.js

@@ -0,0 +1,45 @@
+import DSVirtualListCO from '../DSVirtualListCO';
+
+// Coverage for the ds-virtual-list compliance remediation in PUI-19125.
+// The in-package Playwright CT already covers this in Chromium; this spec exists to run the same
+// contract across the full browser matrix.
+// The window size is not stable (items are measured after mount, so the overscan window grows),
+// which is why the assertions are "bounded window + index recycled", never an exact item count.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19197 - DSVirtualList:: scroll to index via actionRef - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSVirtualListCO.scrollToIndexTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render only a window of the 200 children, leaving far items out of the DOM', async () => {
+      const firstItem = await DSVirtualListCO.getItemByIndex(0);
+      await expect(firstItem).toBeExisting();
+
+      const farItem = await DSVirtualListCO.getItemByIndex(150);
+      await expect(farItem).not.toBeExisting();
+
+      const items = await DSVirtualListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+
+    it('02: should mount the requested item and recycle the first one after jumping', async () => {
+      const jumpInput = await DSVirtualListCO.getJumpInput();
+      await jumpInput.setValue('150');
+      const jumpButton = await DSVirtualListCO.getJumpButton();
+      await jumpButton.click();
+
+      const farItem = await DSVirtualListCO.getItemByIndex(150);
+      await farItem.waitForExist();
+      await expect(farItem).toBeDisplayed();
+      await expect(farItem).toHaveText('Test 150');
+
+      // the window moved instead of growing: index 0 is no longer in the DOM
+      const firstItem = await DSVirtualListCO.getItemByIndex(0);
+      await expect(firstItem).not.toBeExisting();
+
+      const items = await DSVirtualListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+  });
+}