test: workaround movement clientX/Y

Signed-off-by: Zxilly <[email protected]>
Zxilly · Jul 15, 2024 · 068e0be · 068e0be
1 parent 0493c48
commit 068e0be
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -33,6 +33,7 @@
     "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-hierarchy": "^3.1.7",

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
diff --git a/ui/src/TreeMap.tsx b/ui/src/TreeMap.tsx
@@ -172,13 +172,13 @@ function TreeMap({ entry }: TreeMapProps) {
 
   const onMouseMove = useCallback((e: React.MouseEvent<SVGSVGElement>) => {
     setTooltipPosition([e.clientX, e.clientY]);
+    console.log(e.clientX, e.clientY);
 
     const node = getTargetNode(e);
     if (node === null) {
       setTooltipNode(undefined);
       return;
     }
-
     setTooltipNode(node);
   }, [getTargetNode]);
 
@@ -245,7 +245,7 @@ function TreeMap({ entry }: TreeMapProps) {
         viewBox={`0 0 ${width} ${height}`}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        onMouseMoveCapture={onMouseMove}
+        onMouseMove={onMouseMove}
         onClick={onClick}
       >
         {nodes}

diff --git a/ui/src/Treemap.test.tsx b/ui/src/Treemap.test.tsx
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { createEntry } from "./tool/entry.ts";
 import TreeMap from "./TreeMap.tsx";
 import { getTestResult } from "./test/testhelper.ts";
@@ -58,7 +59,7 @@ describe("treeMap", () => {
     expect(getByText("Std Packages Size")).not.toBeNull();
   });
 
-  it("should handle move event", () => {
+  it("should handle move event", async () => {
     const { getByText, container } = render(
       <TreeMap entry={getTestEntry()} />,
     );
@@ -68,8 +69,15 @@ describe("treeMap", () => {
 
     const rect = getByText("symtab.go");
 
-    fireEvent.mouseEnter(svg!);
-    fireEvent.mouseMove(rect);
+    const user = userEvent.setup();
+
+    await user.pointer({
+      coords: {
+        x: 1,
+        y: 1,
+      },
+    });
+    await user.hover(rect);
 
     const tooltip = document.querySelector(".tooltip");
     expect(tooltip).not.toBeNull();