dimsum-e2e-tests 1.0.0-rc.1

package/ds-pagination/DSPagination.visual.spec.js

@@ -0,0 +1,20 @@
+import DSPaginationCO from './DSPaginationCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10187 - Pagination, custom per-page and legend - Desktop', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPaginationCO.customPageSizeComponentTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display pagination with other component + legends instead of the per-page actionable', async () => {
+      await browser.eyesOpen();
+      const customButton = await DSPaginationCO.getCustomButton();
+      const customLegend = await DSPaginationCO.getCustomLegend();
+      await customButton.waitForDisplayed();
+      await customLegend.waitForDisplayed();
+      await customButton.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSPaginationCO.snapshotPath('dspagination-custom-per-page'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-pagination/DSPaginationCO.js

@@ -0,0 +1,40 @@
+import { PATH_E2E_PAGINATION } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPaginationCO extends PageObject {
+  // Desktop
+  static customPageSizeComponentTest = new Urlbuilder(PATH_E2E_PAGINATION, 'custom-page-size-test');
+
+  static getUrl(component = 'custom-page-size-test') {
+    return PageObject.getUrl(PATH_E2E_PAGINATION, component);
+  }
+
+  static getPaginationNav = () => $('[data-testid="data-table-pagination-container"]');
+
+  static getMenusTrigger = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]');
+
+  static getElemsPerPageBtn = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]')[0].$('button');
+
+  static getPagesBtn = async () => $$('[data-testid="dropdown-menu-trigger-wrapper"]')[1].$('button');
+
+  static getPrevPageBt = async () => $('[data-testid="data-table-pagination-prev-button"]');
+
+  static getNextPageBt = async () => $('[data-testid="data-table-pagination-next-button"]');
+
+  static getDropDownMenu = async () => $('[data-testid="dropdown-menu-listbox"]');
+
+  static getOpenMenuOpts = async () => $$('[data-testid="ds-menu-item"]');
+
+  static getSegPagSpans = async () => (await this.getPagesMenu()).$$(' div > span');
+
+  static getSegPagContent = async () => $('[data-testid="DS-SimpleTruncateText"]');
+
+  static getCustomButton = async () => $('[data-testid="ds-button"]');
+
+  static getCustomLegend = async () => $('[data-testid="ds-typography-element"]');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageNumber', example);
+  }
+}

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

@@ -0,0 +1,19 @@
+import DSPillsCO from './DSPillsCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('LabeledDropdownSinglePill', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.singleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display labeled dropdown pill with option selected', async () => {
+      const snapshot = await browser.checkSnapshot(DSPillsCO.snapshotPath('labeled-dropdown-single-pill'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should remove option and display an -', async () => {
+      await (await DSPillsCO.closeButton()).click();
+      const snapshot = await browser.checkSnapshot(DSPillsCO.snapshotPath('labeled-dropdown-single-pill--no-value'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,125 @@
+/* eslint-disable max-lines */
+import DSPillsCO from './DSPillsCO';
+import { isChecked } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  if (browser.capabilities.browserName === 'Chrome') {
+    describe('PUI-6319 - Pills, pill behavior on scroll', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSPillsCO.hideURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should hide the dropdown when the trigger is no longer visible', async () => {
+        const ddPill = await DSPillsCO.dropdownPill();
+        await ddPill.click();
+        await (await DSPillsCO.getBottomSpan()).scrollIntoView();
+        const dropDownMenuInner = await DSPillsCO.getDropDownMenuInner();
+        await expect(dropDownMenuInner).not.toBeDisplayedInViewport();
+      });
+    });
+  }
+  describe('Pills, multi', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.multiURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should select multiple options and display overflow pill', async () => {
+      await (await DSPillsCO.dropdownButton()).click();
+      await (await DSPillsCO.getOption(1)).click();
+      await (await DSPillsCO.getOption(2)).click();
+      await (await DSPillsCO.getOption(3)).click();
+      await (await DSPillsCO.getOption(4)).click();
+      const label = await DSPillsCO.getLabel('+ 1');
+      await expect(label).toBeDisplayed();
+    });
+  });
+  describe('PUI-4750 Pills, default value', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.defaultValue.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display custom text when removing a pill', async () => {
+      await (await DSPillsCO.dropdownButton()).click();
+      await (await DSPillsCO.getOption(2)).click();
+      await (await DSPillsCO.closeButton()).click();
+      const label = await DSPillsCO.getLabel('All');
+      await expect(label).toBeDisplayed();
+    });
+  });
+  describe('PUI-5753 - Pills, default value', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.singleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display custom text when removing a pill', async () => {
+      await (await DSPillsCO.dropdownButton()).click();
+      await (await DSPillsCO.getOption(4)).click();
+      const removablePillTxt = await DSPillsCO.getRemovablePillText('option 4');
+      await expect(removablePillTxt).toBeDisplayed();
+      const dropDownMenu = await DSPillsCO.getDropDownMenu();
+      await expect(dropDownMenu).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-6288 - Pills, Single Fixed Options:: Label is Value prop', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.singleFixedLabelIsValue.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display second option as labelvalue', async () => {
+      await (await DSPillsCO.dropdownPill()).click();
+      await (await DSPillsCO.getOption(2)).click();
+      const dropDownPill = await DSPillsCO.dropdownPill();
+      await expect(dropDownPill).toHaveTextContaining('Custom text option 2');
+    });
+    it('should display first option as labelvalue', async () => {
+      await (await DSPillsCO.dropdownPill()).click();
+      await (await DSPillsCO.getOption(1)).click();
+      const dropDownPill = await DSPillsCO.dropdownPill();
+      await expect(dropDownPill).toHaveTextContaining('Custom text option 1');
+    });
+  });
+  describe('PUI-7035 - Pills, multi: checkbox integration', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsCO.multiURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open menu correctly', async () => {
+      const dropdownPill = await DSPillsCO.dropdownPill();
+      await dropdownPill.click();
+      const visibleDropDownMenu = await DSPillsCO.getVisibleDropDownMenu();
+      await expect(visibleDropDownMenu).toBeDisplayedInViewport();
+    });
+    it('should check an option clicking on label and checkbox', async () => {
+      const checkbox1 = await DSPillsCO.getCheckbox(0);
+      const checkbox2 = await DSPillsCO.getCheckbox(1);
+      const removablePill1 = await DSPillsCO.getRemovablePillText('option 1');
+      const removablePill2 = await DSPillsCO.getRemovablePillText('option 2');
+      const getLabel2 = await DSPillsCO.getOption(2);
+      await checkbox1.click();
+      await getLabel2.click();
+      await expect(removablePill1).toBeDisplayedInViewport();
+      await expect(removablePill2).toBeDisplayedInViewport();
+      const checkBox1Checked = await isChecked(checkbox1);
+      const checkBox2Checked = await isChecked(checkbox2);
+      await expect(checkBox1Checked).toBe(true);
+      await expect(checkBox2Checked).toBe(true);
+    });
+    it('should unselect options correctly from the menu', async () => {
+      const checkbox2 = await DSPillsCO.getCheckbox(1);
+      const removablePill2 = await DSPillsCO.getRemovablePillText('option 2');
+      await checkbox2.click();
+      await expect(removablePill2).not.toBeDisplayedInViewport();
+      const checkBox2Checked = await isChecked(checkbox2);
+      await expect(checkBox2Checked).toBe(false);
+    });
+    it('should unselect options correctly from the pills', async () => {
+      const checkbox1 = await DSPillsCO.getCheckbox(0);
+      const removablePill1 = await DSPillsCO.getRemovablePillText('option 1');
+      await (await DSPillsCO.closeButton()).click();
+      await expect(removablePill1).not.toBeDisplayedInViewport();
+      await (await DSPillsCO.dropdownPill()).click();
+      const checkBox1Checked = await isChecked(checkbox1);
+      await expect(checkBox1Checked).toBe(false);
+    });
+  });
+}

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);
+    });
+  });
+}