@commercetools-frontend/cypress 22.8.3 → 22.9.1

package/add-commands/dist/commercetools-frontend-cypress-add-commands.cjs.dev.js

@@ -16,6 +16,9 @@ var semver = require('semver');
 var uuid = require('uuid');
 var ssr = require('@commercetools-frontend/application-shell/ssr');
 var constants = require('../../dist/constants-c657705e.cjs.dev.js');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _reduceRightInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce-right');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -31,6 +34,8 @@ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInsta
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _URL__default = /*#__PURE__*/_interopDefault(_URL);
 var semver__default = /*#__PURE__*/_interopDefault(semver);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _reduceRightInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceRightInstanceProperty);
 
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -223,6 +228,214 @@ function isLocalhost() {
   return baseUrl.hostname === 'localhost';
 }
 
+/**
+ * NOTE: the `realHover` command is originally being implemented in `cypress-real-events` package.
+ * https://github.com/dmtrKovalenko/cypress-real-events/blob/develop/src/commands/realHover.ts
+ *
+ * However, due to known issues with conflicting types between Cypress and Jest, importing the `cypress-real-events`
+ * package here will cause such issues with TypeScript as our `@commercetools-frontend/cypress` package
+ * is checked and built together with all other packages and not in isolation.
+ * See https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest.
+ *
+ * Therefore, we are porting here the implementation of `realHover` to avoid importing it from the
+ * original package `cypress-real-events`.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+async function fireCdpCommand(command, params) {
+  return Cypress.automation('remote:debugger:protocol', {
+    command,
+    params
+  }).catch(error => {
+    throw new Error("Failed request to chrome devtools protocol. This can happen if cypress lost connection to the browser or the command itself is not valid. Original cypress error: ".concat(error));
+  });
+}
+function getPositionedCoordinates(x0, y0, width, height, position, frameScale) {
+  if (typeof position === 'object' && position !== null) {
+    const x = position.x,
+      y = position.y;
+    // scale the position coordinates according to the viewport scale
+    return [x0 + x * frameScale, y0 + y * frameScale];
+  }
+  switch (position) {
+    case 'topLeft':
+      return [x0, y0];
+    case 'top':
+      return [x0 + width / 2, y0];
+    case 'topRight':
+      return [x0 + width - 1, y0];
+    case 'left':
+      return [x0, y0 + height / 2];
+    case 'right':
+      return [x0 + width - 1, y0 + height / 2];
+    case 'bottomLeft':
+      return [x0, y0 + height - 1];
+    case 'bottom':
+      return [x0 + width / 2, y0 + height - 1];
+    case 'bottomRight':
+      return [x0 + width - 1, y0 + height - 1];
+    // center by default
+    default:
+      return [x0 + width / 2, y0 + height / 2];
+  }
+}
+/**
+ * Scrolls the given htmlElement into view on the page.
+ * The position the element is scrolled to can be customized with scrollBehavior.
+ */
+function scrollIntoView(htmlElement) {
+  let scrollBehavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
+  let block;
+  if (scrollBehavior === 'top') {
+    block = 'start';
+  } else if (scrollBehavior === 'bottom') {
+    block = 'end';
+  } else {
+    block = scrollBehavior;
+  }
+  htmlElement.scrollIntoView({
+    block
+  });
+}
+
+// for cross origin domains .frameElement returns null so query using parentWindow
+// but when running using --disable-web-security it will return the frame element
+function getFrameElement(currentWindow) {
+  var _context;
+  if (currentWindow.frameElement) {
+    // accessible for same-origin iframes
+    // or when running with --disable-web-security
+    return currentWindow.frameElement;
+  }
+
+  // fallback to querying using the parent window, mainly to grab the AUT iframe
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return _findInstanceProperty__default["default"](_context = [...currentWindow.parent.document.querySelectorAll('iframe')]).call(_context, iframe => iframe.contentWindow === currentWindow);
+}
+function getIframesPositionShift(element) {
+  let currentWindow = element.ownerDocument.defaultView;
+  const noPositionShift = {
+    frameScale: 1,
+    frameX: 0,
+    frameY: 0
+  };
+  if (!currentWindow) {
+    return noPositionShift;
+  }
+
+  // eslint-disable-next-line prefer-const
+  const iframes = [];
+  while (currentWindow !== window.top) {
+    iframes.push(getFrameElement(currentWindow));
+    currentWindow = currentWindow.parent;
+  }
+  return _reduceRightInstanceProperty__default["default"](iframes).call(iframes, (_ref, frame) => {
+    let frameX = _ref.frameX,
+      frameY = _ref.frameY,
+      frameScale = _ref.frameScale;
+    const _frame$getBoundingCli = frame.getBoundingClientRect(),
+      x = _frame$getBoundingCli.x,
+      y = _frame$getBoundingCli.y,
+      width = _frame$getBoundingCli.width;
+    return {
+      frameX: frameX + x * frameScale,
+      frameY: frameY + y * frameScale,
+      frameScale: frameScale * (width / frame.offsetWidth)
+    };
+  }, noPositionShift);
+}
+
+/**
+ * Returns the coordinates and size of a given Element, relative to the Cypress app <iframe>.
+ * Accounts for any scaling on the iframes.
+ */
+function getElementPositionXY(htmlElement) {
+  const _htmlElement$getBound = htmlElement.getBoundingClientRect(),
+    elementX = _htmlElement$getBound.x,
+    elementY = _htmlElement$getBound.y,
+    width = _htmlElement$getBound.width,
+    height = _htmlElement$getBound.height;
+  const _getIframesPositionSh = getIframesPositionShift(htmlElement),
+    frameScale = _getIframesPositionSh.frameScale,
+    frameX = _getIframesPositionSh.frameX,
+    frameY = _getIframesPositionSh.frameY;
+  return {
+    x: frameX + elementX * frameScale,
+    y: frameY + elementY * frameScale,
+    width: width * frameScale,
+    height: height * frameScale,
+    frameScale: frameScale
+  };
+}
+function getCypressElementCoordinates(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+jqueryEl, position, scrollBehavior) {
+  var _ref2;
+  const htmlElement = jqueryEl.get(0);
+  const cypressAppFrame = window.parent.document.querySelector('iframe');
+  if (!cypressAppFrame) {
+    throw new Error('Can not find cypress application iframe, it looks like critical issue. Please rise an issue on GitHub.');
+  }
+  const effectiveScrollBehavior = (_ref2 = scrollBehavior !== null && scrollBehavior !== void 0 ? scrollBehavior : Cypress.config('scrollBehavior')) !== null && _ref2 !== void 0 ? _ref2 : 'center';
+  if (effectiveScrollBehavior && typeof effectiveScrollBehavior !== 'object') {
+    scrollIntoView(htmlElement, effectiveScrollBehavior);
+  }
+  const _getElementPositionXY = getElementPositionXY(htmlElement),
+    x = _getElementPositionXY.x,
+    y = _getElementPositionXY.y,
+    width = _getElementPositionXY.width,
+    height = _getElementPositionXY.height,
+    frameScale = _getElementPositionXY.frameScale;
+  const _getPositionedCoordin = getPositionedCoordinates(x, y, width, height, position !== null && position !== void 0 ? position : 'center', frameScale),
+    _getPositionedCoordin2 = _slicedToArray(_getPositionedCoordin, 2),
+    posX = _getPositionedCoordin2[0],
+    posY = _getPositionedCoordin2[1];
+  return {
+    x: posX,
+    y: posY,
+    frameScale: frameScale
+  };
+}
+const keyToModifierBitMap = {
+  Alt: 1,
+  Control: 2,
+  Meta: 4,
+  Shift: 8
+};
+async function realHover(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+subject) {
+  var _options$pointer;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const _getCypressElementCoo = getCypressElementCoordinates(subject, options.position, options.scrollBehavior),
+    x = _getCypressElementCoo.x,
+    y = _getCypressElementCoo.y;
+  const log = Cypress.log({
+    $el: subject,
+    name: 'realHover',
+    consoleProps: () => ({
+      'Applied To': subject.get(0),
+      'Absolute Coordinates': {
+        x,
+        y
+      }
+    })
+  });
+  await fireCdpCommand('Input.dispatchMouseEvent', {
+    x,
+    y,
+    type: 'mouseMoved',
+    button: 'none',
+    pointerType: (_options$pointer = options.pointer) !== null && _options$pointer !== void 0 ? _options$pointer : 'mouse',
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0
+  });
+  log.snapshot().end();
+  return subject;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -244,3 +457,11 @@ Cypress.Commands.add('loginByOidc', commandOptions => {
   cy.log('We recommend not to use the command "cy.loginByOidc" directly. Instead, use the more generic "cy.loginToMerchantCenter" command as it automatically detects which login mechanism to use.');
   loginByOidc(commandOptions);
 });
+Cypress.Commands.add('hover', {
+  prevSubject: true
+}, realHover);
+Cypress.Commands.add('showNavigationSubmenuItems', menuItemTextMatcher => {
+  cy.findByTestId('left-navigation').findByText(menuItemTextMatcher).parents('[role="menuitem"]').first()
+  // Refers to the custom command "hover"
+  .hover();
+});

package/add-commands/dist/commercetools-frontend-cypress-add-commands.cjs.prod.js

@@ -16,6 +16,9 @@ var semver = require('semver');
 var uuid = require('uuid');
 var ssr = require('@commercetools-frontend/application-shell/ssr');
 var constants = require('../../dist/constants-8ad2a50e.cjs.prod.js');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _reduceRightInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce-right');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -31,6 +34,8 @@ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInsta
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _URL__default = /*#__PURE__*/_interopDefault(_URL);
 var semver__default = /*#__PURE__*/_interopDefault(semver);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _reduceRightInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceRightInstanceProperty);
 
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -223,6 +228,214 @@ function isLocalhost() {
   return baseUrl.hostname === 'localhost';
 }
 
+/**
+ * NOTE: the `realHover` command is originally being implemented in `cypress-real-events` package.
+ * https://github.com/dmtrKovalenko/cypress-real-events/blob/develop/src/commands/realHover.ts
+ *
+ * However, due to known issues with conflicting types between Cypress and Jest, importing the `cypress-real-events`
+ * package here will cause such issues with TypeScript as our `@commercetools-frontend/cypress` package
+ * is checked and built together with all other packages and not in isolation.
+ * See https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest.
+ *
+ * Therefore, we are porting here the implementation of `realHover` to avoid importing it from the
+ * original package `cypress-real-events`.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+async function fireCdpCommand(command, params) {
+  return Cypress.automation('remote:debugger:protocol', {
+    command,
+    params
+  }).catch(error => {
+    throw new Error("Failed request to chrome devtools protocol. This can happen if cypress lost connection to the browser or the command itself is not valid. Original cypress error: ".concat(error));
+  });
+}
+function getPositionedCoordinates(x0, y0, width, height, position, frameScale) {
+  if (typeof position === 'object' && position !== null) {
+    const x = position.x,
+      y = position.y;
+    // scale the position coordinates according to the viewport scale
+    return [x0 + x * frameScale, y0 + y * frameScale];
+  }
+  switch (position) {
+    case 'topLeft':
+      return [x0, y0];
+    case 'top':
+      return [x0 + width / 2, y0];
+    case 'topRight':
+      return [x0 + width - 1, y0];
+    case 'left':
+      return [x0, y0 + height / 2];
+    case 'right':
+      return [x0 + width - 1, y0 + height / 2];
+    case 'bottomLeft':
+      return [x0, y0 + height - 1];
+    case 'bottom':
+      return [x0 + width / 2, y0 + height - 1];
+    case 'bottomRight':
+      return [x0 + width - 1, y0 + height - 1];
+    // center by default
+    default:
+      return [x0 + width / 2, y0 + height / 2];
+  }
+}
+/**
+ * Scrolls the given htmlElement into view on the page.
+ * The position the element is scrolled to can be customized with scrollBehavior.
+ */
+function scrollIntoView(htmlElement) {
+  let scrollBehavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
+  let block;
+  if (scrollBehavior === 'top') {
+    block = 'start';
+  } else if (scrollBehavior === 'bottom') {
+    block = 'end';
+  } else {
+    block = scrollBehavior;
+  }
+  htmlElement.scrollIntoView({
+    block
+  });
+}
+
+// for cross origin domains .frameElement returns null so query using parentWindow
+// but when running using --disable-web-security it will return the frame element
+function getFrameElement(currentWindow) {
+  var _context;
+  if (currentWindow.frameElement) {
+    // accessible for same-origin iframes
+    // or when running with --disable-web-security
+    return currentWindow.frameElement;
+  }
+
+  // fallback to querying using the parent window, mainly to grab the AUT iframe
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return _findInstanceProperty__default["default"](_context = [...currentWindow.parent.document.querySelectorAll('iframe')]).call(_context, iframe => iframe.contentWindow === currentWindow);
+}
+function getIframesPositionShift(element) {
+  let currentWindow = element.ownerDocument.defaultView;
+  const noPositionShift = {
+    frameScale: 1,
+    frameX: 0,
+    frameY: 0
+  };
+  if (!currentWindow) {
+    return noPositionShift;
+  }
+
+  // eslint-disable-next-line prefer-const
+  const iframes = [];
+  while (currentWindow !== window.top) {
+    iframes.push(getFrameElement(currentWindow));
+    currentWindow = currentWindow.parent;
+  }
+  return _reduceRightInstanceProperty__default["default"](iframes).call(iframes, (_ref, frame) => {
+    let frameX = _ref.frameX,
+      frameY = _ref.frameY,
+      frameScale = _ref.frameScale;
+    const _frame$getBoundingCli = frame.getBoundingClientRect(),
+      x = _frame$getBoundingCli.x,
+      y = _frame$getBoundingCli.y,
+      width = _frame$getBoundingCli.width;
+    return {
+      frameX: frameX + x * frameScale,
+      frameY: frameY + y * frameScale,
+      frameScale: frameScale * (width / frame.offsetWidth)
+    };
+  }, noPositionShift);
+}
+
+/**
+ * Returns the coordinates and size of a given Element, relative to the Cypress app <iframe>.
+ * Accounts for any scaling on the iframes.
+ */
+function getElementPositionXY(htmlElement) {
+  const _htmlElement$getBound = htmlElement.getBoundingClientRect(),
+    elementX = _htmlElement$getBound.x,
+    elementY = _htmlElement$getBound.y,
+    width = _htmlElement$getBound.width,
+    height = _htmlElement$getBound.height;
+  const _getIframesPositionSh = getIframesPositionShift(htmlElement),
+    frameScale = _getIframesPositionSh.frameScale,
+    frameX = _getIframesPositionSh.frameX,
+    frameY = _getIframesPositionSh.frameY;
+  return {
+    x: frameX + elementX * frameScale,
+    y: frameY + elementY * frameScale,
+    width: width * frameScale,
+    height: height * frameScale,
+    frameScale: frameScale
+  };
+}
+function getCypressElementCoordinates(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+jqueryEl, position, scrollBehavior) {
+  var _ref2;
+  const htmlElement = jqueryEl.get(0);
+  const cypressAppFrame = window.parent.document.querySelector('iframe');
+  if (!cypressAppFrame) {
+    throw new Error('Can not find cypress application iframe, it looks like critical issue. Please rise an issue on GitHub.');
+  }
+  const effectiveScrollBehavior = (_ref2 = scrollBehavior !== null && scrollBehavior !== void 0 ? scrollBehavior : Cypress.config('scrollBehavior')) !== null && _ref2 !== void 0 ? _ref2 : 'center';
+  if (effectiveScrollBehavior && typeof effectiveScrollBehavior !== 'object') {
+    scrollIntoView(htmlElement, effectiveScrollBehavior);
+  }
+  const _getElementPositionXY = getElementPositionXY(htmlElement),
+    x = _getElementPositionXY.x,
+    y = _getElementPositionXY.y,
+    width = _getElementPositionXY.width,
+    height = _getElementPositionXY.height,
+    frameScale = _getElementPositionXY.frameScale;
+  const _getPositionedCoordin = getPositionedCoordinates(x, y, width, height, position !== null && position !== void 0 ? position : 'center', frameScale),
+    _getPositionedCoordin2 = _slicedToArray(_getPositionedCoordin, 2),
+    posX = _getPositionedCoordin2[0],
+    posY = _getPositionedCoordin2[1];
+  return {
+    x: posX,
+    y: posY,
+    frameScale: frameScale
+  };
+}
+const keyToModifierBitMap = {
+  Alt: 1,
+  Control: 2,
+  Meta: 4,
+  Shift: 8
+};
+async function realHover(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+subject) {
+  var _options$pointer;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const _getCypressElementCoo = getCypressElementCoordinates(subject, options.position, options.scrollBehavior),
+    x = _getCypressElementCoo.x,
+    y = _getCypressElementCoo.y;
+  const log = Cypress.log({
+    $el: subject,
+    name: 'realHover',
+    consoleProps: () => ({
+      'Applied To': subject.get(0),
+      'Absolute Coordinates': {
+        x,
+        y
+      }
+    })
+  });
+  await fireCdpCommand('Input.dispatchMouseEvent', {
+    x,
+    y,
+    type: 'mouseMoved',
+    button: 'none',
+    pointerType: (_options$pointer = options.pointer) !== null && _options$pointer !== void 0 ? _options$pointer : 'mouse',
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0
+  });
+  log.snapshot().end();
+  return subject;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -244,3 +457,11 @@ Cypress.Commands.add('loginByOidc', commandOptions => {
   cy.log('We recommend not to use the command "cy.loginByOidc" directly. Instead, use the more generic "cy.loginToMerchantCenter" command as it automatically detects which login mechanism to use.');
   loginByOidc(commandOptions);
 });
+Cypress.Commands.add('hover', {
+  prevSubject: true
+}, realHover);
+Cypress.Commands.add('showNavigationSubmenuItems', menuItemTextMatcher => {
+  cy.findByTestId('left-navigation').findByText(menuItemTextMatcher).parents('[role="menuitem"]').first()
+  // Refers to the custom command "hover"
+  .hover();
+});

package/add-commands/dist/commercetools-frontend-cypress-add-commands.esm.js

@@ -14,6 +14,9 @@ import semver from 'semver';
 import { v4 } from 'uuid';
 import { buildOidcScope } from '@commercetools-frontend/application-shell/ssr';
 import { O as OIDC_RESPONSE_TYPES, S as STORAGE_KEYS } from '../../dist/constants-18b165fc.esm.js';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
+import _reduceRightInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce-right';
 
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -206,6 +209,214 @@ function isLocalhost() {
   return baseUrl.hostname === 'localhost';
 }
 
+/**
+ * NOTE: the `realHover` command is originally being implemented in `cypress-real-events` package.
+ * https://github.com/dmtrKovalenko/cypress-real-events/blob/develop/src/commands/realHover.ts
+ *
+ * However, due to known issues with conflicting types between Cypress and Jest, importing the `cypress-real-events`
+ * package here will cause such issues with TypeScript as our `@commercetools-frontend/cypress` package
+ * is checked and built together with all other packages and not in isolation.
+ * See https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest.
+ *
+ * Therefore, we are porting here the implementation of `realHover` to avoid importing it from the
+ * original package `cypress-real-events`.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+async function fireCdpCommand(command, params) {
+  return Cypress.automation('remote:debugger:protocol', {
+    command,
+    params
+  }).catch(error => {
+    throw new Error("Failed request to chrome devtools protocol. This can happen if cypress lost connection to the browser or the command itself is not valid. Original cypress error: ".concat(error));
+  });
+}
+function getPositionedCoordinates(x0, y0, width, height, position, frameScale) {
+  if (typeof position === 'object' && position !== null) {
+    const x = position.x,
+      y = position.y;
+    // scale the position coordinates according to the viewport scale
+    return [x0 + x * frameScale, y0 + y * frameScale];
+  }
+  switch (position) {
+    case 'topLeft':
+      return [x0, y0];
+    case 'top':
+      return [x0 + width / 2, y0];
+    case 'topRight':
+      return [x0 + width - 1, y0];
+    case 'left':
+      return [x0, y0 + height / 2];
+    case 'right':
+      return [x0 + width - 1, y0 + height / 2];
+    case 'bottomLeft':
+      return [x0, y0 + height - 1];
+    case 'bottom':
+      return [x0 + width / 2, y0 + height - 1];
+    case 'bottomRight':
+      return [x0 + width - 1, y0 + height - 1];
+    // center by default
+    default:
+      return [x0 + width / 2, y0 + height / 2];
+  }
+}
+/**
+ * Scrolls the given htmlElement into view on the page.
+ * The position the element is scrolled to can be customized with scrollBehavior.
+ */
+function scrollIntoView(htmlElement) {
+  let scrollBehavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
+  let block;
+  if (scrollBehavior === 'top') {
+    block = 'start';
+  } else if (scrollBehavior === 'bottom') {
+    block = 'end';
+  } else {
+    block = scrollBehavior;
+  }
+  htmlElement.scrollIntoView({
+    block
+  });
+}
+
+// for cross origin domains .frameElement returns null so query using parentWindow
+// but when running using --disable-web-security it will return the frame element
+function getFrameElement(currentWindow) {
+  var _context;
+  if (currentWindow.frameElement) {
+    // accessible for same-origin iframes
+    // or when running with --disable-web-security
+    return currentWindow.frameElement;
+  }
+
+  // fallback to querying using the parent window, mainly to grab the AUT iframe
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return _findInstanceProperty(_context = [...currentWindow.parent.document.querySelectorAll('iframe')]).call(_context, iframe => iframe.contentWindow === currentWindow);
+}
+function getIframesPositionShift(element) {
+  let currentWindow = element.ownerDocument.defaultView;
+  const noPositionShift = {
+    frameScale: 1,
+    frameX: 0,
+    frameY: 0
+  };
+  if (!currentWindow) {
+    return noPositionShift;
+  }
+
+  // eslint-disable-next-line prefer-const
+  const iframes = [];
+  while (currentWindow !== window.top) {
+    iframes.push(getFrameElement(currentWindow));
+    currentWindow = currentWindow.parent;
+  }
+  return _reduceRightInstanceProperty(iframes).call(iframes, (_ref, frame) => {
+    let frameX = _ref.frameX,
+      frameY = _ref.frameY,
+      frameScale = _ref.frameScale;
+    const _frame$getBoundingCli = frame.getBoundingClientRect(),
+      x = _frame$getBoundingCli.x,
+      y = _frame$getBoundingCli.y,
+      width = _frame$getBoundingCli.width;
+    return {
+      frameX: frameX + x * frameScale,
+      frameY: frameY + y * frameScale,
+      frameScale: frameScale * (width / frame.offsetWidth)
+    };
+  }, noPositionShift);
+}
+
+/**
+ * Returns the coordinates and size of a given Element, relative to the Cypress app <iframe>.
+ * Accounts for any scaling on the iframes.
+ */
+function getElementPositionXY(htmlElement) {
+  const _htmlElement$getBound = htmlElement.getBoundingClientRect(),
+    elementX = _htmlElement$getBound.x,
+    elementY = _htmlElement$getBound.y,
+    width = _htmlElement$getBound.width,
+    height = _htmlElement$getBound.height;
+  const _getIframesPositionSh = getIframesPositionShift(htmlElement),
+    frameScale = _getIframesPositionSh.frameScale,
+    frameX = _getIframesPositionSh.frameX,
+    frameY = _getIframesPositionSh.frameY;
+  return {
+    x: frameX + elementX * frameScale,
+    y: frameY + elementY * frameScale,
+    width: width * frameScale,
+    height: height * frameScale,
+    frameScale: frameScale
+  };
+}
+function getCypressElementCoordinates(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+jqueryEl, position, scrollBehavior) {
+  var _ref2;
+  const htmlElement = jqueryEl.get(0);
+  const cypressAppFrame = window.parent.document.querySelector('iframe');
+  if (!cypressAppFrame) {
+    throw new Error('Can not find cypress application iframe, it looks like critical issue. Please rise an issue on GitHub.');
+  }
+  const effectiveScrollBehavior = (_ref2 = scrollBehavior !== null && scrollBehavior !== void 0 ? scrollBehavior : Cypress.config('scrollBehavior')) !== null && _ref2 !== void 0 ? _ref2 : 'center';
+  if (effectiveScrollBehavior && typeof effectiveScrollBehavior !== 'object') {
+    scrollIntoView(htmlElement, effectiveScrollBehavior);
+  }
+  const _getElementPositionXY = getElementPositionXY(htmlElement),
+    x = _getElementPositionXY.x,
+    y = _getElementPositionXY.y,
+    width = _getElementPositionXY.width,
+    height = _getElementPositionXY.height,
+    frameScale = _getElementPositionXY.frameScale;
+  const _getPositionedCoordin = getPositionedCoordinates(x, y, width, height, position !== null && position !== void 0 ? position : 'center', frameScale),
+    _getPositionedCoordin2 = _slicedToArray(_getPositionedCoordin, 2),
+    posX = _getPositionedCoordin2[0],
+    posY = _getPositionedCoordin2[1];
+  return {
+    x: posX,
+    y: posY,
+    frameScale: frameScale
+  };
+}
+const keyToModifierBitMap = {
+  Alt: 1,
+  Control: 2,
+  Meta: 4,
+  Shift: 8
+};
+async function realHover(
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+subject) {
+  var _options$pointer;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const _getCypressElementCoo = getCypressElementCoordinates(subject, options.position, options.scrollBehavior),
+    x = _getCypressElementCoo.x,
+    y = _getCypressElementCoo.y;
+  const log = Cypress.log({
+    $el: subject,
+    name: 'realHover',
+    consoleProps: () => ({
+      'Applied To': subject.get(0),
+      'Absolute Coordinates': {
+        x,
+        y
+      }
+    })
+  });
+  await fireCdpCommand('Input.dispatchMouseEvent', {
+    x,
+    y,
+    type: 'mouseMoved',
+    button: 'none',
+    pointerType: (_options$pointer = options.pointer) !== null && _options$pointer !== void 0 ? _options$pointer : 'mouse',
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0
+  });
+  log.snapshot().end();
+  return subject;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -227,3 +438,11 @@ Cypress.Commands.add('loginByOidc', commandOptions => {
   cy.log('We recommend not to use the command "cy.loginByOidc" directly. Instead, use the more generic "cy.loginToMerchantCenter" command as it automatically detects which login mechanism to use.');
   loginByOidc(commandOptions);
 });
+Cypress.Commands.add('hover', {
+  prevSubject: true
+}, realHover);
+Cypress.Commands.add('showNavigationSubmenuItems', menuItemTextMatcher => {
+  cy.findByTestId('left-navigation').findByText(menuItemTextMatcher).parents('[role="menuitem"]').first()
+  // Refers to the custom command "hover"
+  .hover();
+});

package/add-commands/index.d.ts

@@ -25,5 +25,25 @@ declare namespace Cypress {
       // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types
       options?: import('./dist/commercetools-frontend-cypress-add-commands.cjs').CommandLoginOptions
     ): Chainable<Subject>;
+
+    /**
+     * Triggers a `hover` (real) event on the subject.
+     *
+     * @example
+     *    cy.findByText('text_matcher').hover()
+     */
+    hover(): Chainable<Subject>;
+
+    /**
+     * Triggers a `hover` (real) event on the navigation menu item found using the given text matcher.
+     * It will make the submenu links panel to appear.
+     *
+     * @example
+     *    cy.showNavigationSubmenuItems('navigation_item_menu_text_matcher')
+     */
+    showNavigationSubmenuItems(
+      // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types
+      menuItemTextMatcher: import('./dist/commercetools-frontend-cypress-add-commands.cjs').Matcher
+    ): Chainable<Subject>;
   }
 }

package/dist/commercetools-frontend-cypress.cjs.dev.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var constants = require('./constants-c657705e.cjs.dev.js');
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.8.3";
+var version = "22.9.1";
 
 exports.OIDC_RESPONSE_TYPES = constants.OIDC_RESPONSE_TYPES;
 exports.STORAGE_KEYS = constants.STORAGE_KEYS;

package/dist/commercetools-frontend-cypress.cjs.prod.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var constants = require('./constants-8ad2a50e.cjs.prod.js');
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.8.3";
+var version = "22.9.1";
 
 exports.OIDC_RESPONSE_TYPES = constants.OIDC_RESPONSE_TYPES;
 exports.STORAGE_KEYS = constants.STORAGE_KEYS;

package/dist/commercetools-frontend-cypress.esm.js

@@ -1,6 +1,6 @@
 export { O as OIDC_RESPONSE_TYPES, S as STORAGE_KEYS } from './constants-18b165fc.esm.js';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.8.3";
+var version = "22.9.1";
 
 export { version };

package/dist/declarations/src/add-commands/index.d.ts

@@ -1,2 +1,4 @@
+import { Matcher as TMatcher } from '@testing-library/dom';
 import { type CommandLoginOptions as TCommandLoginOptions } from './login';
 export type CommandLoginOptions = TCommandLoginOptions;
+export type Matcher = TMatcher;

package/dist/declarations/src/add-commands/real-hover.d.ts

@@ -0,0 +1,41 @@
+/**
+ * NOTE: the `realHover` command is originally being implemented in `cypress-real-events` package.
+ * https://github.com/dmtrKovalenko/cypress-real-events/blob/develop/src/commands/realHover.ts
+ *
+ * However, due to known issues with conflicting types between Cypress and Jest, importing the `cypress-real-events`
+ * package here will cause such issues with TypeScript as our `@commercetools-frontend/cypress` package
+ * is checked and built together with all other packages and not in isolation.
+ * See https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest.
+ *
+ * Therefore, we are porting here the implementation of `realHover` to avoid importing it from the
+ * original package `cypress-real-events`.
+ */
+export interface RealHoverOptions {
+    /**
+     * If set to `pen`, simulates touch based hover (via long press)
+     */
+    pointer?: 'mouse' | 'pen';
+    /**
+     * Position relative to the element where to hover the element.
+     * @example cy.realHover({ position: "topLeft" })
+     */
+    position?: Position;
+    /**
+     * Controls how the page is scrolled to bring the subject into view, if needed.
+     * @example cy.realHover({ scrollBehavior: "top" });
+     */
+    scrollBehavior?: ScrollBehaviorOptions;
+    /**
+     * Indicates whether the shift key was pressed or not when an event occurred
+     * @example cy.realHover({ shiftKey: true });
+     */
+    shiftKey?: boolean;
+}
+type Position = 'topLeft' | 'top' | 'topRight' | 'left' | 'center' | 'right' | 'bottomLeft' | 'bottom' | 'bottomRight' | {
+    x: number;
+    y: number;
+};
+type ScrollBehaviorPosition = 'center' | 'top' | 'bottom' | 'nearest';
+type ScrollBehaviorOptions = ScrollBehaviorPosition | false;
+export declare function realHover(subject: any, options?: RealHoverOptions): Promise<any>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/cypress",
-  "version": "22.8.3",
+  "version": "22.9.1",
   "description": "Cypress commands and utilities for Custom Applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -41,8 +41,8 @@
   "dependencies": {
     "@babel/runtime": "^7.22.15",
     "@babel/runtime-corejs3": "^7.22.15",
-    "@commercetools-frontend/application-config": "22.8.3",
-    "@commercetools-frontend/application-shell": "22.8.3",
+    "@commercetools-frontend/application-config": "22.9.1",
+    "@commercetools-frontend/application-shell": "22.9.1",
     "@manypkg/get-packages": "1.1.3",
     "@types/semver": "^7.5.1",
     "semver": "7.5.2",