dimsum-e2e-tests 1.0.0-rc.1

package/ds-datagrids/DSDatagrids-cell-renders.visual.spec.js

@@ -0,0 +1,43 @@
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4105 - DataGrid Cell Renders', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.cellRenders.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('check cell render combinations', async () => {
+      await browser.eyesOpen();
+      await (await DG.getGrid()).waitForDisplayed();
+      const cell = await DG.getCellIndexInRow(1, 1);
+      await cell.waitForDisplayed();
+      const checkSnapshot = await browser.eyesCheckSnapshot(DG.snapshotPath('datagrid--cell-render-combinations'));
+      await expect(checkSnapshot).toEqual(0);
+    });
+  });
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-6276 - DataGrid, Custom cell edit - Date Picker - Visual Test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DG.customCellEditDatePickerURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display datepicker properly', async () => {
+        await browser.eyesOpen();
+        await (await DG.getGrid()).waitForDisplayed();
+        await (await DG.getColumnDate(3)).click();
+        const checkSnapshot = await browser.eyesCheckSnapshot(DG.snapshotPath('datagrid--custom-edit-cell-datepicker'));
+        await expect(checkSnapshot).toEqual(0);
+      });
+      it('should display calendar properly', async () => {
+        await browser.eyesOpen();
+        await (await DG.getGrid()).waitForDisplayed();
+        await (await DG.getDatePickerBtn(0)).click();
+        const checkSnapshot = await browser.eyesCheckSnapshot(
+          DG.snapshotPath('datagrid--custom-edit-cell-datepicker-open'),
+        );
+        await expect(checkSnapshot).toEqual(0);
+      });
+    });
+  }
+}

package/ds-datagrids/DSDatagrids-control-focus.visual.spec.js

@@ -0,0 +1,30 @@
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6157 - DataGrid, Control Focus OnSort - Visual Test', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DG.sortableURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const grid = await DG.getGrid();
+      await grid.waitForDisplayed();
+    });
+
+    it('should focus first cell/first column', async () => {
+      const cell = await DG.getCellIndexInRow(0, 1);
+      await cell.waitForDisplayed();
+      await cell.click();
+      const snapshot = await browser.checkSnapshot(DG.snapshotPath('datagrid--sortable-focus-first-cell'));
+      await expect(snapshot).toEqual(0);
+    });
+    it("shouldn't focus last row after sort", async () => {
+      const cell = await DG.getCellIndexInRow(1, 1);
+      await cell.waitForDisplayed();
+      await cell.click(); // focus first cell
+      const positionHeader = await DG.getHeaderCell(2);
+      await positionHeader.waitForDisplayed();
+      await positionHeader.click();
+      const snapshot = await browser.checkSnapshot(DG.snapshotPath('datagrid--sortable-sort-position-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-datagrids/DSDatagrids-filterable-dates.func.spec.js

@@ -0,0 +1,300 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-2964 - DatePicker - Single-Range, select date from calendar', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const singleRangeFilter = await DG.getFilterHeader('Single-Range');
+      singleRangeFilter.waitForDisplayed();
+    });
+    it('should open Single-Range calendar', async () => {
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      await (await DG.getPickerButton(2)).click();
+      const singleRangeWrapper = await DG.getDateSingleRangeWrapper();
+      await expect(singleRangeWrapper).toBeDisplayed();
+    });
+    it('should select a date from calendar', async () => {
+      await (await DG.getCalendarDayV2(12)).click();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitle).toHaveTextContaining('Single-Range');
+      await expect(removablePill).toHaveTextContaining('12');
+    });
+  });
+  describe('PUI-2965 - DatePicker - Single-Range, type date manually', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const singleRangeFilter = await DG.getFilterHeader('Single-Range');
+      singleRangeFilter.waitForDisplayed();
+    });
+    it('should manual type date correctly', async () => {
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pickerBtn = await DG.getPickerButton(2);
+      await pickerBtn.waitForDisplayed();
+      await pickerBtn.click();
+      await browser.pause(500);
+      await DG.setStartDateV2('05012020');
+      const dateSeted = await DG.getDateSetedV2('start');
+      await expect(dateSeted).toEqual('05/01/2020');
+    });
+    it('should filter date and shown pills', async () => {
+      await browser.keys(Key.Return);
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Single-Range');
+      await expect(removablePill).toHaveTextContaining('05/01/2020');
+    });
+  });
+  describe('PUI-2966 - DatePicker - Single-Range, type range date manually', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const singleRangeFilter = await DG.getFilterHeader('Single-Range');
+      await singleRangeFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Single-Range calendar and switch to Range', async () => {
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      await (await DG.getPickerButton(2)).click();
+      await (await DG.getRangeButton()).click();
+      const endDate = await DG.getEndDateV2('month');
+      const startDate = await DG.getStartDateV2('month');
+      await expect(endDate).toBeDisplayed();
+      await expect(startDate).toBeDisplayed();
+    });
+    it('should type date range correctly', async () => {
+      // move away to reset calendar inputs value
+      await (await DG.getFilterHeader('Name')).moveTo();
+      await (await DG.getFilterHeader('Name')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pickerBtn = await DG.getPickerButton(2);
+      await pickerBtn.waitForDisplayed();
+      await pickerBtn.click();
+      const rangeBtn = await DG.getRangeButton();
+      await rangeBtn.waitForDisplayed();
+      await rangeBtn.click();
+      await browser.pause(500);
+      await DG.setStartDateV2('05012019');
+      await DG.setEndDateV2('05292021');
+      const dateSetedStart = await DG.getDateSetedV2('start');
+      const dateSetedEnd = await DG.getDateSetedV2('end');
+      await expect(dateSetedStart).toEqual('05/01/2019');
+      await expect(dateSetedEnd).toEqual('05/29/2021');
+    });
+    it('should filter dates and shown pills', async () => {
+      await browser.keys(Key.Return);
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePil = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Single-Range');
+      await expect(removablePil).toHaveTextContaining('05/01/2019 - 05/29/2021');
+    });
+  });
+  describe('PUI-2968 - DatePicker - Single Date, select date from calendar', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const startDateFilter = await DG.getFilterHeader('Start Date');
+      await startDateFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Single calendar', async () => {
+      await (await DG.getFilterHeader('Start Date')).moveTo();
+      await (await DG.getFilterHeader('Start Date')).click();
+      const pickerBtn = await DG.getPickerButton(3);
+      await pickerBtn.waitForDisplayed();
+      await pickerBtn.click();
+      const dateSingleWrapper = await DG.getDateSingleWrapper();
+      await expect(dateSingleWrapper).toBeDisplayed();
+    });
+    it('should select a date from calendar', async () => {
+      await (await DG.getCalendarDayV2(12)).click();
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Start Date');
+      await expect(removablePill).toHaveTextContaining('12');
+    });
+  });
+  describe('PUI-2969 - DatePicker - Date Range, select date from calendar', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const dateRangeFilter = await DG.getFilterHeader('Date Range');
+      await dateRangeFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Range calendar', async () => {
+      await (await DG.getFilterHeader('Date Range')).moveTo();
+      await (await DG.getFilterHeader('Date Range')).click();
+      const pickerBtn = await DG.getPickerButton(4);
+      await pickerBtn.waitForDisplayed();
+      await pickerBtn.click();
+      const dateRangeWrapper = await DG.getDateRangeWrapper();
+      await expect(dateRangeWrapper).toBeDisplayed();
+    });
+    it('should select a date range from calendar', async () => {
+      await (await DG.getCalendarDayV2(12)).click();
+      await (await DG.getCalendarDayV2(20)).click();
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Date Range');
+      await expect(removablePill).toHaveTextContaining('12');
+      await expect(removablePill).toHaveTextContaining('20');
+    });
+  });
+  describe('PUI-2970 - DatePicker - Date Range - type range date manually', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const dateRangeFilter = await DG.getFilterHeader('Date Range');
+      await dateRangeFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Date Range calendar', async () => {
+      await (await DG.getFilterHeader('Date Range')).moveTo();
+      await (await DG.getFilterHeader('Date Range')).click();
+      const pickerBtn = await DG.getPickerButton(4);
+      await pickerBtn.waitForDisplayed();
+      await pickerBtn.click();
+      const endDate = await DG.getEndDateV2('month');
+      const startDate = await DG.getStartDateV2('month');
+      await expect(endDate).toBeDisplayed();
+      await expect(startDate).toBeDisplayed();
+    });
+    it('should not be possible enter a start date greater than end date', async () => {
+      await browser.pause(500);
+      await DG.setStartDateV2('05192020');
+      await DG.setEndDateV2('05052020');
+      const dateSetedStart = await DG.getDateSetedV2('start');
+      const dateSetedEnd = await DG.getDateSetedV2('end');
+      await expect(dateSetedStart).toEqual('05/19/2020');
+      await expect(dateSetedEnd).toEqual('05/05/2020');
+      await browser.keys(Key.Return);
+      await browser.pause(500);
+      const pillTitle = await DG.getPillTitle();
+      await expect(pillTitle).not.toBeDisplayed();
+    });
+    it('should type date range correctly', async () => {
+      // move away to reset calendar inputs value
+      await (await DG.getPickerButton(4)).click();
+      await (await DG.getFilterHeader('Date Range')).moveTo();
+      await (await DG.getFilterHeader('Date Range')).click();
+      await (await DG.getPickerButton(4)).click();
+      await browser.pause(500);
+      await DG.setStartDateV2('05032020');
+      await DG.setEndDateV2('05192020');
+      const dateSetedStart = await DG.getDateSetedV2('start');
+      const dateSetedEnd = await DG.getDateSetedV2('end');
+      await expect(dateSetedStart).toEqual('05/03/2020');
+      await expect(dateSetedEnd).toEqual('05/19/2020');
+    });
+    it('should filter dates and shown pills', async () => {
+      await browser.keys(Key.Return);
+      await browser.pause(500);
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Date Range');
+      await expect(removablePill).toHaveTextContaining('05/03/2020 - 05/19/2020');
+    });
+  });
+  describe('PUI-4164 - DatePicker - Date Range - select/type dates', () => {
+    before('loading page', async () => {
+      await DG.filterableForDatesURL.go();
+      const dateRangeFilter = await DG.getFilterHeader('Date Range');
+      await dateRangeFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Date Range calendar', async () => {
+      await (await DG.getFilterHeader('Date Range')).moveTo();
+      await (await DG.getFilterHeader('Date Range')).click();
+      await (await DG.getPickerButton(4)).click();
+      await browser.pause(1000);
+      const endDate = await DG.getEndDateV2('month');
+      const startDate = await DG.getStartDateV2('month');
+      await expect(endDate).toBeDisplayed();
+      await expect(startDate).toBeDisplayed();
+    });
+    it('should select start date correctly', async () => {
+      await (await DG.getCalendarDayV2(12)).click();
+      const dateSeted = await DG.getDateSetedV2('start');
+      await expect(dateSeted).toContain('12');
+    });
+    it('should type end date correctly', async () => {
+      const month = (await DG.getDateSetedV2('start')).slice(0, 2);
+      const year = (await DG.getDateSetedV2('start')).slice(6, 10);
+      await DG.setEndDateV2(`${month}20${year}`);
+      const dateSeted = await DG.getDateSetedV2('end');
+      await expect(dateSeted).toEqual(`${month}/20/${year}`);
+    });
+    it('should reflect range in calendar', async () => {
+      const calendarBGs = await DG.getCalendarBGsV2();
+      await expect(calendarBGs).toEqual(['#006aa9', '#006aa9']);
+    });
+    it('should filter dates and shown pills', async () => {
+      const month = (await DG.getDateSetedV2('start')).slice(0, 2);
+      const year = (await DG.getDateSetedV2('start')).slice(6, 10);
+      await browser.keys(Key.Return);
+      const pillTitleText = await (await DG.getPillTitle()).getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Date Range');
+      await expect(removablePill).toHaveTextContaining(`${month}/12/${year} - ${month}/20/${year}`);
+    });
+  });
+  describe('PUI-4192 - DatePicker - Single Range - select/type dates', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.filterableForDatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const singleRangeFilter = await DG.getFilterHeader('Single-Range');
+      await singleRangeFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open Single-Range calendar', async () => {
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      await (await DG.getPickerButton(2)).click();
+      const singleRangeWrapper = await DG.getDateSingleRangeWrapper();
+      await singleRangeWrapper.waitForDisplayed();
+      const rangeBtn = await DG.getRangeButton();
+      await rangeBtn.waitForDisplayed();
+      await rangeBtn.click();
+      const endDate = await DG.getEndDateV2('month');
+      const startDate = await DG.getStartDateV2('month');
+      await endDate.waitForDisplayed();
+      await expect(endDate).toBeDisplayed();
+      await expect(startDate).toBeDisplayed();
+    });
+    it('should select start date correctly', async () => {
+      await (await DG.getCalendarDayV2(12)).click();
+      const dateSeted = await DG.getDateSetedV2('start');
+      await expect(dateSeted).toContain('12');
+    });
+    it('should type end date correctly', async () => {
+      const month = (await DG.getDateSetedV2('start')).slice(0, 2);
+      const year = (await DG.getDateSetedV2('start')).slice(6, 10);
+      await DG.setEndDateV2(`${month}20${year}`);
+      const dateSeted = await DG.getDateSetedV2('end');
+      await expect(dateSeted).toEqual(`${month}/20/${year}`);
+    });
+    it('should reflect range in calendar', async () => {
+      const calendateBGs = await DG.getCalendarBGsV2(12);
+      await expect(calendateBGs).toEqual(['#006aa9', '#006aa9']);
+    });
+    it('should filter dates and shown pills', async () => {
+      const month = (await DG.getDateSetedV2('start')).slice(0, 2);
+      const year = (await DG.getDateSetedV2('start')).slice(6, 10);
+      await browser.keys(Key.Return);
+      const pill = await DG.getPillTitle();
+      await pill.waitForDisplayed();
+      const pillTitleText = await pill.getText();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitleText).toEqual('Single-Range');
+      await expect(removablePill).toHaveTextContaining(`${month}/12/${year} - ${month}/20/${year}`);
+    });
+  });
+}

package/ds-datagrids/DSDatagrids-filterable-default-filters.func.spec.js

@@ -0,0 +1,27 @@
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6158 - DataGrid, Filterable with default filters', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DG.filterableDefaultFiltersURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should remove one filter', async () => {
+      const removablePillBtn = await DG.getRemovablePillButton(0); 
+      await expect(removablePillBtn).toBeDisplayed();
+      await (await DG.getRemovablePillButton(0)).click();
+      const rows = await DG.getRows();
+      await expect(rows).toHaveLength(1);
+    });
+    it('should remove all filters', async () => {
+      const removablePillBt0 = await DG.getRemovablePillButton(0);
+      const removablePillBt1 = await DG.getRemovablePillButton(1);
+      await expect(removablePillBt0).toBeDisplayed();
+      await expect(removablePillBt1).toBeDisplayed();
+      await (await DG.getRemovablePillButton(1)).click();
+      await (await DG.getRemovablePillButton(0)).click();
+      const rows = await DG.getRows();
+      await expect(rows).toHaveLength(16);
+    });
+  });
+}

package/ds-datagrids/DSDatagrids-filterable-default-filters.visual.spec.js

@@ -0,0 +1,16 @@
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6159 - DataGrid, Filterable with default filters - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.filterableDefaultFiltersURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display dg with default filters', async () => {
+      await browser.eyesOpen();
+      await (await DG.getRemovablePill()).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DG.snapshotPath('datagrid--filterable-default-filters'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-datagrids/DSDatagrids-filterable.func.spec.js

@@ -0,0 +1,213 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3151 - DataGrid filterable', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DG.filterableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display menu with shadow at clicking search button', async () => {
+      await (await DG.getFilterHeader('Salary')).moveTo();
+      await (await DG.getFilterHeader('Salary')).click();
+      const filterBt = await DG.getFilterBtns(1);
+      await expect(filterBt).toBeDisplayed();
+      await (await DG.getFilterBtns(1)).click();
+      const listMenu = await await DG.getListMenu();
+      await expect(listMenu).toBeDisplayed();
+      const { value } = await (await DG.getListMenu()).getCSSProperty('box-shadow');
+      await expect(value).toContain('rgba(0,0,0,0.2');
+    });
+    it('should display menu at search and select filter', async () => {
+      await (await DG.getFilterHeader('Salary')).moveTo();
+      await (await DG.getFilterHeader('Salary')).click();
+      const FilterBtns = await DG.getFilterBtns(1);
+      await expect(FilterBtns).toBeDisplayed();
+      await (await DG.getFilterBtns(1)).click();
+      const listMenu = await DG.getListMenu();
+      await expect(listMenu).toBeDisplayed();
+      const comboOption = await DG.getComboBoxOption(0);
+      await expect(comboOption).toBeDisplayed();
+      await (await DG.getComboBoxOption(0)).click();
+      const filterBar = await DG.getFilterBar();
+      await expect(filterBar).toBeDisplayed();
+    });
+    it('PUI-4239 - should let the user add its own value', async () => {
+      await (await DG.getFilterHeader('Position')).moveTo();
+      await (await DG.getFilterHeader('Position')).click();
+      await (await DG.getFilterBtn()).waitForDisplayed();
+      const filterBtn = await DG.getFilterBtn();
+      await expect(filterBtn).toBeDisplayed();
+      await (await DG.getFilterBtn()).click();
+      const listMenu = await DG.getListMenu();
+      await expect(listMenu).toBeDisplayed();
+      const comboOption = await DG.getComboBoxOption(0);
+      await expect(comboOption).toBeDisplayed();
+      await (await DG.getComboboxTextInput()).click();
+      await DG.sendVal('doctor');
+      await browser.keys(Key.Enter);
+      const filterBar = await DG.getFilterBar();
+      await expect(filterBar).toBeDisplayed();
+    });
+  });
+  describe('PUI-4006 - Multi select filter menu for datagrid', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.filterableForDatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const nameFilter = await DG.getFilterHeader('Name');
+      await nameFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open multi select filter', async () => {
+      await DG.openFilterMenu('Name');
+      const filterMultiSelect = await DG.getFilterMultiSelectMenu();
+      await expect(filterMultiSelect).toBeDisplayed();
+    });
+    it('should select a name from menu', async () => {
+      await (await DG.getMenuOption('Chris')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      const filterMultiSelect = await DG.getFilterMultiSelectMenu();
+      await expect(pillTitle).toHaveTextContaining('Name');
+      await expect(removablePill).toHaveTextContaining('Chris');
+      await expect(filterMultiSelect).not.toBeDisplayed();
+    });
+    it('should display option checked in the list', async () => {
+      await (await DG.getFilterHeader('Name')).moveTo();
+      await (await DG.getFilterHeader('Name')).click();
+      const pickerBtn = await DG.getPickerButton(0);
+      await expect(pickerBtn).toBeDisplayed();
+      await (await DG.getPickerButton(0)).click();
+      const checkBoxChecked = await (await DG.getMenuCheckBox(0)).getAttribute('aria-checked');
+      await expect(checkBoxChecked).toBe('true');
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+    });
+    it('should select other item propertly', async () => {
+      await DG.openFilterMenu('Name');
+      await (await DG.getFilterMultiSelectMenu()).waitForDisplayed();
+      await (await DG.getMenuOption('Mark')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pillTitle = await DG.getPillTitle();
+      await pillTitle.waitForDisplayed();
+      const removablePill0 = await DG.getRemovablePills(0);
+      const removablePill1 = await DG.getRemovablePills(1);
+      await expect(pillTitle).toHaveTextContaining('Name');
+      await expect(removablePill0).toHaveTextContaining('Chris');
+      await expect(removablePill1).toHaveTextContaining('Mark');
+    });
+    it('should add another item an item propertly', async () => {
+      await DG.openFilterMenu('Name');
+      await (await DG.getFilterMultiSelectMenu()).waitForDisplayed();
+      await (await DG.getMenuOption('Mark')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitle).toHaveTextContaining('Name');
+      await expect(removablePill).toHaveTextContaining('Chris');
+      await DG.openFilterMenu('Name');
+      const menuCheckBox = await (await DG.getMenuCheckBox(3)).getAttribute('aria-checked');
+      await expect(menuCheckBox).toBe('false');
+    });
+  });
+  describe('PUI-4644 - Use multiple filters', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.pui4552.go();
+      if (errorOnGo) throw errorOnGo;
+      const nameFilter = await DG.getFilterHeader('Name');
+      await nameFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should filter by name', async () => {
+      DG.openFilterMenu('Name');
+      await (await DG.getMenuOption('Chris')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      await expect(pillTitle).toHaveTextContaining('Name');
+      await expect(removablePill).toHaveTextContaining('Chris');
+    });
+    it('should filter by single-range', async () => {
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      await (await DG.getPickerButton(1)).click();
+      await (await DG.getDateSingleRangeWrapper()).waitForDisplayed({ timeout: 5000 });
+      await (await DG.getCalendarDayV2(12)).click();
+      const pillTitle = await DG.getPillTitles(1);
+      const removablePill = await DG.getRemovablePills(1);
+      await expect(pillTitle).toHaveTextContaining('Single-Range');
+      await expect(removablePill).toHaveTextContaining('12');
+    });
+  });
+  describe('PUI-5434 - DataGrid - Remove filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.pui5276.go();
+      if (errorOnGo) throw errorOnGo;
+      const nameFilter = await DG.getFilterHeader('Name');
+      await nameFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should remove filter from menu when removed by filterbar', async () => {
+      DG.openFilterMenu('Name');
+      await (await DG.getMenuOption('Chris')).click();
+      await (await DG.getFilterHeader('Single-Range')).moveTo();
+      await (await DG.getFilterHeader('Single-Range')).click();
+      const removablePill = await DG.getRemovablePill();
+      await expect(removablePill).toHaveTextContaining('Chris');
+      await (await DG.getRemovablePillButton(0)).click();
+      await DG.openFilterMenu('Name');
+      const menuCheckbox = await (await DG.getMenuCheckBox(0)).getAttribute('aria-checked');
+      await expect(menuCheckbox).toBe('false');
+    });
+  });
+  describe('PUI-5334 - Filter grouped rows', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.pui5098.go();
+      if (errorOnGo) throw errorOnGo;
+      const nameFilter = await DG.getFilterHeader('Name');
+      await nameFilter.waitForDisplayed({ timeout: 5000 });
+    });
+    it('should open dropdown menu', async () => {
+      await DG.openFilterMenu('Name');
+      const filterMultiSelect = await DG.getFilterMultiSelectMenu();
+      await expect(filterMultiSelect).toBeDisplayed();
+    });
+    it('should select an option from menu', async () => {
+      await (await DG.getComboBoxOption(4)).click();
+      await (await DG.getPillTitle()).waitForDisplayed();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      const cells = await DG.getCells('text');
+      await expect(pillTitle).toHaveTextContaining('Name');
+      await expect(removablePill).toHaveTextContaining('Purchase Price');
+      await expect(cells).toHaveLength(1);
+    });
+  });
+  describe('PUI-5604 - Filter operator change', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.pui5604.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open dropdown menu', async () => {
+      await (await DG.getFilterHeader('Disposition')).waitForDisplayed({ timeout: 5000 });
+      await (await DG.getFilterHeader('Disposition')).moveTo();
+      await (await DG.getFilterHeader('Disposition')).click();
+      await (await DG.getPickerButton(1)).click();
+      const filterMultiSelect = await DG.getFilterMultiSelectMenu();
+      await expect(filterMultiSelect).toBeDisplayed();
+    });
+    it('should select an option from menu', async () => {
+      await (await DG.getComboBoxOption(0)).click();
+      await (await DG.getPillTitle()).waitForDisplayed();
+      const pillTitle = await DG.getPillTitle();
+      const removablePill = await DG.getRemovablePill();
+      const cells = await DG.getCells('disposition');
+      await expect(pillTitle).toHaveTextContaining('Disposition');
+      await expect(removablePill).toHaveTextContaining('Complete');
+      await expect(cells).toHaveLength(6);
+    });
+  });
+}

package/ds-datagrids/DSDatagrids-header.visual.spec.js

@@ -0,0 +1,16 @@
+import DG from './DatagridObject';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6160 - DataGrid, Header - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DG.headerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('should display the entire text in header', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DG.snapshotPath('datagrid--header-behaviour--full-header'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}