From 4ea534a73289b6499287b34cc6e86e8b6ca73648 Mon Sep 17 00:00:00 2001
From: Mark Tolmacs <mark@lazycat.hu>
Date: Sat, 29 Mar 2025 13:57:59 +0100
Subject: [PATCH] [skip ci] Tests for inner binding

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
---
 packages/element/tests/binding.test.tsx | 78 +++++++++++++++++++++++++
 packages/excalidraw/tests/helpers/ui.ts | 13 +++++
 2 files changed, 91 insertions(+)

diff --git a/packages/element/tests/binding.test.tsx b/packages/element/tests/binding.test.tsx
index 2b65859655..a667597b6c 100644
--- a/packages/element/tests/binding.test.tsx
+++ b/packages/element/tests/binding.test.tsx
@@ -503,4 +503,82 @@ describe("element binding", () => {
       });
     });
   });
+
+  // UX RATIONALE: The arrow might be outside of the shape at high zoom and you
+  // won't see what's going on.
+  it(
+    "allow non-binding simple (complex) arrow creation while start and end" +
+      " points are in the same shape",
+    () => {
+      UI.createElement("rectangle", {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      const arrow = UI.createElement("arrow", {
+        x: 5,
+        y: 5,
+        height: 95,
+        width: 95,
+      });
+
+      expect(arrow.startBinding).toBe(null);
+      expect(arrow.endBinding).toBe(null);
+      expect(arrow.points).toCloselyEqualPoints([
+        [0, 0],
+        [95, 95],
+      ]);
+
+      const rect2 = API.createElement({
+        type: "rectangle",
+        x: 300,
+        y: 300,
+        width: 100,
+        height: 100,
+        backgroundColor: "red",
+        fillStyle: "solid",
+      });
+
+      API.setElements([rect2]);
+
+      const arrow2 = UI.createElement("arrow", {
+        x: 305,
+        y: 305,
+        height: 95,
+        width: 95,
+      });
+
+      expect(arrow2.startBinding).toBe(null);
+      expect(arrow2.endBinding).toBe(null);
+      expect(arrow2.points).toCloselyEqualPoints([
+        [0, 0],
+        [95, 95],
+      ]);
+
+      UI.createElement("rectangle", {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      const arrow3 = UI.createElement("arrow", {
+        x: 5,
+        y: 5,
+        height: 95,
+        width: 95,
+        elbowed: true,
+      });
+
+      expect(arrow3.startBinding).toBe(null);
+      expect(arrow3.endBinding).toBe(null);
+      expect(arrow3.points).toCloselyEqualPoints([
+        [0, 0],
+        [45, 45],
+        [95, 95],
+      ]);
+    },
+  );
 });
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index 0e5e433674..06a0b4dbaf 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -467,6 +467,7 @@ export class UI {
       height: initialHeight = initialWidth,
       angle = 0,
       points: initialPoints,
+      elbowed = false,
     }: {
       position?: number;
       x?: number;
@@ -476,6 +477,7 @@ export class UI {
       height?: number;
       angle?: number;
       points?: T extends "line" | "arrow" | "freedraw" ? LocalPoint[] : never;
+      elbowed?: boolean;
     } = {},
   ): Element<T> & {
     /** Returns the actual, current element from the elements array, instead
@@ -494,6 +496,17 @@ export class UI {
     if (type === "text") {
       mouse.reset();
       mouse.click(x, y);
+    } else if (type === "arrow" && points.length === 2 && elbowed) {
+      UI.clickOnTestId("elbow-arrow");
+      mouse.reset();
+      mouse.moveTo(x + points[0][0], y + points[0][1]);
+      mouse.click();
+      mouse.moveTo(
+        x + points[points.length - 1][0],
+        y + points[points.length - 1][1],
+      );
+      mouse.click();
+      Keyboard.keyPress(KEYS.ESCAPE);
     } else if ((type === "line" || type === "arrow") && points.length > 2) {
       points.forEach((point) => {
         mouse.reset();