dimsum-e2e-tests 1.0.0-rc.1

package/ds-icon/DSIcon.visual.spec.js

@@ -0,0 +1,58 @@
+import DSIconCO from './DSIconCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4223 - Iconography visual test', () => {
+    describe('Iconography showcase test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSIconCO.showCaseTest.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display icons correctly', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(DSIconCO.snapshotPath('show-case-test'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Iconography basic', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSIconCO.basicUrl.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display basic icons correctly', async () => {
+        const snapshot = await browser.checkSnapshot(DSIconCO.snapshotPath('basic'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Iconography - Color and Sizes', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSIconCO.allIconsColorSizes.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display all icons, color and sizes correctly', async () => {
+        const snapshot = await browser.checkSnapshot(DSIconCO.snapshotPath('all-icons-color-sizes'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+  describe('PUI-6400  - Iconography - Product icons showcase', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIconCO.showCaseProducts.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display all product icons', async () => {
+      const snapshot = await browser.checkSnapshot(DSIconCO.snapshotPath('produc-icons'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10241  - Icon - Custom image getSize', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIconCO.customImgGetSizeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display all product icons', async () => {
+      const snapshot = await browser.checkSnapshot(DSIconCO.snapshotPath('produc-icons'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-icon/DSIconCO.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_ICON, PATH_E2E_ICON } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSIconCO extends PageObject {
+  // Desktop
+  static showCaseTest = new Urlbuilder(PATH_E2E_ICON, 'show-case-test');
+
+  static basicUrl = new Urlbuilder(PATH_ICON, 'basic');
+
+  static showCaseProducts = new Urlbuilder(PATH_ICON, 'show-case-products');
+
+  static allIconsColorSizes = new Urlbuilder(PATH_E2E_ICON, 'all-icons-color-sizes');
+
+  static customImgGetSizeURL = new Urlbuilder(PATH_E2E_ICON, 'custom-image-get-size-test');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_ICON, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Icon', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-image/DSImage.func.spec.js

@@ -0,0 +1,40 @@
+import { Key } from 'webdriverio';
+import DSImageCO from './DSImageCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10279 - Image:: Inside interactive element - click, focus, tab', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSImageCO.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 DSImageCO.getButtonByIndex(0);
+      await expect(button).toBeFocused();
+    });
+    it('02: tab should move to next interactive element', async () => {
+      await browser.keys(Key.Tab);
+      const button = await DSImageCO.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 DSImageCO.getWrapperByIndex(0);
+        await image.click();
+        const button = await DSImageCO.getButtonByIndex(0);
+        await expect(button).toBeFocused();
+      });
+    }
+  });
+}
+
+describe('PUI-10277 - Image:: Basic - component exists', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSImageCO.basic.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: wrapper should be displayed', async () => {
+    const image = await DSImageCO.getWrapper();
+    await expect(image).toBeDisplayedInViewport();
+  });
+});

package/ds-image/DSImage.visual.spec.js

@@ -0,0 +1,42 @@
+import { Key } from 'webdriverio';
+import DSImageCO from './DSImageCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10280 - Image:: Sizes - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSImageCO.sizes.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display sizes showcase for image', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSImageCO.snapshotPath('image-sizes'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10281 - Image:: Dimensions - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSImageCO.dimensions.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display dimensions showcase for image', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSImageCO.snapshotPath('image-dimensions'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10278 - Image:: Interactive element - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSImageCO.insideInteractive.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display images inside two interactive elements, one focused', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.eyesCheckSnapshot(DSImageCO.snapshotPath('image-inside-interactive'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-image/DSImageCO.js

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

package/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicatorCO.js

@@ -0,0 +1,24 @@
+import { PATH_E2E_INDETERMINATE_PROGRESS_INDICATOR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSIndeterminateProgressIndicatorCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_E2E_INDETERMINATE_PROGRESS_INDICATOR, 'basic');
+
+  static async getComponentWrapper() {
+    return $('[data-testid="ds-indeterminate-progress-indicator-wrapper"]');
+  }
+
+  static async getIndeterminateProgressIndicatorTitle() {
+    return (await this.getComponentWrapper()).$('div');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('IndeterminateProgressIndicator', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-indeterminate-progress-indicator/DSIndetermintateProgressIndicator.func.spec.js

@@ -0,0 +1,17 @@
+import DSIndeterminateProgressIndicatorCO from './DSIndeterminateProgressIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-11864 - IndeterminateProgressIndicator - dynamic title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIndeterminateProgressIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a diferent title after 3 seconds', async () => {
+      const title = await DSIndeterminateProgressIndicatorCO.getIndeterminateProgressIndicatorTitle();
+      await title.waitForDisplayed();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(3000);
+      await expect(title).toHaveTextContaining('Title changed');
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.axe-core.func.spec.js

@@ -0,0 +1,175 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck, mouseOver } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10670 - LeftNavigation: Axe-Core: Basic full features', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: All collapsed (Section icons)', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Click Notifications and expand sections titles', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: Click and expand Notifications to have items with subsections', async () => {
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: Collapse Notifications and open forms with plain items', async () => {
+      await (await LeftNavCO.leftChevron()).click();
+      await (await LeftNavCO.leftNavItem(2)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10671 - LeftNavigation, Axe-Core: Loading indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.loading.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: loading indicator in leftnav closed', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await loadingIndicator.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: loading indicator with tooltip (leftnav closed)', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await mouseOver(loadingIndicator);
+      const loadingIndicatorTooltip = await LeftNavCO.loadingIndicatorTooltip();
+      await loadingIndicatorTooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    // unskip when PUI-10663 is fixed
+    it.skip('03: loading indicator in leftnav opened', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await loadingIndicator.waitForDisplayed();
+      const footerBtn = await LeftNavCO.footerBtn();
+      const footerLabel = await LeftNavCO.footerLabel();
+      await footerBtn.click();
+      await footerLabel.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10672 - LeftNavigation, Axe-Core: Tooltip -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display tooltip', async () => {
+      const notiItem = await LeftNavCO.leftNavItem(0);
+      await notiItem.click();
+      await notiItem.click();
+      const truncItem = await LeftNavCO.getTruncatedText(0);
+      await mouseOver(truncItem);
+      const tooltip = await LeftNavCO.getTooltip();
+      await tooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10673 - LeftNavigation, Axe-Core: Notification badge', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.notificationBadgingURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display integrated notification badge combinations', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10674 - LeftNavigation: Axe-Core: Keeping items', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.keepingItems.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should expand notifications and keep the remaining sections', async () => {
+      const subItemBtn = await LeftNavCO.getSubItemBtn();
+      await subItemBtn.click();
+      await (await LeftNavCO.leftComponent(0)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await itemLabel.waitForDisplayed();
+      const notificationHeader = await LeftNavCO.leftNavItem(0);
+      await notificationHeader.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should scroll down to display the remaining sections', async () => {
+      const menuItemBtn = await LeftNavCO.getMenuItemBtn();
+      await menuItemBtn.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10676 - LeftNavigation, Axe-Core: Wrapped text -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.wrapped.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display truncated sections', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('01: should display truncated items', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10677 - LeftNavigation, Axe-Core: Search bar', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Trigger search button and check axe scan', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const searchButton = await LeftNavCO.getIconButtonByIndex(0);
+      await searchButton.waitForDisplayed();
+      await searchButton.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-10250 - LeftNavigation, Axe-Core: Showcase, more usecases', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display usecase whocase and check axe scan', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11620 - LeftNavigation, isSkeleton prop -AxeCore Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.isSkeletonURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly display the leftnav wit isSkeleton and pass axe-core scan', async () => {
+      const skeleton = await LeftNavCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.func.spec.js

@@ -0,0 +1,131 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import LeftNavCO from './LeftNavigationCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6120 - LeftNavigation: expand and collapse behaviour', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: expand Notifications to Header Closed', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await expect(itemLabel).toHaveTextContaining('Notifications');
+    });
+    it('02: expand Notifications to Header Opened', async () => {
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      const listItemLenght = await LeftNavCO.listItemLength();
+      await expect(itemLabel).toHaveTextContaining('Notifications');
+      await expect(listItemLenght).toBe(9);
+    });
+    it('03: collapse Notifications to Header Closed', async () => {
+      await (await LeftNavCO.leftChevron()).click();
+      const itemLabelLenght = await LeftNavCO.itemLabelLength();
+      await expect(itemLabelLenght).toBe(8);
+    });
+    it('04: collapse with footer button', async () => {
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await (await LeftNavCO.footerBtn()).click();
+      await browser.pause(500);
+      await expect(itemLabel).not.toBeDisplayed();
+    });
+    it('05: expand with footer button', async () => {
+      await (await LeftNavCO.footerBtn()).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await expect(itemLabel).toBeDisplayed();
+    });
+    it('06: collapse Notifications and open Forms', async () => {
+      await (await LeftNavCO.leftChevron()).click();
+      await (await LeftNavCO.leftNavItem(2)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      const itemLabe2 = await LeftNavCO.itemLabel(1);
+      const listItemLenght = await LeftNavCO.listItemLength();
+      await expect(itemLabel).toHaveTextContaining('Notifications');
+      await expect(itemLabe2).toHaveTextContaining('Forms');
+      await expect(listItemLenght).toBe(15);
+    });
+  });
+  describe('PUI-6681 - LeftNavigation, loading indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.loading.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('loading indicator in leftnav closed', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await expect(loadingIndicator).toBeDisplayedInViewport();
+    });
+    it('should display loading indicator tooltip (leftnav closed)', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      const loadingIndicatorTooltip = await LeftNavCO.loadingIndicatorTooltip();
+      await mouseOver(loadingIndicator);
+      await expect(loadingIndicatorTooltip).toBeDisplayedInViewport();
+    });
+    it('loading indicator in leftnav opened', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      const footerBtn = await LeftNavCO.footerBtn();
+      const footerLabel = await LeftNavCO.footerLabel();
+      await footerBtn.click();
+      await footerLabel.waitForDisplayed();
+      await expect(loadingIndicator).toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-7796 - LeftNavigation, tooltip -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip', async () => {
+      const notiItem = await LeftNavCO.leftNavItem(0);
+      await notiItem.click();
+      await notiItem.click();
+      const truncItem = await LeftNavCO.getTruncatedText(0);
+      await mouseOver(truncItem);
+      const tooltip = await LeftNavCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-7700 - LeftNavigation, moving beteween menus -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should only show the content of the second leftnav item opened', async () => {
+      const logsItem = await LeftNavCO.leftNavItem(1);
+      await logsItem.click();
+      const formsItem = await LeftNavCO.leftNavItem(2);
+      await formsItem.click();
+      const listItem = await LeftNavCO.listItiemLabel(0);
+      await expect(listItem).toHaveTextContaining('Application view');
+    });
+  });
+  describe('PUI-7809 - LeftNavigation, Scroll -func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should scroll and display the last item of the forms section', async () => {
+      let formsItem = await LeftNavCO.leftNavItem(2);
+      await formsItem.click();
+      formsItem = await LeftNavCO.leftNavItem(2);
+      await formsItem.click();
+      const lastSubItem = await LeftNavCO.leftNavItem(17);
+      await lastSubItem.scrollIntoView();
+      await expect(lastSubItem).toBeDisplayedInViewport();
+    });
+    it('should scroll with keyboard and display the last item of the forms section', async () => {
+      let formsItem = await LeftNavCO.leftNavItem(2);
+      await formsItem.click();
+      formsItem = await LeftNavCO.leftNavItem(2);
+      await formsItem.click();
+      const lastSubItem = await LeftNavCO.leftNavItem(16);
+      // eslint-disable-next-line no-await-in-loop, no-plusplus
+      for (let i = 0; i < 15; i++) await browser.keys(Key.ArrowDown);
+      await expect(lastSubItem).toBeDisplayedInViewport();
+      await expect(lastSubItem).toBeFocused();
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.keeping.items.visual.spec.js

@@ -0,0 +1,27 @@
+import LeftNavCO from './LeftNavigationCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7808 - LeftNavigation: keeping items', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.keepingItems.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: subitem in Notifications should be focused', async () => {
+      const subItemBtn = await LeftNavCO.getSubItemBtn();
+      await subItemBtn.click();
+      await (await LeftNavCO.leftComponent(0)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await itemLabel.waitForDisplayed();
+      const notificationHeader = await LeftNavCO.leftNavItem(0);
+      await notificationHeader.click();
+      const screenshot = await browser.checkSnapshot(LeftNavCO.snapshotPath('leftnav-keeping-sub-item'));
+      await expect(screenshot).toEqual(0);
+    });
+    it('02: should focus and scroll to Tool menu item', async () => {
+      const menuItemBtn = await LeftNavCO.getMenuItemBtn();
+      await menuItemBtn.click();
+      const screenshot = await browser.checkSnapshot(LeftNavCO.snapshotPath('leftnav-keeping-menu-item'));
+      await expect(screenshot).toEqual(0);
+    });
+  });
+}