chore(commands): laid out groundwork for state tracking

Author: Andarist

cypress/integration/type.spec.ts

@@ -4,9 +4,9 @@ describe("cy.realType", () => {
     cy.get("input[name=q]").focus()
   });
 
-  it("types text into googles main search inptu", () => {
+  it("types text into an input", () => {
     cy.realType("cypress can produce real events");
-    
+
     cy.get("input[name=q]").should(
       "have.value",
       "cypress can produce real events"

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();