dimsum-e2e-tests 1.0.0-rc.1

package/ds-data-table-async/editable-cell/DSDataTable.editablecells.visual.spec.js

@@ -0,0 +1,59 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, CellCO } from '../components';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6979 - DataTable, Editable cells icon always displayed - Func Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.editableCells.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the editable cells with persistent icon', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-persistent-cells'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6940 - DataTable, Editable cells displaying icons- Func Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.editableCells.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the icon when hovering the non-persisten icon editable cell', async () => {
+      const editableCellRow = await RowCO.getRowByIndex(2);
+      const editableCell = await CellCO.getRowCellByIndex(editableCellRow, 1);
+      await mouseOver(editableCell);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-hover-nopersist'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should not display  the icon when hovering other part of the row', async () => {
+      const editableCellRow = await RowCO.getRowByIndex(2);
+      const NonEditableCell = await CellCO.getRowCellByIndex(editableCellRow, 0);
+      await mouseOver(NonEditableCell);
+      await NonEditableCell.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-no-hover-nopersist'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the icon when focusing the editable cell', async () => {
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-focus-nopersist'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the text input when clicking the edit icon at position', async () => {
+      const editableCellRow = await RowCO.getRowByIndex(2);
+      const editableCell = await CellCO.getRowCellByIndex(editableCellRow, 2);
+      await editableCell.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-editing-txt'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the dropodown menu input when clicking the edit icon at name', async () => {
+      const editableCellRow = await RowCO.getRowByIndex(2);
+      const editableCell = await CellCO.getRowCellByIndex(editableCellRow, 1);
+      await editableCell.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('editable-cells-editing-dd'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/empty-state/DSDataTable.empty-state.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11436 - DataTable, EmptyState - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.emptyState.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should correctly display the data table empty state default', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,49 @@
+/* eslint-disable max-lines */
+import DSDataTableCO from '../DSDataTableCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6937 - DataTable, EmptyState - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.emptyState.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the data table empty state default', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('empty-state'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6938 - DataTable, EmptyState full customization - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.emptyStateFullCustom.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the data table empty state with full customization', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('empty-state-full-custom'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6936 - DataTable, EmptyState custom message - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.emptyStateCustomMsg.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the data table empty state with a custom msg', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('empty-state-custom-msg'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10854 - DataTable, EmptyState with no height  - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.emptyStateNoHeight.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly display the data table empty state with no height', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('empty-state-no-height'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/expandable/DSDataTable.expandable.axe-core.func.spec.js

@@ -0,0 +1,29 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO } from '../components';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11437 - DataTable, Master Detail subrows -AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the layout with a subbrow expanded and its child expanded and pass axe-core scan', async () => {
+      const expandBtn = await RowCO.getRowExpandButtonByIndex(2);
+      await expandBtn.click();
+      const subrowExpandBtn = await RowCO.getRowExpandButtonByIndex(5);
+      await subrowExpandBtn.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,92 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, CellCO } from '../components';
+import { getElementBoundingRect } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7081 - DataTable, re rendering an expandable datatable', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.expandable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should expand the first row properly', async () => {
+      const firstRow = await RowCO.getRowByIndex(0);
+      await (await RowCO.getRowExpandButtonByRow(firstRow)).click();
+      const ariaExpanded = await firstRow.getAttribute('data-is-row-expanded');
+      await expect(ariaExpanded).toBe('true');
+    });
+    it('should persist the first row expanded after a re render', async () => {
+      await (await DSDataTableCO.getElementByDataTestid(DSDataTableCO.dTID.CHANGE_ORDER_BUTTON)).click();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const ariaExpanded = await firstRow.getAttribute('data-is-row-expanded');
+      await expect(ariaExpanded).toBe('true');
+    });
+  });
+  describe('PUI-6900 - DataTable, Expandable with keyboard', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should expand the row with keyboard and display its content', async () => {
+      const fourthRow = await RowCO.getRowByIndex(4);
+      await fourthRow.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Space);
+      const childShowing = await $('[data-testid="ic-arrow-child"]');
+      await expect(childShowing).toBeDisplayed();
+    });
+  });
+
+  describe('PUI-7199 - DataTable, Expandable multi-level', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should expand the first row properly', async () => {
+      const firstRow = await RowCO.getRowByIndex(0);
+      await (await RowCO.getRowExpandButtonByIndex(0)).click();
+      const ariaExpanded = await firstRow.getAttribute('data-is-row-expanded');
+      await expect(ariaExpanded).toBe('true');
+      const secondRow = await RowCO.getRowByIndex(1);
+      const thirdRow = await RowCO.getRowByIndex(2);
+      const fourthRow = await RowCO.getRowByIndex(3);
+      const firstCell = await CellCO.getRowCellByIndex(secondRow, 0);
+      const secondCell = await CellCO.getRowCellByIndex(thirdRow, 0);
+      const thirdCell = await CellCO.getRowCellByIndex(fourthRow, 0);
+      const ariaExpThirdC = await fourthRow.getAttribute('data-is-row-expanded');
+      await expect(firstCell).toHaveTextContaining('0.0');
+      await expect(secondCell).toHaveTextContaining('0.1');
+      await expect(thirdCell).toHaveTextContaining('0.2');
+      await expect(ariaExpThirdC).toBe(null);
+    });
+    it('should persist the first row expanded after a re render', async () => {
+      const thirdChild = await RowCO.getRowByIndex(3);
+      await (await RowCO.getRowExpandButtonByRow(thirdChild)).click();
+      const ariaExpanded = await thirdChild.getAttribute('data-is-row-expanded');
+      await expect(ariaExpanded).toBe('true');
+    });
+  });
+
+  describe('PUI-7244 - DataTable, Scroll behavior when expanding with space', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should persist the scroll position after expanding with space', async () => {
+      const fourthRow = await RowCO.getRowByIndex(4);
+      await fourthRow.click();
+      await browser.keys(Key.Return);
+      const { y: yPositionBefore } = await getElementBoundingRect(fourthRow);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Space);
+      const { y: yPositionAfter } = await getElementBoundingRect(fourthRow);
+      await expect(yPositionBefore).toEqual(yPositionAfter);
+    });
+  });
+}

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

@@ -0,0 +1,101 @@
+/* eslint-disable wdio/no-pause */
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO, CellCO } from '../components';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6991 - DataTable, Expandable rows with toolbar alignment- Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.expandableWithToolbarUC.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the toolbar trigger aligned to the row', async () => {
+      await (await RowCO.getRowExpandButtonByIndex(0)).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('expandable-toolbar-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the opened toolbar aligned to the expanded row', async () => {
+      await (await RowCO.getRowToolbarTriggerByIndex(0)).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('exapandable-toolbar-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6899 - DataTable, Expandable rows, header icon- Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.expandable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the expandable icon in the header in collapsed state', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('expandable-header-collapsed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the expandable icon in the header in mixed state', async () => {
+      await (await RowCO.getRowExpandButtonByIndex(0)).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('expandable-header-mixed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the expandable icon in the header in expanded state', async () => {
+      await (await HeaderCO.getHeaderExpandButton()).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('expandable-header-expanded'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the expandable icon in the header in collapsed state (after)', async () => {
+      await (await HeaderCO.getHeaderExpandButton()).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('expandable-header-collapsed-after'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8393 - DataTable: Expandable:: Side Panel Integration - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.expandableWithModalSlide.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the slide opend inside an expandable row', async () => {
+      await browser.eyesOpen();
+      await (await RowCO.getRowExpandButtonByIndex(0)).click();
+      const openSlide = await DSDataTableCO.getOpenSlideBtn();
+      await openSlide.click();
+      await browser.pause(1000);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('expandable-row-with-slide-panel-opened'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the expanded row after close the slide panel', async () => {
+      await browser.eyesOpen();
+      const closeSlide = await DSDataTableCO.getCloseSlideBtn();
+      await closeSlide.click();
+      await browser.pause(1000);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('expandable-row-with-slide-panel-closed'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10022 - DataTable: Expandable:: truncated - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.truncatedWithExpandable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should be displayed second column truncated', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('expandable-truncated'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display tooltip on first cell', async () => {
+      await browser.eyesOpen();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const firstCell = await CellCO.getRowCellByIndex(firstRow, 0);
+      mouseOver(firstCell, 75, 18);
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('expandable-truncated-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,66 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, FiltersCOextra, RowCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7542 - DataTable, Filter, Currency filter', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus on the first input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('salary', 0);
+      const popupLeftInput = await FiltersCOextra.filterCurrencyPopper.getLeftInput();
+      await expect(popupLeftInput).toBeFocused();
+    });
+    it('should fill in the input and get matching pill on the filterbar', async () => {
+      await FiltersCOextra.filterCurrencyPopper.setInput('123123.00', '123124.00');
+      const dateSwitcherTxtPill = await FilterBarCO.getPillByIndex(1);
+      const txtPillText = await dateSwitcherTxtPill.getText();
+      await expect(txtPillText).toEqual('123123.00 - 123124.00');
+    });
+    it('should get the filtered results', async () => {
+      const results = await RowCO.getRows();
+      const filteredSalary = await DSDataTableCO.getAllColumnResults(results, 4);
+      await expect(filteredSalary.every((salary) => salary === '$123123')).toBeTruthy();
+    });
+    it('should show all results after removing the filter from the filterbar', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredSalary = await DSDataTableCO.getAllColumnResults(results, 4);
+      await expect(filteredSalary.every((salary) => salary === '$123123')).not.toBeTruthy();
+    });
+  });
+
+  describe('PUI-7543 - DataTable, Filter, Number range filter', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus on the first input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('number range', 0);
+      const popupFirstInput = await FiltersCOextra.filterNumberRangePopper.getLeftInput();
+      await expect(popupFirstInput).toBeFocused();
+    });
+    it('should fill in the input and get matching pill on the filterbar', async () => {
+      await FiltersCOextra.filterNumberRangePopper.setInput('6', '7');
+      const dateSwitcherTxtPill = await FilterBarCO.getPillByIndex(1);
+      const txtPillText = await dateSwitcherTxtPill.getText();
+      await expect(txtPillText).toEqual('6 - 7');
+    });
+    it('should get the filtered results', async () => {
+      const results = await RowCO.getRows();
+      const filteredNrange = await DSDataTableCO.getAllColumnResults(results, 7);
+      const areFiltered = filteredNrange.every((nRange) => nRange === '6' || nRange === '7');
+      await expect(areFiltered).toBeTruthy();
+    });
+    it('should show all results after removing the filter from the filterbar', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredNrange = await DSDataTableCO.getAllColumnResults(results, 6);
+      const areFiltered = filteredNrange.every((nRange) => nRange === '6' || nRange === '7');
+      await expect(areFiltered).not.toBeTruthy();
+    });
+  });
+}

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

@@ -0,0 +1,22 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7370 - DataTable, filtered multiple tables - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredMultipleTables.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the date picker correctly', async () => {
+      await FiltersCO.openFilterPopperByColumnName('single date', 0);
+      await DSDataTableCO.type('1');
+      await browser.keys(Key.Tab);
+      await DSDataTableCO.type('10');
+      await DSDataTableCO.type('2020');
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('multiple-tables-single-date-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,112 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, RowCO } from '../components';
+import { type } from '../../helpers';
+
+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();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+    });
+    it('02: start typing a valid value and filter options', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('J');
+      const option1 = await FiltersCO.filterSingleSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterSingleSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      await expect(option1).toHaveTextContaining(['Add:', 'J']);
+      await expect(option2).toHaveTextContaining('John');
+    });
+    it('03: should create a new option', async () => {
+      await type('OHN');
+      await browser.keys(Key.Enter);
+      const pill = await FilterBarCO.getPillByText('JOHN');
+      await expect(pill).toBeDisplayedInViewport();
+    });
+    it('04: should filter typing a valid value', async () => {
+      const pillCloseBtn = await FilterBarCO.getPillByText('JOHN');
+      await pillCloseBtn.click();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('John');
+      await browser.keys(Key.Enter);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      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();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputSingleSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+    });
+    it('02: start typing a valid value and filter options', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('Re');
+      const option1 = await FiltersCO.filterMultiSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterMultiSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      await expect(option1).toHaveTextContaining(['Add:', 'Re']);
+      await expect(option2).toHaveTextContaining('React');
+    });
+    it('03: should create a new option', async () => {
+      await type('act');
+      await browser.keys(Key.Enter);
+      const pill = await FilterBarCO.getPillByText('React');
+      const menuItems = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      const textFirstItem = await menuItems[0];
+      await expect(pill).toBeDisplayedInViewport();
+      await expect(textFirstItem).toHaveTextContaining('React');
+    });
+    it('04: type a valid value', async () => {
+      await type('React dev');
+      await browser.keys(Key.Enter);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      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();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should not lose focus after selecting a new option', async () => {
+      const firstRow = await RowCO.getRowByIndex(0);
+      await firstRow.click();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('React');
+      const newOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(0);
+      await newOption.waitForClickable();
+      await newOption.click();
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await expect(inputMultiSelect).toBeFocused();
+    });
+    it('02: should not lose focus after selecting another option', async () => {
+      const option2 = await FiltersCO.filterMultiSelectPopper.getMenuItem(1);
+      await option2.waitForDisplayed();
+      await option2.click();
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await expect(inputMultiSelect).toBeFocused();
+    });
+  });
+}

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

@@ -0,0 +1,61 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9206 - DataTable, Creatable single select filter - focus after clear input', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('J');
+      const option1 = await FiltersCO.filterSingleSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterSingleSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(
+        DSDataTableCO.snapshotPath('filter-single-creatable-add-new-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: focus should be displayed on the option and input', async () => {
+      // await browser.eyesOpen();
+      await browser.keys(Key.Backspace);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('filter-single-creatable-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9207 - DataTable, Filter, Creatable multi select filter - focus after clear input', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('Re');
+      const option1 = await FiltersCO.filterMultiSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterMultiSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('filter-multi-creatable-add-new-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: focus should be displayed on the option and input', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('filter-multi-creatable-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}