dimsum-e2e-tests 1.0.0-rc.1

package/ds-controlled-form/useMask/RegExp/UseRegExpMask.func.spec.js

@@ -0,0 +1,37 @@
+/* eslint-disable max-lines */
+import { type } from '../../../helpers';
+import UseMaskCO from '../useMaskCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8171 - useRegExpMask:: RegExp', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.regexpURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first input should have initial value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.click();
+      await expect(firstInput).toHaveValue('+(44) 444-44-44');
+    });
+    it('02: second input should be correctly formated', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('123a4$bb5678-910');
+      await expect(secondInput).toHaveValue('+(12) 345-67-89');
+    });
+    it('03: clear all inputs', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await UseMaskCO.clearValue(firstInput);
+      await UseMaskCO.clearValue(secondInput);
+      await expect(firstInput).toHaveValue('');
+      await expect(secondInput).toHaveValue('');
+    });
+    it('04: first input should be correctly formated', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.click();
+      await type('1(()23))a4$bb56&*(}}}{:"><?  78-9106456');
+      await expect(firstInput).toHaveValue('+(12) 345-67-89');
+    });
+  });
+}

package/ds-controlled-form/useMask/SSN/UseSsnMask.func.spec.js

@@ -0,0 +1,53 @@
+/* eslint-disable max-lines */
+import { type } from '../../../helpers';
+import UseMaskCO from '../useMaskCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8172 - useSSNMask -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.ssnURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first input should have initial value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.waitForDisplayed();
+      await expect(firstInput).toHaveValue('111-11-1111');
+    });
+    it('02: should correctly format the SSN input accordingly to the mask - second input', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('123a4$bb5678-910');
+      await expect(secondInput).toHaveValue('123-45-6789');
+    });
+    it('03: should correctly clear all inputs', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await UseMaskCO.clearValue(firstInput);
+      await UseMaskCO.clearValue(secondInput);
+      await expect(firstInput).toHaveValue('');
+      await expect(secondInput).toHaveValue('');
+    });
+    it('04: should correctly format the SSN input accordingly to the mask - first input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(1);
+      await firstInput.click();
+      await type('1-124--+=23a4$bb5678-910');
+      await expect(firstInput).toHaveValue('112-42-3456');
+    });
+  });
+
+  // Automation loses focus on safari, working properly manually
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-10734 - useSSNMask, Zeros without limitations -func', () => {
+      before('loading page', async () => {
+        const errorOnGo = await UseMaskCO.ssnURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('01: should correctly format the SSN input even when using only zeros - second input', async () => {
+        const secondInput = await UseMaskCO.getInputByIndex(1);
+        await secondInput.click();
+        await type('000000000');
+        await expect(secondInput).toHaveValue('000-00-0000');
+      });
+    });
+  }
+}

package/ds-controlled-form/useMask/ZipCode/UseZipCodeMask.func.spec.js

@@ -0,0 +1,37 @@
+/* eslint-disable max-lines */
+import { type } from '../../../helpers';
+import UseMaskCO from '../useMaskCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8173 - useZipCodeMask:: ZipCode', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.zipcodeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: first input should have initial value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.waitForDisplayed();
+      await expect(firstInput).toHaveValue('11111-1111');
+    });
+    it('02: should correctly format the ZipCode input accordingly to the mask - second input', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('123a4$bb5678-910');
+      await expect(secondInput).toHaveValue('12345-6789');
+    });
+    it('03: should correctly clear all inputs', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await UseMaskCO.clearValue(firstInput);
+      await UseMaskCO.clearValue(secondInput);
+      await expect(firstInput).toHaveValue('');
+      await expect(secondInput).toHaveValue('');
+    });
+    it('04: should correctly format the ZipCode input accordingly to the mask - first input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(1);
+      await firstInput.click();
+      await type('1-124--+=23a4$bb5678-910');
+      await expect(firstInput).toHaveValue('11242-3456');
+    });
+  });
+}

package/ds-controlled-form/useMask/useMaskCO.js

@@ -0,0 +1,56 @@
+/* eslint-disable import/no-relative-packages */
+import { Key } from 'webdriverio';
+import { PATH_E2E_HOOKS_MASKS } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class UseMaskCO extends PageObject {
+  static currencyURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'currency-test');
+
+  static numberURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'number-test');
+
+  static percentURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'percent-test');
+
+  static phoneURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'phone-test');
+
+  static regexpURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'reg-exp-test');
+
+  static ssnURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'ssn-test');
+
+  static zipcodeURL = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'zip-code-test');
+
+  static withReactHookForm = new Urlbuilder(PATH_E2E_HOOKS_MASKS, 'react-hook-form-with-mask-test');
+
+  static async getInput() {
+    return $('[data-testid="ds-input-text-input"]');
+  }
+
+  static async getCheckbox() {
+    return $('[data-testid="ds-checkbox"]');
+  }
+
+  static async getToggle() {
+    return $('[ data-testid="ds-controlled-toggle-checkbox"]');
+  }
+
+  static async getInputs() {
+    return $$('[data-testid="ds-input-text-input"]');
+  }
+
+  static getInputByIndex = async (index) => getElementByIndex(this.getInputs, index);
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSInputMask', example, 'ds-input-mask');
+  }
+
+  static async triggerBackspace(number = 1) {
+    for (let x = 0; x < number; x += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(Key.Backspace);
+    }
+  }
+
+  static async clearValue(input) {
+    await input.click();
+    await this.triggerBackspace((await input.getValue()).length);
+  }
+}

package/ds-data-table-async/DSDataTable.smoke.spec.js

@@ -0,0 +1,315 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from './DSDataTableCO';
+import { RowCO, HeaderCO, CellCO, FilterBarCO, FiltersCO, FiltersCOextra, PaginationNavCO } from './components';
+import { mouseOver, tabStops, type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7801 - DataTable, Sort column -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should click on country header and sort the rows descending by this column ', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const secondRow = await RowCO.getRowByIndex(1);
+      const firstRowCountryCell = await CellCO.getRowCellByIndex(firstRow, 3);
+      const secondRowCountryCell = await CellCO.getRowCellByIndex(secondRow, 3);
+      await expect(firstRowCountryCell).toHaveTextContaining('Uruguay');
+      await expect(secondRowCountryCell).toHaveTextContaining('Uruguay');
+    });
+    it('Should click on country header and sort the rows ascending by this column ', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const secondRow = await RowCO.getRowByIndex(1);
+      const firstRowCountryCell = await CellCO.getRowCellByIndex(firstRow, 3);
+      const secondRowCountryCell = await CellCO.getRowCellByIndex(secondRow, 3);
+      await expect(firstRowCountryCell).toHaveTextContaining('Argentina');
+      await expect(secondRowCountryCell).toHaveTextContaining('Argentina');
+    });
+  });
+  describe('PUI-8381 - DataTable, Disabeld row -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectWithNoControl.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should have a disabled row and its addons all with disabled state', async () => {
+      const row = await RowCO.getRowFocuseableByIndex(3); // due to virtualization. Is actually the fourth row
+      await row.click();
+      await expect(row).toBeFocused();
+      await expect(row).toHaveAttr('aria-disabled', 'true');
+    });
+  });
+  describe('PUI-7543 - DataTable, Filter, Number range filter', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus on the first input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('number range', 0);
+      const popupFirstInput = await FiltersCOextra.filterNumberRangePopper.getLeftInput();
+      await expect(popupFirstInput).toBeFocused();
+    });
+    it('should fill in the input and get matching pill on the filterbar', async () => {
+      await FiltersCOextra.filterNumberRangePopper.setInput('6', '7');
+      const dateSwitcherTxtPill = await FilterBarCO.getPillByIndex(1);
+      const txtPillText = await dateSwitcherTxtPill.getText();
+      await expect(txtPillText).toEqual('6 - 7');
+    });
+    it('should get the filtered results', async () => {
+      const results = await RowCO.getRows();
+      const filteredNrange = await DSDataTableCO.getAllColumnResults(results, 7);
+      const areFiltered = filteredNrange.every((nRange) => nRange === '6' || nRange === '7');
+      await expect(areFiltered).toBeTruthy();
+    });
+    it('should show all results after removing the filter from the filterbar', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredNrange = await DSDataTableCO.getAllColumnResults(results, 6);
+      const areFiltered = filteredNrange.every((nRange) => nRange === '6' || nRange === '7');
+      await expect(areFiltered).not.toBeTruthy();
+    });
+  });
+  describe('PUI-8828 - DataTable: Custom cell with datepicker - Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customWithDate.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should be possible open date time picker with Enter key', async () => {
+      const yearInput = await CellCO.getYearInput();
+      await yearInput.click();
+      await browser.keys([Key.Tab]);
+      await browser.keys([Key.Enter]);
+      const dateTimePicker = await CellCO.getDateTimePickerCalendar();
+      await expect(dateTimePicker).toBeDisplayedInViewport();
+    });
+    it('02: should be possible close date time picker with Escape key', async () => {
+      await browser.keys([Key.Escape]);
+      const dateTimePicker = await CellCO.getDateTimePickerCalendar();
+      const dateTimePickerBtn = await CellCO.getDateTimePickerBtn();
+      await expect(dateTimePicker).not.toBeDisplayedInViewport();
+      await expect(dateTimePickerBtn).toBeFocused();
+    });
+  });
+  describe('PUI-9203 - DataTable, Filter, Creatable single select filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+    });
+    it('02: start typing a valid value and filter options', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('J');
+      const option1 = await FiltersCO.filterSingleSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterSingleSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      await expect(option1).toHaveTextContaining(['Add:', 'J']);
+      await expect(option2).toHaveTextContaining('John');
+    });
+    it('03: should create a new option', async () => {
+      await type('OHN');
+      await browser.keys(Key.Enter);
+      const pill = await FilterBarCO.getPillByText('JOHN');
+      await expect(pill).toBeDisplayedInViewport();
+    });
+    it('04: should filter typing a valid value', async () => {
+      const pillCloseBtn = await FilterBarCO.getPillByText('JOHN');
+      await pillCloseBtn.click();
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await type('John');
+      await browser.keys(Key.Enter);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === 'john');
+      await expect(isFiltered).toBeTruthy();
+    });
+  });
+  describe('PUI-9204 - DataTable, Filter, Creatable multi select filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputSingleSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+    });
+    it('02: start typing a valid value and filter options', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      await type('Re');
+      const option1 = await FiltersCO.filterMultiSelectPopper.getMenuItem(0);
+      const option2 = await FiltersCO.filterMultiSelectPopper.getMenuItem(1);
+      await option1.waitForDisplayed();
+      await option2.waitForDisplayed();
+      await expect(option1).toHaveTextContaining(['Add:', 'Re']);
+      await expect(option2).toHaveTextContaining('React');
+    });
+    it('03: should create a new option', async () => {
+      await type('act');
+      await browser.keys(Key.Enter);
+      const pill = await FilterBarCO.getPillByText('React');
+      const menuItems = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      const textFirstItem = await menuItems[0];
+      await expect(pill).toBeDisplayedInViewport();
+      await expect(textFirstItem).toHaveTextContaining('React');
+    });
+    it('04: type a valid value', async () => {
+      await type('React dev');
+      await browser.keys(Key.Enter);
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredNames.every((position) => position.toLowerCase() === 'react dev');
+      await expect(isFiltered).toBeTruthy();
+    });
+  });
+  describe('PUI-7479 - DataTable, Pagination - Func. Keyboard', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should be able to tab to the elems-per-page menu from the last row of the table', async () => {
+      const elemsPerPage = await PaginationNavCO.getElemsPerPageBtn();
+      const lastRow = await RowCO.getRowByIndex(9);
+      await lastRow.click();
+      await browser.keys(Key.Tab);
+      await expect(elemsPerPage).toBeFocused();
+    });
+    it('should have 10 elems-per-page opt selected', async () => {
+      const elemsPerPageMenu = await PaginationNavCO.getElemsPerPageMenu();
+      const elemsPerPage = await elemsPerPageMenu.getText();
+      await expect(elemsPerPage).toEqual('10 / page');
+    });
+    it('should expand DropDmenu', async () => {
+      await browser.keys(Key.Enter);
+      const elemsPerPageDDMenu = await PaginationNavCO.getDropDownMenu();
+      await expect(elemsPerPageDDMenu).toBeDisplayedInViewport();
+    });
+    it('should select 50 elems-per-page opt', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const elemsPerPageMenu = await PaginationNavCO.getElemsPerPageMenu();
+      const elemsPerPage = await elemsPerPageMenu.getText();
+      await expect(elemsPerPage).toEqual('50 / page');
+    });
+    it('Should scroll to the last row and tab to get focus on elems-per-page', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      const row50Aria = await RowCO.getRowAriaIndex(50);
+      await expect(row50Aria).toBeDisplayedInViewport();
+    });
+    it('should tab to the Pages Navigation Dropdown Menu', async () => {
+      await tabStops(26);
+      const pagesNav = await PaginationNavCO.getPagesBtn();
+      await browser.pause(10000);
+      await expect(pagesNav).toBeFocused();
+    });
+    it('should expand the Pages navigation', async () => {
+      await browser.keys(Key.Enter);
+      const openDDMenu = await PaginationNavCO.getDropDownMenu();
+      await expect(openDDMenu).toBeDisplayedInViewport();
+    });
+    it('should choose the desired page with the keyboard and get to that page', async () => {
+      await type('6');
+      await browser.keys(Key.Space);
+      const pages = await PaginationNavCO.getPagesMenu();
+      await expect(pages).toHaveTextContaining('6');
+    });
+  });
+  describe('PUI-8263 - DataTable, toolbar - Functional Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.performance.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should not display the overflow menu after hovering the trigger', async () => {
+      const otherElement = await RowCO.getRowRadioButtonByIndex(2);
+      await mouseOver(otherElement, 10, 10);
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      await expect(toolbarMenu).not.toBeDisplayedInViewport();
+    });
+    it('02: should display the overflow menu after clicking the trigger', async () => {
+      const toolbar = await RowCO.getRowToolbarTriggerByIndex(3);
+      await toolbar.click();
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      await expect(toolbarMenu).toBeDisplayedInViewport();
+    });
+    it('03: should close the overflow menu after clicking the trigger', async () => {
+      const toolbar = await RowCO.getRowToolbarTriggerByIndex(3);
+      await toolbar.click();
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      await expect(toolbarMenu).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-6869 - DataTable, toolbar mouse navigation - Functional Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.toolbarIntegration.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should navigate the toolbar menu using the mouse', async () => {
+      const toolbar = await RowCO.getRowToolbarTriggerByIndex(3);
+      await toolbar.click();
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      await expect(toolbarMenu).toBeDisplayedInViewport();
+      const secondBt = await RowCO.getToolbarMenuBtsByIndex(1);
+      await secondBt.click();
+      await expect(secondBt).toBeFocused();
+    });
+    it('02: should navigate again the toolbar menu using the mouse', async () => {
+      const thirdBt = await RowCO.getToolbarMenuBtsByIndex(2);
+      const secondBt = await RowCO.getToolbarMenuBtsByIndex(1);
+      await thirdBt.click();
+      await expect(thirdBt).toBeFocused();
+      await expect(secondBt).not.toBeFocused();
+    });
+  });
+  describe('PUI-7084  - DataTable, toolbar sticky - Functional Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.toolbarIntegration.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have the toolbar displayed', async () => {
+      const toolbar = await RowCO.getRowToolbarTriggerByIndex(3);
+      await toolbar.click();
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      await expect(toolbarMenu).toBeDisplayedInViewport();
+    });
+    it('02: should scroll and the toolbar menu should still be displayed afetr scrolling', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight); // scrolling
+      await browser.pause(5000);
+      const toolbarMenu = await RowCO.getToolbarMenu();
+      const salaryHeader = await HeaderCO.getHeaderCellByIndex(4);
+      await expect(toolbarMenu).toBeDisplayedInViewport();
+      await expect(salaryHeader).toBeDisplayedInViewport();
+    });
+  });
+}