@wordpress/e2e-test-utils/build-module/press-key-with-modifier.js

End-To-End (E2E) test utils for WordPress.

import { capitalCase } from "change-case";
import { modifiers, SHIFT, ALT, CTRL } from "@wordpress/keycodes";
async function emulateSelectAll() {
  await page.evaluate(() => {
    const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
    const canvasDoc = document.activeElement.contentDocument ?? document;
    canvasDoc.activeElement.dispatchEvent(
      new KeyboardEvent("keydown", {
        bubbles: true,
        cancelable: true,
        key: isMac ? "Meta" : "Control",
        code: isMac ? "MetaLeft" : "ControlLeft",
        location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
        getModifierState: (keyArg) => keyArg === (isMac ? "Meta" : "Control"),
        ctrlKey: !isMac,
        metaKey: isMac,
        charCode: 0,
        keyCode: isMac ? 93 : 17,
        which: isMac ? 93 : 17
      })
    );
    const preventableEvent = new KeyboardEvent("keydown", {
      bubbles: true,
      cancelable: true,
      key: "a",
      code: "KeyA",
      location: window.KeyboardEvent.DOM_KEY_LOCATION_STANDARD,
      getModifierState: (keyArg) => keyArg === (isMac ? "Meta" : "Control"),
      ctrlKey: !isMac,
      metaKey: isMac,
      charCode: 0,
      keyCode: 65,
      which: 65
    });
    const wasPrevented = !canvasDoc.activeElement.dispatchEvent(preventableEvent) || preventableEvent.defaultPrevented;
    if (!wasPrevented) {
      canvasDoc.execCommand("selectall", false, null);
    }
    canvasDoc.activeElement.dispatchEvent(
      new KeyboardEvent("keyup", {
        bubbles: true,
        cancelable: true,
        key: isMac ? "Meta" : "Control",
        code: isMac ? "MetaLeft" : "ControlLeft",
        location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
        getModifierState: () => false,
        charCode: 0,
        keyCode: isMac ? 93 : 17,
        which: isMac ? 93 : 17
      })
    );
  });
}
async function setClipboardData({ plainText = "", html = "" }) {
  await page.evaluate(
    (_plainText, _html) => {
      window._clipboardData = new DataTransfer();
      window._clipboardData.setData("text/plain", _plainText);
      window._clipboardData.setData("text/html", _html);
    },
    plainText,
    html
  );
}
async function emulateClipboard(type) {
  await page.evaluate((_type) => {
    const canvasDoc = document.activeElement.contentDocument ?? document;
    if (_type !== "paste") {
      window._clipboardData = new DataTransfer();
      const selection = canvasDoc.defaultView.getSelection();
      const plainText = selection.toString();
      let html = plainText;
      if (selection.rangeCount) {
        const range = selection.getRangeAt(0);
        const fragment = range.cloneContents();
        html = Array.from(fragment.childNodes).map((node) => node.outerHTML || node.nodeValue).join("");
      }
      window._clipboardData.setData("text/plain", plainText);
      window._clipboardData.setData("text/html", html);
    }
    canvasDoc.activeElement.dispatchEvent(
      new ClipboardEvent(_type, {
        bubbles: true,
        cancelable: true,
        clipboardData: window._clipboardData
      })
    );
  }, type);
}
async function pressKeyWithModifier(modifier, key) {
  if (modifier.toLowerCase() === "primary" && key.toLowerCase() === "a") {
    return await emulateSelectAll();
  }
  if (modifier.toLowerCase() === "primary" && key.toLowerCase() === "c") {
    return await emulateClipboard("copy");
  }
  if (modifier.toLowerCase() === "primary" && key.toLowerCase() === "x") {
    return await emulateClipboard("cut");
  }
  if (modifier.toLowerCase() === "primary" && key.toLowerCase() === "v") {
    return await emulateClipboard("paste");
  }
  const isAppleOS = () => process.platform === "darwin";
  const overWrittenModifiers = {
    ...modifiers,
    shiftAlt: (_isApple) => _isApple() ? [SHIFT, ALT] : [SHIFT, CTRL]
  };
  const mappedModifiers = overWrittenModifiers[modifier](isAppleOS);
  const ctrlSwap = (mod) => mod === CTRL ? "control" : mod;
  await Promise.all(
    mappedModifiers.map(async (mod) => {
      const capitalizedMod = capitalCase(ctrlSwap(mod));
      return page.keyboard.down(capitalizedMod);
    })
  );
  await page.keyboard.press(key);
  await Promise.all(
    mappedModifiers.map(async (mod) => {
      const capitalizedMod = capitalCase(ctrlSwap(mod));
      return page.keyboard.up(capitalizedMod);
    })
  );
}
export {
  pressKeyWithModifier,
  setClipboardData
};
//# sourceMappingURL=press-key-with-modifier.js.map