dimsum-e2e-tests 1.0.0-rc.1

package/ds-side-panel/DSSidePanelCO.js

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_SIDE_PANEL, PATH_SLIDE_PANEL_TEMPLATE, PATH_E2E_SIDEPANEL } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSidePanelCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_SIDE_PANEL, 'basic');
+
+  static addtionalActionURL = new Urlbuilder(PATH_SIDE_PANEL, 'additional-action');
+
+  static template = new Urlbuilder(PATH_SLIDE_PANEL_TEMPLATE, 'basic');
+
+  static leftSide = new Urlbuilder(PATH_SIDE_PANEL, 'left-side');
+
+  static leftSideNonGridInfluencer = new Urlbuilder(PATH_SIDE_PANEL, 'left-side-non-grid-influencer');
+
+  static dynamicOpenPropsQuickChange = new Urlbuilder(PATH_E2E_SIDEPANEL, 'pui-11612-dynamic-open-props-quick-change');
+
+  static innerRef = new Urlbuilder(PATH_E2E_SIDEPANEL, 'inner-ref');
+
+  // Selectors
+
+  static async getCloseBtn() {
+    return $('[data-testid="btn-close-slide-panel"]');
+  }
+
+  static async getToggleBtn() {
+    return $('[data-testid="toggle-btn"]');
+  }
+
+  static async getSlideBtn() {
+    return $('[data-testid="btn-slide-footer"]');
+  }
+
+  static async getActionBtn() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getLastKeyPressedMessage() {
+    return $('[data-testid="key-pressed"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('SidePanel', example);
+  }
+}

package/ds-side-panel/DSSlidePanel.visual.spec.js

@@ -0,0 +1,61 @@
+import DSSidePanelCO from './DSSidePanelCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4324 - SidePanel, visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSidePanelCO.template.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display sidePanel in desktop page template', async () => {
+      await browser.eyesOpen();
+      await (await DSSidePanelCO.getCloseBtn()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSSidePanelCO.snapshotPath('additional-action'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9245 - SidePanel, left side - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSidePanelCO.leftSide.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display sidePanel open from left', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSSidePanelCO.getToggleBtn();
+      await toggleBtn.waitForDisplayed();
+      await toggleBtn.click();
+      await (await DSSidePanelCO.getCloseBtn()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSSidePanelCO.snapshotPath('side-panel-left-side'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9246 - SidePanel, left side non grid influencer - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSidePanelCO.leftSideNonGridInfluencer.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display sidePanel open from left and does not have to influence in grid', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSSidePanelCO.getToggleBtn();
+      await toggleBtn.waitForDisplayed();
+      await toggleBtn.click();
+      await (await DSSidePanelCO.getCloseBtn()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSSidePanelCO.snapshotPath('side-panel-left-side'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-11684 - SidePanel, Dynamic Open Props - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSidePanelCO.dynamicOpenPropsQuickChange.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display sidePanel opened', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSSidePanelCO.getCloseBtn();
+      await toggleBtn.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSSidePanelCO.snapshotPath('side-panel-dynamic-open-props-quick-change'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-skeleton/DSSkeleton.js

@@ -0,0 +1,11 @@
+import { PATH_SKELETON } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSkeleton extends PageObject {
+  static basicURL = new Urlbuilder(PATH_SKELETON, 'basic');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Skeleton', example, 'ds-skeleton');
+  }
+}

package/ds-skipTo/DSSkipTo.func.spec.js

@@ -0,0 +1,85 @@
+import { Key } from 'webdriverio';
+import DSSkipToCO from './DSSkipToCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10213 - SkipTo:: Basic, keyboard', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSkipToCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('02: Content should be focused after activating the skipTo with enter', async () => {
+      const mainContent = await DSSkipToCO.getMainContent();
+      await browser.keys(Key.Enter);
+      await expect(mainContent).toBeFocused();
+    });
+  });
+
+  describe('PUI-10214 - SkipTo:: Basic, mouse', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSkipToCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('02: Content should be focused after activating the skipTo with mouse', async () => {
+      const mainContent = await DSSkipToCO.getMainContent();
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await skipToBtn.click();
+      await expect(mainContent).toBeFocused();
+    });
+  });
+
+  describe('PUI-10215 - SkipTo:: Custom Message', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSkipToCO.message.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      const skipToText = await skipToBtn.getText();
+      await expect(skipToBtn).toBeFocused();
+      await expect(skipToText).toBe('My custom message');
+    });
+    it('02: Content should be focused after activating the skipTo with enter', async () => {
+      const mainContent = await DSSkipToCO.getMainContent();
+      await browser.keys(Key.Enter);
+      await expect(mainContent).toBeFocused();
+    });
+  });
+
+  describe('PUI-10216 - SkipTo:: GlobalHeader, tab from SkipTo', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSkipToCO.globalHeaderExample.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('02: Next content should be focused after tabbing out of the skipTo', async () => {
+      const globalHeaderBtn = await DSSkipToCO.getGlobalHeaderFirstBtn();
+      await browser.keys(Key.Tab);
+      await expect(globalHeaderBtn).toBeFocused();
+    });
+    it('03: SkipTo button should be focused after shift + tab from next component', async () => {
+      const skipToBtn = await DSSkipToCO.getSkipToButton();
+      await browser.keys([Key.Shift, Key.Tab]);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('04: Content should be focused after activating the skipTo with enter', async () => {
+      const mainContent = await DSSkipToCO.getMainContent();
+      await browser.keys(Key.Enter);
+      await expect(mainContent).toBeFocused();
+    });
+  });
+}

package/ds-skipTo/DSSkipToCO.js

@@ -0,0 +1,28 @@
+import { PATH_E2E_SKIP_TO } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSkipToCO extends PageObject {
+  static basic = new Urlbuilder(PATH_E2E_SKIP_TO, 'basic-test');
+
+  static globalHeaderExample = new Urlbuilder(PATH_E2E_SKIP_TO, 'with-global-header-example-test');
+
+  static message = new Urlbuilder(PATH_E2E_SKIP_TO, 'message-test');
+
+  // Selectors
+  static async getSkipToButton() {
+    return $(`[id="ds-sb-main"] button`);
+  }
+
+  static async getMainContent() {
+    return $(`[id="my-main-content"]`);
+  }
+
+  static async getGlobalHeaderFirstBtn() {
+    return $(`[data-testid="gh-breadcrumb-btn"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSSkipTo', example, 'ds-skip-to');
+  }
+}

package/ds-slider/DSSlider.func.spec.js

@@ -0,0 +1,17 @@
+import DSSliderCO from './DSSliderCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5820 - Slider - Click and Drag on blue region to change value', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should change value', async () => {
+      const handler = await DSSliderCO.getSliderThumb();
+      const valueBeforeChange = await DSSliderCO.getSliderValue(handler);
+      await handler.dragAndDrop({ x: 400, y: 0 });
+      const valueAfterChange = await DSSliderCO.getSliderValue(handler);
+      await expect(valueBeforeChange).not.toEqual(valueAfterChange);
+    });
+  });
+}

package/ds-slider/DSSlider.visual.spec.js

@@ -0,0 +1,51 @@
+import DSSliderCO from './DSSliderCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5815 - Show one and two handlers slider - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display one and two handler sliders', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSliderCO.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5816 - Show disabled state slider - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display disabled state slider', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSliderCO.snapshotPath('disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5819 - Show slider track marks - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderCO.trackMarksURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display sliders with track marks', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSliderCO.snapshotPath('with-track-labels'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11902 - Show slider controlled - controlled - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderCO.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display controlled slider examples', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSliderCO.snapshotPath('controlled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-slider/DSSliderCO.js

@@ -0,0 +1,37 @@
+import { PATH_E2E_SLIDER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSliderCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_E2E_SLIDER, 'basic-test');
+
+  static disabledURL = new Urlbuilder(PATH_E2E_SLIDER, 'disabled-test');
+
+  static trackMarksURL = new Urlbuilder(PATH_E2E_SLIDER, 'with-track-labels-test');
+
+  static controlledURL = new Urlbuilder(PATH_E2E_SLIDER, 'controlled-test');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Slider', example);
+  }
+
+  // selectors
+  static async getSlider(index = 0) {
+    return $$('[data-testid="slider"]')[index];
+  }
+
+  static async getSliderThumb(sliderIndex = 0, thumbIndex = 0) {
+    return (await this.getSlider(sliderIndex)).$$('[data-testid="slider-thumb"]')[thumbIndex];
+  }
+
+  static async getSliderTrack(sliderIndex = 0) {
+    return (await this.getSlider(sliderIndex)).$('div div');
+  }
+
+  // actions
+  static async getSliderValue(sliderThumb) {
+    return sliderThumb.getAttribute('aria-valuenow');
+  }
+  // utils
+}

package/ds-squareindicator/DSSquareIndicator.func.spec.js

@@ -0,0 +1,17 @@
+import DSSquareIndicatorCO from './DSSquareIndicatorCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8678 - Square Indicator - Tooltip', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSquareIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on hover', async () => {
+      const tooltipWrapper = await DSSquareIndicatorCO.getTooltipWrapperByIndex(0);
+      await mouseOver(tooltipWrapper);
+      const tooltip = await DSSquareIndicatorCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+    });
+  });
+}

package/ds-squareindicator/DSSquareIndicator.visual.spec.js

@@ -0,0 +1,21 @@
+import DSSquareIndicatorCO from './DSSquareIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8794 - Square Indeterminate Indicator - Layout, Dialog - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSquareIndicatorCO.insideDialog.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display SquareIndeterminateIndicator within dialog correctly', async () => {
+      await browser.eyesOpen();
+      const openDialog = await DSSquareIndicatorCO.getOpenDialogBtn();
+      await openDialog.click();
+      const squareIndicator = await DSSquareIndicatorCO.getLoadingLabel();
+      await squareIndicator.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSSquareIndicatorCO.snapshotPath('square-indeterminate-indicator-dialog-integration'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-squareindicator/DSSquareIndicatorCO.js

@@ -0,0 +1,37 @@
+import { PATH_SQUARE_INDICATOR, PATH_E2E_SQUARE_INDICATOR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSSquareIndicator extends PageObject {
+  static basicURL = new Urlbuilder(PATH_SQUARE_INDICATOR, 'basic');
+
+  static insideDialog = new Urlbuilder(PATH_E2E_SQUARE_INDICATOR, 'inside-dialog-test');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('SquareIndicator', example, 'ds-squareindicator');
+  }
+
+  static async getSquareIndicators(index = 0) {
+    return $$('[data-testid="ds-squareindicator"]')[index];
+  }
+
+  static async getLoadingLabel() {
+    return $('[aria-label="Loading..."]');
+  }
+
+  static getSquareIndicatorByIndex = async (index) => getElementByIndex(this.getSquareIndicators, index);
+
+  static async getTooltipWrappers() {
+    return $$('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static async getOpenDialogBtn() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+
+  static getTooltipWrapperByIndex = async (index) => getElementByIndex(this.getTooltipWrappers, index);
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+}

package/ds-stepper/Stepper.func.spec.js

@@ -0,0 +1,30 @@
+import StepperCO from './StepperCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-7718 - Stepper, navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await StepperCO.fullPage.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be displayed last step', async () => {
+      await (await StepperCO.getStepperByLabel('')).waitForDisplayed('Next');
+      await StepperCO.clickBtnNTimes('Next', 3);
+      const submitBtn = await StepperCO.getStepperByLabel('Submit');
+      await expect(submitBtn).toBeDisplayed();
+    });
+    it('should navigate to Borrower step', async () => {
+      await browser.setOrientation('LANDSCAPE');
+      await StepperCO.clickBtnNTimes('Loan Audit', 1);
+      await StepperCO.clickBtnNTimes('Loan Info', 1);
+      const borrowerBtn = await StepperCO.getStepperByLabel('Borrower');
+      await expect(borrowerBtn).toBeDisplayed();
+    });
+    it('should navigate to lastest step', async () => {
+      await browser.setOrientation('PORTRAIT');
+      await StepperCO.clickBtnNTimes('Next', 2);
+      await browser.pause(500);
+      const submitBtn = await StepperCO.getStepperByLabel('Submit');
+      await expect(submitBtn).toBeDisplayed();
+    });
+  });
+}

package/ds-stepper/Stepper.visual.spec.js

@@ -0,0 +1,57 @@
+import StepperCO from './StepperCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-7715 - Stepper, 2 steps scenario', () => {
+    before('loading page', async () => {
+      const errorOnGo = await StepperCO.fewSteps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display first step', async () => {
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('few-steps-first-step'));
+      expect(screenshot).toEqual(0);
+    });
+    it('should display last step in landscape', async () => {
+      await browser.setOrientation('LANDSCAPE');
+      const nextBtn = await StepperCO.getStepperByLabel('Next');
+      await nextBtn.click();
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('few-steps-last-step-landscape'));
+      expect(screenshot).toEqual(0);
+    });
+  });
+  describe('PUI-7716 - Stepper, 4 steps scenario', () => {
+    before('loading page', async () => {
+      const errorOnGo = await StepperCO.fullPage.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display first step', async () => {
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('four-steps-first-step'));
+      expect(screenshot).toEqual(0);
+    });
+    it('should display last step', async () => {
+      await StepperCO.clickBtnNTimes('Next', 3);
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('four-steps-last-step'));
+      expect(screenshot).toEqual(0);
+    });
+  });
+  describe('PUI-7717 - Stepper, 8 steps scenario', () => {
+    before('loading page', async () => {
+      const errorOnGo = await StepperCO.maxSteps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display first step', async () => {
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('eight-steps-first-step'));
+      expect(screenshot).toEqual(0);
+    });
+    it('should display last step', async () => {
+      await StepperCO.clickBtnNTimes('Next', 7);
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('eight-steps-last-step'));
+      expect(screenshot).toEqual(0);
+    });
+    it('should display fourth step in Landscape', async () => {
+      await browser.setOrientation('LANDSCAPE');
+      await StepperCO.clickBtnNTimes('Back', 4);
+      const screenshot = await browser.checkSnapshot(StepperCO.snapshotPath('eight-steps-fourth-step-landscape'));
+      expect(screenshot).toEqual(0);
+    });
+  });
+}

package/ds-stepper/StepperCO.js

@@ -0,0 +1,32 @@
+import { PATH_MOBILE_STEPPER_E2E } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class StepperCO extends PageObject {
+  static fullPage = new Urlbuilder(PATH_MOBILE_STEPPER_E2E, 'full-page');
+
+  static fewSteps = new Urlbuilder(PATH_MOBILE_STEPPER_E2E, 'few-steps');
+
+  static maxSteps = new Urlbuilder(PATH_MOBILE_STEPPER_E2E, 'max-steps');
+
+  static async getStepperBtnByIndex(index) {
+    return $$('[data-testid="ds-stepper-btn"]')[index];
+  }
+
+  static async getStepperByLabel(label) {
+    return $(`//span[contains(text(), "${label}")]/ancestor::button`);
+  }
+
+  static async clickBtnNTimes(buttonLabel, nTimes) {
+    const btn = await this.getStepperByLabel(buttonLabel);
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < nTimes; i++) {
+      btn.click();
+      browser.pause(200);
+    }
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Stepper', example, 'ds-stepper');
+  }
+}

package/ds-svg/DSSvg.func.spec.js

@@ -0,0 +1,54 @@
+import { Key } from 'webdriverio';
+import DSSvgCO from './DSSvgCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10272 - Svg:: Tooltip - displayed on hover', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.withTooltip.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: wrapper should be displayed', async () => {
+      const svg = await DSSvgCO.getWrapper();
+      await mouseOver(svg);
+      const tooltip = await DSSvgCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+    });
+  });
+
+  describe('PUI-10271 - Svg:: Inside interactive element - click, focus, tab', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.insideInteractive.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus interactive elemnt that contains the image with tab', async () => {
+      await browser.keys(Key.Tab);
+      const button = await DSSvgCO.getButtonByIndex(0);
+      await expect(button).toBeFocused();
+    });
+    it('02: tab should move to next interactive element', async () => {
+      await browser.keys(Key.Tab);
+      const button = await DSSvgCO.getButtonByIndex(1);
+      await expect(button).toBeFocused();
+    });
+    if (browser.capabilities.browserName !== 'Safari') {
+      it('03: click should move focus to previous interactive elemnt', async () => {
+        const image = await DSSvgCO.getWrapperByIndex(0);
+        await image.click();
+        const button = await DSSvgCO.getButtonByIndex(0);
+        await expect(button).toBeFocused();
+      });
+    }
+  });
+}
+
+describe('PUI-10270 - Svg:: Basic - Component exists', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSSvgCO.basic.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: wrapper should be displayed', async () => {
+    const wrapper = await DSSvgCO.getWrapper();
+    await expect(wrapper).toBeDisplayedInViewport();
+  });
+});

package/ds-svg/DSSvg.visual.spec.js

@@ -0,0 +1,58 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSSvgCO from './DSSvgCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10274 - Svg:: Sizes - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.sizes.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should sizes showcase for svg', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSvgCO.snapshotPath('svg-sizes'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10275 - Svg:: Dimensions - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.dimensions.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display dimensions showcase for svg', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSSvgCO.snapshotPath('svg-dimensions'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10273 - Svg:: Tooltip - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.withTooltip.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on hover', async () => {
+      await browser.eyesOpen();
+      const svg = await DSSvgCO.getWrapper();
+      await mouseOver(svg);
+      const tooltip = await DSSvgCO.getTooltip();
+      await tooltip.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSSvgCO.snapshotPath('svg-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10276 - Svg:: Interactive element - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSvgCO.insideInteractive.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should svg inside interactive elemnts', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.eyesCheckSnapshot(DSSvgCO.snapshotPath('svg-interactive'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}