dimsum-e2e-tests 3.54.0-beta.1 → 3.54.0-next.2

package/ds-data-table-async/DSDataTableCO.js

@@ -209,6 +209,8 @@ export default class DataTableCO extends PageObject {
     'filtered-column-with-combobox-filter-test',
   );
 
+  static pui16461SkeletonAndNoResults = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-16461-skeleton-and-no-results');
+
   // SELECTORS
 
   static getTable = async () => $('[data-testid="data-table-table"]');
@@ -308,6 +310,10 @@ export default class DataTableCO extends PageObject {
     return $(`[id="next_content_id"]`);
   }
 
+  static async getDataTableEmpyStateWrapper() {
+    return $('[data-testid="ds-datatable-empty-state-wrapper"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');

package/ds-data-table-async/date-filters/DSDataTable.date-switcher.visual.spec.js

@@ -9,32 +9,37 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
+    });
+    beforeEach('maximize window', async () => {
       await browser.maximizeWindow();
+      await browser.eyesOpen();
     });
-    it('should display the menu of the DateSwitcher single on a fixed date', async () => {
+    it('01: should display the menu of the DateSwitcher single on a fixed date', async () => {
       await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
       await browser.keys(Key.Tab);
       await type('02022020');
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-single'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-single'));
       await expect(snapshot).toEqual(0);
     });
-    it('should display the menu of the DateSwitcher range on a fixed first date', async () => {
+    it('02: should display the menu of the DateSwitcher range on a fixed first date', async () => {
       const checkBox = await DateSwitcherCO.getRangeCheckbox();
       await checkBox.click();
       const firstInput = await DateSwitcherCO.getLeftMMInput();
       await firstInput.click();
       await type('01012010');
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-notfull'));
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-notfull'),
+      );
       await expect(snapshot).toEqual(0);
     });
-    it('should display the menu of the DateSwitcher range with full input', async () => {
+    it('03: should display the menu of the DateSwitcher range with full input', async () => {
       const secondInput = await DateSwitcherCO.getRightMMInput();
       await secondInput.click();
       await type('01152010');
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-full'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-full'));
       await expect(snapshot).toEqual(0);
     });
-    it('display the menu of the DateSwitcher when the range and the start are not in the same month', async () => {
+    it('04: display the menu of the DateSwitcher when the range and the start are not in the same month', async () => {
       await browser.keys(Key.Escape);
       const pillCloseBt = await FilterBarCO.getPillCloseButtonByPill(await FilterBarCO.getPillByIndex(1));
       await pillCloseBt.click();
@@ -45,7 +50,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const secondInput = await DateSwitcherCO.getRightMMInput();
       await secondInput.click();
       await type('02152010');
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-split'));
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('dateswitcher-open-menu-range-split'),
+      );
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-data-table-async/empty-state/DSDataTable.empty-state.visual.spec.js

@@ -46,4 +46,17 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+  describe('PUI-16584 - DataTable:: skeleton and No results  - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.pui16461SkeletonAndNoResults.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should correctly display the data table empty state after skeleton animation finished', async () => {
+      const emptyStateWrapper = await DSDataTableCO.getDataTableEmpyStateWrapper();
+      await emptyStateWrapper.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('skeleton-empty-state'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

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

@@ -1,5 +1,5 @@
 import { Key } from 'webdriverio';
-import { PATH_E2E_COMBOBOX_SINGLE } from '../paths';
+import { PATH_E2E_COMBOBOX_SINGLE, PATH_E2E_COMBOBOX_SINGLE_SLOTS } from '../paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
 export default class DSComboboxSingleCO extends PageObject {
@@ -12,6 +12,21 @@ export default class DSComboboxSingleCO extends PageObject {
 
   static readOnlyWithMenuOpenable = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'read-only-with-menu-openable-test');
 
+  static controlledMenuStateAdvancedCustomizationTest = new Urlbuilder(
+    PATH_E2E_COMBOBOX_SINGLE_SLOTS,
+    'controlled-menu-state-advanced-customization-test',
+  );
+
+  static loadingAdvancedCustomizationTest = new Urlbuilder(
+    PATH_E2E_COMBOBOX_SINGLE_SLOTS,
+    'loading-advanced-customization-test',
+  );
+
+  static skeletonAdvancedCustomizationTest = new Urlbuilder(
+    PATH_E2E_COMBOBOX_SINGLE_SLOTS,
+    'skeleton-advanced-customization-test',
+  );
+
   // COMBOBOX - INPUT
   static async getCombobox() {
     return $('[data-testid="combobox-container"]');
@@ -152,6 +167,65 @@ export default class DSComboboxSingleCO extends PageObject {
     return $('[data-testid="popover-container"]');
   }
 
+  // Slots
+
+  static async getComboboxRootSlot() {
+    return $('[data-dimsum-slot="dsComboboxRoot"]');
+  }
+
+  static async getComboboxInputWrapperSlot() {
+    return $('[data-dimsum-slot="dsComboboxInputWrapper"]');
+  }
+
+  static async getComboboxInputSlot() {
+    return $('[data-dimsum-slot="dsComboboxInput"]');
+  }
+
+  static async getComboboxDropDownMenuBtnSlot() {
+    return $('[data-dimsum-parent-slot="dsComboboxDropdownButton"]');
+  }
+
+  static async getFloatingWrapperRootSlot() {
+    return $('[data-dimsum-slot="dsFloatingwrapperRoot"]');
+  }
+
+  static async getFloatingWrapperContentSlot() {
+    return $('[data-dimsum-slot="dsFloatingwrapperContent"]');
+  }
+
+  static async getFastListContainerSlot() {
+    return $('[data-dimsum-parent-slot="dsComboboxFastList"]');
+  }
+
+  static async getFastListWrapperListSlot() {
+    return $('[data-dimsum-slot="dsFastlistWrapperList"]');
+  }
+
+  static async getFastListItemSlot() {
+    return $('[data-dimsum-slot="dsFastlistItem"]');
+  }
+
+  static async getMenuitemMenuItemWrapperSlot() {
+    return $('[data-dimsum-slot="dsMenuitemMenuItemWrapper"]');
+  }
+
+  static async getMenuitemMenuItemsContentWrapperSlotByIndex(index) {
+    return $$('[data-dimsum-slot="dsMenuitemMenuItemContentWrapper"]')[index];
+  }
+
+  static async getMenuitemMenuItemLabelSlotByIndex(index) {
+    return $$('[data-dimsum-slot="dsMenuitemMenuItemLabel"]')[index];
+  }
+
+  static async getComboboxLoadingIndicator() {
+    return $('[data-dimsum-parent-slot="dsComboboxLoadingIndicator"]');
+  }
+
+  static async getComboboxSkeletonMenuItem() {
+    return $('[data-dimsum-parent-slot="dsComboboxSkeletonMenuItem"]');
+  }
+  // Slots end
+
   // actions
 
   static async openMenuUsingKeyboard() {

package/ds-form-combobox-single/slots/DSComboboxSingle.slots.func.spec.js

@@ -0,0 +1,70 @@
+/* eslint-disable max-lines */
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-16558 - ComboboxSingle:: Slots - Controlled Menu Customization', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.controlledMenuStateAdvancedCustomizationTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-* and aria-*', async () => {
+      const comboboxRootSlot = await DSComboboxSingleCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxSingleCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxSingleCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxSingleCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxSingleCO.getFastListWrapperListSlot();
+      const comboboxMenuItemContent = await DSComboboxSingleCO.getMenuitemMenuItemsContentWrapperSlotByIndex(0);
+      const comboboxMenuItemLabel = await DSComboboxSingleCO.getMenuitemMenuItemLabelSlotByIndex(0);
+
+      await expect(comboboxRootSlot).toHaveAttribute('aria-label', 'Combobox with custom attributes');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute(
+        'aria-label',
+        'Combobox input wrapper with custom attributes',
+      );
+      await expect(comboboxInputSlot).toHaveAttribute('aria-label', 'Combobox input with custom attributes');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('aria-label', 'Combobox dropdown toggle menu button');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute(
+        'aria-label',
+        'Combobox fast list wrapper with custom attributes',
+      );
+      await expect(comboboxMenuItemContent).toHaveAttribute('data-testid', 'custom-menu-item-content-wrapper-0');
+      await expect(comboboxMenuItemLabel).toHaveAttribute(
+        'aria-label',
+        'Custom Luke Skywalker too long this text is super long',
+      );
+    });
+  });
+
+  describe('PUI-16559 - ComboboxSingle:: Slots - loading advanced customization', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingAdvancedCustomizationTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-* and aria-*', async () => {
+      const combobox = await DSComboboxSingleCO.getCombobox();
+      await combobox.click();
+      const dsComboboxLoadingIndicator = await DSComboboxSingleCO.getComboboxLoadingIndicator();
+
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('aria-label', 'Loading characters...');
+    });
+  });
+
+  describe('PUI-16560 - ComboboxSingle:: Slots - skeleton advanced customization', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonAdvancedCustomizationTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-* and aria-*', async () => {
+      const combobox = await DSComboboxSingleCO.getCombobox();
+      await combobox.click();
+      const comboboxSkeleton = await DSComboboxSingleCO.getComboboxSkeletonMenuItem();
+
+      await expect(comboboxSkeleton).toHaveAttribute('data-testid', 'ds-form-combobox-skeleton-menu-item');
+    });
+  });
+}

package/ds-form-date-time-picker/date-time-full/DateTimePicker.applyAriaDisabled.keyboard-nav.func.spec.js

@@ -138,7 +138,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const hourBtn = await DateTimePickerCO.getTimeWheelCurrentHour();
       await expect(hourBtn).toBeFocused();
     });
-    it('25: should close calendar - Escape', async () => {
+    it('25: should focus selected day - Shift+Tab', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const selectedDay = await DateTimePickerCO.getCalendarFocusedDay();
+      await expect(selectedDay).toBeFocused();
+    });
+    it('26: should close calendar - Escape', async () => {
       await browser.keys(Key.Escape);
       const calendar = await DateTimePickerCO.getControllerCalendarTimeWheel();
       const picker = await DateTimePickerCO.getCalendarTimeWheelPickerBtn();

package/ds-form-date-time-picker/date-time-full/DateTimePicker.keyboard-nav.func.spec.js

@@ -137,7 +137,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const hourBtn = await DateTimePickerCO.getTimeWheelCurrentHour();
       await expect(hourBtn).toBeFocused();
     });
-    it('25: should close calendar - Escape', async () => {
+    it('25: should focus selected day - Shift+Tab', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const selectedDay = await DateTimePickerCO.getCalendarSelectedFocusedDay();
+      await expect(selectedDay).toBeFocused();
+    });
+    it('26: should close calendar - Escape', async () => {
       await browser.keys(Key.Escape);
       const calendar = await DateTimePickerCO.getControllerCalendarTimeWheel();
       const picker = await DateTimePickerCO.getCalendarTimeWheelPickerBtn();

package/ds-form-date-time-picker/date-time-full/DateTimePicker.readOnly.keyboard-nav.func.spec.js

@@ -138,7 +138,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const hourBtn = await DateTimePickerCO.getTimeWheelCurrentHour();
       await expect(hourBtn).toBeFocused();
     });
-    it('25: should close calendar - Escape', async () => {
+    it('25: should focus selected day - Shift+Tab', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const selectedDay = await DateTimePickerCO.getCalendarFocusedDay();
+      await expect(selectedDay).toBeFocused();
+    });
+    it('26: should close calendar - Escape', async () => {
       await browser.keys(Key.Escape);
       const calendar = await DateTimePickerCO.getControllerCalendarTimeWheel();
       const picker = await DateTimePickerCO.getCalendarTimeWheelPickerBtn();

package/ds-global-header/GlobalHeader.axe-core.func.spec.js

@@ -89,7 +89,8 @@ if (
     });
   });
 
-  describe('PUI-16270 - GlobalHeader: Controled with Iframe -AxeCore', () => {
+  // unskip after PUI-16505 is fixed
+  describe.skip('PUI-16270 - GlobalHeader: Controled with Iframe -AxeCore', () => {
     before(async () => {
       const errorOnGo = await GlobalHeaderCO.iframeURL.go();
       if (errorOnGo) throw errorOnGo;

package/ds-notification-badge/DSNotificationBadge.axe-core.func.spec.js

@@ -47,7 +47,7 @@ if (
     });
   });
   // Defect PUI-14981
-  describe('PUI-11417:: [NotificationBadge] Chip, Icon and Button integration - Axe-core Validation', () => {
+  describe.skip('PUI-11417:: [NotificationBadge] Chip, Icon and Button integration - Axe-core Validation', () => {
     before('loading page', async () => {
       const errorOnGo = await DSNotificationBadgeCO.componentCasesTest.go();
       if (errorOnGo) throw errorOnGo;