chore(commands): laid out groundwork for state tracking

Author: Andarist

src/_internalState.ts

@@ -0,0 +1,36 @@
+import {mouseButtonNumbers} from './mouseButtonNumbers'
+
+const mouseButtons = new Set<keyof typeof mouseButtonNumbers>()
+
+function getButtonsMask(): number {
+  let mask = 0;
+  if (mouseButtons.has('left')) {
+    mask |= 1;
+  }
+  if (mouseButtons.has('right')) {
+    mask |= 2;
+  }
+  if (mouseButtons.has('middle')) {
+    mask |= 4;
+  }
+  if (mouseButtons.has('back')) {
+    mask |= 8;
+  }
+  if (mouseButtons.has('forward')) {
+    mask |= 16;
+  }
+  return mask;
+}
+
+export const InternalState = {
+    clear() {
+        mouseButtons.clear()
+    },
+    mouseButtonDown(button: keyof typeof mouseButtonNumbers) {
+        mouseButtons.add(button)
+    },
+    mouseButtonUp(button: keyof typeof mouseButtonNumbers) {
+        mouseButtons.delete(button)
+    },
+    getButtonsMask,
+}

src/commands/realClick.ts

@@ -1,15 +1,18 @@
-import { fireCdpCommand } from "../fireCdpCommand";
 import {
   getCypressElementCoordinates,
   ScrollBehaviorOptions,
   Position,
 } from "../getCypressElementCoordinates";
+import { rawMouseDown } from './realMouseDown'
+import { rawMouseUp } from './realMouseUp'
+import { rawMouseMove } from './realHover'
+import { mouseButtonNumbers } from "../mouseButtonNumbers";
 
 export interface RealClickOptions {
   /** Pointer type for realClick, if "pen" touch simulated */
   pointer?: "mouse" | "pen";
   /** The button on mouse that clicked. Simulates real browser behavior. */
-  button?: "none" | "left" | "right" | "middle" | "back" | "forward";
+  button?: keyof typeof mouseButtonNumbers;
   /**
    * Position of the click event relative to the element
    * @example cy.realClick({ position: "topLeft" })
@@ -65,25 +68,30 @@ export async function realClick(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mousePressed",
-    x,
-    y,
-    clickCount: options.clickCount ?? 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
 
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mouseReleased",
+  await rawMouseMove({
+    ...options,
     x,
-    y,
-    clickCount: options.clickCount ?? 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
+    y
+  })
+
+  const { clickCount = 1 } = options
+
+  for (let currentClick = 1; currentClick <= clickCount; currentClick++) {
+    await rawMouseDown({
+      ...options,
+      x,
+      y,
+      clickCount: currentClick
+    })
+
+    await rawMouseUp({
+      ...options,
+      x,
+      y,
+      clickCount: currentClick
+    })
+  }
 
   log.snapshot("after").end();
 

src/commands/realHover.ts

@@ -4,13 +4,14 @@ import {
   ScrollBehaviorOptions,
   getCypressElementCoordinates,
 } from "../getCypressElementCoordinates";
+import { InternalState } from "../_internalState";
 
 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" })
    */
@@ -22,6 +23,25 @@ export interface RealHoverOptions {
   scrollBehavior?: ScrollBehaviorOptions;
 }
 
+export async function rawMouseMove({
+  x,
+  y,
+  pointer = "mouse",
+}: {
+  x: number,
+  y: number,
+  pointer?: "mouse" | "pen",
+}) {
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mouseMoved",
+    pointerType: pointer,
+    button: "none",
+    buttons: InternalState.getButtonsMask(),
+    x,
+    y,
+  });
+}
+
 /** @ignore this, update documentation for this function at index.d.ts */
 export async function realHover(
   subject: JQuery,
@@ -38,13 +58,11 @@ export async function realHover(
     }),
   });
 
-  await fireCdpCommand("Input.dispatchMouseEvent", {
+  await rawMouseMove({
+    ...options,
     x,
     y,
-    type: "mouseMoved",
-    button: "none",
-    pointerType: options.pointer ?? "mouse",
-  });
+  })
 
   log.snapshot().end();
 

src/commands/mouseDown.ts renamed to src/commands/realMouseDown.ts

@@ -5,6 +5,7 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { InternalState } from "../_internalState";
 
 export interface realMouseDownOptions {
   /** Pointer type for realMouseDown, if "pen" touch simulated */
@@ -26,6 +27,32 @@ export interface realMouseDownOptions {
   button?: keyof typeof mouseButtonNumbers;
 }
 
+export async function rawMouseDown({
+  x,
+  y,
+  button = "left",
+  pointer = "mouse",
+  clickCount = 1,
+}: {
+  x: number,
+  y: number,
+  button?: keyof typeof mouseButtonNumbers,
+  pointer?: "mouse" | "pen",
+  clickCount?: number
+}) {
+  InternalState.mouseButtonUp(button)
+
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mousePressed",
+    clickCount,
+    buttons: InternalState.getButtonsMask(),
+    pointerType: pointer,
+    button,
+    x,
+    y,
+  });
+}
+
 /** @ignore this, update documentation for this function at index.d.ts */
 export async function realMouseDown(
   subject: JQuery,
@@ -43,15 +70,12 @@ export async function realMouseDown(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mousePressed",
+
+  await rawMouseDown({
+    ...options,
     x,
-    y,
-    clickCount: 1,
-    buttons: mouseButtonNumbers[options.button ?? "left"],
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
+    y
+  })
 
   log.snapshot("after").end();
 

src/commands/mouseUp.ts renamed to src/commands/realMouseUp.ts

@@ -5,6 +5,7 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { InternalState } from "../_internalState";
 
 export interface realMouseUpOptions {
   /** Pointer type for realMouseUp, if "pen" touch simulated */
@@ -25,6 +26,31 @@ export interface realMouseUpOptions {
   button?: keyof typeof mouseButtonNumbers;
 }
 
+export async function rawMouseUp({
+  x,
+  y,
+  button = "left",
+  pointer = "mouse",
+  clickCount = 1,
+}: {
+  x: number,
+  y: number,
+  button?: keyof typeof mouseButtonNumbers,
+  pointer?: "mouse" | "pen",
+  clickCount?: number
+}) {
+  InternalState.mouseButtonUp(button)
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mouseReleased",
+    clickCount,
+    buttons: InternalState.getButtonsMask(),
+    pointerType: pointer,
+    button,
+    x,
+    y
+  });
+}
+
 /** @ignore this, update documentation for this function at index.d.ts */
 export async function realMouseUp(
   subject: JQuery,
@@ -42,15 +68,12 @@ export async function realMouseUp(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mouseReleased",
+
+  await rawMouseUp({
+    ...options,
     x,
-    y,
-    clickCount: 1,
-    buttons: mouseButtonNumbers[options.button ?? "left"],
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
+    y
+  })
 
   log.snapshot("after").end();
 

src/commands/realPress.ts

@@ -1,5 +1,5 @@
 import { fireCdpCommand } from "../fireCdpCommand";
-import { keyCodeDefinitions } from "../keyCodeDefinitions";
+import { getKeyCodeDefinitions, KeyDefinition, KeyOrShortcut } from "../getKeyCodeDefinitions";
 
 export interface RealPressOptions {
   /**
@@ -14,58 +14,15 @@ export interface RealPressOptions {
   log?: boolean;
 }
 
-function getKeyDefinition(key: keyof typeof keyCodeDefinitions) {
-  const keyDefinition = keyCodeDefinitions[key];
-
-  if (!keyDefinition) {
-    throw new Error(`Unsupported key '${key}'.`);
-  }
-
-  const keyCode = keyDefinition.keyCode ?? 0;
-  return {
-    keyCode: keyCode,
-    key: keyDefinition?.key ?? "",
-    text: keyDefinition.key.length === 1 ? keyDefinition.key : undefined,
-    // @ts-expect-error code exists anyway
-    code: keyDefinition.code ?? "",
-    // @ts-expect-error location exists anyway
-    location: keyDefinition.location ?? 0,
-    windowsVirtualKeyCode: keyCode,
-  };
-}
-
 const keyToModifierBitMap: Record<string, number> = {
   Alt: 1,
   Control: 2,
   Meta: 4,
   Shift: 8,
 };
 
-type Key = keyof typeof keyCodeDefinitions;
-// unfortunately passing a string like Shift+P is not possible cause typescript template literals can not handle such giant union
-type KeyOrShortcut = Key | Array<Key>;
-
-/** @ignore this, update documentation for this function at index.d.ts */
-export async function realPress(
-  keyOrShortcut: KeyOrShortcut,
-  options: RealPressOptions = {}
-) {
-  let log;
-
+export async function rawRealPress(keyDefinitions: KeyDefinition[], options: RealPressOptions = {}) {
   let modifiers = 0;
-  const keys = Array.isArray(keyOrShortcut) ? keyOrShortcut : [keyOrShortcut];
-  const keyDefinitions = keys.map(getKeyDefinition);
-
-  if (options.log ?? true) {
-    log = Cypress.log({
-      name: "realPress",
-      consoleProps: () => ({
-        "System Key Definition": keyDefinitions,
-      }),
-    });
-  }
-
-  log?.snapshot("before").end();
 
   for (const key of keyDefinitions) {
     modifiers |= keyToModifierBitMap[key.key] ?? 0;
@@ -76,14 +33,6 @@ export async function realPress(
       ...key,
     });
 
-    if (key.code === "Enter") {
-      await fireCdpCommand("Input.dispatchKeyEvent", {
-        type: "char",
-        unmodifiedText: "\r",
-        text: "\r",
-      });
-    }
-
     await new Promise((res) => setTimeout(res, options.pressDelay ?? 25));
   }
 
@@ -96,6 +45,29 @@ export async function realPress(
       });
     })
   );
+}
+
+/** @ignore this, update documentation for this function at index.d.ts */
+export async function realPress(
+  keyOrShortcut: KeyOrShortcut,
+  options: RealPressOptions = {}
+) {
+  let log;
+
+  const keyDefinitions = getKeyCodeDefinitions(keyOrShortcut)
+
+  if (options.log ?? true) {
+    log = Cypress.log({
+      name: "realPress",
+      consoleProps: () => ({
+        "System Key Definition": keyDefinitions,
+      }),
+    });
+  }
+
+  log?.snapshot("before").end();
+
+  await rawRealPress(keyDefinitions, options)
 
   log?.snapshot("after").end();
 }