dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,126 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO, FilterBarCO, FiltersCOextra } from '../components';
+import { axeCoreCheck, type } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11438 - DataTable, Filter, Multi select filter -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and have empty text input and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should filter the menu items and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('react');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should choose an menu item and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('react');
+      await browser.keys(Key.Enter);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: should remove pill from filterbar and pass axe-core scan', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click(); // aca
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11440 - DataTable, Filter, Number range filter -AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('number range', 0);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should fill in the input and get matching pill on the filterbar and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('number range', 0);
+      await FiltersCOextra.filterNumberRangePopper.setInput('6', '7');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should show all results after removing the filter from the filterbar and pass axe-core scan', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11441 - DataTable: Filter:: empty value - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: select empty value from single select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const emptyOption = await FiltersCO.filterSingleSelectPopper.getMenuItem(2);
+      await emptyOption.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: select empty value from multi select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(5);
+      await emptyOption.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  // Test-Story to be improved. Add options to first filter second table and add step.
+  describe('PUI-11442 - DataTable, filtered multiple tables - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredMultipleTables.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: 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 result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11443 - 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 generate a creatable option and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('Juan');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should open generate and accept creatable option and pass axe-core scan', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('Juan');
+      await browser.keys(Key.Enter);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,82 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { type } from '../../helpers';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, RowCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11119 - DataTable: Filter:: empty value - single & multi select', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: select empty value from single select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const emptyOption = await FiltersCO.filterSingleSelectPopper.getMenuItem(2);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Name', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === '');
+      await expect(pillEmptyVal).toBeDisplayed();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('02: select empty value from multi select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(5);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Position', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).toBeDisplayed();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('03: select empty value from multi select - creatable', async () => {
+      await FiltersCO.openFilterPopperByColumnName('country', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(2);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Country', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 3);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).toBeDisplayed();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('04: unselect empty value from multi select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(5);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Position', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).not.toBeDisplayed();
+      await expect(isFiltered).not.toBeTruthy();
+    });
+    it('05: unselect empty value from single select', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const emptyOption = await FiltersCO.filterSingleSelectPopper.getMenuItem(0);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Name', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === '');
+      await expect(pillEmptyVal).not.toBeDisplayed();
+      await expect(isFiltered).not.toBeTruthy();
+    });
+    it('06: unselect empty value from multi select - creatable', async () => {
+      await FiltersCO.openFilterPopperByColumnName('country', 0);
+      await type('(Empty)');
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(0);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Country', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 3);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).not.toBeDisplayed();
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+}

package/ds-data-table-async/filters/DSDataTable.filters.empty-value.keybooard-nav.func.spec.js

@@ -0,0 +1,73 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, RowCO, HeaderCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11120 - DataTable: Filter:: empty value - single & multi select - keyboard navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: select empty value from single select - keynav', async () => {
+      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
+      await idHeader.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Return);
+      const pillEmptyVal = await FilterBarCO.findPill('Name', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === '');
+      await expect(pillEmptyVal).toBeDisplayed();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('02: select empty value from multi select - keynav', async () => {
+      const nameHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await nameHeader.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Return);
+      const pillEmptyVal = await FilterBarCO.findPill('Position', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).toBeDisplayed();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('03: unselect empty value from multi select - keynav', async () => {
+      const nameHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await nameHeader.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const pillEmptyVal = await FilterBarCO.findPill('Position', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase() === '');
+      await expect(pillEmptyVal).not.toBeDisplayed();
+      await expect(isFiltered).not.toBeTruthy();
+    });
+    it('04: unselect empty value from single select - keynav', async () => {
+      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
+      await idHeader.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const pillEmptyVal = await FilterBarCO.findPill('Name', '(Empty)');
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === '');
+      await expect(pillEmptyVal).not.toBeDisplayed();
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+}

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

@@ -0,0 +1,76 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11118 - DataTable: Filter:: empty value - single & multi select - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display empty option on single select - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const emptyOption = await FiltersCO.filterSingleSelectPopper.getMenuItem(2);
+      await emptyOption.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('single-select-open-empty-option'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display empty option selected on single select - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const emptyOption = await FiltersCO.filterSingleSelectPopper.getMenuItem(2);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Name', '(Empty)');
+      await pillEmptyVal.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('single-select-empty-option-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display empty option on multi select - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(5);
+      await emptyOption.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('multi-select-open-empty-option'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display empty option selected on multi select - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(5);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Position', '(Empty)');
+      await pillEmptyVal.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('multi-select-empty-option-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display empty option on multi select creatable - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('country', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(2);
+      await emptyOption.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('multi-select-creatable-open-empty-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('06: should display empty option selected on multi select creatable - visual', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('country', 0);
+      const emptyOption = await FiltersCO.filterMultiSelectPopper.getMenuItem(2);
+      await emptyOption.click();
+      const pillEmptyVal = await FilterBarCO.findPill('Country', '(Empty)');
+      await pillEmptyVal.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('multi-select-creatable-empty-option-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,40 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, HeaderCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11083 - DataTable, Filter, keyboard nav and focus on multi select', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredColumnWithCustomFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: position filter should be opened correctly', async () => {
+      const nameHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await nameHeader.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const dropdownMenu = await FiltersCO.filterMultiSelectPopper.getPopper();
+      await dropdownMenu.waitForDisplayed();
+      await expect(dropdownMenu).toBeDisplayed();
+    });
+    it('02: option selected correctly', async () => {
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Return);
+      const pill = await FilterBarCO.getPillByText('VueJS dev');
+      await pill.waitForDisplayed();
+      const comboboxInput = await FiltersCO.getComboboxInput();
+      await expect(pill).toBeDisplayed();
+      await expect(comboboxInput).toBeFocused();
+    });
+    it('03: focus should still con filter btn after close dropdown menu - Escape', async () => {
+      await browser.keys(Key.Escape);
+      const headerCell = await HeaderCO.getHeaderCellByIndex(2);
+      const filterMenuTrigger = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(headerCell, 0);
+      await expect(filterMenuTrigger).toBeFocused();
+    });
+  });
+}

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

@@ -0,0 +1,188 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+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-6964 - DataTable, Filter, Date range - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the date range filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('date range', 0);
+      await FiltersCO.filterDateRangePopper.setInputDate('11', '01', '2021', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('date-range-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6965 - DataTable, Filter, Single date filter - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the single date filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('single date', 0);
+      await FiltersCO.filterSingleDatePopper.setInputDate('11', '01', '2021');
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('single-date-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6966 - DataTable, Filter, Multi select filter - Visual Test', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the multi select filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('multi-select-open'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the multi select filter with options selected properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(0)).click();
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(1)).click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('multi-select-open-options-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6967 - DataTable, Filter, Select filter - Visual Test', () => {
+    // PUI-6968
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the single date filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('single-select-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7497 - DataTable, Filter, Salary filter - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the salary filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('salary', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('salary-open-empty'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7513 - DataTable, Filter, Number Range filter - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the number range filter properly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('number range', 0);
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('salary-open-empty'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8386 - DataTable: Filter:: typing a long search text - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('combobox menu widht should not change when a long text is typed in search box', async () => {
+      const longtext =
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type(longtext);
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('long-text-on-filter'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8397 - DataTable: Filter:: configurable width for combobox filters - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredColumnWithControlledFilterbar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the filter with the custom width', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('filter-custom-width'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10461 - DataTable: Filter:: Verify Filter Scrollbar Behavior - Visual - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterInsideDialog.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: filter should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('filter-inside-dialog'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: the scrollbar should stay in its current position', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Enter);
+      await browser.pause(500);
+      const pill = await FilterBarCO.getPillByText('LONG TEXT OPTION');
+      await pill.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('filter-inside-dialog-last-option-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10870 - DataTable: Filterbar:: multiple lines of pills  - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterbarTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: filterbar should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await FiltersCO.openFilterPopperByColumnName('id', 0);
+      await (await FiltersCO.filterSingleSelectPopper.getMenuItem(0)).click();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await (await FiltersCO.filterSingleSelectPopper.getMenuItem(0)).click();
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(0)).click();
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(1)).click();
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(2)).click();
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(3)).click();
+      await (await FiltersCO.filterMultiSelectPopper.getMenuItem(4)).click();
+      await FiltersCO.openFilterPopperByColumnName('single date', 0);
+      await FiltersCO.filterSingleDatePopper.setInputDate('11', '01', '2021');
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('filterbar-multiple-lines-pills'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,42 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8265 - DataTable, Controlled Filterbar', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredColumnWithControlledFilterbar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should select two options from position column', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await inputMultiSelect.waitForDisplayed();
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await options[0].click();
+      await options[1].click();
+      const pill1 = await FilterBarCO.getPillByText('React');
+      const pill2 = await FilterBarCO.getPillByText('Full');
+      await expect(pill1).toBeDisplayed();
+      await expect(pill2).toBeDisplayed();
+    });
+    it('should open filterbar dropdown menu', async () => {
+      const filterBarMenuBtn = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await filterBarMenuBtn.click();
+      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenuPortal();
+      await expect(filterBarMenu).toBeDisplayedInViewport();
+    });
+    it('should remove correctly all the filters and close de menu', async () => {
+      const pill1 = await FilterBarCO.getPillByText('React');
+      const pill2 = await FilterBarCO.getPillByText('Full');
+      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenuPortal();
+      const clearFiltersBtn = await FilterBarCO.getClearFilters();
+      await clearFiltersBtn.click();
+      await expect(filterBarMenu).not.toBeDisplayedInViewport();
+      await expect(pill1).not.toBeDisplayedInViewport();
+      await expect(pill2).not.toBeDisplayedInViewport();
+    });
+  });
+}