dimsum-e2e-tests 1.0.0-rc.1

package/ds-transition/DSTransition.visual.spec.js

@@ -0,0 +1,40 @@
+import DSTransitionCO from './DSTransitionCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8360 - DSTransitionCO, COLLAPSE beginning and ending points - visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSTransitionCO.collapseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show transition default left collapsed right expanded', async () => {
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-collapse'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show transition interacted left expanded right collapsed', async () => {
+      const toggle1 = await DSTransitionCO.getToggleByIndex(0);
+      await toggle1.click();
+      const toggle2 = await DSTransitionCO.getToggleByIndex(1);
+      await toggle2.click();
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-collapse-bis'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8368 - DSTransitionCO, FADE beginning and ending points - visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSTransitionCO.fadeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show transition default left collapsed right expanded', async () => {
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-fade'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show transition interacted left expanded right collapsed', async () => {
+      const toggle1 = await DSTransitionCO.getToggleByIndex(0);
+      await toggle1.click();
+      const toggle2 = await DSTransitionCO.getToggleByIndex(1);
+      await toggle2.click();
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-fade-bis'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-transition/DSTransitionCO.js

@@ -0,0 +1,19 @@
+import { PATH_TRANSITION } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSTransitionCO extends PageObject {
+  static collapseURL = new Urlbuilder(PATH_TRANSITION, 'collapse');
+
+  static fadeURL = new Urlbuilder(PATH_TRANSITION, 'fade');
+
+  static async getToggles() {
+    return $$('[data-testid="ds-controlled-toggle-checkbox"]');
+  }
+
+  static getToggleByIndex = async (index) => getElementByIndex(this.getToggles, index);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Transition', example, 'ds-transition');
+  }
+}

package/ds-treeview/DSTreeViewCO.js

@@ -0,0 +1,465 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable no-await-in-loop */
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { PATH_TREEVIEW, PATH_E2E_TREEVIEW } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export const knobs = {
+  isSingleSelect: 'knob-Is single select',
+  compact: 'knob-Compact view',
+  restricDragAndDrop: 'knob-Restrict drag and drop',
+  disableLeafs: 'knob-Disable Leafs',
+  disableGroups: 'knob-Disable Groups',
+};
+
+export default class TreeViewCO extends PageObject {
+  static basicUrl = new Urlbuilder(PATH_TREEVIEW, 'basic');
+
+  static compactURL = new Urlbuilder(PATH_TREEVIEW, 'compact');
+
+  static fluidHeightURL = new Urlbuilder(PATH_TREEVIEW, 'fluid-height');
+
+  static searchableURL = new Urlbuilder(PATH_TREEVIEW, 'searchable-advanced-example');
+
+  static pui3504URL = new Urlbuilder(PATH_E2E_TREEVIEW, 'pui-3504');
+
+  static inModalURL = new Urlbuilder(PATH_E2E_TREEVIEW, 'in-modal');
+
+  static controlledSelect = new Urlbuilder(PATH_E2E_TREEVIEW, 'controlled-selection-test');
+
+  static controlled = new Urlbuilder(PATH_TREEVIEW, 'controlled');
+
+  static controlledSingleSelect = new Urlbuilder(PATH_TREEVIEW, 'controlled-single-select');
+
+  static singleSelect = new Urlbuilder(PATH_TREEVIEW, 'single-select');
+
+  static disableLeafs = new Urlbuilder(PATH_TREEVIEW, 'disable-leafs');
+
+  static compact = new Urlbuilder(PATH_TREEVIEW, 'compact-view');
+
+  static disableGroups = new Urlbuilder(PATH_TREEVIEW, 'disable-groups');
+
+  static multiSelect = new Urlbuilder(PATH_TREEVIEW, 'multi-select');
+
+  static selectedOnInitURL = new Urlbuilder(PATH_E2E_TREEVIEW, 'selected-on-init');
+
+  static withToolbar = new Urlbuilder(PATH_E2E_TREEVIEW, 'with-header-and-toolbar');
+
+  static multiDisableGroups = new Urlbuilder(PATH_TREEVIEW, 'multi-disable-groups');
+
+  static multiDisableLeafs = new Urlbuilder(PATH_TREEVIEW, 'multi-disable-leafs');
+
+  static actionToFocus = new Urlbuilder(PATH_TREEVIEW, 'action-to-focus-item-with-virtual-list');
+
+  static v2DndURL = new Urlbuilder(PATH_TREEVIEW, 'dn-d');
+
+  static v2RectrictedDndURL = new Urlbuilder(PATH_TREEVIEW, 'restrict-dn-d');
+
+  static searchableV2 = new Urlbuilder(PATH_TREEVIEW, 'searchable');
+
+  static searchableV2HighlightOnly = new Urlbuilder(PATH_TREEVIEW, 'searchable-highlight-only');
+
+  static searchableWithNav = new Urlbuilder(PATH_TREEVIEW, 'searchable-with-navigation-between-results');
+
+  static searchableTruncated = new Urlbuilder(PATH_TREEVIEW, 'searchable-truncated');
+
+  static wrappAll = new Urlbuilder(PATH_TREEVIEW, 'truncation-wrap-all');
+
+  static truncation = new Urlbuilder(PATH_TREEVIEW, 'truncation');
+
+  static sigleSelect = new Urlbuilder(PATH_TREEVIEW, 'single-select');
+
+  static frozenData = new Urlbuilder(PATH_TREEVIEW, 'frozen-data');
+
+  static initialCheckedMulti = new Urlbuilder(PATH_TREEVIEW, 'initial-checked-multi');
+
+  static focusOnInit = new Urlbuilder(PATH_TREEVIEW, 'focus-on-init');
+
+  static rightAddonsAsComponent = new Urlbuilder(PATH_E2E_TREEVIEW, 'right-addons-as-component-test');
+
+  static dragAndDrop = new Urlbuilder(PATH_E2E_TREEVIEW, 'drag-and-drop');
+
+  static restrictDragAndDropTest = new Urlbuilder(PATH_E2E_TREEVIEW, 'restrict-dn-d-test');
+
+  // Selectors
+  static async getTreeList() {
+    return $('[data-testid="tree-list"]');
+  }
+
+  static async getItemPseudoElementProperty(index, pseudo, property) {
+    return browser.execute(
+      (_index, _pseudo, _property) => {
+        // eslint-disable-next-line no-underscore-dangle
+        const row = window.getComputedStyle(document.querySelectorAll('[data-testid="tree-item"]')[_index], _pseudo);
+        return row.getPropertyValue(_property);
+      },
+      index,
+      pseudo,
+      property,
+    );
+  }
+
+  static async getSearchBox() {
+    return $('//input[contains(@placeholder,"Search all")]');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-modal"]');
+  }
+
+  static async getExpandToggleButton(index) {
+    return $$('[data-testid="tree-item-expand-toggle"]')[index];
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async radioButton(index) {
+    return (await $$('//span[@role="radio"]'))[index];
+  }
+
+  static async getCheckbox(index) {
+    return $$('[data-testid="tree-item-checkbox"]')[index];
+  }
+
+  static async isChecked(index) {
+    const checkbox = await this.getCheckbox(index);
+    if ((await checkbox.getAttribute('aria-checked')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isMixed(index) {
+    const checkbox = await this.getCheckbox(index);
+    if ((await checkbox.getAttribute('aria-checked')) === 'mixed') {
+      return true;
+    }
+    return false;
+  }
+
+  static async getTreeParent(index) {
+    return browser.waitUntil(
+      async () => {
+        const parents = await (await this.getTreeList()).$$('li');
+        if (parents.length <= index) return false;
+        return parents[index];
+      },
+      {
+        timeout: 3000,
+        timeoutMsg: 'Parent not displayed after 3 seconds',
+      },
+    );
+  }
+
+  static async isSelected(index) {
+    const parent = await this.getTreeParent(index);
+    return (await parent.getAttribute('class')).includes('selected');
+  }
+
+  static async isDisabled(index) {
+    const checkbox = await this.getCheckbox(index);
+    if (
+      (await checkbox.getAttribute('aria-disabled')) === 'true' ||
+      (await checkbox.getAttribute('disabled')) === 'true'
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getRadioButtonChecked(index) {
+    const radioButton = await this.radioButton(index);
+    if ((await radioButton.getAttribute('aria-checked')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isRadioDisabled(index) {
+    const radioButton = await this.radioButton(index);
+    if ((await radioButton.getAttribute('aria-disabled')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async getRows() {
+    return $$('[data-testid="tree-item"]');
+  }
+
+  static async getRow(index) {
+    return (await this.getRows())[index];
+  }
+
+  static async getDraggedItem() {
+    return $('[data-testid="dragged-item"]');
+  }
+
+  static async getFirstRow() {
+    return (await this.getRows())[0];
+  }
+
+  static async getLastRow() {
+    return (await this.getRows()).pop();
+  }
+
+  static async getToggleBtn(index) {
+    return (await $$('[data-testid="tree-item-expand-toggle"]'))[index];
+  }
+
+  static async getExpandBtn() {
+    return $('[data-testid="controlled-expand-tv"]');
+  }
+
+  static async getElementsTexts() {
+    return $$('[data-testid="DS-SimpleTruncateText"]');
+  }
+
+  static async getCollapseBtn() {
+    return $('[data-testid="controlled-collapse-tv"]');
+  }
+
+  static async getDeleteBtn() {
+    return $('[data-testid="controlled-delete-tv"]');
+  }
+
+  static async getDragHandle(index) {
+    return (await $$('[data-testid="drag-handle"]'))[index];
+  }
+
+  static async getFirstDragHandle() {
+    return $$('[data-testid="drag-handle"]')[0];
+  }
+
+  static async getLastDragHandle() {
+    return (await $$('[data-testid="drag-handle"]')).pop();
+  }
+
+  static async getHighligthedTexts() {
+    return $$('[data-testid="tree-text-highlight"]');
+  }
+
+  static async getRowByContent(text) {
+    return $(`//span[contains(text(), "${text}")]`);
+  }
+
+  // Actions
+  static async getContainerHeight() {
+    const { height } = await (await this.getTreeList()).getSize();
+    return Math.round(height);
+  }
+
+  static async getRowHeight() {
+    const { height } = await (await this.getRow(1)).getSize();
+    return Math.round(height);
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popover-container"]');
+  }
+
+  static async noItemsFound() {
+    return $('[data-testid="tree-list-no-items"]');
+  }
+
+  static async clearField() {
+    const input = await this.getSearchBox();
+    const len = (await input.getValue()).length;
+    await input.click();
+    for (let i = 0; i <= len; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(Key.Backspace);
+      await browser.pause(200);
+    }
+  }
+
+  static async expandCollapseAll() {
+    return browser.performActions([
+      {
+        type: 'key',
+        id: 'keyboard',
+        parameters: { pointerType: 'mouse' },
+        actions: [
+          {
+            type: 'keyDown',
+            value: '\uE024',
+            pause: 1000,
+          },
+          {
+            type: 'pause',
+            duration: 500,
+          },
+          {
+            type: 'keyUp',
+            value: '\uE024',
+            pause: 1000,
+          },
+        ],
+      },
+    ]);
+  }
+
+  static async isExpanded(index) {
+    return (await this.getRow(index)).getAttribute('aria-expanded');
+  }
+
+  static async checkItemPseudoBorder(index) {
+    const expectedBorderColor = 'rgb(0, 106, 169)';
+    return (
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-bottom-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-left-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-right-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-top-color')) === expectedBorderColor
+    );
+  }
+
+  static async isFocused(index) {
+    if (await this.checkItemPseudoBorder(index)) {
+      return true;
+    }
+    return false;
+  }
+
+  static async isHovered(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (bg.parsed.hex === '#ebf6ff') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActive(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (bg.parsed.hex === '#ebf6ff') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActiveFocused(index) {
+    // eslint-disable-next-line no-return-await
+    return (await this.isActive(index)) && (await this.isFocused(index));
+  }
+
+  static async isDefault(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (
+      bg.parsed.hex === '#ffffff' &&
+      !(await this.isFocused(index)) &&
+      !(await this.isHovered(index)) &&
+      !(await this.isActive(index))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getFocusFirstBtn() {
+    return $('[data-testid="PUI3771-first-tv"]');
+  }
+
+  static async getFocusLastBtn() {
+    return $('[data-testid="PUI3771-last-tv"]');
+  }
+
+  static async getDragHandleBorderColor(index) {
+    const dragHandle = await this.getDragHandle(index);
+    const bottomColor = await dragHandle.getCSSProperty('border-bottom-color');
+    const topColor = await dragHandle.getCSSProperty('border-top-color');
+    const leftColor = await dragHandle.getCSSProperty('border-left-color');
+    const rightColor = await dragHandle.getCSSProperty('border-right-color');
+    const borderColor = '#005fcc';
+    if (
+      bottomColor.parsed.hex === borderColor &&
+      topColor.parsed.hex === borderColor &&
+      leftColor.parsed.hex === borderColor &&
+      rightColor.parsed.hex === borderColor
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getSearchBoxInput() {
+    return $('[data-testid="ds-nav-searchbox-input"]');
+  }
+
+  static async getNextBtn() {
+    return $('[data-testid="ds-navsearchbox-next"]');
+  }
+
+  static async getPrevBtn() {
+    return $('[data-testid="ds-navsearchbox-prev"]');
+  }
+
+  static async getClearBtn() {
+    return $('[data-testid="ds-navsearchbox-clear"]');
+  }
+
+  static async getButtons(index) {
+    return $$('[data-testid="button-wrapper"]')[index];
+  }
+
+  static async getResultItems(index, total) {
+    return $(`div*=${index} / ${total}`);
+  }
+
+  static async getTextMark(text) {
+    return $(`mark*=${text}`);
+  }
+
+  static async getTextMarks(text) {
+    return $$(`mark*=${text}`);
+  }
+
+  static async tabSpaceEnter(key) {
+    if (browser.capabilities.browserName === 'Safari') {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(key);
+    } else {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(key);
+    }
+  }
+
+  static async getBtns(index) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  static async getExpandChevrons(index) {
+    return $$('[data-testid="ic-arrow-head-right"]')[index];
+  }
+
+  static async getTestCounter() {
+    return $('[data-testid="test-counter"]');
+  }
+
+  static async getRightAddons() {
+    return $$('[data-testid="right-addon-button"]');
+  }
+
+  static getRightAddonsByIndex = async (index) => getElementByIndex(this.getRightAddons, index);
+
+  static async triggerBackspace(number = 1) {
+    for (let x = 0; x < number; x += 1) {
+      await browser.keys(Key.Backspace);
+      await browser.pause(200);
+    }
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'compact') {
+    return PageObject.getSnapshotPathBuilder('TreeView', example, 'ds-treeview');
+  }
+}

package/ds-treeview/TreeView-autoscroll.func.spec.js

@@ -0,0 +1,47 @@
+/* eslint-disable wdio/no-pause */
+import DSTreeViewCO from './DSTreeViewCO';
+import { type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4263 - Scrollbar reset on search in modal', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.inModalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should open TreeView in modal', async () => {
+      const modalTriggerBtn = await DSTreeViewCO.getButton();
+      await modalTriggerBtn.click();
+      const modalContainer = await DSTreeViewCO.getModal();
+      await modalContainer.waitForDisplayed();
+      const treeList = await DSTreeViewCO.getTreeList();
+      await expect(treeList).toBeDisplayed();
+    });
+    it('02: should move scroll to top and show found item', async () => {
+      const row11 = await DSTreeViewCO.getRow(5);
+      await row11.waitForDisplayed();
+      await row11.scrollIntoView();
+      const searchBox = await DSTreeViewCO.getSearchBox();
+      await searchBox.click();
+      await type('UNIQUE_NAME_DO_NOT_CHANGE');
+      const rowSearched = await DSTreeViewCO.getTextMark('UNIQUE_NAME_DO_NOT_CHANGE');
+      await rowSearched.waitForDisplayed();
+      await expect(rowSearched).toBeDisplayed();
+    });
+    it('03: should display all after clear searchbox', async () => {
+      await DSTreeViewCO.clearField();
+      const row = await DSTreeViewCO.getRow(0);
+      await expect(row).toBeDisplayed();
+    });
+  });
+  describe('PUI-5423 - TreeView: async scroll to', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.focusOnInit.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus row 8', async () => {
+      await browser.pause(500);
+      const row8focused = await DSTreeViewCO.isFocused(8);
+      await expect(row8focused).toBe(true);
+    });
+  });
+}

package/ds-treeview/TreeView-controlled.func.spec.js

@@ -0,0 +1,62 @@
+import { Key } from 'webdriverio';
+import DSTreeViewCO from './DSTreeViewCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7762 - Controlled delete', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.controlled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should expand all elements', async () => {
+      const expandAllBtn = await DSTreeViewCO.getExpandBtn();
+      await expandAllBtn.click();
+      const elements = (await DSTreeViewCO.getElementsTexts()).length;
+      await expect(elements).toEqual(10);
+    });
+    it('should delete one element and its nested elements keeping remaining elements expanded', async () => {
+      const deleteFirstElem = await DSTreeViewCO.getDeleteBtn();
+      await deleteFirstElem.click();
+      const elements = (await DSTreeViewCO.getElementsTexts()).length;
+      await expect(elements).toEqual(5);
+    });
+    it('should collapse all', async () => {
+      const collapseAllBtn = await DSTreeViewCO.getCollapseBtn();
+      await collapseAllBtn.click();
+      const elements = (await DSTreeViewCO.getElementsTexts()).length;
+      await expect(elements).toEqual(3);
+    });
+  });
+
+  describe('PUI-8034 - Controlled drag and drop', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.controlled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should expand the second folder', async () => {
+      const expandSecondFolderBtn = await DSTreeViewCO.getToggleBtn(1);
+      await expandSecondFolderBtn.click();
+      const isExpanded = await DSTreeViewCO.isExpanded(1);
+      await expect(isExpanded).toEqual('true');
+    });
+    it('should drop an item in the second folder, it should remain open', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const isExpanded = await DSTreeViewCO.isExpanded(0);
+      await expect(isExpanded).toEqual('true');
+    });
+    it('should drop the second folder in the third folder, it should remain closed', async () => {
+      const item = await DSTreeViewCO.getRow(4);
+      await item.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const isExpanded = await DSTreeViewCO.isExpanded(4);
+      await expect(isExpanded).toEqual('false');
+    });
+  });
+}