dimsum-e2e-tests 3.22.0-next.36

package/ds-form/SearchBox/DSSearchBox.visual.spec.js

@@ -0,0 +1,61 @@
+import DSSearchBoxCO from './DSSearchBoxCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6132 - SearchBox, Nav - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSearchBoxCO.navURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not display the controls nor the item count', async () => {
+      await (await DSSearchBoxCO.getNavInput()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('nav-no-counter'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the nav controls and the item count', async () => {
+      await (await DSSearchBoxCO.getNavInput()).click();
+      await type('Agent');
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('nav-counter'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the actual item count / total', async () => {
+      await (await DSSearchBoxCO.getNavNextButton()).click();
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('nav-actual-item-count'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-3142 - SearchBox disabled - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSearchBoxCO.disabledUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('input and search button are disabled', async () => {
+      await (await DSSearchBoxCO.getInput()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-3143 - SearchBox disable button - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSearchBoxCO.buttonDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('input is enabled and search button disabled', async () => {
+      await (await DSSearchBoxCO.getInput()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('disabled-button'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6000 - SearchBox long value', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSearchBoxCO.longValue.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not overlap the search icon', async () => {
+      await (await DSSearchBoxCO.getInput()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSSearchBoxCO.snapshotPath('real-long-value'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form/SearchBox/DSSearchBoxCO.js

@@ -0,0 +1,75 @@
+import { Key } from 'webdriverio';
+import { PATH_SEARCHBOX, PATH_E2E_SEARCHBOX } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export const knobs = {
+  disabled: 'knob-disabled',
+  disableButton: 'knob-disableButton',
+  clearOnSearch: 'knob-clearOnSearch',
+};
+
+export default class DSSearchBoxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_SEARCHBOX, 'basic');
+
+  static disabledUrl = new Urlbuilder(PATH_SEARCHBOX, 'disabled');
+
+  static buttonDisabled = new Urlbuilder(PATH_SEARCHBOX, 'button-disabled');
+
+  static navURL = new Urlbuilder(PATH_SEARCHBOX, 'nav');
+
+  static clearableUrl = new Urlbuilder(PATH_SEARCHBOX, 'clearable');
+
+  static longValue = new Urlbuilder(PATH_E2E_SEARCHBOX, 'real-long-value');
+
+  static navScrollURL = new Urlbuilder(PATH_SEARCHBOX, 'nav-scroll-to-item');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_SEARCHBOX, component);
+  }
+
+  static disableButton = new Urlbuilder(PATH_E2E_SEARCHBOX, 'search-box-disable-button');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('SearchBox', example);
+  }
+
+  // selectors
+  static async getInputText() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async getSearchBoxButton() {
+    return $('[data-testid="ds-searchbox-button"]');
+  }
+
+  static async getclearButton() {
+    return $('[data-testid="ds-searchbox-button-clear"]');
+  }
+
+  static async getInput() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async getNavNextButton() {
+    return $('[data-testid="ds-navsearchbox-next"]');
+  }
+
+  static async getNavInput() {
+    return $('[data-testid="ds-nav-searchbox-input"]');
+  }
+
+  static async getHighlightedResultByText(query) {
+    return $(`//mark[contains(text(), '${query}')]`);
+  }
+
+  // actions
+  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);
+    }
+  }
+  // utils
+}

package/ds-form/Toggle/DSToggle.func.spec.js

@@ -0,0 +1,70 @@
+/* eslint-disable wdio/no-pause */
+import DSToggleCO from './DSToggleCO';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4477 - Toggle, basic functional', () => {
+    describe('Toggle, states on/off', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSToggleCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should change state to ON', async () => {
+        await (await DSToggleCO.getToggle()).click();
+        const toggleStateOn = await DSToggleCO.getToggleState('ON');
+        await expect(toggleStateOn).toBeDisplayed();
+      });
+      it('should change state to OFF', async () => {
+        await (await DSToggleCO.getToggle()).click();
+        const toggleStateOff = await DSToggleCO.getToggleState('OFF');
+        await expect(toggleStateOff).toBeDisplayed();
+      });
+    });
+    describe('Toggle, disabled', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSToggleCO.disabled.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should not change state in disabled toggle', async () => {
+        await (await DSToggleCO.getToggle()).click();
+        const toggleStateOff = await DSToggleCO.getToggleState('OFF');
+        await expect(toggleStateOff).toBeDisplayed();
+      });
+    });
+    describe('Toggle, read only', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSToggleCO.readOnly.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display tooltip in read only toggle', async () => {
+        const toggle = await DSToggleCO.getToggle();
+        await toggle.waitForDisplayed();
+        if (browser.capabilities.browserName === 'firefox') {
+          await toggle.moveTo();
+        } else {
+          await mouseOver(toggle, 25, 8);
+        }
+        await browser.pause(300);
+        const tooltip = await DSToggleCO.getTooltip();
+        await tooltip.waitForDisplayed();
+        await expect(tooltip).toBeDisplayed();
+      });
+    });
+  });
+  describe('PUI-4739 - Toggle, controlled functional', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should change state to ON', async () => {
+      await (await DSToggleCO.getToggleOff()).click();
+      const toggleStateText = await (await DSToggleCO.getToggleOff()).getText();
+      await expect(toggleStateText).toContain('ON');
+    });
+    it('should change state to OFF', async () => {
+      await (await DSToggleCO.getToggleOn()).click();
+      const toggleStateText = await (await DSToggleCO.getToggleOn()).getText();
+      await expect(toggleStateText).toContain('OFF');
+    });
+  });
+}

package/ds-form/Toggle/DSToggle.visual.spec.js

@@ -0,0 +1,21 @@
+import DSToggleCO from './DSToggleCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4476 - Toggle, visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic toggle', async () => {
+      await (await DSToggleCO.getToggle()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display toggle with focus', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      await (await DSToggleCO.getToggleState('ON')).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('with-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form/Toggle/DSToggleCO.js

@@ -0,0 +1,45 @@
+import { PATH_END_OF_LIFE_TOGGLE } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+export default class DSToggleCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_TOGGLE, 'basic');
+
+  static controlledURL = new Urlbuilder(PATH_END_OF_LIFE_TOGGLE, 'controlled');
+
+  static disabled = new Urlbuilder(PATH_END_OF_LIFE_TOGGLE, 'disabled');
+
+  static readOnly = new Urlbuilder(PATH_END_OF_LIFE_TOGGLE, 'read-only');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_TOGGLE, component);
+  }
+
+  static async getToggle() {
+    return $('[data-testid="em-ds-toggle"]');
+  }
+
+  static async getToggleOff() {
+    return $('[data-testid="init-off"]');
+  }
+
+  static async getToggleOn() {
+    return $('[data-testid="init-on"]');
+  }
+
+  static async getToggleState(state) {
+    return $(`div*=${state}`);
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Toggle', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItem.axe-core.func.spec.js

@@ -0,0 +1,144 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { axeCoreCheck, type } from '../../helpers';
+import DSFormLayoutBlockItemCO from './DSFormLayoutBlockItemCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10963 - DSFormLayoutBlockItem: Basic - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.basicTestURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pass axecore scan for the basic formLayoutBlockItem', async () => {
+      const formLayout = await DSFormLayoutBlockItemCO.getByTestId('mytestid');
+      await formLayout.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10964 - DSFormLayoutBlockItem: Form Validation, onBlur - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnBlur.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pass axecore scan with onBlur validation, no error message displayed', async () => {
+      await browser.keys(Key.Tab);
+      await type('More than twenty char');
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore scan with onBlur validation, error message displayed', async () => {
+      await browser.keys(Key.Tab);
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+      await errorMessage.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10965 - DSFormLayoutBlockItem: Form Validation, onChange - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnChange.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pass axecore scan with onChange validation, no error message displayed', async () => {
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await type('More than');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore scan with onChange validation, error message displayed', async () => {
+      await type(' twenty char');
+      const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+      await expect(errorMessage).toBeDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10966 - DSFormLayoutBlockItem: Form Validaiton, onSubmit - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnSubmit.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pass axecore scan with onSubmit validation, no error message displayed, one caused', async () => {
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await type('More than twenty chars');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should pass axecore scan with onSubmit validation, no error message displayed, two caused', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      await checkbox.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should pass axecore scan with onSubmit validation, errors messages displayed', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessagesByIndex(0);
+      await errorMessage.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10967 - DSFormLayoutBlockItem: ShowOff (other components) (within dialog) - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.showOffE2e.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display 4 formLayoutBlocks, second with hideLabel last one with leftLabel', async () => {
+      const openDialogBtn = await DSFormLayoutBlockItemCO.getOpenDialogBtn();
+      await openDialogBtn.click();
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10969 - DSFormLayoutBlockItem: isGroup radio - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.isGroupURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show correctly display a radioGroup within the formLayoutBlock', async () => {
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10970 - DSFormLayoutBlockItem: Required and Optional - AxeCore test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.optionalAndRequired.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show one optional and one required formLayoutBlocks', async () => {
+      const formLayout = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      await formLayout.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItem.func.spec.js

@@ -0,0 +1,203 @@
+import { Key } from 'webdriverio';
+import DSFormLayoutBlockItemCO from './DSFormLayoutBlockItemCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isTablet && !browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-9499 - DSFormLayoutBlockItem: Basi custom data-testid - func test', () => {
+    // MODIFY
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.basicTestURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should find only one element using the custom data-testid', async () => {
+      const formItems = await DSFormLayoutBlockItemCO.getByTestIds('mytestid');
+      const howMany = await formItems.length;
+      await expect(howMany).toEqual(1);
+    });
+  });
+
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-9918 - DSFormLayoutBlockItem: Form Validation, onBlur - Func test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSFormLayoutBlockItemCO.validationOnBlur.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('01: should populate the input with +20 characters, no error message should be displayed', async () => {
+        await browser.keys(Key.Tab);
+        await type('More than twenty char');
+        const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+        await expect(errorMessage).not.toBeDisplayed();
+      });
+      it('02: should display error message when performing the OnBlur with TAB', async () => {
+        await browser.keys(Key.Tab);
+        const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+        const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+        const errorMessages = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toBeDisplayed();
+        await expect(errorMessages).toEqual(1);
+      });
+      it('03: should display the second error message when performing the OnBlur with CLICK', async () => {
+        await type('More than twenty char');
+        const thirdInput = await DSFormLayoutBlockItemCO.getTextInput(2);
+        await thirdInput.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(2);
+      });
+      it('04: should remove error message after fixing the cause when performing the OnBlur with CLICK', async () => {
+        const firstInput = await DSFormLayoutBlockItemCO.getTextInput(0);
+        await firstInput.click();
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Tab);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('05: should remove error message after fixing the cause when performing the OnBlur with TAB', async () => {
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Tab);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+      it('06: should not display error message until performing the OnBlur (checkbox)', async () => {
+        const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+        const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+        await checkbox2.click();
+        await checkbox.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+      it('07: should  display error message when performing the OnBlur with TAB (checkbox)', async () => {
+        await browser.keys([Key.Shift, Key.Tab]);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('08: should fix the error but still display it until performing the OnBlur', async () => {
+        await browser.keys(Key.Tab);
+        await browser.keys(Key.Space);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('09: should stop displaying the error message after performing the OnBlur with mouse', async () => {
+        const firstInput = await DSFormLayoutBlockItemCO.getTextInput(0);
+        await firstInput.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+    });
+  }
+
+  describe('PUI-9919 - DSFormLayoutBlockItem: Form Validation, onChange - Func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnChange.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should populate the input with less than 20 characters, no error message should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await type('More than');
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('02: should display error message when more than 20 chars are present onChange', async () => {
+      await type(' twenty char');
+      const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+      const errorMessages = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toBeDisplayed();
+      await expect(errorMessages).toEqual(1);
+    });
+    it('03: should remove error message just after fixing the cause', async () => {
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+    it('04: should not display an error message when checking just one checkbox', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      await checkbox.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+    it('05: should display after checking the second checkbox', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(1);
+    });
+    it('06: should remove the error message after unchecking one checkbox', async () => {
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+  });
+
+  // Unskip after PUI9917 gets fixed
+
+  describe('PUI-9920 - DSFormLayoutBlockItem: Form Validaiton, onSubmit - Func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnSubmit.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should populate the input with less than 20 characters, no error message should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await type('More than twenty chars');
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('02: should check two checkbox, no error message should be displayed', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      await checkbox.click();
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('03: should press submit and errors should display, focus to first errored input', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(3);
+    });
+    it('04: should fix first issue and display the error until Submit is pressed', async () => {
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(3);
+    });
+    it('05: should press submit. First error fixed focus to second errored input', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(2);
+    });
+    it('06: should fix first issue and press submit. One error remaining', async () => {
+      await type('hola@hello.com');
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      await expect(errorMessage).toEqual(1);
+      await expect(checkbox).toBeFocused();
+    });
+    it('07: should fix last issue and dont press submit. One error remaining.', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      await checkbox.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(1);
+    });
+    it('08: should press submit. No errors remaining', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+  });
+}