dimsum-e2e-tests 3.22.0-next.36

package/ds-hooks/DSHook.useAsDsTree.func.spec.js

@@ -0,0 +1,128 @@
+/* eslint-disable max-len */
+import DSHookCO from './DSHookCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11098, Tree add/remove items', () => {
+    before(async () => {
+      const errorOnGo = await DSHookCO.useArraish.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have restored dstree code by default', async () => {
+      const sourceText3 = await (await DSHookCO.getTestData(3)).getText();
+      await expect(sourceText3).toEqual(`[
+  {
+    "idPart1": 1,
+    "idPart2": "a",
+    "name": "Test Folder X",
+    "children_a": [
+      {
+        "idPart1": 11,
+        "idPart2": "aa",
+        "name": "Test Item 1",
+        "children_aa": []
+      },
+      {
+        "idPart1": 12,
+        "idPart2": "ab",
+        "name": "Test Folder XX",
+        "children_ab": [
+          {
+            "idPart1": 121,
+            "idPart2": "aba",
+            "name": "Test Item 54",
+            "children_aba": []
+          },
+          {
+            "idPart1": 122,
+            "idPart2": "abb",
+            "name": "Test Item 65",
+            "children_abb": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "idPart1": 2,
+    "idPart2": "b",
+    "name": "Test Folder Y",
+    "children_b": [
+      {
+        "idPart1": 21,
+        "idPart2": "ba",
+        "name": "Test Item 2",
+        "children_ba": []
+      },
+      {
+        "idPart1": 22,
+        "idPart2": "bb",
+        "name": "Test Item 3",
+        "children_bb": []
+      }
+    ]
+  },
+  {
+    "idPart1": 3,
+    "idPart2": "c",
+    "name": "Item with no children",
+    "children_c": []
+  },
+  {
+    "idPart1": 4,
+    "idPart2": "d",
+    "isGroup": true,
+    "name": "Item with no children but is group",
+    "children_d": []
+  }
+]`);
+    });
+    it('02: should have restored dstree code with two less nodes', async () => {
+      const removeNode = await DSHookCO.getBtnByIndex(1);
+      await removeNode.click();
+      await removeNode.click();
+      const sourceText3 = await (await DSHookCO.getTestData(3)).getText();
+      await expect(sourceText3).toEqual(`[
+  {
+    "idPart1": 3,
+    "idPart2": "c",
+    "name": "Item with no children",
+    "children_c": []
+  },
+  {
+    "idPart1": 4,
+    "idPart2": "d",
+    "isGroup": true,
+    "name": "Item with no children but is group",
+    "children_d": []
+  }
+]`);
+    });
+    it('03: should have restored dstree code with one more node', async () => {
+      const addNode = await DSHookCO.getBtnByIndex(0);
+      await addNode.click();
+      const sourceText3 = await (await DSHookCO.getTestData(3)).getText();
+      await expect(sourceText3).toEqual(`[
+  {
+    "idPart1": 3,
+    "idPart2": "c",
+    "name": "Item with no children",
+    "children_c": []
+  },
+  {
+    "idPart1": 4,
+    "idPart2": "d",
+    "isGroup": true,
+    "name": "Item with no children but is group",
+    "children_d": []
+  },
+  {
+    "idPart1": "id_TEST",
+    "idPart2": "id2_TEST2",
+    "name": "Folder TEST",
+    "isGroup": true,
+    "children_id2_TEST2": []
+  }
+]`);
+    });
+  });
+}

package/ds-hooks/DSHook.usetree.func.spec.js

@@ -0,0 +1,114 @@
+/* eslint-disable max-len */
+import DSHookCO from './DSHookCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9751, Tree add/remove items', () => {
+    before(async () => {
+      const errorOnGo = await DSHookCO.useDsTree.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should add items and have 4 items displayed', async () => {
+      const addItemsBtn = await DSHookCO.getAddItemButton();
+      await addItemsBtn.click();
+      await addItemsBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('__root')).length;
+      await expect(items).toEqual(4);
+    });
+    it('02: should remove items and have 2 items displayed', async () => {
+      const removeItemBtn1 = await DSHookCO.getRemoveThisBtnByIndex(1);
+      const removeItemBtn2 = await DSHookCO.getRemoveThisBtnByIndex(2);
+      await removeItemBtn1.click();
+      await removeItemBtn2.click();
+      const items = (await DSHookCO.getItemsByDataParentId('__root')).length;
+      await expect(items).toEqual(2);
+    });
+  });
+
+  describe('PUI-9752, Tree add children, drill down', () => {
+    before(async () => {
+      const errorOnGo = await DSHookCO.useDsTree.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should add child items, drill down and have 2 items displayed', async () => {
+      const addChildrenToFirstItem = await DSHookCO.getAddChildBtnByIndex(0);
+      await addChildrenToFirstItem.click();
+      const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
+      await drillFirstItemBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('1')).length;
+      await expect(items).toEqual(2);
+    });
+    it('02: should add items to the next level, drill down once more and have 3 items displayed', async () => {
+      const addChildrenToFirstItem = await DSHookCO.getAddChildBtnByIndex(1);
+      await addChildrenToFirstItem.click();
+      await addChildrenToFirstItem.click();
+      await addChildrenToFirstItem.click();
+      const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(1);
+      await drillFirstItemBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('6')).length;
+      await expect(items).toEqual(3);
+    });
+  });
+
+  describe('PUI-9473, breadcrumb navigation, move to another branch', () => {
+    before(async () => {
+      const errorOnGo = await DSHookCO.useDsTree.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should create context for breadcrumb navigation and drill down one level', async () => {
+      const addChildrenToFirstItem = await DSHookCO.getAddChildBtnByIndex(0);
+      await addChildrenToFirstItem.click();
+      await addChildrenToFirstItem.click();
+      const addChildrenToSecondItem = await DSHookCO.getAddChildBtnByIndex(1);
+      await addChildrenToSecondItem.click();
+      await addChildrenToSecondItem.click();
+      const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
+      await drillFirstItemBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('1')).length;
+      const breadCrumbText = await (await DSHookCO.getBreadCrumbItemByIndex(1)).getText();
+      await expect(breadCrumbText).toEqual('child 1');
+      await expect(items).toEqual(3);
+    });
+    it('02: should create context for breadcrumb navigation 2 and drill down a second level', async () => {
+      const addChildrenToFirstChild = await DSHookCO.getAddChildBtnByIndex(0);
+      await addChildrenToFirstChild.click();
+      const drillFirstChildItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
+      await drillFirstChildItemBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('2')).length;
+      const breadcrumLevels = (await DSHookCO.getBreadCrumbItems()).length;
+      await expect(items).toEqual(1);
+      await expect(breadcrumLevels).toEqual(3);
+    });
+    it('03: should move back to first level using breadcrumb', async () => {
+      const breadcrumbItem = await DSHookCO.getBreadCrumbItemByIndex(1);
+      await breadcrumbItem.click();
+      const items = (await DSHookCO.getItemsByDataParentId('1')).length;
+      await expect(items).toEqual(3);
+    });
+    it('04: should move back to root level using breadcrumb', async () => {
+      const breadcrumbItem = await DSHookCO.getBreadCrumbItemByIndex(0);
+      await breadcrumbItem.click();
+      const items = (await DSHookCO.getItemsByDataParentId('__root')).length;
+      await expect(items).toEqual(2);
+    });
+    it('05: should navigate to the second branch and it should have the items created at the beggining', async () => {
+      const drillFirstChildItemBtn = await DSHookCO.getDrillThisBtnByIndex(1);
+      await drillFirstChildItemBtn.click();
+      const items = (await DSHookCO.getItemsByDataParentId('3')).length;
+      await expect(items).toEqual(4);
+    });
+  });
+
+  describe('PUI-9754, disabled controller scenario', () => {
+    before(async () => {
+      const errorOnGo = await DSHookCO.useDsTree.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should drill down and display a disabled drill down controller (since this item doesnt have any children)', async () => {
+      const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
+      await drillFirstItemBtn.click();
+      const drillFirstChildBtn = await DSHookCO.getDrillThisBtnByIndex(0);
+      const isDisabled = await drillFirstChildBtn.getAttribute('aria-disabled');
+      await expect(isDisabled).toBe('true');
+    });
+  });
+}

package/ds-hooks/DSHookCO.js

@@ -0,0 +1,196 @@
+/* eslint-disable import/no-relative-packages */
+import {
+  PATH_HOOKS,
+  PATH_E2E_HOOKS,
+  PATH_E2E_USE_FONT_SIZE_DETECTOR,
+  PATH_E2E_USE_FONT_SIZE_MEDIA,
+} from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSHookCO extends PageObject {
+  // Desktop
+  static blurOut = new Urlbuilder(PATH_HOOKS, 'use-on-blur-out');
+
+  static firstFocusIn = new Urlbuilder(PATH_HOOKS, 'use-on-first-focus-in');
+
+  static specificFocus = new Urlbuilder(PATH_HOOKS, 'use-on-specific-focus');
+
+  static useDsTree = new Urlbuilder(PATH_E2E_HOOKS, 'use-ds-tree-test');
+
+  static useArraish = new Urlbuilder(PATH_E2E_HOOKS, 'use-arraish-as-ds-tree-test');
+
+  static useFontSizeDetectorBasic = new Urlbuilder(PATH_E2E_USE_FONT_SIZE_DETECTOR, 'basic-test');
+
+  static useFontSizeDetectorCustomRule = new Urlbuilder(PATH_E2E_USE_FONT_SIZE_DETECTOR, 'custom-rule-test');
+
+  static useFontSizeMediaURL = new Urlbuilder(PATH_E2E_USE_FONT_SIZE_MEDIA, 'basic-test');
+
+  static async getBtns() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getBtnByIndex = async (index) => getElementByIndex(this.getBtns, index);
+
+  static async getH3s() {
+    return $$('div h3');
+  }
+
+  // mostly used
+  static getInfo = async () => getElementByIndex(this.getH3s, 3);
+
+  // used for first focus in story
+  static getInfo2 = async () => getElementByIndex(this.getH3s, 4);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Hook', example);
+  }
+
+  // selectors 4 use ds-tree
+
+  static async getAddItemButton() {
+    return $('[data-testid="add-item-button"]');
+  }
+
+  static async getRemoveThisButtons() {
+    return $$('[data-testid="remove-this-button"]');
+  }
+
+  static getRemoveThisBtnByIndex = async (index) => getElementByIndex(this.getRemoveThisButtons, index);
+
+  static async getDrillThisButtons() {
+    return $$('[data-testid="drill-this-button"]');
+  }
+
+  static getDrillThisBtnByIndex = async (index) => getElementByIndex(this.getDrillThisButtons, index);
+
+  static async getAddChildButtons() {
+    return $$('[data-testid="add-child-button"]');
+  }
+
+  static getAddChildBtnByIndex = async (index) => getElementByIndex(this.getAddChildButtons, index);
+
+  static async getBreadCrumbItems() {
+    return $$('[data-testid="ds-typography-element"]');
+  }
+
+  static getBreadCrumbItemByIndex = async (index) => getElementByIndex(this.getBreadCrumbItems, index);
+
+  static async getItemsByDataParentId(dataparentid = '__root') {
+    return $$(`[data-parentid="${dataparentid}"]`);
+  }
+
+  static getItemByDataParentIdAndIndex = async (dataparentid, index) =>
+    getElementByIndex(this.getItemsByDataParentIdAndIndex(dataparentid), index);
+
+  static async getDrillThisButtonByItem(item) {
+    return $(`${item} [data-testid="drill-this-button"]`);
+  }
+
+  static async getAddChildButtonByItem(item) {
+    return $(`${item} [data-testid="add-child-button"]`);
+  }
+
+  static async getRemoveThisButtonByItem(item) {
+    return $(`${item} [data-testid="remove-this-button"]`);
+  }
+
+  static async getSourceTest(index = 0) {
+    return $$(`[class="prism-code language-jsx"]`)[index];
+  }
+
+  static async getTestData(index = 0) {
+    return $$(`[data-testid="testdata"]`)[index];
+  }
+  // actions
+
+  static async increaseFontSize(nTimes = 1) {
+    for (let i = 0; i <= nTimes; i += 1) {
+      browser.performActions([
+        {
+          type: 'key',
+          id: 'keyboard',
+          parameters: { pointerType: 'mouse' },
+          actions: [
+            {
+              type: 'keyDown',
+              value: '\uE009',
+              pause: 500,
+            },
+            {
+              type: 'keyDown',
+              value: '\uE008',
+              pause: 500,
+            },
+            {
+              type: 'keyDown',
+              value: 'J',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: '\uE009',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: '\uE008',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: 'J',
+              pause: 500,
+            },
+          ],
+        },
+      ]);
+    }
+  }
+
+  static async decreaseFontSize(nTimes = 1) {
+    for (let i = 0; i <= nTimes; i += 1) {
+      browser.performActions([
+        {
+          type: 'key',
+          id: 'keyboard',
+          parameters: { pointerType: 'mouse' },
+          actions: [
+            {
+              type: 'keyDown',
+              value: '\uE009',
+              pause: 500,
+            },
+            {
+              type: 'keyDown',
+              value: '\uE008',
+              pause: 500,
+            },
+            {
+              type: 'keyDown',
+              value: 'U',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: '\uE009',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: '\uE008',
+              pause: 500,
+            },
+            {
+              type: 'keyUp',
+              value: 'U',
+              pause: 500,
+            },
+          ],
+        },
+      ]);
+    }
+  }
+
+  // utils
+}

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