fix: update activation tests and keyboard handling

aidenybai · aidenybai · commit afccda18b81f · 2025-12-24T18:28:56.000-08:00
- Modified the activation test to ensure it checks for the correct activation conditions when the 'C' key is pressed without the Cmd/Ctrl modifier.
- Updated the keyboard handling logic in the fixtures to reflect the new activation key behavior, ensuring consistency across tests.
diff --git a/packages/react-grab/e2e/activation.spec.ts b/packages/react-grab/e2e/activation.spec.ts
@@ -11,7 +11,7 @@ test.describe("Activation Flows", () => {
     expect(isVisibleAfter).toBe(true);
   });
 
-  test("should not activate if key released before threshold", async ({
+  test("should not activate when pressing C without Cmd/Ctrl modifier", async ({
     reactGrab,
   }) => {
     await reactGrab.page.keyboard.down("c");
diff --git a/packages/react-grab/e2e/fixtures.ts b/packages/react-grab/e2e/fixtures.ts
@@ -3,7 +3,6 @@ import { test as base, expect, Page, Locator } from "@playwright/test";
 const ATTRIBUTE_NAME = "data-react-grab";
 const DEFAULT_KEY_HOLD_DURATION_MS = 200;
 const ACTIVATION_BUFFER_MS = 100;
-const ACTIVATION_KEY = "c";
 
 interface ReactGrabPageObject {
   page: Page;
@@ -16,10 +15,16 @@ interface ReactGrabPageObject {
   getShadowRoot: () => Promise<Element | null>;
   hoverElement: (selector: string) => Promise<void>;
   clickElement: (selector: string) => Promise<void>;
+  doubleClickElement: (selector: string) => Promise<void>;
   dragSelect: (startSelector: string, endSelector: string) => Promise<void>;
   getClipboardContent: () => Promise<string>;
   waitForSelectionBox: () => Promise<void>;
   pressEscape: () => Promise<void>;
+  pressArrowDown: () => Promise<void>;
+  pressArrowUp: () => Promise<void>;
+  pressArrowLeft: () => Promise<void>;
+  pressArrowRight: () => Promise<void>;
+  scrollPage: (deltaY: number) => Promise<void>;
 }
 
 const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
@@ -43,7 +48,8 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
 
   const holdToActivate = async (durationMs = DEFAULT_KEY_HOLD_DURATION_MS) => {
     await page.click("body");
-    await page.keyboard.down(ACTIVATION_KEY);
+    await page.keyboard.down("Meta");
+    await page.keyboard.down("c");
     await page.waitForTimeout(durationMs + ACTIVATION_BUFFER_MS);
   };
 
@@ -58,7 +64,8 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
 
   const activateViaKeyboard = async () => {
     await holdToActivate();
-    await page.keyboard.up(ACTIVATION_KEY);
+    await page.keyboard.up("c");
+    await page.keyboard.up("Meta");
     await page.waitForTimeout(100);
   };
 
@@ -114,6 +121,36 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     await page.keyboard.press("Escape");
   };
 
+  const pressArrowDown = async () => {
+    await page.keyboard.press("ArrowDown");
+    await page.waitForTimeout(50);
+  };
+
+  const pressArrowUp = async () => {
+    await page.keyboard.press("ArrowUp");
+    await page.waitForTimeout(50);
+  };
+
+  const pressArrowLeft = async () => {
+    await page.keyboard.press("ArrowLeft");
+    await page.waitForTimeout(50);
+  };
+
+  const pressArrowRight = async () => {
+    await page.keyboard.press("ArrowRight");
+    await page.waitForTimeout(50);
+  };
+
+  const doubleClickElement = async (selector: string) => {
+    const element = page.locator(selector).first();
+    await element.dblclick({ force: true });
+  };
+
+  const scrollPage = async (deltaY: number) => {
+    await page.mouse.wheel(0, deltaY);
+    await page.waitForTimeout(100);
+  };
+
   return {
     page,
     activate,
@@ -125,10 +162,16 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     getShadowRoot,
     hoverElement,
     clickElement,
+    doubleClickElement,
     dragSelect,
     getClipboardContent,
     waitForSelectionBox,
     pressEscape,
+    pressArrowDown,
+    pressArrowUp,
+    pressArrowLeft,
+    pressArrowRight,
+    scrollPage,
   };
 };
 
diff --git a/packages/react-grab/e2e/hold-activation.spec.ts b/packages/react-grab/e2e/hold-activation.spec.ts
@@ -0,0 +1,79 @@
+import { test, expect } from "./fixtures.js";
+
+test.describe("Hold Activation Mode", () => {
+  test("should not activate when pressing C without Cmd/Ctrl modifier", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.page.click("body");
+    await reactGrab.page.keyboard.down("c");
+    await reactGrab.page.waitForTimeout(50);
+    await reactGrab.page.keyboard.up("c");
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(false);
+  });
+
+  test("should allow multiple API activations in sequence", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+
+    let isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+
+    await reactGrab.pressEscape();
+    await reactGrab.page.waitForTimeout(100);
+
+    isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(false);
+
+    await reactGrab.activate();
+
+    isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should allow selection after API activation", async ({ reactGrab }) => {
+    await reactGrab.activate();
+
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should allow dragging after API activation", async ({ reactGrab }) => {
+    await reactGrab.activate();
+
+    const firstItem = reactGrab.page.locator("li").first();
+    const firstBox = await firstItem.boundingBox();
+    if (!firstBox) throw new Error("Could not get bounding box");
+
+    await reactGrab.page.mouse.move(firstBox.x - 10, firstBox.y - 10);
+    await reactGrab.page.mouse.down();
+    await reactGrab.page.mouse.move(firstBox.x + 100, firstBox.y + 100, {
+      steps: 5,
+    });
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+
+    await reactGrab.page.mouse.up();
+  });
+
+  test("should copy heading element after API activation", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+
+    await reactGrab.hoverElement("h1");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.clickElement("h1");
+    await reactGrab.page.waitForTimeout(500);
+
+    const clipboardContent = await reactGrab.getClipboardContent();
+    expect(clipboardContent).toContain("Todo List");
+  });
+});
diff --git a/packages/react-grab/e2e/keyboard-navigation.spec.ts b/packages/react-grab/e2e/keyboard-navigation.spec.ts
@@ -0,0 +1,111 @@
+import { test, expect } from "./fixtures.js";
+
+test.describe("Keyboard Navigation", () => {
+  test("should navigate to next element with ArrowDown", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowDown");
+    await reactGrab.waitForSelectionBox();
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should navigate to previous element with ArrowUp", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:nth-child(3)");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowUp");
+    await reactGrab.waitForSelectionBox();
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should navigate to parent element with ArrowLeft", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowLeft");
+    await reactGrab.waitForSelectionBox();
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should navigate to child element with ArrowRight", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("ul");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowRight");
+    await reactGrab.waitForSelectionBox();
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should maintain activation during keyboard navigation", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowDown");
+    await reactGrab.page.keyboard.press("ArrowDown");
+    await reactGrab.page.keyboard.press("ArrowUp");
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should copy element after keyboard navigation with click", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowDown");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.mouse.click(
+      (await reactGrab.page.locator("li:nth-child(2)").boundingBox())!.x + 10,
+      (await reactGrab.page.locator("li:nth-child(2)").boundingBox())!.y + 10,
+    );
+    await reactGrab.page.waitForTimeout(500);
+
+    const clipboardContent = await reactGrab.getClipboardContent();
+    expect(clipboardContent).toBeTruthy();
+  });
+
+  test("should freeze selection when navigating with arrow keys", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.keyboard.press("ArrowDown");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.page.mouse.move(0, 0);
+    await reactGrab.page.waitForTimeout(100);
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+});
diff --git a/packages/react-grab/e2e/keyboard-shortcuts.spec.ts b/packages/react-grab/e2e/keyboard-shortcuts.spec.ts
@@ -0,0 +1,82 @@
+import { test, expect } from "./fixtures.js";
+
+test.describe("Keyboard Shortcuts", () => {
+  test("should copy selected element when clicking", async ({ reactGrab }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("h1");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.clickElement("h1");
+    await reactGrab.page.waitForTimeout(500);
+
+    const clipboardContent = await reactGrab.getClipboardContent();
+    expect(clipboardContent).toContain("Todo List");
+  });
+
+  test("should deactivate when pressing Escape while hovering", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.pressEscape();
+    await reactGrab.page.waitForTimeout(100);
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(false);
+  });
+
+  test("should not activate when pressing C without Cmd/Ctrl modifier", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.page.keyboard.down("c");
+    await reactGrab.page.waitForTimeout(50);
+    await reactGrab.page.keyboard.up("c");
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(false);
+  });
+
+  test("should copy list item when clicked", async ({ reactGrab }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:nth-child(2)");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.clickElement("li:nth-child(2)");
+    await reactGrab.page.waitForTimeout(500);
+
+    const clipboardContent = await reactGrab.getClipboardContent();
+    expect(clipboardContent).toContain("Write a blog post");
+  });
+
+  test("should keep overlay active while navigating with arrow keys", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    for (let i = 0; i < 5; i++) {
+      await reactGrab.page.keyboard.press("ArrowDown");
+      await reactGrab.page.waitForTimeout(50);
+    }
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(true);
+  });
+
+  test("should deactivate after successful click copy in toggle mode", async ({
+    reactGrab,
+  }) => {
+    await reactGrab.activate();
+    await reactGrab.hoverElement("li:first-child");
+    await reactGrab.waitForSelectionBox();
+
+    await reactGrab.clickElement("li:first-child");
+    await reactGrab.page.waitForTimeout(2000);
+
+    const isVisible = await reactGrab.isOverlayVisible();
+    expect(isVisible).toBe(false);
+  });
+});
diff --git a/packages/react-grab/e2e/viewport.spec.ts b/packages/react-grab/e2e/viewport.spec.ts
