dimsum-e2e-tests 1.0.0-rc.1

package/ds-controlled-form/ds-input-text/DSInputTextCO.js

@@ -0,0 +1,53 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_E2E_CONTROLLEDINPUT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class DSLargeInputCO extends PageObject {
+  static clearable = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'clearable-E-2-e');
+
+  static formLayoutBlockURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'with-form-layout-block-item');
+
+  static stylesURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'default-styles');
+
+  static disabledURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'disabled-test');
+
+  static sizesURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'sizes-E-2-e');
+
+  static basicURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'basic-E-2-e');
+
+  static hasError = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'has-error-test');
+
+  static autocompleteURL = new Urlbuilder(PATH_E2E_CONTROLLEDINPUT, 'with-autocomplete');
+
+  static async getAutocompleteMenuList() {
+    return $('[data-testid="autocomplete-menu-list"]');
+  }
+
+  static async getAutocompleteOptions() {
+    return $$('[data-testid="autocomplete-option"]');
+  }
+
+  static getAutocompleteOptionByIndex = async (index) => getElementByIndex(this.getAutocompleteOptions, index);
+
+  static async getInputTexContainer() {
+    return $('//input[@data-testid="ds-input-text"]/ancestor::div');
+  }
+
+  static async getInputText() {
+    return $('[data-testid="ds-input-text-input"]');
+  }
+
+  static async getInputTexts() {
+    return $$('[data-testid="ds-input-text-input"]');
+  }
+
+  static getInputTextByIndex = async (index) => getElementByIndex(this.getInputTexts, index);
+
+  static async getClearBtn() {
+    return $('[data-testid="ds-input-text-clear-button"]');
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSInputText', example, 'ds-controlled-input-text');
+  }
+}

package/ds-controlled-form/react-hook-form/ReactHook.func.spec.js

@@ -0,0 +1,74 @@
+/* eslint-disable max-statements */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import ReactHookCO from './ReactHookCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8180 - ds-controlled-form: with React Hook', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ReactHookCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly change the text input value sending keys', async () => {
+      const input = await ReactHookCO.getInputByIndex(0);
+      await input.click();
+      await type('Lucas caminador de cielos');
+      const inputValue = await input.getAttribute('value');
+      await expect(inputValue).toEqual('Lucas caminador de cielos');
+    });
+    it('should tab to the toggle and check it with keyboard', async () => {
+      const toggle = await ReactHookCO.getToggle();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const toggleState = await toggle.getAttribute('value');
+      await expect(toggleState).toEqual('true');
+    });
+    it('should uncheck the toggle with the mouse', async () => {
+      const toggle = await ReactHookCO.getToggle();
+      await toggle.click();
+      const toggleState = await toggle.getAttribute('value');
+      await expect(toggleState).toEqual('false');
+    });
+    it('should populate the first date range input with the picker', async () => {
+      const calendarTrigger = await ReactHookCO.getCalendarTrigger();
+      await calendarTrigger.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const dateRangeDay1 = await (await ReactHookCO.getDayInputsByIndex(0)).getAttribute('value');
+      const dateRangeDay2 = await (await ReactHookCO.getDayInputsByIndex(1)).getAttribute('value');
+      const dateRangeMonth1 = await (await ReactHookCO.getMonthInputsByIndex(0)).getAttribute('value');
+      const dateRangeMonth2 = await (await ReactHookCO.getMonthInputsByIndex(1)).getAttribute('value');
+      const dateRangeYear1 = await (await ReactHookCO.getYearInputsByIndex(0)).getAttribute('value');
+      const dateRangeYear2 = await (await ReactHookCO.getYearInputsByIndex(1)).getAttribute('value');
+      await expect(dateRangeDay1).toEqual('01');
+      await expect(dateRangeDay2).toEqual('15');
+      await expect(dateRangeMonth1).toEqual('02');
+      await expect(dateRangeMonth2).toEqual('02');
+      await expect(dateRangeYear1).toEqual('2022');
+      await expect(dateRangeYear2).toEqual('2022');
+    });
+    it('should populate the date time picker with input', async () => {
+      await browser.keys(Key.Escape);
+      await browser.keys(Key.Tab);
+      await ReactHookCO.type('11223333445');
+      await type('A');
+      const input = await ReactHookCO.getMonthInputsByIndex(2);
+      const inputValue = await input.getAttribute('aria-label');
+      // eslint-disable-next-line max-len
+      await expect(inputValue).toEqual(
+        'month input field, current values: November, twentie second, 3333, 4, 45, ante meridiem',
+      );
+    });
+  });
+}

package/ds-controlled-form/react-hook-form/ReactHook.visual.spec.js

@@ -0,0 +1,52 @@
+import { Key } from 'webdriverio';
+import { type } from '../../helpers';
+import ReactHookCO from './ReactHookCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8081 - ds-controlled-form: with React Hook', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ReactHookCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should interact elements, combobox open and checkbox checked', async () => {
+      const input = await ReactHookCO.getInput();
+      await input.click();
+      await type('Lucas caminador de cielos');
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const toggle = await ReactHookCO.getToggle();
+      await toggle.click();
+      const comboBox = await ReactHookCO.getCombobox();
+      await comboBox.click();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.checkSnapshot(ReactHookCO.snapshotPath('reacthook-combo-open'));
+      await expect(snapshot).toEqual(0);
+    });
+    // eslint-disable-next-line max-statements
+    it('should interact the missing elements, combobox closed and checkbox unchecked', async () => {
+      const checkbox = await ReactHookCO.getCheckbox();
+      await checkbox.click();
+      const calendarTrigger = await ReactHookCO.getCalendarTrigger();
+      await calendarTrigger.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Escape);
+      await browser.keys(Key.Escape);
+      await browser.keys(Key.Tab);
+      await type('1122333344');
+      await browser.keys(Key.Tab);
+      await type('A');
+      const snapshot = await browser.checkSnapshot(ReactHookCO.snapshotPath('reacthook-combo-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/react-hook-form/ReactHookCO.js

@@ -0,0 +1,79 @@
+import { PATH_E2E_HOOK_FORM } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class ReactHookCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_HOOK_FORM, 'on-submit-validation-form');
+
+  static async getInput() {
+    return $('[data-testid="ds-input-text-input"]');
+  }
+
+  static async getCombobox() {
+    return $('[data-testid="combobox-controls-wrapper"]');
+  }
+
+  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 async getMonthInputs() {
+    return $$('[data-testid="ds-controlled-date-time-picker-month-input"]');
+  }
+
+  static async getDaynputs() {
+    return $$('[data-testid="ds-controlled-date-time-picker-day-input"]');
+  }
+
+  static async getYearInputs() {
+    return $$('[data-testid="ds-controlled-date-time-picker-year-input"]');
+  }
+
+  static getMonthInputsByIndex = async (index) => getElementByIndex(this.getMonthInputs, index);
+
+  static getDayInputsByIndex = async (index) => getElementByIndex(this.getDaynputs, index);
+
+  static getYearInputsByIndex = async (index) => getElementByIndex(this.getYearInputs, index);
+
+  static async getHourInput() {
+    return $('[data-testid="ds-controlled-date-time-picker-hour-input"]');
+  }
+
+  static async gettMinuteInput() {
+    return $('[data-testid="ds-controlled-date-time-picker-minute-input"]');
+  }
+
+  static async getMeridiemInput() {
+    return $('[data-testid="ds-controlled-date-time-picker-meridiem-input"]');
+  }
+
+  static async getCalendarTrigger() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ReactHook', example, 'controlled-eact-hook');
+  }
+
+  static async type(chars = '1234567890') {
+    // const input = this.getInput();
+    const numbers = [...chars];
+    // input.click();
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of numbers) {
+      // https://github.com/webdriverio/webdriverio/issues/5092
+      // using keys char by char results in correct order
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+  }
+}

package/ds-controlled-form/useMask/Number/UseNumberMask.func.spec.js

@@ -0,0 +1,192 @@
+/* eslint-disable max-lines */
+import UseMaskCO from '../useMaskCO';
+import { type } from '../../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8167 - useNumberMask:: Currency', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.currencyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly format the currency input accordingly to the mask', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('123a4$bb56.90');
+      await expect(secondInput).toHaveValue('$123,456.90');
+    });
+    it('02: should have initial value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await expect(firstInput).toHaveValue('$100.50');
+    });
+    it('03: should correctly clear the input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await UseMaskCO.clearValue(firstInput);
+      await expect(firstInput).toHaveValue('');
+    });
+    it('04: should correctly format the currency input accordingly to the mask - decimal value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.click();
+      await type('.9');
+      await expect(firstInput).toHaveValue('$0.9');
+    });
+    it('05: should correctly clear all the 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('');
+    });
+  });
+  describe('PUI-8168 - useNumberMask:: Number', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.numberURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly format the Number input accordingly to the mask', async () => {
+      const fifthInput = await UseMaskCO.getInputByIndex(4);
+      await fifthInput.click();
+      await type('123a4$bb56');
+      await expect(fifthInput).toHaveValue('123,456');
+    });
+    it('02: should correctly format the Negative Number Allowed input accordingly to the mask', async () => {
+      const sixthInput = await UseMaskCO.getInputByIndex(5);
+      await sixthInput.click();
+      await type('-123a4$bb-56');
+      await expect(sixthInput).toHaveValue('-123,456');
+    });
+    it('03: should correctly format the Negative Number Allowed input with decimal', async () => {
+      const sixthInput = await UseMaskCO.getInputByIndex(5);
+      await UseMaskCO.clearValue(sixthInput);
+      await type('-.08');
+      await expect(sixthInput).toHaveValue('-0.08');
+    });
+    it('04: should correctly format the No Thousands Separator input accordingly to the mask', async () => {
+      const sevenhtInput = await UseMaskCO.getInputByIndex(6);
+      await sevenhtInput.click();
+      await type('123a4$bb56');
+      await expect(sevenhtInput).toHaveValue('123456');
+    });
+    it('05: should correctly format the Decimal Required input accordingly to the mask', async () => {
+      const eightInput = await UseMaskCO.getInputByIndex(7);
+      await eightInput.click();
+      await type('123a4$bb56.1');
+      await expect(eightInput).toHaveValue('123,456.1');
+    });
+    it('06: should correctly format the Decimal Required with its decimals completed', async () => {
+      const eightInput = await UseMaskCO.getInputByIndex(7);
+      const sevenhtInput = await UseMaskCO.getInputByIndex(6);
+      await sevenhtInput.click();
+      await expect(eightInput).toHaveValue('123,456.100');
+    });
+    it('07: should correctly clear all the inputs', async () => {
+      const fifthInput = await UseMaskCO.getInputByIndex(0);
+      const sixthInput = await UseMaskCO.getInputByIndex(1);
+      const sevenhtInput = await UseMaskCO.getInputByIndex(1);
+      const eightInput = await UseMaskCO.getInputByIndex(1);
+      await UseMaskCO.clearValue(fifthInput);
+      await UseMaskCO.clearValue(sixthInput);
+      await UseMaskCO.clearValue(sevenhtInput);
+      await UseMaskCO.clearValue(eightInput);
+      await expect(fifthInput).toHaveValue('');
+      await expect(sixthInput).toHaveValue('');
+      await expect(sevenhtInput).toHaveValue('');
+      await expect(eightInput).toHaveValue('');
+    });
+  });
+  describe('PUI-10129 - useNumberMask:: Number Initial Value', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.numberURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: all initial values should be displayed', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      const fourthInput = await UseMaskCO.getInputByIndex(3);
+      await expect(firstInput).toHaveValue('20,030');
+      await expect(secondInput).toHaveValue('-0.30');
+      await expect(thirdInput).toHaveValue('10000000');
+      await expect(fourthInput).toHaveValue('1,000.0');
+    });
+    it('02: should correctly clear all inputs', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      const fourthInput = await UseMaskCO.getInputByIndex(3);
+      await UseMaskCO.clearValue(firstInput);
+      await UseMaskCO.clearValue(secondInput);
+      await UseMaskCO.clearValue(thirdInput);
+      await UseMaskCO.clearValue(fourthInput);
+      await expect(firstInput).toHaveValue('');
+      await expect(secondInput).toHaveValue('');
+      await expect(thirdInput).toHaveValue('');
+      await expect(fourthInput).toHaveValue('');
+    });
+    it('03: should correctly format the No decimal allowed input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(4);
+      await firstInput.click();
+      await type('-123a4$bb56.0');
+      await expect(firstInput).toHaveValue('1,234,560');
+    });
+    it('04: should correctly format the Negative Number Allowed input with decimal', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(5);
+      await UseMaskCO.clearValue(secondInput);
+      await type('-12345678.09');
+      await expect(secondInput).toHaveValue('-12,345,678.09');
+    });
+    it('05: should correctly format the No Thousands Separator input accordingly to the mask', async () => {
+      const thirdInput = await UseMaskCO.getInputByIndex(6);
+      await thirdInput.click();
+      await type('-1,23a4$,bb5.6');
+      await expect(thirdInput).toHaveValue('-12345.6');
+    });
+    it('06: should correctly format the Decimal Required input accordingly to the mask', async () => {
+      const fourthInput = await UseMaskCO.getInputByIndex(7);
+      await fourthInput.click();
+      await type('.323952345');
+      await expect(fourthInput).toHaveValue('0.323');
+    });
+  });
+  describe('PUI-8169 - useNumberMask:: Percent', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.percentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly format the input accordingly to the mask and add decimal dot', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('123a4$bb56');
+      await expect(secondInput).toHaveValue('123,456.%');
+    });
+    it('02: should correctly format the input accordingly to the mask with decimals', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('.a25');
+      await expect(secondInput).toHaveValue('123,456.25%');
+    });
+    it('03: should correctly clear 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 first input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.click();
+      await type('%-$90,242.0010');
+      await expect(firstInput).toHaveValue('90,242.00%');
+    });
+    it('05: should correctly format the second input', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('.30');
+      await expect(secondInput).toHaveValue('0.30%');
+      await firstInput.click();
+      await expect(secondInput).toHaveValue('0.30%');
+    });
+  });
+}

package/ds-controlled-form/useMask/Number/UseNumberMask.visual.spec.js

@@ -0,0 +1,35 @@
+import { type } from '../../../helpers';
+import UseMaskCO from '../useMaskCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8175: UseNumberMask - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.numberURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Input should be correctly formatted according to the specified mask - initial values', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(UseMaskCO.snapshotPath('useMask-numbers-initial-value'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: Input should be correctly formatted according to the specified mask - all inputs completed', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const fifthInput = await UseMaskCO.getInputByIndex(4);
+      await fifthInput.click();
+      await type('123a4$bb56');
+      const sixthInput = await UseMaskCO.getInputByIndex(5);
+      await sixthInput.click();
+      await type('-123a4$bb56');
+      const sevenhtInput = await UseMaskCO.getInputByIndex(6);
+      await sevenhtInput.click();
+      await type('123a4$bb56');
+      const eightInput = await UseMaskCO.getInputByIndex(7);
+      await eightInput.click();
+      await type('123a4$bb56.1');
+      await firstInput.click();
+      const snapshot = await browser.checkSnapshot(UseMaskCO.snapshotPath('useMask-numbers-all-completed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/useMask/Phone/UsePhoneMask.func.spec.js

@@ -0,0 +1,49 @@
+import { type } from '../../../helpers';
+import UseMaskCO from '../useMaskCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8170 - usePhoneMask:: Phone', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.phoneURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly format the National Phone input accordingly to the mask', async () => {
+      const input = await UseMaskCO.getInputByIndex(2);
+      await input.click();
+      await type('123a4$bb5678910');
+      await expect(input).toHaveValue('(123) 456 - 7891');
+    });
+    it('02: should correctly format the International Phone input accordingly to the mask', async () => {
+      const input = await UseMaskCO.getInputByIndex(3);
+      await input.click();
+      await type('123a4$bb5678-910');
+      await expect(input).toHaveValue('+1 (123) 456 - 7891');
+    });
+    it('03: should clear all correctly', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      const fourthInput = await UseMaskCO.getInputByIndex(3);
+      await UseMaskCO.clearValue(firstInput);
+      await UseMaskCO.clearValue(secondInput);
+      await UseMaskCO.clearValue(thirdInput);
+      await UseMaskCO.clearValue(fourthInput);
+      await expect(firstInput).toHaveValue('');
+      await expect(secondInput).toHaveValue('');
+      await expect(thirdInput).toHaveValue('');
+      await expect(fourthInput).toHaveValue('');
+    });
+    it('04: should correctly format the National Phone input - initial value', async () => {
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.click();
+      await type('((123%a4$bb56-+78910');
+      await expect(firstInput).toHaveValue('(123) 456 - 7891');
+    });
+    it('05: should correctly format the International Phone input - initial value', async () => {
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      await secondInput.click();
+      await type('(12-+3a4$bb56)78-910');
+      await expect(secondInput).toHaveValue('+1 (123) 456 - 7891');
+    });
+  });
+}

package/ds-controlled-form/useMask/Phone/UsePhoneMask.visual.spec.js

@@ -0,0 +1,30 @@
+import UseMaskCO from '../useMaskCO';
+import { type } from '../../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10142 - usePhoneMask:: Phone - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.phoneURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Input should be correctly formatted according to the specified mask - initial values', async () => {
+      await browser.eyesOpen();
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      await thirdInput.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(UseMaskCO.snapshotPath('useMask-phone-initial-value'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should correctly format the International Phone input accordingly to the mask', async () => {
+      await browser.eyesOpen();
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      const fourthInput = await UseMaskCO.getInputByIndex(3);
+      await thirdInput.click();
+      await type('((123%a4$bb56-+78910');
+      await fourthInput.click();
+      // eslint-disable-next-line no-template-curly-in-string
+      await type('((8*${df}93%a4$bb56-4789*10');
+      const snapshot = await browser.eyesCheckSnapshot(UseMaskCO.snapshotPath('useMask-phone-all-inputs-completed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/useMask/ReackHookFormWithMask/ReactHookFormWithMask.func.spec.js

@@ -0,0 +1,51 @@
+/* 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-9283 - useRegExpMask:: With React Hook Form', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.withReactHookForm.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly format the input accordingly to the percent mask', async () => {
+      const input = await UseMaskCO.getInputByIndex(0);
+      await input.click();
+      await type('123a4$bb56');
+      const inputValue = await input.getValue();
+      await expect(inputValue).toEqual('123,456%');
+    });
+    it('02: should correctly format the currency input accordingly to the currency mask', async () => {
+      const input = await UseMaskCO.getInputByIndex(1);
+      await input.click();
+      await type('123a4$bb56');
+      const inputValue = await input.getValue();
+      await expect(inputValue).toEqual('$123,456');
+    });
+    it('03: should correctly format the International Phone input accordingly to the mask', async () => {
+      const input = await UseMaskCO.getInputByIndex(2);
+      await input.click();
+      await type('123a4$bb5678-910');
+      const inputValue = await input.getValue();
+      await expect(inputValue).toEqual('+(12) 345-67-89');
+    });
+    it('04: should have unchecked checkbox and unchecked toggle by default', async () => {
+      const checkbox = await UseMaskCO.getCheckbox();
+      const toggle = await UseMaskCO.getToggle();
+      const checkboxChecked = await checkbox.getAttribute('aria-checked');
+      const togleChecked = await toggle.getAttribute('aria-checked');
+      await expect(checkboxChecked).toEqual('false');
+      await expect(togleChecked).toEqual('false');
+    });
+    it('05: should have checked checkbox and checked toggle after clicking them', async () => {
+      const checkbox = await UseMaskCO.getCheckbox();
+      const toggle = await UseMaskCO.getToggle();
+      await checkbox.click();
+      await toggle.click();
+      const checkboxChecked = await checkbox.getAttribute('aria-checked');
+      const togleChecked = await toggle.getAttribute('aria-checked');
+      await expect(checkboxChecked).toEqual('true');
+      await expect(togleChecked).toEqual('true');
+    });
+  });
+}

package/ds-controlled-form/useMask/ReackHookFormWithMask/ReactHookFormWithMask.visual.spec.js

@@ -0,0 +1,39 @@
+/* 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-10170 - useRegExpMask:: With React Hook Form - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await UseMaskCO.withReactHookForm.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should display correctly react hook form with mask - initial values', async () => {
+      await browser.eyesOpen();
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      await firstInput.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(UseMaskCO.snapshotPath('useMask-react-hook-form-initial-value'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02:  Should display correctly react hook form with mask - all completed', async () => {
+      await browser.eyesOpen();
+      const firstInput = await UseMaskCO.getInputByIndex(0);
+      const secondInput = await UseMaskCO.getInputByIndex(1);
+      const thirdInput = await UseMaskCO.getInputByIndex(2);
+      const checkbox = await UseMaskCO.getCheckbox();
+      const toggle = await UseMaskCO.getToggle();
+      await firstInput.click();
+      await type('((123%a4$bb56-+78910');
+      await secondInput.click();
+      await type('((123%a4$bb56-+78910');
+      await thirdInput.click();
+      await type('((123%a4$bb56-+78910');
+      await checkbox.click();
+      await toggle.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        UseMaskCO.snapshotPath('useMask-react-hook-form-all-inputs-completed'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}