dimsum-e2e-tests 1.0.36 → 1.2.0

package/ds-menu-item/aria-disabled/DSMenuItems.aria-disabled.axe-core.func.spec.js

@@ -0,0 +1,35 @@
+/* eslint-disable wdio/no-pause */
+import { axeCoreCheck } from '../../helpers';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-14414 - [MenuItems] applyAriaDisabled prop - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display action menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display multi menu items with aria-disabled focused and pass axecore test', async () => {
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-menu-item/aria-disabled/DSMenuItems.aria-disabled.visual.spec.js

@@ -0,0 +1,68 @@
+import { Key } from 'webdriverio';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14413 - [MenuItems] applyAriaDisabled prop - visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: aria-disabled single menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: aria-disabled single menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: aria-disabled action menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: aria-disabled action menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: aria-disabled multi menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-aria-disabled-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: aria-disabled multi menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-aria-disabled-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-menu-item/read-only/DSMenuItems.read-only.axe-core.func.spec.js

@@ -0,0 +1,35 @@
+/* eslint-disable wdio/no-pause */
+import { axeCoreCheck } from '../../helpers';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-15352 - [MenuItems] readOnly prop - axe-core test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display single menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display action menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display multi menu items with readOnly focused and pass axecore test', async () => {
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-menu-item/read-only/DSMenuItems.read-only.visual.spec.js

@@ -0,0 +1,66 @@
+import { Key } from 'webdriverio';
+import DSMenuItems from '../DSMenuItemsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15353 - [MenuItems] applyAriaDisabled prop - visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuItems.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: read-only single menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem2 = await DSMenuItems.getMenuItem('2');
+      await menuItem2.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-read-only-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: read-only single menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-single-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: read-only action menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem6 = await DSMenuItems.getMenuItem('6');
+      await menuItem6.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-read-only-mouse'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: read-only action menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-action-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: read-only multi menu item should be focused and not selected - mouse', async () => {
+      await browser.eyesOpen();
+      const menuItem10 = await DSMenuItems.getMenuItem('10');
+      await menuItem10.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSMenuItems.snapshotPath('ds-menu-items-multi-read-only-mouse'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: read-only multi menu item should be focused and not selected', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSMenuItems.snapshotPath('ds-menu-items-multi-read-only-kb-nav'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-query-builder/DSQueryBuilderCO.js

@@ -119,7 +119,7 @@ export default class DSQueryBuilderCO extends PageObject {
   static async getTextBox(tbNumber) {
     return browser.waitUntil(
       async () => {
-        const tb = await $$('[data-testid="ds-input-text-input"]');
+        const tb = await $$('[data-testid="ds-inputtext-input"]');
         return tb.length > tbNumber ? tb[tbNumber] : false;
       },
       {

package/ds-shuttle-v2/items/DSShuttleV2.items.func.spec.js

@@ -70,11 +70,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('01: should not move the item when the disabled move action button is clicked', async () => {
       const testItem = await DSShuttleV2CO.getItemWrapper(1);
       const testItemMoveBtn = await DSShuttleV2CO.getActionButtonByItemAndIndex(testItem, 1);
-      const testItemMoveBtnDisabled = await testItemMoveBtn.getAttribute('aria-disabled');
       const testItemText = await testItem.getText();
       await testItemMoveBtn.click();
       await expect(testItemText).toBe('Source 0.1');
-      await expect(testItemMoveBtnDisabled).toBe('true');
+      // PUI-17909: a natively disabled DSButton emits the native `disabled` attribute and
+      // intentionally omits aria-disabled (that is reserved for applyAriaDisabled). Assert the
+      // native disabled state instead of the now-absent aria-disabled.
+      await expect(testItemMoveBtn).toBeDisabled();
     });
     it('02: should not display the BAB when a disabled item is clicked', async () => {
       const testItem = await DSShuttleV2CO.getItemWrapper(1);

package/ds-system/DSSystem.visual.spec.js

@@ -0,0 +1,19 @@
+import DSSystemCO from './DSSystemCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-12550 [DSSystem] Html Elements - visual', () => {
+    before(async () => {
+      const errorOnGo = await DSSystemCO.htmlElements.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display stlyling of html elements correctly', async () => {
+      // This test also verifies the functionality of the `innerRef` prop.
+      // It confirms that the `innerRef` prop is correctly implemented by
+      // capturing and asserting the message "The Div element is successfully referenced."
+      const div = await DSSystemCO.getDiv();
+      await div.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSSystemCO.snapshotPath('html-elements-innerRef'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-system/DSSystemCO.js

@@ -0,0 +1,15 @@
+import { PATH_E2E_SYSTEM } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSystemCO extends PageObject {
+  static htmlElements = new Urlbuilder(PATH_E2E_SYSTEM, 'html-elements-test');
+
+  static async getDiv() {
+    return $('//div[@data-testid="custom-data-testid"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('System', example, 'ds-system');
+  }
+}

package/ds-typography/DSTypography.func.spec.js

@@ -6,17 +6,17 @@ import DSTypographyCO from './DSTypographyCO';
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-11020 -  Typography, tabStop for link/btn -Func', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSTypographyCO.showcaseURL.go();
+      const errorOnGo = await DSTypographyCO.interactiveURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should tab to first Button typography', async () => {
+    it('01: should tab to first Button typography', async () => {
       await browser.keys(Key.Tab);
-      const buttonTypo = await DSTypographyCO.getTypographyByIndex(17);
+      const buttonTypo = await DSTypographyCO.getTypographyByVariant('button');
       await expect(buttonTypo).toBeFocused();
     });
-    it('should tab to first LINK typography', async () => {
+    it('02: should tab to first LINK typography', async () => {
       await browser.keys(Key.Tab);
-      const linkTypo = await DSTypographyCO.getTypographyByIndex(18);
+      const linkTypo = await DSTypographyCO.getTypographyByVariant('a');
       await expect(linkTypo).toBeFocused();
     });
   });

package/ds-typography/DSTypography.visual.spec.js

@@ -2,31 +2,38 @@
 import { mouseOver } from '../helpers';
 import DSTypographyCO from './DSTypographyCO';
 
-describe('PUI-8687 -  Typography, card', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSTypographyCO.cardURL.go();
-    if (errorOnGo) throw errorOnGo;
-  });
-  it('should display typography on a card', async () => {
-    const typography = await DSTypographyCO.getTypographys();
-    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-card'));
-    await expect(snapshot).toEqual(0);
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8687 -  Typography, card', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.cardURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a card', async () => {
+      const typography = await DSTypographyCO.getTypographys();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-card'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display title hovered', async () => {
+      const hoverableTypography = await DSTypographyCO.getTypographyByText('Jessica Smith');
+      await hoverableTypography.scrollIntoView();
+      await mouseOver(hoverableTypography, 60, 10);
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-card-hovered-sc'));
+      await expect(snapshot).toEqual(0);
+    });
   });
-});
 
-describe('PUI-8688 -  Typography, within form', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSTypographyCO.formURl.go();
-    if (errorOnGo) throw errorOnGo;
-  });
-  it('should display typography on a form', async () => {
-    const typography = await DSTypographyCO.getTypographys();
-    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-form'));
-    await expect(snapshot).toEqual(0);
+  describe('PUI-8688 -  Typography, within form', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.formURl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a form', async () => {
+      const typography = await DSTypographyCO.getTypographys();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-form'));
+      await expect(snapshot).toEqual(0);
+    });
   });
-});
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-8689 -  Typography, within a dialog', () => {
     before('loading page', async () => {
       const errorOnGo = await DSTypographyCO.dialogURL.go();
@@ -39,34 +46,29 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
-}
 
-describe('PUI-8690 -  Typography, showcase', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSTypographyCO.showcaseURL.go();
-    if (errorOnGo) throw errorOnGo;
-  });
-  it('should display typography showcase', async () => {
-    const typography = await DSTypographyCO.getTypographys();
-    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-showcase'));
-    await expect(snapshot).toEqual(0);
-  });
-  it('should display typography showcase with the hoverable typohraphy hovered', async () => {
-    const hoverableTypography = await DSTypographyCO.getTypographyByIndex(6);
-    await mouseOver(hoverableTypography);
-    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-hovered-sc'));
-    await expect(snapshot).toEqual(0);
+  describe('PUI-8690 -  Typography, showcase', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography showcase', async () => {
+      await browser.eyesOpen();
+      const typography = await DSTypographyCO.getTypographys();
+      const snapshot = await browser.eyesCheckSnapshot(DSTypographyCO.snapshotPath('typography-showcase'));
+      await expect(snapshot).toEqual(0);
+    });
   });
-});
 
-describe('PUI-10576 -  Typography, wrapping rule prop', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSTypographyCO.truncationURL.go();
-    if (errorOnGo) throw errorOnGo;
-  });
-  it('01: should display typography showcase', async () => {
-    const typography = await DSTypographyCO.getTypographys();
-    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-truncation'));
-    await expect(snapshot).toEqual(0);
+  describe('PUI-10576 -  Typography, wrapping rule prop', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.truncationURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display typography showcase', async () => {
+      const typography = await DSTypographyCO.getTypographys();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-truncation'));
+      await expect(snapshot).toEqual(0);
+    });
   });
-});
+}

package/ds-typography/DSTypographyCO.js

@@ -1,18 +1,22 @@
-import { PATH_TYPOGRAPHY, PATH_E2E_TYPOGRAPHY } from '../../environments/storybook/paths';
+import { PATH_E2E_TYPOGRAPHY } from '../../environments/storybook/paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSTypographyCO extends PageObject {
   // Desktop
-  static cardURL = new Urlbuilder(PATH_TYPOGRAPHY, 'card');
+  static cardURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'card');
 
-  static formURl = new Urlbuilder(PATH_TYPOGRAPHY, 'form');
+  static formURl = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'form');
 
-  static dialogURL = new Urlbuilder(PATH_TYPOGRAPHY, 'dialog');
+  static dialogURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'dialog');
 
-  static showcaseURL = new Urlbuilder(PATH_TYPOGRAPHY, 'show-case');
+  static showcaseURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'show-case');
 
   static truncationURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'truncation-test');
 
+  static interactiveURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'interactive-test');
+
+  static themeFontURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'theme-font-family-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Typography', example);
@@ -26,9 +30,25 @@ export default class DSTypographyCO extends PageObject {
     return $$('[data-testid="ds-typography-element"]');
   }
 
+  static async getTypographyByVariant(variant) {
+    return $(`${variant}[data-testid="ds-typography-element"]`);
+  }
+
+  static async getTypographyByText(text) {
+    return $(`[data-testid="ds-typography-element"]*=${text}`);
+  }
+
   static getTypographyByIndex = async (index) => getElementByIndex(this.getTypographys, index);
 
   static async getOpenDialog() {
     return $('[data-testid="open-dialog-button"]');
   }
+
+  static async getThemedTypography() {
+    return $('[data-testid="theme-font-sentinel"] [data-testid="ds-typography-element"]');
+  }
+
+  static async getFallbackTypography() {
+    return $('[data-testid="theme-font-fallback"] [data-testid="ds-typography-element"]');
+  }
 }

package/ds-typography/theme-font/DSTypography.theme-font.func.spec.js

@@ -0,0 +1,30 @@
+import DSTypographyCO from '../DSTypographyCO';
+
+// Tests the theme-driven font-family mechanism shipped under PUI-18210
+// (ds-typography/src/parts/styled.ts + typographyFontFamily.ts read 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-18707 - DSTypography:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSTypographyCO.getThemedTypography();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const fallback = await DSTypographyCO.getFallbackTypography();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}