dimsum-e2e-tests 3.22.0-next.36

package/ds-zoom/DSZoomCO.js

@@ -0,0 +1,28 @@
+import { PATH_ZOOM } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSZoomCO extends PageObject {
+  static otherOptions = new Urlbuilder(PATH_ZOOM, 'other-options');
+
+  static withFormItemLayout = new Urlbuilder(PATH_ZOOM, 'with-form-item-layout');
+
+  static async getCombobox(index = null) {
+    if (index) {
+      return $('[data-testid="combobox-value-container"]')[index];
+    }
+    return $('[data-testid="combobox-value-container"]');
+  }
+
+  static async getComboboxValue() {
+    return $('[data-testid="combobox-value-container"]').$('span');
+  }
+
+  static async getComboboxOption(option) {
+    return $(`//div[@data-testid="combobox-option"][contains(text(),"${option}")]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Zoom', example, 'ds-zoom');
+  }
+}

package/gestures.js

@@ -0,0 +1,182 @@
+/* eslint-disable max-lines */
+const SCREEN_SIZE = { width: 414, height: 896, x: 0, y: 0 };
+/**
+ * The values in the below object are percentages of the screen
+ */
+const SWIPE_DIRECTION = {
+  down: {
+    start: { x: 50, y: 45 },
+    end: { x: 50, y: 85 },
+  },
+  left: {
+    start: { x: 95, y: 50 },
+    end: { x: 5, y: 50 },
+  },
+  right: {
+    start: { x: 5, y: 50 },
+    end: { x: 95, y: 50 },
+  },
+  up: {
+    start: { x: 50, y: 85 },
+    end: { x: 50, y: 15 },
+  },
+};
+
+export const REL_SWIPE_DIRECTION = {
+  up: {
+    x: 0,
+    y: 1,
+  },
+  down: {
+    x: 0,
+    y: -1,
+  },
+  left: {
+    x: -1,
+    y: 0,
+  },
+  right: {
+    x: 1,
+    y: 0,
+  },
+};
+
+class Gestures {
+  static async checkIfDisplayedWithScrollDown(element, maxScrolls, amount = 0) {
+    if ((!(await element.isExisting()) || !(await element.isDisplayed())) && amount <= maxScrolls) {
+      await this.swipeUp(0.85);
+      await this.checkIfDisplayedWithScrollDown(element, maxScrolls, amount + 1);
+    } else if (amount > maxScrolls) {
+      throw new Error(`The element '${element}' could not be found or is not visible.`);
+    }
+  }
+
+  // Android only
+  static async swipeUntilDisplayed({
+    swipeElement,
+    targetElement,
+    maxSwipes = 40,
+    swipeDirection = REL_SWIPE_DIRECTION.down,
+    extraSwipes = 0,
+  }) {
+    let amount = 0;
+    // eslint-disable-next-line no-await-in-loop
+    while (amount < maxSwipes && !(await targetElement.isDisplayedInViewport())) {
+      // eslint-disable-next-line no-await-in-loop
+      await this.relativeSwipe(swipeElement, swipeDirection, 0.5);
+      amount += 1;
+    }
+    let swipes = extraSwipes;
+    // eslint-disable-next-line no-await-in-loop
+    while ((await targetElement.isDisplayedInViewport()) && swipes > 0) {
+      // eslint-disable-next-line no-await-in-loop
+      await this.relativeSwipe(swipeElement, swipeDirection, 0.5);
+      swipes -= 1;
+    }
+    if (amount >= maxSwipes) {
+      throw new Error(`The target element could not be found or is not visible.`);
+    }
+  }
+
+  // Android only
+  static async relativeSwipe(element, direction, percentage) {
+    const elementSize = await element.getSize();
+    const elementLocation = await element.getLocation();
+    const startSwipe = {
+      x: Math.round(elementLocation.x + elementSize.width / 2),
+      y: Math.round(elementLocation.y + elementSize.height / 2),
+    };
+    const screenSize = await $('body').getSize();
+    const endCoords = {
+      x: Math.round(startSwipe.x + direction.x * screenSize.width * percentage),
+      y: Math.round(startSwipe.y + direction.y * screenSize.height * percentage),
+    };
+    await this.swipe(startSwipe, endCoords);
+  }
+
+  static async swipeDown(percentage = 0.8) {
+    await this.swipeOnPercentage(
+      this.calculateXY(SWIPE_DIRECTION.down.start, percentage),
+      this.calculateXY(SWIPE_DIRECTION.down.end, percentage),
+    );
+  }
+
+  static async swipeUp(percentage = 1) {
+    await this.swipeOnPercentage(
+      this.calculateXY(SWIPE_DIRECTION.up.start, percentage),
+      this.calculateXY(SWIPE_DIRECTION.up.end, percentage),
+    );
+  }
+
+  static async swipeLeft(percentage = 1) {
+    await this.swipeOnPercentage(
+      this.calculateXY(SWIPE_DIRECTION.left.start, percentage),
+      this.calculateXY(SWIPE_DIRECTION.left.end, percentage),
+    );
+  }
+
+  static swipeRight(percentage = 1) {
+    this.swipeOnPercentage(
+      this.calculateXY(SWIPE_DIRECTION.right.start, percentage),
+      this.calculateXY(SWIPE_DIRECTION.right.end, percentage),
+    );
+  }
+
+  static async swipeOnPercentage(from, to) {
+    const pressOptions = this.getDeviceScreenCoordinates(SCREEN_SIZE, from);
+    const moveToScreenCoordinates = this.getDeviceScreenCoordinates(SCREEN_SIZE, to);
+    await this.swipe(pressOptions, moveToScreenCoordinates);
+  }
+
+  static async swipe(from, to) {
+    return browser.performActions([
+      {
+        type: 'pointer',
+        id: 'finger',
+        parameters: { pointerType: 'touch' },
+        actions: [
+          {
+            type: 'pointerMove',
+            duration: 0,
+            x: from.x,
+            y: from.y,
+          },
+          {
+            type: 'pointerDown',
+            button: 0,
+          },
+          {
+            type: 'pause',
+            duration: 500,
+          },
+          {
+            type: 'pointerMove',
+            duration: 1000,
+            x: to.x,
+            y: to.y,
+          },
+          {
+            type: 'pointerUp',
+            button: 0,
+          },
+        ],
+      },
+    ]);
+  }
+
+  static getDeviceScreenCoordinates(screenSize, coordinates) {
+    return {
+      x: Math.round(screenSize.width * (coordinates.x / 100)),
+      y: Math.round(screenSize.height * (coordinates.y / 100)),
+    };
+  }
+
+  static calculateXY({ x, y }, percentage) {
+    return {
+      x: x * percentage,
+      y: y * percentage,
+    };
+  }
+}
+
+export default Gestures;

package/helpers.js

@@ -0,0 +1,413 @@
+/* eslint-disable no-console */
+/* eslint-disable wdio/no-pause */
+/* eslint-disable no-await-in-loop */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { PageObject } from './PageObject';
+import AxeBuilder from '@axe-core/webdriverio';
+export { getUrl } from '../scripts/testing/utils';
+export * from './PageObject';
+export const DimsumConfig = {
+  classNamePrefix: 'em-ds',
+};
+export const longText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
+function objectToQuerystring(obj) {
+  return Object.keys(obj).reduce((str, key) => [str, '&', key, '=', obj[key]].join(''), '');
+}
+export class Urlbuilder {
+  path = '';
+
+  knobs = {};
+
+  maxTries = 3;
+
+  constructor(path, component, iframe) {
+    this.path = PageObject.getUrl(path, component, iframe);
+  }
+
+  addKnob = (key, value) => {
+    this.knobs[key] = value;
+    return this;
+  };
+
+  removeKnob = (key) => {
+    delete this.knobs[key];
+    return this;
+  };
+
+  clear = () => {
+    this.knobs = {};
+  };
+
+  render = () => `${this.path}&${objectToQuerystring(this.knobs)}`;
+
+  goOnce = async (currentTry) => {
+    await browser.url(this.render());
+    return this.waitPageLoaded(currentTry);
+  };
+
+  failSafeGo = async (currentTry) => {
+    const maxTriesMsg = 'expected page to be loaded after a maximum of 3 tries but failed';
+    const maxTriesError = new Error(maxTriesMsg);
+
+    if (currentTry === this.maxTries) return maxTriesError;
+
+    const wentOnceGotError = await this.goOnce(currentTry);
+    if (wentOnceGotError) {
+      if (wentOnceGotError?.message === 'failed to load the story' || wentOnceGotError?.message?.includes('net::')) {
+        return this.failSafeGo(currentTry + 1);
+      }
+
+      return wentOnceGotError;
+    }
+    return false;
+  };
+
+  go = async () => {
+    await browser.setTimeout({ script: 60000 });
+    const goHadErrorAfterThreeTries = await this.failSafeGo(0);
+    this.clear();
+    if (goHadErrorAfterThreeTries) return goHadErrorAfterThreeTries;
+    return false;
+  };
+
+  async documentLoaded() {
+    const state = await browser.execute(() => document.readyState);
+    return state === 'complete';
+  }
+
+  async getDocumentHasError(currentTry) {
+    const result = await browser.executeAsync(async (currTryNum, executeDone) => {
+      const dsSBError = new Error();
+      dsSBError.customDimsumInternalError = true;
+      dsSBError.currentTry = currTryNum;
+      let gotError = false;
+
+      const myWaitForElement = async () => {
+        let maxTries = 65;
+        const { interval, result } = await new Promise((done) => {
+          let shouldShortcircuit = false;
+          const checkExist = setInterval(function () {
+            let intervalResult;
+            if (maxTries < 0) {
+              intervalResult = "max tries reached, element didn't appear";
+            }
+            maxTries -= 1;
+
+            const element = document.querySelector('body.sb-show-main');
+            if (element !== null) intervalResult = false;
+            const errorElementInnerHtml = document.querySelector('body .sb-errordisplay .sb-heading').innerHTML;
+            if (errorElementInnerHtml !== '') {
+              intervalResult = errorElementInnerHtml;
+            }
+
+            shouldShortcircuit = element !== null || errorElementInnerHtml !== '' || maxTries < 0;
+
+            if (shouldShortcircuit) done({ result: intervalResult, interval: checkExist });
+          }, 1000);
+        });
+        clearInterval(interval);
+        return result;
+      };
+      const withError = await myWaitForElement();
+      const storybookNoPreviewBody = document.querySelector('body.sb-main-padded.sb-show-nopreview');
+      const storybookStoryBody = document.querySelector('body.sb-main-fullscreen.sb-show-main');
+
+      if (withError) {
+        gotError = true;
+        dsSBError.message = `the story is failing with error: ${withError}`;
+      } else if (storybookStoryBody === null) {
+        gotError = true;
+        dsSBError.message = 'failed to load the story';
+      } else if (storybookNoPreviewBody !== null) {
+        dsSBError.message = 'storybook failed to load the story, story may be missing or url may be incorrect';
+        gotError = true;
+      }
+
+      if (gotError) executeDone(dsSBError);
+      executeDone(false);
+    }, currentTry);
+
+    return result;
+  }
+
+  waitPageLoaded = async (currentTry) => {
+    await browser.waitUntil(async () => this.documentLoaded(), {
+      timeout: 120000,
+      timeoutMsg: 'expected page to be loaded after 120s but failed',
+    });
+    let error;
+    await browser.waitUntil(
+      async () => {
+        error = await this.getDocumentHasError(currentTry);
+        return error === false || (error && error.message && typeof error.message === 'string');
+      },
+      {
+        timeout: 60000,
+        timeoutMsg: 'expected story to be lazy load after 60s but failed',
+      },
+    );
+    if (error) return error;
+    return false;
+  };
+}
+export async function mouseOver(element, x = 10, y = 10) {
+  let xloc = x;
+  let yloc = y;
+  if (element !== null) {
+    xloc = parseInt(await element.getLocation('x'), 10) + x;
+    yloc = parseInt(await element.getLocation('y'), 10) + y;
+  }
+  return browser.performActions([
+    {
+      type: 'pointer',
+      id: 'finger1',
+      parameters: { pointerType: 'mouse' },
+      actions: [
+        {
+          type: 'pointerMove',
+          duration: 500,
+          x: xloc,
+          y: yloc,
+        },
+      ],
+    },
+  ]);
+}
+export async function asyncMouseOver(element, x = 10, y = 10) {
+  let xloc = x;
+  let yloc = y;
+  if (element !== null) {
+    xloc = parseInt(await element.getLocation('x'), 10) + x;
+    yloc = parseInt(await element.getLocation('y'), 10) + y;
+  }
+  return browser.performActions([
+    {
+      type: 'pointer',
+      id: 'finger1',
+      parameters: { pointerType: 'mouse' },
+      actions: [
+        {
+          type: 'pointerMove',
+          duration: 500,
+          x: xloc,
+          y: yloc,
+        },
+      ],
+    },
+  ]);
+}
+export async function clickPosition(x = 10, y = 10) {
+  const xloc = x;
+  const yloc = y;
+  await browser.performActions([
+    {
+      type: 'pointer',
+      id: 'finger1',
+      parameters: { pointerType: 'mouse' },
+      actions: [
+        {
+          type: 'pointerMove',
+          duration: 10,
+          x: xloc,
+          y: yloc,
+        },
+        {
+          type: 'pointerDown',
+          button: 0,
+        },
+        {
+          type: 'pause',
+          duration: 500,
+        },
+        {
+          type: 'pointerUp',
+          button: 0,
+        },
+      ],
+    },
+  ]);
+}
+
+export async function getElementByIndex(selectorFn, index) {
+  return browser.waitUntil(
+    async () => {
+      const selector = await selectorFn();
+      return selector.length > index ? selector[index] : false;
+    },
+    {
+      timeout: 5000,
+      timeoutMsg: 'element not displayed after 5 seconds',
+    },
+  );
+}
+
+export const keyboardActions = {
+  SPACE: '\uE00D',
+  ENTER: '\uE007',
+  RETURN: '\uE006',
+  SHIFT: '\uE008',
+};
+
+export const tickActions = {
+  KEYUP: 'keyUp',
+  KEYDOWN: 'keyDown',
+};
+
+export async function performKeyboardAction(keyboardAction, tickAction) {
+  return browser.performActions([
+    {
+      type: 'key',
+      id: 'keyboard',
+      parameters: { pointerType: 'mouse' },
+      actions: [
+        {
+          type: tickAction,
+          value: keyboardAction,
+          pause: 1000,
+        },
+      ],
+    },
+  ]);
+}
+
+const shiftKeyDownAction = {
+  type: 'key',
+  id: 'keyboard',
+  parameters: { pointerType: 'mouse' },
+  actions: [
+    {
+      type: 'keyDown',
+      value: '\uE008',
+      pause: 1000,
+    },
+  ],
+};
+const shiftKeyUpAction = {
+  type: 'key',
+  id: 'keyboard',
+  parameters: { pointerType: 'mouse' },
+  actions: [
+    {
+      type: 'keyUp',
+      value: '\uE008',
+      pause: 1000,
+    },
+  ],
+};
+
+export async function shifKeyDown() {
+  return browser.performActions([shiftKeyDownAction]);
+}
+export async function shiftKeyUp() {
+  return browser.performActions([shiftKeyUpAction]);
+}
+export async function type(chars = '1234567890') {
+  const numbers = [...chars];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const char of numbers) {
+    // https://github.com/webdriverio/webdriverio/issues/5092
+    // using keys char by char results in correct order
+    await browser.keys(char);
+  }
+}
+export async function isChecked(checkBox) {
+  return (await checkBox.getAttribute('aria-checked')) === 'true';
+}
+
+export const asyncSome = async (arr, predicate) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const e of arr) {
+    if (await predicate(e)) return true;
+  }
+  return false;
+};
+
+export const asyncEvery = async (arr, predicate) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const e of arr) {
+    if (!(await predicate(e))) return false;
+  }
+  return true;
+};
+
+export async function clearValue(input) {
+  const inputLength = await (await input.getText()).length;
+  await input.click();
+  for (let x = 0; x < inputLength; x += 1) {
+    await browser.keys(Key.ArrowLeft);
+  }
+  for (let x = 0; x < inputLength; x += 1) {
+    await browser.keys(Key.Delete);
+  }
+}
+
+export async function tabStops(number) {
+  for (let x = 0; x < number; x += 1) {
+    await browser.keys(Key.Tab);
+    await browser.pause(100);
+  }
+}
+
+export async function getTestData(index) {
+  return $(`[data-testid="test-data-${index}"]`);
+}
+
+export async function getLocationByDataTestId(dataTest, index) {
+  const result = await browser.executeAsync(
+    async (dataTest, index = 0, doneExc) => {
+      const element = await document.querySelectorAll(`[data-testid=${dataTest}]`)[index];
+      const location = await element.getBoundingClientRect();
+      const xLocation = await parseInt(location.x);
+      const yLocation = await parseInt(location.y);
+      doneExc({ xLocation, yLocation });
+    },
+    dataTest,
+    index,
+  );
+  return result;
+}
+
+export async function setTextSize(size) {
+  await browser.executeAsync(async (size, doneWithScript) => {
+    const myWaitForElement = async () => {
+      let maxTries = 65;
+      const { interval, result } = await new Promise((done) => {
+        let shouldShortcircuit = false;
+        const checkExist = setInterval(function () {
+          let intervalResult;
+          if (maxTries < 0) {
+            intervalResult = "max tries reached, element didn't appear";
+          }
+          maxTries -= 1;
+
+          const element = document.querySelector(':root');
+          if (element !== null) intervalResult = false;
+
+          shouldShortcircuit = element !== null || maxTries < 0;
+
+          if (shouldShortcircuit) done({ result: intervalResult, interval: checkExist });
+        }, 1000);
+      });
+      clearInterval(interval);
+      return result;
+    };
+    const withError = await myWaitForElement();
+    if (!withError) {
+      const root = await document.querySelector(':root');
+      await root.setAttribute('style', `font-size: ${size}px`);
+    }
+    doneWithScript(!withError);
+  }, size);
+}
+
+/// Axe-core implementation
+export async function axeCoreCheck() {
+  const builder = await new AxeBuilder({ client: browser }).disableRules(['valid-lang', 'page-has-heading-one']);
+  const results = await builder.analyze();
+  if (results.violations.length >= 1) {
+    console.dir('### AXE-CORE ### ');
+    console.dir(results.violations, { depth: null });
+  }
+  return await results.violations;
+}

package/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "types": ["node", "webdriverio/sync", "@wdio/mocha-framework"]
+  }
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "dimsum-e2e-tests",
+  "version": "3.22.0-next.36",
+  "description": "End-to-end tests for dimsum library",
+  "dependencies": {
+    "@elliemae/ds-form-date-time-picker": "3.22.0-next.36",
+    "@elliemae/ds-image": "3.22.0-next.36",
+    "@elliemae/ds-shuttle-v2": "3.22.0-next.36",
+    "@elliemae/ds-svg": "3.22.0-next.36"
+  }
+}

package/utils.js

@@ -0,0 +1 @@
+export const matcher = 0.1;