dimsum-e2e-tests 1.0.0-rc.1

package/ds-toggle/DSToggle.func.spec.js

@@ -0,0 +1,124 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSToggleCO from './DSToggleCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6759 - DSControlledToggle:: states on/off', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSToggleCO.getToggle()).waitForExist();
+    });
+    it('should change state to ON', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      const toggleState = await DSToggleCO.getToggleState('ON');
+      await expect(toggleState).toBeDisplayed();
+    });
+    it('should change state to OFF', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+  });
+  describe('PUI-6760 - DSControlledToggle:: states on/off - keyboard navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSToggleCO.getToggle()).waitForExist();
+    });
+    it('toggle should be focused', async () => {
+      await browser.keys(Key.Tab);
+      const toggleComponent = await DSToggleCO.getToggleFocuseableByDataTestId('my-toggle');
+      await expect(toggleComponent).toBeFocused();
+    });
+    it('should change state to ON (Enter)', async () => {
+      await browser.keys(Key.Enter);
+      const toggleState = await DSToggleCO.getToggleState('ON');
+      await expect(toggleState).toBeDisplayed();
+    });
+    it('should change state to OFF (Space)', async () => {
+      await browser.keys(Key.Space);
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+    it('should change state to ON (Space)', async () => {
+      await browser.keys(Key.Space);
+      const toggleState = await DSToggleCO.getToggleState('ON');
+      await expect(toggleState).toBeDisplayed();
+    });
+  });
+  describe('PUI-6761 - DSControlledToggle:: disabled state', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSToggleCO.getToggle()).waitForExist();
+    });
+    it('should not change state in disabled toggle', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+  });
+  describe('PUI-6762 - DSControlledToggle:: read only state', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSToggleCO.getToggle()).waitForExist();
+    });
+    it('should display tooltip in read only toggle (mouse over)', async () => {
+      await mouseOver(await DSToggleCO.getToggle(), 30, 10);
+      const tooltip = await DSToggleCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+    });
+    it('should display tooltip in read only toggle (keyboard focus)', async () => {
+      await mouseOver(await DSToggleCO.getToggle(), 300, 100);
+      await browser.keys(Key.Tab);
+      const toggleComponent = await DSToggleCO.getToggleFocuseable();
+      const tooltip = await DSToggleCO.getTooltip();
+      await expect(toggleComponent).toBeFocused();
+      await expect(tooltip).toBeDisplayed();
+    });
+    it('should not change state on [Enter] key press', async () => {
+      await browser.keys(Key.Enter);
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+    it('should not change state on [Space] key press', async () => {
+      await browser.keys(Key.Space);
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+    it('should not change state on click', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      const toggleState = await DSToggleCO.getToggleState('OFF');
+      await expect(toggleState).toBeDisplayed();
+    });
+  });
+  describe('PUI-8814 - DSControlledToggle:: Tabbing', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.showOffURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSToggleCO.getToggle()).waitForExist();
+    });
+    it('should tab through the basic toggles to the last basic toggle', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const toggle = await DSToggleCO.getToggleFocuseableByIndex(2);
+      await expect(toggle).toBeFocused();
+    });
+    it('should tab through the readonly toggles to the last readonly toggle', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const toggle = await DSToggleCO.getToggleFocuseableByIndex(5);
+      await expect(toggle).toBeFocused();
+    });
+    it('should tab and skip all three disabled toggles to the first enabled toggle, next row', async () => {
+      await browser.keys(Key.Tab);
+      const toggle = await DSToggleCO.getToggleFocuseableByIndex(9);
+      await expect(toggle).toBeFocused();
+    });
+  });
+}

package/ds-toggle/DSToggle.visual.spec.js

@@ -0,0 +1,55 @@
+import DSToggleCO from './DSToggleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6757 - DSControlledToggle - Visual Test - showcase', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.showOffURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display all DSControlledToggle styles correctly', async () => {
+      await (await DSToggleCO.getToggleByIndex(0)).waitForExist();
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('show-off'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6758 - DSControlledToggle - Visual Test - Label', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToggleCO.labelOnOff.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the label there correctly', async () => {
+      await (await DSToggleCO.getToggle()).waitForExist();
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('label-there'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the label hello correctly', async () => {
+      await (await DSToggleCO.getToggle()).click();
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('label-hello'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9741 - DSControlledToggle - Visual Test - Behind Modal Slide', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSToggleCO.behindModalSlideTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the modal slide (50% width) above the toggle there correctly', async () => {
+      const toggleModalSlide = await DSToggleCO.getToggleModalSlide();
+      await toggleModalSlide.click();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(500);
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('toggle-modalslide-half'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the modal slide (full width) above the toggle correctly', async () => {
+      const enableFullWidth = await DSToggleCO.getToggleFullWidth();
+      await enableFullWidth.click();
+      const toggleModalSlide = await DSToggleCO.getToggleModalSlide();
+      await toggleModalSlide.click();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(500);
+      const snapshot = await browser.checkSnapshot(DSToggleCO.snapshotPath('toggle-modaslide-full'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-toggle/DSToggleCO.js

@@ -0,0 +1,61 @@
+import { PATH_E2E_TOGGLE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSToggleCO extends PageObject {
+  static showOffURL = new Urlbuilder(PATH_E2E_TOGGLE, 'show-off-test');
+
+  static basicURL = new Urlbuilder(PATH_E2E_TOGGLE, 'basic-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_TOGGLE, 'disabled-test');
+
+  static readOnly = new Urlbuilder(PATH_E2E_TOGGLE, 'read-only-test');
+
+  static labelOnOff = new Urlbuilder(PATH_E2E_TOGGLE, 'label-on-off-test');
+
+  static behindModalSlideTest = new Urlbuilder(PATH_E2E_TOGGLE, 'behind-modal-slide-test');
+
+  static async getToggle() {
+    return $('[data-testid="ds-controlled-toggle"]');
+  }
+
+  static async getToggleByIndex(index) {
+    return $$('[data-testid="ds-controlled-toggle"]')[index];
+  }
+
+  static async getToggleFocuseable() {
+    return $('[data-testid="ds-controlled-toggle-checkbox"]');
+  }
+
+  static async getToggleFocuseableByDataTestId(datatestid) {
+    return $(`[data-testid="${datatestid}"]`);
+  }
+
+  static async getToggleFocuseableByIndex(index) {
+    return $$('[data-testid="ds-controlled-toggle-checkbox"]')[index];
+  }
+
+  static async getToggleState(state) {
+    return $(`//div/div[contains(text(), "${state}")]`);
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+
+  static async getToggleModalSlide() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getToggleFullWidth() {
+    return $('[data-testid="toggle-full-width"]');
+  }
+
+  static async activeElementId() {
+    const element = await browser.execute(() => document.activeElement.dataset.testid);
+    return element;
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSToggle', example, 'ds-toggle');
+  }
+}

package/ds-toolbar/Toolbar.func.spec.js

@@ -0,0 +1,26 @@
+import ToolbarCO from './ToolbarCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4327 - Toolbar, auto close after copying', () => {
+    before(async () => {
+      const errorOnGo = await ToolbarCO.pui3487.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Datagrid should be displayed', async () => {
+      const toolbarBtn = await ToolbarCO.getToolbarButton(0);
+      await expect(toolbarBtn).toBeDisplayed();
+    });
+    it('should display tooltip', async () => {
+      await (await ToolbarCO.getToolbarButton(0)).moveTo();
+      await (await ToolbarCO.getToolbarButton(0)).click();
+      const phoneIcon = await ToolbarCO.getPhoneIcon();
+      await expect(phoneIcon).toBeDisplayed();
+    });
+    it('tooltip should be closed after copying', async () => {
+      await (await ToolbarCO.getPhoneIcon()).click();
+      await (await ToolbarCO.getCopyBtn()).click();
+      const phoneIcon = await ToolbarCO.getPhoneIcon();
+      await expect(phoneIcon).not.toBeExisting();
+    });
+  });
+}

package/ds-toolbar/ToolbarCO.js

@@ -0,0 +1,23 @@
+import { PATH_E2E_DATA_GRID } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ToolbarCO extends PageObject {
+  static pui3487 = new Urlbuilder(PATH_E2E_DATA_GRID, 'pui-3487-icon-bar-with-ddwn');
+
+  static async getToolbarButton(index) {
+    return $$('[data-testid="toolbar-trigger"]')[index];
+  }
+
+  static async getPhoneIcon() {
+    return $('#phone-icon');
+  }
+
+  static async getCopyBtn() {
+    return $('[data-testid="dg-toolbar-btn"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Toolbar', example, 'ds-toolbar');
+  }
+}

package/ds-toolbar-v2/DSToolbarV2.func.spec.js

@@ -0,0 +1,61 @@
+import { Key } from 'webdriverio';
+import DSToolbarV2CO from './DSToolbarV2CO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
+  describe('PUI-8955 - Toolbar, click interaction', () => {
+    before(async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should focus the clicked item', async () => {
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await toolbarItem.click();
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should change focus when clicking other item', async () => {
+      const firstToolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(1);
+      await toolbarItem.click();
+      await expect(toolbarItem).toBeFocused();
+      await expect(firstToolbarItem).not.toBeFocused();
+    });
+  });
+  describe('PUI-8956 - Toolbar, keyboard interaction', () => {
+    before(async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should focus first toolbar item after tab is pressed', async () => {
+      await browser.keys(Key.Tab);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should move focus using arrow keys', async () => {
+      await browser.keys(Key.ArrowRight);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(1);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should cyrcle back to start after pressing RightArrow from the last item', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should focus out of the toolbar with tab', async () => {
+      await browser.keys(Key.Tab);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem2 = await DSToolbarV2CO.getToolbarItem(1);
+      const toolbarItem3 = await DSToolbarV2CO.getToolbarItem(2);
+      const toolbarItem4 = await DSToolbarV2CO.getToolbarItem(3);
+      await expect(toolbarItem).not.toBeFocused();
+      await expect(toolbarItem2).not.toBeFocused();
+      await expect(toolbarItem3).not.toBeFocused();
+      await expect(toolbarItem4).not.toBeFocused();
+    });
+  });
+}

package/ds-toolbar-v2/DSToolbarV2.visual.spec.js

@@ -0,0 +1,94 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSToolbarV2CO from './DSToolbarV2CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8958 -  Toolbar V2, left aligned', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.aligneLeftURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 left aligned should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-left-aligned'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8960 -  Toolbar V2, compact', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.compactURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 compact should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-compact'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8962 -  Toolbar V2, responsive', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.responsiveURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 responsive  should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-responsive'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8959 -  Toolbar V2, no depth', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.withoutDepthURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 without depth should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await mouseOver(await DSToolbarV2CO.getToolbarItem(0));
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-without-depth'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8961 -  Toolbar V2, with groups', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.groupsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 with groups should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-with-groups'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8957 -  Toolbar V2, basic interaction states', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 styles (hover one and focus other) be displayed correctly', async () => {
+      await browser.eyesOpen();
+      const toolbarItem1 = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem2 = await DSToolbarV2CO.getToolbarItem(1);
+      await toolbarItem1.click();
+      await mouseOver(toolbarItem2);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-basic-two-interacted'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('Toolbar v2 styles (hover and focus) be displayed correctly', async () => {
+      await browser.eyesOpen();
+      const toolbarItem1 = await DSToolbarV2CO.getToolbarItem(0);
+      await toolbarItem1.click();
+      await mouseOver(toolbarItem1);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-basic-one-interacted'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-toolbar-v2/DSToolbarV2CO.js

@@ -0,0 +1,31 @@
+import { PATH_TOOLBAR_V2, PATH_E2E_TOOLBAR_V2 } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSToolbarV2CO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'basic-e-2-e');
+
+  static aligneLeftURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'align-left-e-2-e');
+
+  static compactURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'compact-e-2-e');
+
+  static fullexampleURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'full-example-e-2-e');
+
+  static groupsURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'groups-e-2-e');
+
+  static responsiveURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'responsive-e-2-e');
+
+  static withoutDepthURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'without-depth-e-2-e');
+
+  static async getToolbarWrapper() {
+    return $('[data-testid="ds-toolbar-wrapper"]');
+  }
+
+  static async getToolbarItem(index) {
+    return $$('[data-testid="ds-toolbar-item"] button')[index];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ToolbarV2', example, 'ds-toolbar-v2');
+  }
+}

package/ds-tooltip/DSTooltip.func.spec.js

@@ -0,0 +1,86 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSTooltipCO from './DSTooltipCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6740 - Tooltip, with custom title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on focus (Tab key)', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should close tooltip on Esc key press', async () => {
+      await browser.keys(Key.Escape);
+      await browser.pause(500);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip);
+    });
+    it('should display tooltip on mouse hover', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should display a title variant correctly', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 200);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-6972 - TooltipV1 - interactionType property: click', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.customContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be opened when trigger is clicked', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      const tooltip = await DSTooltipCO.getTooltipV1();
+      await triggerBtn.waitForDisplayed();
+      await triggerBtn.click();
+      await tooltip.waitForDisplayed();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('tooltip should be closed on Blur', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await triggerBtn.click({ x: 300 });
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+    it('tooltip should not be opened when trigger is hovered', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 30, 10);
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-6973 - TooltipV1 - interactionType property: hover', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicV1URL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be opened when trigger is hovered', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      const tooltip = await DSTooltipCO.getTooltipV1();
+      await triggerBtn.waitForDisplayed();
+      await mouseOver(triggerBtn, 60, 10);
+      await tooltip.waitForDisplayed();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('tooltip should be closed on mouseout', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 400);
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-tooltip/DSTooltip.visual.spec.js

@@ -0,0 +1,31 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSTooltipCO from './DSTooltipCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6739 - Tooltip visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      await (await DSTooltipCO.getTooltip()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTooltipCO.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8119 - Long word visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.longWord.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip with long word should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      const snapshot = await browser.checkSnapshot(DSTooltipCO.snapshotPath('tooltip-long-word'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-tooltip/DSTooltipCO.js

@@ -0,0 +1,44 @@
+import {
+  PATH_END_OF_LIFE_TOOLTIP_V2,
+  PATH_END_OF_LIFE_TOOLTIP,
+  PATH_TOOLTIP_V3,
+} from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSTooltipCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP_V2, 'basic');
+
+  static placementURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP_V2, 'placement');
+
+  static customContentURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP, 'custom-content');
+
+  static basicV1URL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP, 'basic');
+
+  static longWord = new Urlbuilder(PATH_TOOLTIP_V3, 'long');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tooltip', example);
+  }
+
+  // selectors
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip"]');
+  }
+
+  static async getTooltipArrow() {
+    return $('[data-testid="ds-tooltip-arrow"]');
+  }
+
+  static async getTooltipTriggers(index) {
+    return $$('[data-testid="button-wrapper"]')[index];
+  }
+
+  static async getTooltipTrigger() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getTooltipV1() {
+    return $('[data-testid="popper-container"]');
+  }
+}