dimsum-e2e-tests 3.53.0-alpha.1 → 3.53.0-alpha.3

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.getDataTableEmptyStateWrapper();
+      await emptyStateWrapper.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('skeleton-empty-state'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-data-table-async/filters/DSDataTable.filters-creatable.func.spec.js

@@ -9,7 +9,7 @@ import DSComboboxCO from '../../ds-controlled-form/ds-combobox/DSComboboxCO';
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-9203 - DataTable, Filter, Creatable single select filter', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      const errorOnGo = await DSDataTableCO.filterCreatableMulti.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
@@ -40,14 +40,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await type('John');
       await browser.keys(Key.Enter);
       const results = await RowCO.getRows();
-      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 2);
       const isFiltered = filteredNames.every((name) => name.toLowerCase() === 'john');
       await expect(isFiltered).toBeTruthy();
     });
   });
   describe('PUI-9204 - DataTable, Filter, Creatable multi select filter', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      const errorOnGo = await DSDataTableCO.filterCreatableMulti.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
@@ -78,14 +78,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const results = await RowCO.getRows();
-      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 3);
       const isFiltered = filteredNames.every((position) => position.toLowerCase() === 'react dev');
       await expect(isFiltered).toBeTruthy();
     });
   });
   describe('PUI-11241 - DataTable, Filter, Creatable multi select filter and focus interaction', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      const errorOnGo = await DSDataTableCO.filterCreatableMulti.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });

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

@@ -12,6 +12,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSDataTableCO.filteredCreatable.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
+      await browser.maximizeWindow();
     });
     it('01: should open the popup and focus the text input', async () => {
       await browser.eyesOpen();

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

@@ -4,7 +4,7 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSDataTableCO from '../DSDataTableCO';
-import { FiltersCO, FilterBarCO } from '../components';
+import { FiltersCO, FilterBarCO, HeaderCO } from '../components';
 import { type } from '../../helpers';
 import DSComboboxCO from '../../ds-controlled-form/ds-combobox/DSComboboxCO';
 
@@ -186,4 +186,21 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+
+  describe('PUI-17182 - DataTable: Filterbar:: Filter not to collapse with fixed width  - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterWidthCollapse.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: number range filter popover should be correctly displayed', async () => {
+      await browser.eyesOpen();
+      const filterHeader = await HeaderCO.getHeaderCellByIndex(8);
+      await filterHeader.scrollIntoView();
+      await FiltersCO.openFilterPopperByColumnName('number range');
+      await browser.keys('3');
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('filter-number-range-width-collase'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-data-table-async/filters/DSDataTable.free-text-search.keyboard.func.spec.js

@@ -0,0 +1,242 @@
+/* eslint-disable max-statements */
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, HeaderCO, RowCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17113 - [DataTable] FreeTextSearch - input retain previous value - functional', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.freeTextSearchFilter.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the free text search filter popover and focus the input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const freeTextPopover = await FiltersCO.getFilterPopoverContent();
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      await expect(freeTextPopover).toBeDisplayedInViewport();
+      await expect(freeTextSearchInput).toBeFocused();
+    });
+    it('02: should allow typing in the input without autofiltering', async () => {
+      await type('j');
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const inputValue = await freeTextSearchInput.getValue();
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isNotFiltered = filteredNames.some((name) => name.toLowerCase() === 'francisco');
+      await expect(inputValue).toEqual('j');
+      await expect(isNotFiltered).toEqual(true);
+    });
+    it('03: should apply the filter after pressing Enter', async () => {
+      await type('ohn j');
+      await browser.keys(Key.Return);
+      const FirstNameColumnHeader = await HeaderCO.getHeaderCellByIndex(1);
+      const buttonFirstNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(FirstNameColumnHeader, 0);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === 'john johnson');
+      const pill1 = await FilterBarCO.getPillByText('john j');
+      await expect(buttonFirstNameColumn).toBeFocused();
+      await expect(isFiltered).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('04: should retain the previous filter value', async () => {
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const inputValue = await freeTextSearchInput.getValue();
+      await expect(inputValue).toEqual('john j');
+    });
+    it('05: should apply a new filter', async () => {
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Return);
+      const FirstNameColumnHeader = await HeaderCO.getHeaderCellByIndex(1);
+      const buttonFirstNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(FirstNameColumnHeader, 0);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFilteredJWick = filteredNames.some((name) => name.toLowerCase() === 'john wick');
+      const isFilteredJJ = filteredNames.some((name) => name.toLowerCase() === 'john wick');
+      const pill1 = await FilterBarCO.getPillByText('john ');
+      await expect(buttonFirstNameColumn).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('06: should not clear the filter when the input is empty and press Enter', async () => {
+      await browser.keys(Key.Return);
+      // await browser.keys([Key.Backspace, Key.Backspace, Key.Backspace, Key.Backspace, Key.Backspace]);
+      if (browser.capabilities.browserName === 'Safari') {
+        await browser.keys([Key.Command, 'A']);
+      } else {
+        await browser.keys([Key.Control, 'A']);
+      }
+      await browser.keys(Key.Delete);
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFilteredJWick = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      const isFilteredJJ = filteredLastNames.some((name) => name.toLowerCase() === 'jane wick');
+      const pill1 = await FilterBarCO.getPillByText('j');
+      await expect(freeTextSearchInput).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('07: should not clear the filter when the input has whitespace and press Enter', async () => {
+      await browser.keys(Key.Return);
+      await type(' ');
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFilteredJWick = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      const isFilteredJJ = filteredLastNames.some((name) => name.toLowerCase() === 'jane wick');
+      const pill1 = await FilterBarCO.getPillByText('j');
+      await expect(freeTextSearchInput).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('08: should close the filter - Escape', async () => {
+      await browser.keys(Key.Return);
+      const freeTextPopover = await FiltersCO.getFilterPopoverContent();
+      await freeTextPopover.waitForDisplayed();
+      await browser.keys(Key.Escape);
+      const FirstNameColumnHeader = await HeaderCO.getHeaderCellByIndex(1);
+      const buttonFirstNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(FirstNameColumnHeader, 0);
+      await expect(freeTextPopover).not.toBeDisplayed();
+      await expect(buttonFirstNameColumn).toBeFocused();
+    });
+    it('09: should display "no results found" when no matching rows are found', async () => {
+      await browser.keys(Key.Return);
+      await type('this is a test');
+      await browser.keys(Key.Return);
+      const noResults = await DSDataTableCO.getDataTableEmptyStateWrapper();
+      const FirstNameColumnHeader = await HeaderCO.getHeaderCellByIndex(1);
+      const buttonFirstNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(FirstNameColumnHeader, 0);
+      const pill1 = await FilterBarCO.getPillByText('this is a test');
+      await expect(noResults).toBeDisplayedInViewport();
+      await expect(buttonFirstNameColumn).toBeFocused();
+      await expect(pill1).toBeDisplayed();
+    });
+  });
+  describe("PUI-17114 - [DataTable] FreeTextSearch - input doesn't retain previous value - functional", () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.freeTextSearchFilter.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the free text search filter popover and focus the input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const freeTextPopover = await FiltersCO.getFilterPopoverContent();
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      await expect(freeTextPopover).toBeDisplayedInViewport();
+      await expect(freeTextSearchInput).toBeFocused();
+    });
+    it('02: should allow typing in the input without autofiltering', async () => {
+      await type('m');
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const inputValue = await freeTextSearchInput.getValue();
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isNotFiltered = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      await expect(inputValue).toEqual('m');
+      await expect(isNotFiltered).toEqual(true);
+    });
+    it('03: should apply the filter after pressing Enter', async () => {
+      await type('a');
+      await browser.keys(Key.Return);
+      const LastNameColumnHeader = await HeaderCO.getHeaderCellByIndex(2);
+      const buttonLastNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(LastNameColumnHeader, 0);
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredLastNames.every((name) => name.toLowerCase() === 'maria');
+      const pill1 = await FilterBarCO.getPillByText('ma');
+      await expect(buttonLastNameColumn).toBeFocused();
+      await expect(isFiltered).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('04: should do not retain the previous filter value', async () => {
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const inputValue = await freeTextSearchInput.getValue();
+      await expect(inputValue).toEqual('');
+    });
+    it('05: should apply a new filter', async () => {
+      await type('j');
+      await browser.keys(Key.Return);
+      const LastNameColumnHeader = await HeaderCO.getHeaderCellByIndex(2);
+      const buttonLastNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(LastNameColumnHeader, 0);
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFilteredJWick = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      const isFilteredJJ = filteredLastNames.some((name) => name.toLowerCase() === 'jane wick');
+      const pill1 = await FilterBarCO.getPillByText('j');
+      await expect(buttonLastNameColumn).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('06: should not clear the filter when the input is empty and press Enter', async () => {
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFilteredJWick = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      const isFilteredJJ = filteredLastNames.some((name) => name.toLowerCase() === 'jane wick');
+      const pill1 = await FilterBarCO.getPillByText('j');
+      await expect(freeTextSearchInput).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('07: should not clear the filter when the input has whitespace and press Enter', async () => {
+      await browser.keys(Key.Return);
+      await type(' ');
+      await browser.keys(Key.Return);
+      const freeTextSearchInput = await FiltersCO.getFreeTextSearchInput();
+      const results = await RowCO.getRows();
+      const filteredLastNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFilteredJWick = filteredLastNames.some((name) => name.toLowerCase() === 'jane johnson');
+      const isFilteredJJ = filteredLastNames.some((name) => name.toLowerCase() === 'jane wick');
+      const pill1 = await FilterBarCO.getPillByText('j');
+      await expect(freeTextSearchInput).toBeFocused();
+      await expect(isFilteredJWick).toEqual(true);
+      await expect(isFilteredJJ).toEqual(true);
+      await expect(pill1).toBeDisplayed();
+    });
+    it('08: should close the filter - Escape', async () => {
+      await browser.keys(Key.Return);
+      const freeTextPopover = await FiltersCO.getFilterPopoverContent();
+      await freeTextPopover.waitForDisplayed();
+      await browser.keys(Key.Escape);
+      const LastNameColumnHeader = await HeaderCO.getHeaderCellByIndex(2);
+      const buttonLastNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(LastNameColumnHeader, 0);
+      await expect(freeTextPopover).not.toBeDisplayed();
+      await expect(buttonLastNameColumn).toBeFocused();
+    });
+    it('09: should display "no results found" when no matching rows are found', async () => {
+      await browser.keys(Key.Return);
+      await type('this is a test');
+      await browser.keys(Key.Return);
+      const noResults = await DSDataTableCO.getDataTableEmptyStateWrapper();
+      const LastNameColumnHeader = await HeaderCO.getHeaderCellByIndex(2);
+      const buttonLastNameColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(LastNameColumnHeader, 0);
+      const pill1 = await FilterBarCO.getPillByText('this is a test');
+      await expect(noResults).toBeDisplayedInViewport();
+      await expect(buttonLastNameColumn).toBeFocused();
+      await expect(pill1).toBeDisplayed();
+    });
+  });
+}

package/ds-data-table-async/filters/DSDataTable.free-text-search.visual.spec.js

@@ -0,0 +1,54 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO, FilterBarCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17255 - DataTable:: FreeTextSearch Integration - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.integratedExampleWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display freeTextSearch opened', async () => {
+      await FiltersCO.openFilterPopperByColumnName('messages');
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display the value typed in the freeTextSearch', async () => {
+      await type('random');
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-typed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display the search results', async () => {
+      await browser.keys('Return');
+      const pill1 = await FilterBarCO.getPillByText('Messages');
+      await expect(pill1).toBeDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-results'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display the search results for second free text search', async () => {
+      await FiltersCO.openFilterPopperByColumnName('borrower name');
+      await type('Ron');
+      await browser.keys('Return');
+      const pill2 = await FilterBarCO.getPillByText('Borrower Name');
+      await expect(pill2).toBeDisplayed();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-results-two-filters'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display the last typed value in the filter', async () => {
+      await FiltersCO.openFilterPopperByColumnName('borrower name');
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-retain-value'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: should search a new value', async () => {
+      await FiltersCO.openFilterPopperByColumnName('borrower name');
+      await browser.keys('Backspace');
+      await browser.keys('Backspace');
+      await browser.keys('Backspace');
+      await type('Harry');
+      await browser.keys('Return');
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('free-text-search-new-value'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/filters/DSDataTable.text-filters.func.spec.js

@@ -248,9 +248,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await pill2.waitForDisplayed();
       const filterBarMenuBtn = await FilterBarCO.getFilterBarDropdownMenuButton();
       await filterBarMenuBtn.click();
-      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenu();
+      const filterBarMenu = await FilterBarCO.getFilterBarMenuListBox();
       await filterBarMenu.waitForDisplayed();
-      const clearFilters = await FilterBarCO.getFilterBarDropDownOption('Clear Filters');
+      const clearFilters = await FilterBarCO.getFilterBarDropDownMenuItemByIndex(0);
       await clearFilters.click();
       await expect(pill1).not.toBeDisplayed();
       await expect(pill2).not.toBeDisplayed();
@@ -272,7 +272,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys([Key.Shift, Key.Tab]);
       await browser.keys([Key.Shift, Key.Tab]);
       await browser.keys(Key.Enter);
-      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenu();
+      const filterBarMenu = await FilterBarCO.getFilterBarMenuListBox();
       await filterBarMenu.waitForDisplayed();
       await browser.keys(Key.Return);
       await expect(pill1).not.toBeDisplayed();

package/ds-data-table-async/menubutton/DSDataTable.MenuButton.keyboard.func.spec.js

@@ -0,0 +1,56 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import DSMenuButtonCO from '../../ds-menu-button/DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-16414 - DataTable, MenuButton (keyboard) - Functional Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.withMenuButton.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should focus menuTrigger with keyboard', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const menuButtonTrigger = await DSDataTableCO.getButtons(0);
+      await expect(menuButtonTrigger).toBeFocused();
+    });
+    it('02: should expand menuButton for datatable row with keyboard', async () => {
+      await browser.keys(Key.Return);
+      const submenuTriggerItem = await DSMenuButtonCO.getMenuItemWrapper(1);
+      const menuItems = (await DSMenuButtonCO.getMenuItems()).length;
+      await expect(menuItems).toEqual(5);
+      await expect(submenuTriggerItem).toBeDisplayedInViewport();
+    });
+    it('03: should trigger menuButton item with keyboard', async () => {
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Return);
+      const alertText = await browser.getAlertText();
+      await expect(alertText).toEqual('item selected: log actions - undefined');
+    });
+    it('03: should expand menuButton submenu for datatable row with keyboard', async () => {
+      await browser.dismissAlert();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowDown);
+      const menuItems = (await DSMenuButtonCO.getMenuItems()).length;
+      await expect(menuItems).toEqual(6);
+    });
+    it('04: should trigger menuButton submenu item with keyboard', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Return);
+      const alertText = await browser.getAlertText();
+      await expect(alertText).toEqual('item selected: Realtor Phone - (424) 000-0000');
+    });
+    it('05: should close menuButton menu with keyboard', async () => {
+      await browser.dismissAlert();
+      await browser.keys(Key.Return);
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      await menu.waitForDisplayed();
+      await browser.keys(Key.Escape);
+      await expect(menu).not.toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-data-table-async/menubutton/DSDataTable.MenuButton.mouse.func.spec.js

@@ -0,0 +1,55 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { mouseOver } from '../../helpers';
+import CellCO from '../components/CellCO';
+import DSMenuButtonCO from '../../ds-menu-button/DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-16413 - DataTable, MenuButton (mouse) - Functional Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.withMenuButton.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should expand menuButton for datatable row', async () => {
+      const menuButtonTrigger = await DSDataTableCO.getButtons(2);
+      await menuButtonTrigger.click();
+      const submenuTriggerItem = await DSMenuButtonCO.getMenuItemWrapper(1);
+      const menuItems = (await DSMenuButtonCO.getMenuItems()).length;
+      await expect(menuItems).toEqual(5);
+      await expect(submenuTriggerItem).toBeDisplayedInViewport();
+    });
+    it('02: should trigger menuButton item', async () => {
+      const thirdItem = await DSMenuButtonCO.getMenuItemWrapper(2);
+      await thirdItem.click();
+      const alertText = await browser.getAlertText();
+      await expect(alertText).toEqual('item selected: sms - undefined');
+    });
+    it('03: should expand menuButton submenu for datatable row', async () => {
+      await browser.dismissAlert();
+      const menuButtonTrigger = await DSDataTableCO.getButtons(2);
+      await menuButtonTrigger.click();
+      const submenuTriggerItem = await DSMenuButtonCO.getMenuItemWrapper(1);
+      await submenuTriggerItem.waitForDisplayed();
+      await mouseOver(submenuTriggerItem);
+      const menuItems = (await DSMenuButtonCO.getMenuItems()).length;
+      await expect(menuItems).toEqual(8);
+      await expect(submenuTriggerItem).toBeDisplayedInViewport();
+    });
+    it('04: should trigger menuButton submenu item', async () => {
+      const submenuItem = await DSMenuButtonCO.getMenuItemWrapper(5);
+      await submenuItem.click();
+      const alertText = await browser.getAlertText();
+      await expect(alertText).toEqual('item selected: Realtor Phone - (424) 000-0000');
+    });
+    it('05: should close menuButton flyout clicking outside the menu (cell for example)', async () => {
+      await browser.dismissAlert();
+      const menuButtonTrigger = await DSDataTableCO.getButtons(2);
+      await menuButtonTrigger.click();
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      await menu.waitForDisplayed();
+      const datatableCell = await CellCO.getCellByIndex(1);
+      await datatableCell.click();
+      await expect(menu).not.toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-data-table-async/menubutton/DSDataTable.MenuButton.visual.spec.js

@@ -0,0 +1,27 @@
+import DSDataTableCO from '../DSDataTableCO';
+import DSMenuButtonCO from '../../ds-menu-button/DSMenuButtonCO';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-16415 - DataTable, with menu button - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.withMenuButton.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have datatable with expanded menubutton and match baseline', async () => {
+      await browser.eyesOpen();
+      const menuButtonTrigger = await DSDataTableCO.getButtons(2);
+      await menuButtonTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-menubutton-menu'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should have datatable with expanded menubutton submenu and match baseline', async () => {
+      await browser.eyesOpen();
+      const submenuTriggerItem = await DSMenuButtonCO.getMenuItemWrapper(1);
+      await mouseOver(submenuTriggerItem);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-menubutton-submenu'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/more/DSDataTable.headers.visual.spec.js

@@ -1,49 +1,6 @@
-import { Key } from 'webdriverio';
 import DSDataTableCO from '../DSDataTableCO';
-import { HeaderCO } from '../components';
-import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-7205 - DataTable, Header, Sort by Column - Visual Test', () => {
-    // PUI-7054
-    before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.sortByColumn.go();
-      if (errorOnGo) throw errorOnGo;
-      await DSDataTableCO.waitForDataTable();
-    });
-    it('01: should focus position header and show its icons properly', async () => {
-      await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-focus-header'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('02: should hover country header and show its icons properly', async () => {
-      const positionHeader = await HeaderCO.getHeaderCellByIndex(3);
-      await mouseOver(positionHeader);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-hover-header'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('03: should hover truncated name header and show its icons and tooltip properly', async () => {
-      const nameLongHeader = await HeaderCO.getHeaderCellByIndex(1);
-      await mouseOver(nameLongHeader, 50, 10);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-hover-longheader-wtooltip'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('04: should sort descending by first column and get the proper sort icon', async () => {
-      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
-      await idHeader.click();
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-descending-icon-id'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('05: should sort ascending by first column and get the proper sort icon', async () => {
-      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
-      await idHeader.click();
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-ascending-icon-id'));
-      await expect(snapshot).toEqual(0);
-    });
-  });
-
   describe('PUI-6978  - DataTable, Header, Required Column - Visual Test', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.requiredColumns.go();
@@ -67,24 +24,4 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
-  describe('PUI-14735  - [DataTable] Header - Sort icon visibility - keyboard navigation - visual test', () => {
-    before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.sortByColumn.go();
-      if (errorOnGo) throw errorOnGo;
-      await DSDataTableCO.waitForDataTable();
-    });
-    it('01: column position focused, all the controls including filter and sort icons are displayed', async () => {
-      await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-header-kb-focus'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('02: column position focused, all the controls including filter and sort icons are displayed', async () => {
-      await browser.keys(Key.Enter);
-      await browser.keys(Key.Enter);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-header-kb-option-selected'));
-      await expect(snapshot).toEqual(0);
-    });
-  });
 }

package/ds-data-table-async/select/DSDataTable.select.func.spec.js

@@ -5,7 +5,7 @@ import DSDataTableCO from '../DSDataTableCO';
 import { HeaderCO, RowCO, FiltersCO } from '../components';
 import { getRadioValue } from '../helpers';
 import { tabStops, isChecked, type } from '../../helpers';
-import DSToggleCO from '../../ds-toggle/DSToggleCO';
+import DSToggleCO from '../../ds-form-toggle/DSToggleCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-7043 - DataTable, Single select disabled selection', () => {