dimsum-e2e-tests 1.0.0-rc.1

package/ds-svg/DSSvgCO.js

@@ -0,0 +1,37 @@
+import { SVG_DATA_TESTID } from '@elliemae/ds-legacy-svg';
+import { PATH_E2E_SVG } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSSvgCO extends PageObject {
+  static basic = new Urlbuilder(PATH_E2E_SVG, 'basic');
+
+  static sizes = new Urlbuilder(PATH_E2E_SVG, 'sizes');
+
+  static dimensions = new Urlbuilder(PATH_E2E_SVG, 'dimensions');
+
+  static insideInteractive = new Urlbuilder(PATH_E2E_SVG, 'inside-interactive-element');
+
+  static withTooltip = new Urlbuilder(PATH_E2E_SVG, 'with-tooltip');
+
+  // Selectors
+  static async getWrapper() {
+    return $(`[data-testid="${SVG_DATA_TESTID.ROOT}"]`);
+  }
+
+  static async getWrapperByIndex(index = 0) {
+    return $$(`[data-testid="${SVG_DATA_TESTID.ROOT}"]`)[index];
+  }
+
+  static async getButtonByIndex(index = 0) {
+    return $$(`[data-testid="ds-button"]`)[index];
+  }
+
+  static async getTooltip() {
+    return $(`[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSSvg', example, 'ds-svg');
+  }
+}

package/ds-tabs/DSTabs.func.spec.js

@@ -0,0 +1,160 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { tabStops } from '../helpers';
+import DSTabsCO from './DSTabsCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4426 - Tabs, navigate throw tabs', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.carouselFixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open correctly tab', async () => {
+      await (await DSTabsCO.getTabsList()).waitForDisplayed();
+      const tab = await DSTabsCO.getTab(1);
+      await expect(tab).toBeDisplayedInViewport();
+    });
+    it('should display only right arrow', async () => {
+      const tab2 = await DSTabsCO.getTab(2);
+      await tab2.click();
+      const chevronLeft = await DSTabsCO.getChevronLeft();
+      const chevronRight = await DSTabsCO.getChevronRight();
+      if (browser.capabilities.browserName !== 'Safari') {
+        await chevronLeft.click();
+        await expect(chevronLeft).not.toBeDisplayedInViewport();
+      }
+      await expect(chevronRight).toBeDisplayedInViewport();
+    });
+    it('should display both left and right arrows', async () => {
+      await (await DSTabsCO.getChevronRight()).click();
+      const chevronLeft = await DSTabsCO.getChevronLeft();
+      const chevronRight = await DSTabsCO.getChevronRight();
+      await expect(chevronLeft).toBeDisplayedInViewport();
+      await expect(chevronRight).toBeDisplayedInViewport();
+    });
+    it('should display only left arrow', async () => {
+      await DSTabsCO.carouselNav('right', 20);
+      const chevronLeft = await DSTabsCO.getChevronLeft();
+      const chevronRight = await DSTabsCO.getChevronRight();
+      await expect(chevronLeft).toBeDisplayedInViewport();
+      await expect(chevronRight).not.toBeDisplayedInViewport();
+    });
+    it('should select last tab and display content', async () => {
+      await (await DSTabsCO.getTab(12)).click();
+      const tabSelected = await (await DSTabsCO.getTab(12)).getAttribute('aria-selected');
+      const tabPanel = await DSTabsCO.getTabPanel(12);
+      await expect(tabSelected).toBe('true');
+      await expect(tabPanel).toHaveTextContaining('q. Required docs');
+    });
+    it('should select first tab and display content', async () => {
+      await DSTabsCO.carouselNav('left', 20);
+      await (await DSTabsCO.getTab(1)).click();
+      const tabSelected = await (await DSTabsCO.getTab(1)).getAttribute('aria-selected');
+      const tabPanel = await DSTabsCO.getTabPanel(1);
+      await expect(tabSelected).toBe('true');
+      await expect(tabPanel).toHaveTextContaining('a. Fields received');
+    });
+  });
+
+  describe('PUI-8372 - Numeric tabs not crashing the component', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.numericTabs.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should select third subTab correctly', async () => {
+      await tabStops(3);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Space);
+      const thirdSubtab = await DSTabsCO.getSubTabsByIndex(2);
+      const tabSelected = await thirdSubtab.getAttribute('aria-selected');
+      await expect(tabSelected).toBe('true');
+    });
+  });
+
+  describe('PUI-5391 - Carousel side nav re calculates chevrons', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.carouselResizeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display right chevrons', async () => {
+      await DSTabsCO.carouselNav('right', 3);
+      const chevronRight = await DSTabsCO.getChevronRight();
+      await expect(chevronRight).not.toBeDisplayedInViewport();
+      await (await DSTabsCO.getResizeToggleBtn()).click();
+      await expect(chevronRight).toBeDisplayedInViewport();
+    });
+    it('should not display right chevrons after close side nav', async () => {
+      await (await DSTabsCO.getResizeToggleBtn()).click();
+      const chevronRight = await DSTabsCO.getChevronRight();
+      await expect(chevronRight).not.toBeDisplayedInViewport();
+    });
+  });
+
+  describe('PUI-5283 - Disabled tab', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open correctly tab', async () => {
+      const tab = await DSTabsCO.getTab(1);
+      await expect(tab).toBeDisplayed();
+    });
+    it('should select tab 2 correctly', async () => {
+      await (await DSTabsCO.getTab(2)).click();
+      const tabSelected = await (await DSTabsCO.getTab(2)).getAttribute('aria-selected');
+      await expect(tabSelected).toBe('true');
+    });
+    it('should not select tab 3 because its disabled', async () => {
+      await (await DSTabsCO.getTab(3)).click();
+      const tabSelected = await (await DSTabsCO.getTab(3)).getAttribute('aria-selected');
+      const tabDisabled = await (await DSTabsCO.getTab(3)).getAttribute('aria-disabled');
+      await expect(tabDisabled).toBe('true');
+      await expect(tabSelected).toBe('false');
+    });
+  });
+
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-5392 - Arrow key behavior', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSTabsCO.nestedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should focus last subtab', async () => {
+        await (await DSTabsCO.getTab(1)).click();
+        await browser.keys(Key.ArrowRight);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.ArrowRight);
+        await browser.keys(Key.Enter);
+        const subTabSelected = await (await DSTabsCO.getSubtab(2)).getAttribute('aria-selected');
+        await expect(subTabSelected).toBe('true');
+      });
+    });
+  }
+
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-5750 - Carousel chevron focus', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSTabsCO.carouselFixed.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should focus chevron after click', async () => {
+        const chevronRight = await DSTabsCO.getChevronRight();
+        await chevronRight.click();
+        await expect(chevronRight).toBeFocused();
+      });
+      it('should focus chevron after click again', async () => {
+        const chevronRight = await DSTabsCO.getChevronRight();
+        await chevronRight.click();
+        await expect(chevronRight).toBeFocused();
+      });
+      it('should focus chevron after click until chevron stops beign displayed (end of tablist)', async () => {
+        const chevronRight = await DSTabsCO.getChevronRight();
+        // eslint-disable-next-line no-await-in-loop
+        for (let i = 0; i < 9; i++) await chevronRight.click();
+        await expect(chevronRight).not.toBeDisplayedInViewport();
+      });
+    });
+  }
+}

package/ds-tabs/DSTabs.visual.spec.js

@@ -0,0 +1,268 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSTabsCO from './DSTabsCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5600 - Selected reposition', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.carouselFixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should reposition and display full tab', async () => {
+      await (await DSTabsCO.getTabsList()).waitForDisplayed();
+      await DSTabsCO.carouselNav();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-reposition'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5784 - Tabs,  Focus state of the tabs - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display first tab selected', async () => {
+      await (await DSTabsCO.getTabsList()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display first tab selected and focused', async () => {
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-selected-and-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display second tab focused [keyboard focus]', async () => {
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display fourth tab focused [Hover]', async () => {
+      const fourthTab = await DSTabsCO.getTab(4);
+      await fourthTab.click({ y: 50 }); // click outside tab
+      await mouseOver(fourthTab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-hovered'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-3077 - Tabs, type secondary', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.secondaryURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display secondary tabs', async () => {
+      await (await DSTabsCO.getSubTabsList()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-secondary'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6986 - Tabs, required', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedRequired.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a required tab selected', async () => {
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(8000);
+      await (await DSTabsCO.getTab(3)).waitForDisplayed();
+      await (await DSTabsCO.getTab(3)).click();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-required'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8064 - Tabs, with extra padding', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedPadding.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tabs with extra padding and no left chevron', async () => {
+      await (await DSTabsCO.getTab(2)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extrapad-left'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with extra padding moved to the right', async () => {
+      await (await DSTabsCO.getTab(2)).waitForDisplayed();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extrapad-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8065 - Tabs, with modal', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.withModalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a modal tab to the left', async () => {
+      const openDialogBtn = $('[data-testid="ds-button"]');
+      await openDialogBtn.click();
+      await (await DSTabsCO.getTab(4)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-dialog-left'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a modal tab after picking a tab to the right', async () => {
+      await (await DSTabsCO.getTab(3)).waitForDisplayed();
+      await (await DSTabsCO.getTab(3)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-dialog-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8066 - Tabs, with grid', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedWithGrid.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tabs with a grid both to the left', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with a grid moved one tablist to the right', async () => {
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-moved1'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with a grid moved both tablist to the right', async () => {
+      const chevronRight = $('[data-testid="chevron-right"]');
+      await chevronRight.click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-moved2'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8077 - Tabs, with extra content', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.extraContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a tab with extra content', async () => {
+      await (await DSTabsCO.getTab(4)).waitForDisplayed();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extracontent'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8068 - Tabs, integrated example carousel', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.integratedCarousel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a integrated example tab default to the left ', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-intrgrated-car-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a integrated example tab to the right one focused', async () => {
+      const rightChevron = await DSTabsCO.getChevronRight();
+      const tab = await DSTabsCO.getTab(11);
+      await rightChevron.click();
+      await tab.click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-intrgrated-car-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8069 - Tabs, nested', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.nestedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display nested tabs default', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display nested tabs one focused and selected one hover', async () => {
+      const tab1 = await DSTabsCO.getSubTabsByIndex(0);
+      await tab1.click();
+      const tab3 = await DSTabsCO.getSubTabsByIndex(2);
+      await mouseOver(tab3);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-onefocus-onehover'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display nested tabs one focused and one selected', async () => {
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-onefocus-oneselected'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8070 - Tabs, basic small', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display small tabs one selected one hovered', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      await (await DSTabsCO.getTab(1)).click();
+      await mouseOver(await DSTabsCO.getTab(2));
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-onesel-onehov'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display small tabs one selected and focused', async () => {
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-oneselandfoc'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display small tabs one selected one focused', async () => {
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-onesel-onefoc'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8442 - Popover over tab', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.withMaxWidth.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus and select the tab over which the popover will be displayed', async () => {
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-fourth-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should open the appicker popover over the selected tab', async () => {
+      await (await DSTabsCO.getHeaderBtnByIndex(0)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-popover-over-tab'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9865 - Custom props', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.tabsCustomProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tabs should be displayed correctly with the custom props', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSTabsCO.snapshotPath('tab-custom-props'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11228 - Tabs, should not add height above tabs after multiple tab clicks -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should tabs with default margin/padding above', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-above-pad-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should mantain layout after clicking tabs multiple times', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-above-pad-after'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-tabs/DSTabsCO.js

@@ -0,0 +1,122 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_TABS, PATH_E2E_TABS } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSTextBoxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_TABS, 'basic');
+
+  static secondaryURL = new Urlbuilder(PATH_TABS, 'secondary');
+
+  static nestedURL = new Urlbuilder(PATH_TABS, 'nested');
+
+  static disabledURL = new Urlbuilder(PATH_TABS, 'disabled');
+
+  static requiredURL = new Urlbuilder(PATH_TABS, 'required');
+
+  static withModalURL = new Urlbuilder(PATH_TABS, 'with-modal');
+
+  static withGridURL = new Urlbuilder(PATH_TABS, 'with-grid');
+
+  static mouseEventsURL = new Urlbuilder(PATH_TABS, 'mouse-events');
+
+  static withExtraPadding = new Urlbuilder(PATH_TABS, 'with-extra-padding');
+
+  static integratedCarousel = new Urlbuilder(PATH_TABS, 'integrated-example-carousel');
+
+  static basicSmallURL = new Urlbuilder(PATH_TABS, 'basic-small');
+
+  static extraContentURL = new Urlbuilder(PATH_TABS, 'extra-content');
+
+  static carouselFixed = new Urlbuilder(PATH_E2E_TABS, 'carousel-fixed-width');
+
+  static carouselResizeURL = new Urlbuilder(PATH_E2E_TABS, 'carousel-resize');
+
+  static numericTabs = new Urlbuilder(PATH_E2E_TABS, 'pui-7814-number-tab');
+
+  static withMaxWidth = new Urlbuilder(PATH_E2E_TABS, 'with-max-width');
+
+  static delayedWithGrid = new Urlbuilder(PATH_E2E_TABS, 'with-grid-test');
+
+  static delayedRequired = new Urlbuilder(PATH_E2E_TABS, 'required-test');
+
+  static delayedPadding = new Urlbuilder(PATH_E2E_TABS, 'with-extra-padding-test');
+
+  static tabsCustomProps = new Urlbuilder(PATH_E2E_TABS, 'tabs-custom-props');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_TABS, component);
+  }
+
+  static async getChevronRight() {
+    return $('[data-testid="tab-list"]').$('[data-testid="chevron-right"]');
+  }
+
+  static async getChevronLeft() {
+    return $('[data-testid="tab-list"]').$('[data-testid="chevron-left"]');
+  }
+
+  static async getTab(tab = 1) {
+    return $('[data-testid="tab-list"]').$(`[data-tab-id="tab${tab}"]`);
+  }
+
+  static async getSubtab(tab = 1) {
+    return $('[data-testid="subtabs-list"]').$(`[data-tab-id="tab${tab}"]`);
+  }
+
+  static async getTabPanel(tab) {
+    return $(`[data-panel-id="tab${tab}"]`);
+  }
+
+  static async getResizeToggleBtn() {
+    return $('[data-testid="ds-toggle-btn"]');
+  }
+
+  static async getSubTabsList() {
+    return $('[data-testid="subtabs-list"]');
+  }
+
+  static async getTabsList() {
+    return $('[data-testid="tab-list"]');
+  }
+
+  static getTabs = async () => $$('[data-testid="ds-tabs-tab-button"]');
+
+  static getHeaderBtns = async () => $$('[data-testid="gh-toolbar-item"]');
+
+  static getHeaderBtnByIndex = async (index) => getElementByIndex(this.getHeaderBtns, index);
+
+  static getTabsByIndex = async (index) => getElementByIndex(this.getTabs, index);
+
+  static getSubTabs = async () => $$('[data-testid="ds-tabs-subtab-button"]');
+
+  static getSubTabsByIndex = async (index) => getElementByIndex(this.getSubTabs, index);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tabs', example);
+  }
+
+  // selectors
+  // actions
+  static async carouselNav(direction = 'right', clicks = 1) {
+    for (let i = 1; i <= clicks; i += 1) {
+      if (direction === 'right') {
+        // eslint-disable-next-line no-await-in-loop
+        if (await (await this.getChevronRight()).isDisplayedInViewport()) {
+          // eslint-disable-next-line no-await-in-loop
+          await (await this.getChevronRight()).click();
+        } else {
+          break;
+        }
+        // eslint-disable-next-line no-await-in-loop
+      } else if (await (await this.getChevronLeft()).isDisplayedInViewport()) {
+        // eslint-disable-next-line no-await-in-loop
+        await (await this.getChevronLeft()).click();
+      } else {
+        break;
+      }
+    }
+  }
+  // utils
+}

package/ds-text-box/DSTextBox.func.spec.js

@@ -0,0 +1,40 @@
+import DSTextBoxCO from './DSTextBoxCO';
+import { mouseOver, clickPosition } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5314 - TextBox - display tooltip when input is disabled', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip`', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 5, 10);
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('Long text that causes ellipsis behavior to trigger');
+    });
+  });
+  describe('PUI-5313 - TextBox - display tooltip after focus/blur', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withTooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip`', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('long long long long long text');
+    });
+    it('should not display `tooltip` when textbox is active', async () => {
+      await (await DSTextBoxCO.getInput()).click();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).not.toBeDisplayed();
+    });
+    it('should display `tooltip` after focus and then clicking outside', async () => {
+      await clickPosition();
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('long long long long long text');
+    });
+  });
+}

package/ds-text-box/DSTextBox.visual.spec.js

@@ -0,0 +1,51 @@
+import { mouseOver } from '../helpers';
+import DSTextBoxCO from './DSTextBoxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3626 - TextBox - display tooltip in header', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withTooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip` in the header', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+describe('PUI-3627 - Textbox visual tests', () => {
+  describe('textbox, basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withFormItemLayout.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox', async () => {
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('withFormItemLayout'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('textbox, focused state', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withFormItemLayout.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox with focused state', async () => {
+      await (await DSTextBoxCO.getInput()).click();
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('withFormItemLayout-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('textbox, with left label', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withLeftLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox with label to the left', async () => {
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('label-left'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+});