dimsum-e2e-tests 1.0.0-rc.1

package/ds-data-table-async/components/FilterBarCO.js

@@ -0,0 +1,68 @@
+/* eslint-disable no-await-in-loop */
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class FilterBarCO extends PageObject {
+  static getFilterBarDropdownMenuButton = async () => $('[data-testid="filter-bar-ddmenu-button"]');
+
+  static getFilterBarDropdownMenu() {
+    return $('[data-testid="dropdown-menu-listbox"]');
+  }
+
+  static getFilterBarDropdownMenuPortal() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static getClearFilters() {
+    return $('//li[@role="menuitem"]//span[contains(text(), "Clear Filters")]/ancestor::li');
+  }
+
+  static getAllPills = async () => $$('[data-testid="ds-pill-wrapper"]');
+
+  static getPillByIndex = async (index) => getElementByIndex(this.getAllPills, index);
+
+  // this might return many results
+  // static getPillByText = async (text) => {
+  //   const allPills = await this.getAllPills();
+  //   return asyncFilter(allPills, async (pill) => {
+  //     const pillText = await pill.getText();
+  //     return pillText.toLowerCase() === text.toLowerCase();
+  //   });
+  // };
+
+  static async getPillByText(text) {
+    return $(`//div[@data-testid="ds-pill-wrapper"]//span[contains(text(), "${text}")]`);
+  }
+
+  static async getPillCloseButtonByName(text) {
+    return $(`[aria-label="${text}"]`);
+  }
+
+  static async findPill(label, value) {
+    const pillGroups = await $$('div[id^="ds-pill-group"]');
+
+    for (let i = 0; i < pillGroups.length; i += 1) {
+      const pillGroup = pillGroups[i];
+      const spans = await pillGroup.$$('span');
+      const texts = await Promise.all(spans.map((span) => span.getText()));
+
+      if (texts.includes(label) && texts.includes(value)) {
+        return pillGroup;
+      }
+    }
+
+    return null;
+  }
+
+  static getPillCloseButtonByPill = async (pill) => pill.$('[data-testid="ds-pill-close-icon"]');
+
+  static getAllPillCloseButtons = async () => $$('[data-testid="ds-pill-close-icon"]');
+
+  static getPillCloseButton = async () => $('[data-testid="ds-pill-close-icon"]');
+
+  static getPillCloseButtonByIndex = async (index) => getElementByIndex(this.getAllPillCloseButtons, index);
+
+  static async getFilterBarDropDownOption(label) {
+    return $(`[role=option][label="${label}"]`);
+  }
+}

package/ds-data-table-async/components/FiltersCO.js

@@ -0,0 +1,127 @@
+import { Key } from 'webdriverio';
+import { PageObject } from '../../helpers';
+import { getElementByIndex, throttleTyping } from '../helpers';
+// eslint-disable-next-line import/no-cycle
+import { HeaderCO } from '.';
+
+export default class FiltersCO extends PageObject {
+  static filterSingleSelectPopper = {
+    getPopper: async () => $('[data-testid="data-table-single-select"]'),
+    async getInput() {
+      return (await this.getPopper()).$('input');
+    },
+    async getMenuItems() {
+      // This is virtualized. Not all the items will be returned by the selector
+      return (await this.getPopper()).$$('[data-testid="combobox-option"]');
+    },
+    async getMenuItem(index) {
+      return getElementByIndex(this.getMenuItems.bind(this), index);
+    },
+  };
+
+  static filterMultiSelectPopper = {
+    getPopper: async () => $('[data-testid="data-table-multi-select"]'),
+    async getInput() {
+      return (await this.getPopper()).$('input');
+    },
+    async getMenuItems() {
+      // This is virtualized. Not all the items will be returned by the selector
+      return (await this.getPopper()).$$('[data-testid="combobox-option"]');
+    },
+    async getMenuItem(index) {
+      return getElementByIndex(this.getMenuItems.bind(this), index);
+    },
+  };
+
+  static filterSingleDatePopper = {
+    getPopper: async () => $('[data-testid="data-table-single-date"]'),
+    async getMonthInput() {
+      return (await this.getPopper()).$('[data-testid="ds-controlled-date-time-picker-month-input"]');
+    },
+    async getDayInput() {
+      return (await this.getPopper()).$('[data-testid="ds-controlled-date-time-picker-day-input"]');
+    },
+    async getYearInput() {
+      return (await this.getPopper()).$('[data-testid="ds-controlled-date-time-picker-year-input"]');
+    },
+    async setInputDate(month, day, year) {
+      // clicking before entering text since the autoadvance behavior might be removed
+      await (await this.getMonthInput()).click();
+      // throttling the typing works more consistent since the component has some logic that makes the
+      // browser not get all the typed chars when the typing is fast enough
+      await throttleTyping(month);
+      await (await this.getDayInput()).click();
+      await throttleTyping(day);
+      await (await this.getYearInput()).click();
+      await throttleTyping(year);
+    },
+  };
+
+  static filterDateRangePopper = {
+    getPopper: async () => $('[data-testid="data-table-date-range"]'),
+    async getMonthInput(index = 0) {
+      return getElementByIndex(
+        async () => (await this.getPopper()).$$('[data-testid="ds-controlled-date-time-picker-month-input"]'),
+        index,
+      );
+    },
+    async getDayInput(index = 0) {
+      return getElementByIndex(
+        async () => (await this.getPopper()).$$('[data-testid="ds-controlled-date-time-picker-day-input"]'),
+        index,
+      );
+    },
+    async getYearInput(index = 0) {
+      return getElementByIndex(
+        async () => (await this.getPopper()).$$('[data-testid="ds-controlled-date-time-picker-year-input"]'),
+        index,
+      );
+    },
+    // eslint-disable-next-line max-params
+    async setInputDate(month, day, year, index = 0) {
+      // clicking before entering text since the autoadvance behavior might be removed
+      await (await this.getMonthInput(index)).click();
+      // throttling the typing works more consistent since the component has some logic that makes the
+      // browser not get all the typed chars when the typing is fast enough
+      await throttleTyping(month);
+      await (await this.getDayInput(index)).click();
+      await throttleTyping(day);
+      await (await this.getYearInput(index)).click();
+      await throttleTyping(year);
+    },
+  };
+
+  // export CSV
+
+  static getHeaderCellFilterButtonByHeaderCell = async (headerCell, index) =>
+    getElementByIndex(async () => this.getHeaderCellFilterButtonsByHeaderCell(headerCell), index);
+
+  static clearInput = async (input) => {
+    const inputValue = await input.getValue();
+    // await input.click();
+    for (let at = 0; at < inputValue.length; at += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(Key.Backspace);
+    }
+  };
+
+  static filterBarBtnTrigger = async () => $('[data-testid="filter-bar-ddmenu-button"]');
+
+  static openFilterPopperByColumnName = async (columnName, cellIndexButton) => {
+    const headerCell = (await HeaderCO.getHeaderCellByText(columnName))[cellIndexButton];
+    await headerCell.click();
+    const filterBtn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(headerCell, 0);
+    await filterBtn.waitForDisplayed();
+    await filterBtn.click();
+  };
+
+  static getHeaderCellFilterButtonsByHeaderCell = async (headerCell) =>
+    headerCell.$$('[data-testid="data-table-filter-menu-button"] button');
+
+  static clickHeaderFilterBtnByHeader = async (columnName, cellIndexButton) => {
+    const headerCell = (await HeaderCO.getHeaderCellByText(columnName))[cellIndexButton];
+    await (await FiltersCO.getHeaderCellFilterButtonByHeaderCell(headerCell, 0)).click();
+  };
+
+  static getComboboxInput = async () => $('[data-testid="combobox-input"]');
+}

package/ds-data-table-async/components/FiltersCOextra.js

@@ -0,0 +1,39 @@
+import { PageObject } from '../../helpers';
+import { getElementByIndex, throttleTyping } from '../helpers';
+
+export default class FiltersCOextra extends PageObject {
+  static filterCurrencyPopper = {
+    getPopper: async () => $('[data-testid="data-table-currency-range"]'),
+    async getInputs() {
+      return (await this.getPopper()).$$('[data-testid="ds-input-text-input"]');
+    },
+    async getLeftInput() {
+      return getElementByIndex(await this.getInputs.bind(this), 0);
+    },
+    async getRightInput() {
+      return getElementByIndex(await this.getInputs.bind(this), 1);
+    },
+    async setInput(firstInput, secondInput) {
+      await (await this.getLeftInput()).click();
+      await throttleTyping(firstInput);
+      await (await this.getRightInput()).click();
+      await throttleTyping(secondInput);
+    },
+  };
+
+  static filterNumberRangePopper = {
+    getPopper: async () => $('[data-testid="data-table-number-range"]'),
+    async getLeftInput() {
+      return (await this.getPopper()).$('[id="datatable-number-range-low-numberRange"]');
+    },
+    async getRightInput() {
+      return (await this.getPopper()).$('[id="datatable-number-range-high-numberRange"]');
+    },
+    async setInput(firstInput, secondInput) {
+      await (await this.getLeftInput()).click();
+      await throttleTyping(firstInput);
+      await (await this.getRightInput()).click();
+      await throttleTyping(secondInput);
+    },
+  };
+}

package/ds-data-table-async/components/HeaderCO.js

@@ -0,0 +1,39 @@
+import { PageObject } from '../../helpers';
+import { getElementDragHandler, asyncFilter, getElementByIndex } from '../helpers';
+
+export default class HeaderCO extends PageObject {
+  static getHeaderCells = async () => $$('[data-testid="data-table-header"]');
+
+  // this might return many results
+  static getHeaderCellByText = async (text) => {
+    const headerCells = await this.getHeaderCells();
+    return asyncFilter(headerCells, async (cell) => {
+      const cellText = await this.getHeaderCellTitle(cell);
+      return cellText.toLowerCase() === text.toLowerCase();
+    });
+  };
+
+  static getHeaderCellTitle = async (cell) =>
+    (await (await cell.$('[data-testid="header-cell-title"]')).getText()).toLowerCase();
+
+  static getHeaderCellByIndex = async (index) => getElementByIndex(this.getHeaderCells, index);
+
+  static getHeaderCellDragHandler = async (cell) => getElementDragHandler(cell);
+
+  static getHeaderSelectCheckBox = async () => $('[data-testid="data-table-global-checkbox"]');
+
+  static getHeaderExpandButton = async () => $('[data-testid="data-table-global-expand-cell"]');
+
+  static getReadAllCheckbox = async () => $('[id="read-all"]');
+
+  static getWriteAllCheckbox = async () => $('[id="write-all"]');
+
+  static getResizeHandler = async (index) => $$('[data-testid="column"],[aria-label="Resize column"]')[index];
+
+  static getFilterBtnByIndex = async (index) => $$('[data-testid="data-table-filter-menu-button"] button')[index];
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');
+  }
+}

package/ds-data-table-async/components/OnRowClickCO.js

@@ -0,0 +1,26 @@
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class OnRowClickCO extends PageObject {
+  static getCheckboxes = async () => $$('[data-testid="data-table-checkbox"]');
+
+  static getCheckboxByIndex = async (index) => getElementByIndex(this.getCheckboxes, index);
+
+  static getCounter() {
+    return $('[data-testid="counter"]');
+  }
+
+  static getToolbars = async () => $$('[data-testid="data-table-toolbar-trigger"]');
+
+  static getToolbarByIndex = async (index) => getElementByIndex(this.getToolbars, index);
+
+  static getToolbarItems = async () => $$('[data-testid="ds-button"]');
+
+  static getToolbarItemByIndex = async (index) => getElementByIndex(this.getToolbarItems, index);
+
+  static getPickerTrigger = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+
+  static getInputText = async () => $$('[data-testid="ds-input-text-input"]');
+
+  static getInputTextByIndex = async (index) => getElementByIndex(this.getInputText, index);
+}

package/ds-data-table-async/components/PaginationNavCO.js

@@ -0,0 +1,31 @@
+/* eslint-disable prettier/prettier */
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class PaginationNavCO extends PageObject {
+  static getPaginationNav = () => $('[data-testid="data-table-pagination-container"]');
+
+  static getMenusTrigger = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]');
+
+  static getElemsPerPageMenu = async () => getElementByIndex(this.getMenusTrigger, 0);
+
+  static getElemsPerPageBtn = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]')[0].$('button');
+
+  static getPagesMenu = async () => getElementByIndex(this.getMenusTrigger, 1);
+
+  static getPagesBtn = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]')[1].$('button');
+
+  static getPrevPageBt = async () => $('[data-testid="data-table-pagination-prev-button"]');
+
+  static getNextPageBt = async () => $('[data-testid="data-table-pagination-next-button"]');
+
+  static getDropDownMenu = async () => $('[data-testid="dropdown-menu-listbox"]');
+
+  static getOpenMenuOpts = async () => $$('[data-testid="ds-menu-item"]');
+
+  static getOpenMenuOptsByIndex = async (index) => getElementByIndex(this.getOpenMenuOpts, index);
+
+  static getSegPagSpans = async () => (await this.getPagesMenu()).$$(' div > span');
+
+  static getSegPagContent = async () => $$('button div [data-testid="ds-typography-element"]')[1];
+}

package/ds-data-table-async/components/RowCO.js

@@ -0,0 +1,72 @@
+import { PageObject } from '../../helpers';
+import { getElementByIndex, getElementDragHandler } from '../helpers';
+
+export default class RowCO extends PageObject {
+  static getRows = async () => $$('[data-testid="data-table-row"]');
+
+  static getRowsFocuseableContent = async () => $$('[data-testid="data-table-row-content"]');
+
+  static getRowByIndex = async (index) => getElementByIndex(this.getRows, index);
+
+  static getSvgsByIndex = async (index) => $$('[data-testid="ds-icon-svg"]')[index];
+
+  static getRowFocuseableByIndex = async (index) => getElementByIndex(this.getRowsFocuseableContent, index);
+
+  static getRowDragHlandlerByIndex = async (index) => getElementDragHandler(await this.getRowByIndex(index));
+
+  static getRowGroups = async () => $$('[data-testid="data-table-row-group-header"]');
+
+  static getRowGroupByIndex = async (index) => getElementByIndex(this.getRowGroups, index);
+
+  static getArrowHeads = async () => $$('[data-testid="ic-arrow-head-right"]');
+
+  static getArrowHeadByIndex = async (index) => getElementByIndex(this.getArrowHeads, index);
+
+  static getFirstHandle = async () => $('[id="0-drag-handle"]');
+
+  static getDisabledRows = async () => $$('[data-testid="data-table-row-content"][aria-disabled="true"');
+
+  static getAvailableRows = async () => $$('[data-testid="data-table-row-content"][aria-disabled="false"');
+
+  static getRowRadioButtonByIndex = async (index) =>
+    (await this.getRowByIndex(index)).$('[data-testid="data-table-radio"]');
+
+  static getRowRadioButtonByRow = async (row) => row.$('[data-testid="data-table-radio"]');
+
+  static getRowCheckBoxByIndex = async (index) =>
+    (await this.getRowByIndex(index)).$('[data-testid="data-table-checkbox"]'); // not for selectable story
+
+  static getRowCheckBoxByRow = async (rows) => {
+    if (Array.isArray(rows)) {
+      return Promise.all(rows.map(async (row) => row.$('[data-testid="data-table-checkbox"]')));
+    }
+    return rows.$('[data-testid="data-table-checkbox"]');
+  };
+
+  static getRowExpandButtonByRow = async (row) => row.$('[data-testid="data-table-row-expand-cell"]');
+
+  static getRowExpandButtonByIndex = async (index) => $$('[data-testid="data-table-row-expand-cell"]')[index];
+
+  static getRowToolbarTriggerByIndex = async (index) =>
+    (await this.getRowByIndex(index)).$('[data-testid="data-table-toolbar-trigger"]');
+
+  static getToolbarMenu = async () => $('[data-testid="ds-toolbar-wrapper"]');
+
+  static getToolbarMenuBts = async () => $$('[data-testid="ds-toolbar-item"] button');
+
+  static getDSCheckboxes = async () => $$('[data-testid="ds-checkbox"]');
+
+  static getCheckBoxByIndex = async (index) => getElementByIndex(this.getDSCheckboxes, index);
+
+  static getToolbarMenuBtsByIndex = async (index) => getElementByIndex(this.getToolbarMenuBts, index);
+
+  static getRowAriaIndex = async (index) => $(`[aria-rowindex="${index}"]`);
+
+  static getArrowHeadMixed = async () => $('[data-testid="ic-arrow-head-mixed"]');
+
+  static getRowsFocuseableHeaderContent = async () => $$('[data-testid="data-table-row-group-header"]');
+
+  static getRowFocuseableHeaderByIndex = async (index) => getElementByIndex(this.getRowsFocuseableHeaderContent, index);
+
+  static isExpanded = async (expandBtn) => expandBtn.getAttribute('aria-expanded');
+}

package/ds-data-table-async/components/index.js

@@ -0,0 +1,10 @@
+export { default as RowCO } from './RowCO';
+export { default as CellCO } from './CellCO';
+export { default as HeaderCO } from './HeaderCO';
+export { default as FiltersCO } from './FiltersCO';
+export { default as FilterBarCO } from './FilterBarCO';
+export { default as FiltersCOextra } from './FiltersCOextra';
+export { default as DateSwitcherCO } from './DateSwitcherCO';
+export { default as PaginationNavCO } from './PaginationNavCO';
+export { default as ExportCsvCO } from './ExportCsvCO';
+export { default as OnRowClickCO } from './OnRowClickCO';

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

@@ -0,0 +1,65 @@
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, RowCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6960 - DataTable, Filter, Single date filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus the month input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('single date', 0);
+      const monthInput = await FiltersCO.filterSingleDatePopper.getMonthInput();
+      await expect(monthInput).toBeFocused();
+    });
+    it('should set the input date and get the filtered results', async () => {
+      await FiltersCO.filterSingleDatePopper.setInputDate('09', '22', '1996');
+      const results = await RowCO.getRows();
+      const filteredDated = await DSDataTableCO.getAllColumnResults(results, 5);
+      const isFiltered = filteredDated.every((date) => date.toLowerCase() === '09/22/1996');
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('should remove the filter and get the unfiltered results', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredDated = await DSDataTableCO.getAllColumnResults(results, 5);
+      const isFiltered = filteredDated.every((date) => date.toLowerCase() === '09/22/1996');
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+
+  describe('PUI-6961 - DataTable, Filter, Date range filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus the month input of the start date', async () => {
+      await FiltersCO.openFilterPopperByColumnName('date range', 0);
+      const monthInput = await FiltersCO.filterDateRangePopper.getMonthInput(0);
+      await expect(monthInput).toBeFocused();
+    });
+    it('all the records should be between the the chosen dates', async () => {
+      await FiltersCO.filterDateRangePopper.setInputDate('09', '22', '1996', 0);
+      await FiltersCO.filterDateRangePopper.setInputDate('10', '02', '1996', 1);
+      const results = await RowCO.getRows();
+      const filteredDates = await DSDataTableCO.getAllColumnResults(results, 6);
+      const areFiltered = filteredDates.every(
+        (date) => new Date(date) >= new Date('09/22/1996') && new Date(date) <= new Date('10/02/1996'),
+      );
+      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 filteredDates = await DSDataTableCO.getAllColumnResults(results, 6);
+      const areFiltered = filteredDates.every(
+        (date) => new Date(date) >= new Date('09/22/1996') && new Date(date) <= new Date('10/02/1996'),
+      );
+      await expect(areFiltered).not.toBeTruthy();
+    });
+  });
+}

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

@@ -0,0 +1,69 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { DateSwitcherCO, FilterBarCO, FiltersCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7538 - DataTable, DateSwitcher, Range e2e mouse & keyboard', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the DateSwitcher DD Menu after clicking on its button', async () => {
+      await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
+      const dateSwitcherCheckbox = await DateSwitcherCO.getRangeCheckbox();
+      await dateSwitcherCheckbox.click();
+      const secondInputField = await DateSwitcherCO.getRightMMInput();
+      await expect(secondInputField).toBeDisplayedInViewport();
+    });
+    it('should pick a range with the mouse at the current month and create pill', async () => {
+      const daySix = await DateSwitcherCO.getDayByIndex(5);
+      await daySix.click();
+      const dayTwenty = await DateSwitcherCO.getDayByIndex(19);
+      await dayTwenty.click();
+      const dateSwitcherPill = await FilterBarCO.getPillByIndex(0);
+      await expect(dateSwitcherPill).toBeDisplayedInViewport();
+    });
+    it('should close the pill and open the menu still in the ranged date mode', async () => {
+      const pillCloseBt = await FilterBarCO.getPillCloseButtonByPill(await FilterBarCO.getPillByIndex(1));
+      await pillCloseBt.click();
+      await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
+      const secondInputField = await DateSwitcherCO.getRightMMInput();
+      await expect(secondInputField).toBeDisplayedInViewport();
+    });
+    it('should pick a long date range and create matching pill', async () => {
+      const leftInput = await DateSwitcherCO.getLeftMMInput();
+      await leftInput.click();
+      await type('02032020');
+      await browser.keys(Key.Tab);
+      await type('0804');
+      await type('2020');
+      const dateSwitcherDescPill = await FilterBarCO.getPillByIndex(1);
+      const pillText = await dateSwitcherDescPill.getText();
+      await expect(pillText).toEqual('02/03/2020 - 08/04/2020');
+    });
+  });
+  describe('PUI-8695 - DataTable, DateSwitcher, checkbox click behaviour', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should not checked the checkbox if click outside it', async () => {
+      await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
+      const dateSwitcherCheckbox = await DateSwitcherCO.getRangeCheckbox();
+      await dateSwitcherCheckbox.click({ x: 90 });
+      const isChecked = await DSDataTableCO.isChecked(dateSwitcherCheckbox);
+      await expect(isChecked).toBe(false);
+    });
+    it('should checked the checkbox if click on the label', async () => {
+      await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
+      const dateSwitcherCheckbox = await DateSwitcherCO.getRangeCheckbox();
+      const checkboxLabel = await DateSwitcherCO.getCheckboxLabel();
+      await checkboxLabel.click();
+      const isChecked = await DSDataTableCO.isChecked(dateSwitcherCheckbox);
+      await expect(isChecked).toBe(true);
+    });
+  });
+}

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

@@ -0,0 +1,87 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { DateSwitcherCO, FilterBarCO, FiltersCO, RowCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7539 - DataTable, DateSwitcher, Single e2e mouse & keyboard', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the DateSwitcher DD Menu after clicking on its button', async () => {
+      await FiltersCO.openFilterPopperByColumnName('Date Switcher', 0);
+      const dateSwitcherDDMenu = await DateSwitcherCO.getDateSwitcherDDMenu();
+      await expect(dateSwitcherDDMenu).toBeDisplayedInViewport();
+    });
+    it('should have focus on RangedDate checkbox', async () => {
+      const dateSwitcherCheckbox = await DateSwitcherCO.getRangeCheckbox();
+      await expect(dateSwitcherCheckbox).toBeFocused();
+    });
+    it('should tab to MM Input', async () => {
+      await browser.keys(Key.Tab);
+      const dateMMInput = await DateSwitcherCO.getLeftMMInputWhenAlone();
+      await expect(dateMMInput).toBeFocused();
+    });
+    it('should fill the date Input using different methods (arrow y numbers) creating the pill', async () => {
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Tab);
+      await type('102020');
+      const dateSwitcherPill = await FilterBarCO.getPillByIndex(0);
+      await expect(dateSwitcherPill).toBeDisplayedInViewport();
+    });
+    it('should match the input with the text on the descriptive pill', async () => {
+      const dateSwitcherTxtPill = await FilterBarCO.getPillByIndex(1);
+      const txtPillText = await dateSwitcherTxtPill.getText();
+      await expect(txtPillText).toEqual('02/10/2020');
+    });
+    it('should match the input with selected day and month and year from menus center text', async () => {
+      const selectedDay = await DateSwitcherCO.getSelectedDay();
+      const selectedDayText = await selectedDay.getText();
+      const selectedMonth = await DateSwitcherCO.getCenterMenuText();
+      const selectedMonthText = await selectedMonth.getText();
+      await expect(selectedDayText).toEqual('10');
+      await expect(selectedMonthText).toEqual('February 2020');
+    });
+    it('should tab to the prev month button and press space to change the calendar month to February', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const textOnMenuCenter = await DateSwitcherCO.getCenterMenuText();
+      const textOnMenuCenterText = await textOnMenuCenter.getText();
+      await expect(textOnMenuCenterText).toEqual('January 2020');
+    });
+    it('should press the next month & next year buttons to change the calendar to January 2019', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const textOnMenuCenter = await DateSwitcherCO.getCenterMenuText();
+      const textOnMenuCenterText = await textOnMenuCenter.getText();
+      await expect(textOnMenuCenterText).toEqual('February 2021');
+    });
+    it('should shift tab to the prev year button and get the calendar back on February 2020', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Space);
+      const textOnMenuCenter = await DateSwitcherCO.getCenterMenuText();
+      const textOnMenuCenterText = await textOnMenuCenter.getText();
+      await expect(textOnMenuCenterText).toEqual('February 2020');
+    });
+    it('should change the date using the mouse and should be reflected on the pill', async () => {
+      const daySix = await DateSwitcherCO.getDayByIndex(5);
+      await daySix.click();
+      await browser.keys(Key.Space);
+      const dateSwitcherTxtPill = await FilterBarCO.getPillByIndex(1);
+      const txtPillText = await dateSwitcherTxtPill.getText();
+      await expect(txtPillText).toEqual('02/06/2020');
+    });
+    it('should close the pill and get the unsorted results', async () => {
+      const pillCloseBt = await FilterBarCO.getPillCloseButtonByPill(await FilterBarCO.getPillByIndex(1));
+      await pillCloseBt.click();
+      const unfitleredResult = await RowCO.getRowByIndex(1);
+      await expect(unfitleredResult).toBeDisplayedInViewport();
+    });
+  });
+}