dimsum-e2e-tests 3.22.0-next.36

package/ds-pills/DSPills.visual.spec.js

@@ -0,0 +1,74 @@
+import { mouseOver } from '../helpers';
+import DSPillsCO from './DSPillsCO';
+
+describe('Pills - visual test', () => {
+  describe('Pills with one character and size l', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.oneCharAndLargeSizeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display pill size l with one character', async () => {
+      await (await DSPillsCO.getRemovablePill()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot('atoms-dspills--basic-one-char-size-l');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('Pill with ten chars and size m', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.tenCharsAndMediumSizeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display pill size m with ten characters', async () => {
+      await (await DSPillsCO.getRemovablePill()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot('atoms-dspills--basic-ten-char-size-m');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+});
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6430 - Pills, Label Is Value - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.singleFixedLabelIsValue.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should change custom option correctly', async () => {
+      await (await DSPillsCO.dropdownPill()).click();
+      await (await DSPillsCO.getOption(2)).click();
+      const snapshot = await browser.checkSnapshot('pill-label-is-value-option-2-selected');
+      await expect(snapshot).toEqual(0);
+    });
+    it('should change custom option correctly1', async () => {
+      await (await DSPillsCO.dropdownPill()).click();
+      await (await DSPillsCO.getOption(1)).click();
+      const snapshot = await browser.checkSnapshot('pill-label-is-value-option-1-selected');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6613 - Pills, ReadOnly: visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a read only pill', async () => {
+      await (await DSPillsCO.getReadOnlyPill()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot('pill-read-only');
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tooltip', async () => {
+      const readOnlyInfoBtn = await DSPillsCO.getReadOnlyPillBtn();
+      await mouseOver(readOnlyInfoBtn);
+      await (await DSPillsCO.getReadOnlyPillTooltip()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot('pill-read-only-tooltip');
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display modal with more information', async () => {
+      const readOnlyPill = await DSPillsCO.getReadOnlyPill();
+      const readOnlyInfoBtn = await DSPillsCO.getReadOnlyPillBtn();
+      await readOnlyInfoBtn.click();
+      await mouseOver(readOnlyPill);
+      await (await DSPillsCO.getModal()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot('pill-read-only-modal');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-pills/DSPillsCO.js

@@ -0,0 +1,110 @@
+import { PATH_END_OF_LIFE_PILLS } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPillsCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'basic');
+
+  static hideURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'dropdown-hide');
+
+  static multiURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'multi');
+
+  static singleURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'single');
+
+  static defaultValue = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'default-value');
+
+  static readOnly = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'read-only');
+
+  static oneCharAndLargeSizeURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'one-char-and-large-size');
+
+  static tenCharsAndMediumSizeURL = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'ten-chars-and-medium-size');
+
+  static singleFixedLabelIsValue = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'fixed-single-label-is-value');
+
+  static singleFixedOptsLabelIsValue = new Urlbuilder(PATH_END_OF_LIFE_PILLS, 'single-fixed-options-label-is-value');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_PILLS, component);
+  }
+
+  static async getDropDownMenu() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getDropDownMenuInner() {
+    return $('[data-testid="popper-container"]').$('div');
+  }
+
+  static async getVisibleDropDownMenu() {
+    return $('[data-testid="em-ds-menu"]');
+  }
+
+  static async closeButton() {
+    return $('[data-testid="remove-pill-button"]');
+  }
+
+  static async dropdownButton() {
+    return $('[data-testid="dropdown-pill-button"]');
+  }
+
+  static async dropdownPill() {
+    return $('[data-testid="dropdown-pill"]');
+  }
+
+  static async getBottomSpan() {
+    return $('[data-testid="bottom-span"]');
+  }
+
+  static async getOption(option) {
+    return $(`#option${option}`);
+  }
+
+  static async getRemovablePill() {
+    return $('[data-testid="removable-pill"]');
+  }
+
+  static async getRemovablePillText(text) {
+    return $(`//div[@data-testid="removable-pill"]/span[contains(text(),"${text}")]`);
+  }
+
+  static async getInputPill() {
+    return $('[data-testid="input-pill"]');
+  }
+
+  static async getReadOnlyPill() {
+    return $('[data-testid="read-only-pill"]');
+  }
+
+  static async getReadOnlyPillBtn() {
+    return $('[data-testid="read-only-info-btn"]');
+  }
+
+  static async getReadOnlyPillTooltip() {
+    return $('[data-testid="read-only-info-btn"]');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-modal"]');
+  }
+
+  static async getCheckbox(index) {
+    return $$('[data-testid="ds-checkbox"]')[index];
+  }
+
+  static async getLabel(option) {
+    return $(`//span[contains(text(), "${option}")]`);
+  }
+
+  static async blur() {
+    await browser.execute(() => document.activeElement.blur());
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Pills', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-pills-v2/DSPills.axe-core.func.spec.js

@@ -0,0 +1,136 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSPillsV2CO from './DSPillsV2CO';
+import { axeCoreCheck, type } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-11495 - [PillsV2] Dropdown pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.dropdownURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate dropdown pills accessibility with axe-core', async () => {
+      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      await dropDownTrigger.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate dropdown pills accessibility with axe-core - dropdown menu opened', async () => {
+      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      await dropDownTrigger.click();
+      const dropDownMenu = await DSPillsV2CO.dropDownMenu();
+      await dropDownMenu.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  // unskip when PUI-11479 is fixed
+  describe.skip('PUI-11496 - [PillsV2] Input pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.inputURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate input pills accessibility with axe-core', async () => {
+      const inputPill = await DSPillsV2CO.getInputByIndex(0);
+      await inputPill.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate input pills accessibility with axe-core - input filled', async () => {
+      const inputPill = await DSPillsV2CO.getInputByIndex(0);
+      await inputPill.click();
+      await type('Accessibility Test');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11497 - [PillsV2] ReadOnly pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.readonlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate read only pills accessibility with axe-core', async () => {
+      const readonlyPill = await DSPillsV2CO.getIconByIndex(0);
+      await readonlyPill.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate read only pills accessibility with axe-core: focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11498 - [PillsV2] Label pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.labelURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate label pills accessibility with axe-core', async () => {
+      const labelPill = await DSPillsV2CO.getIconByIndex(0);
+      await labelPill.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate label pills accessibility with axe-core: focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11499 - [PillsV2] Value pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.valueURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate value pills accessibility with axe-core', async () => {
+      const valuePill = await DSPillsV2CO.getIconByIndex(0);
+      await valuePill.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate value pills accessibility with axe-core: focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11500 - [PillsV2] Small pills - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.smallURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate small pills accessibility with axe-core', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11501 - [PillsV2] Removable pills - Axe-core Removable', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate removable pills accessibility with axe-core', async () => {
+      const pillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(1);
+      await pillCloseBtn.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate removable pills accessibility with axe-core: focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-pills-v2/DSPills.func.spec.js

@@ -0,0 +1,46 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSPillsV2CO from './DSPillsV2CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8226 - Pills v2, keyboard navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should hide the dropdown when the trigger is no longer visible', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowRight);
+      const pill = await DSPillsV2CO.getCloseButtonByIndex(4);
+      await expect(pill).toBeFocused();
+    });
+    it('should hide the dropdown when the trigger is no longer visible', async () => {
+      await browser.keys(Key.ArrowLeft);
+      const pill = await DSPillsV2CO.getCloseButtonByIndex(3);
+      await expect(pill).toBeFocused();
+    });
+  });
+  describe('PUI-8358 - Pills v2, removable pills: remove', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should have 6 pills by default', async () => {
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      await expect(howManyPills).toEqual(6);
+    });
+    it('should remove 2 pills leaving 4', async () => {
+      const pillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(1);
+      await pillCloseBtn.click();
+      const otherPillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(3);
+      await otherPillCloseBtn.click();
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      await expect(howManyPills).toEqual(4);
+    });
+  });
+}

package/ds-pills-v2/DSPills.visual.spec.js

@@ -0,0 +1,93 @@
+/* eslint-disable max-lines */
+import DSPillsV2CO from './DSPillsV2CO';
+import { mouseOver, type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8353 - Pills v2, dropdown pills basic layout', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.dropdownURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the dropdown pills', async () => {
+      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      await dropDownTrigger.click();
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-dropdown'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8356 - Pills v2, input pills basic layout', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.inputURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the input pills', async () => {
+      const inputPill = await DSPillsV2CO.getInputByIndex(0);
+      await inputPill.click();
+      await type('Hello World');
+      const otherInputPill = await DSPillsV2CO.getInputByIndex(1);
+      await otherInputPill.click();
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-input'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8354 - Pills v2, readonly pills basic layout', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.readonlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the readonly pills', async () => {
+      const readonlyPill = await DSPillsV2CO.getIconByIndex(0);
+      const otherReadonlyPill = await DSPillsV2CO.getIconByIndex(2);
+      await readonlyPill.click();
+      await mouseOver(otherReadonlyPill);
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-readonly'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8355 - Pills v2, value pills basic layout', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.valueURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the value pills', async () => {
+      const valuePill = await DSPillsV2CO.getIconByIndex(0);
+      const otherValuePill = await DSPillsV2CO.getIconByIndex(3);
+      await valuePill.click();
+      await mouseOver(otherValuePill);
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-value'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8357 - Pills v2, small pills basic layout', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.smallURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the value pills', async () => {
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-small'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8359 - Pills v2, removable pills: remove', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.removableURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should remove 2 pills leaving 4', async () => {
+      const pillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(1);
+      await pillCloseBtn.click();
+      const otherPillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(3);
+      await otherPillCloseBtn.click();
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-removable'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should reset and remove 1 pill leaving 5', async () => {
+      const resetBtn = await DSPillsV2CO.getResetBtn();
+      await resetBtn.click();
+      const pillCloseBtn = await DSPillsV2CO.getCloseButtonByIndex(4);
+      await pillCloseBtn.click();
+      const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-removable-bis'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-pills-v2/DSPillsV2CO.js

@@ -0,0 +1,70 @@
+import { PATH_E2E_PILLS_V2 } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSPillsV2CO extends PageObject {
+  // Desktop
+  static removableURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'removable-pill-test');
+
+  static valueURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'value-pill-test');
+
+  static dropdownURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'dropdown-pill-test');
+
+  static inputURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'input-pill-test');
+
+  static smallURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'small-pill-test');
+
+  static readonlyURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'read-only-pill-test');
+
+  static labelURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'label-pill-test');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_E2E_PILLS_V2, component);
+  }
+
+  static async getCloseButtons() {
+    return $$('[data-testid="ds-pill-close-icon"]');
+  }
+
+  static getCloseButtonByIndex = async (index) => getElementByIndex(this.getCloseButtons, index);
+
+  static async getDDChevrons() {
+    return $$('[data-testid="ds-pill-dropdown-chevron"]');
+  }
+
+  static getChevronbyIndex = async (index) => getElementByIndex(this.getDDChevrons, index);
+
+  static async getInputs() {
+    return $$('[data-testid="ds-pill-input"]');
+  }
+
+  static getInputByIndex = async (index) => getElementByIndex(this.getInputs, index);
+
+  static async getIcons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getIconByIndex = async (index) => getElementByIndex(this.getIcons, index);
+
+  static async getPills() {
+    return $$(' [data-testid="ds-pill-wrapper"]');
+  }
+
+  static getPillByIndex = async (index) => getElementByIndex(this.getPills, index);
+
+  static async getResetBtn() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async dropDownMenu() {
+    return $('[data-testid="dropdown-menu-listbox"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Pills', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-progress-indicator/DSProgressIndicator.func.spec.js

@@ -0,0 +1,14 @@
+import DSProgressIndicatorCO from './DSProgressIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('Progress Indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show basic progress indicator', async () => {
+      const progressIndicator = await DSProgressIndicatorCO.getUploadLabel();
+      await expect(progressIndicator).toBeDisplayed();
+    });
+  });
+}

package/ds-progress-indicator/DSProgressIndicator.visual.spec.js

@@ -0,0 +1,15 @@
+import DSProgressIndicatorCO from './DSProgressIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('Progress Indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('basic progress indicator', async () => {
+      await (await DSProgressIndicatorCO.getUploadLabel()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSProgressIndicatorCO.snapshotPath('progressindicator-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-progress-indicator/DSProgressIndicatorCO.js

@@ -0,0 +1,24 @@
+import { PATH_PROGRESS_INDICATOR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSProgressIndicatorCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_PROGRESS_INDICATOR, 'basic');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_PROGRESS_INDICATOR, component);
+  }
+
+  static async getUploadLabel() {
+    return $('//div[contains(text(), "upload")]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ProgressIndicator', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-query-builder/DSQueryBuilder.error-states.spec.js

@@ -0,0 +1,49 @@
+import { Key } from 'webdriverio';
+import DSQueryBuilderCO from './DSQueryBuilderCO';
+import { mouseOver, type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7143 - QueryBuilder - Error States', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.errorStatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display error icon when more than 4 chars are entered', async () => {
+      await (await DSQueryBuilderCO.getTextBox(0)).click();
+      await type('12345');
+      const errorIcon = await DSQueryBuilderCO.getErrorIcon(0);
+      await expect(errorIcon).toBeDisplayedInViewport();
+    });
+    it('should not display error icon with 4 chars entered', async () => {
+      await browser.keys(Key.Backspace);
+      const errorIcon = await DSQueryBuilderCO.getErrorIcon(0);
+      await expect(errorIcon).not.toBeDisplayedInViewport();
+    });
+    it('should display error when "31" is entered in the input field', async () => {
+      await (await DSQueryBuilderCO.getTextBox(1)).click();
+      await type('31');
+      const errorIcon = await DSQueryBuilderCO.getErrorIcon();
+      await expect(errorIcon).toBeDisplayedInViewport();
+    });
+    it('should focus on the error icon when tab is pressed', async () => {
+      await browser.keys(Key.Tab);
+      const errorIcon = await DSQueryBuilderCO.getErrorIcon();
+      await expect(errorIcon).toBeFocused();
+    });
+    it('should have the tooltip displayed', async () => {
+      const tooltip = await DSQueryBuilderCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should stop focusing on the error icon when tab is pressed', async () => {
+      await browser.keys(Key.Tab);
+      const errorICon = await DSQueryBuilderCO.getErrorIcon();
+      await expect(errorICon).not.toBeFocused();
+    });
+    it('should display a tooltip with an error description', async () => {
+      const errorIcon = await DSQueryBuilderCO.getErrorIcon();
+      await mouseOver(errorIcon, 10, 15);
+      const tooltip = await DSQueryBuilderCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+  });
+}