Merge pull request #240 from RtlZeroMemory/fix/222-modal-actions-order

test(core): lock modal action order and click mapping

Author: RtlZeroMemory

packages/core/src/app/__tests__/widgetRenderer.integration.test.ts

@@ -10,6 +10,7 @@ import type { DrawlistBuilder } from "../../drawlist/index.js";
 import type { ZrevEvent } from "../../events.js";
 import { type VNode, defineWidget, ui } from "../../index.js";
 import { DEFAULT_TERMINAL_CAPS } from "../../terminalCaps.js";
+import { createTestRenderer } from "../../testing/index.js";
 import { defaultTheme } from "../../theme/defaultTheme.js";
 import { TOAST_HEIGHT, getToastActionFocusId } from "../../widgets/toast.js";
 import { createApp } from "../createApp.js";
@@ -1089,6 +1090,67 @@ describe("WidgetRenderer integration battery", () => {
     assert.deepEqual(events, []);
   });
 
+  test("modal actions preserve declared order and click behavior", () => {
+    const backend = createNoopBackend();
+    const renderer = new WidgetRenderer<void>({
+      backend,
+      requestRender: () => {},
+    });
+
+    const calls: string[] = [];
+    const vnode = ui.modal({
+      id: "confirm-quit",
+      title: "Confirm quit",
+      content: ui.text("Are you sure?"),
+      actions: [
+        ui.button({
+          id: "cancel",
+          label: "Cancel",
+          onPress: () => calls.push("cancel"),
+        }),
+        ui.button({
+          id: "confirm",
+          label: "Quit",
+          onPress: () => calls.push("confirm"),
+        }),
+      ],
+    });
+
+    const res = renderer.submitFrame(
+      () => vnode,
+      undefined,
+      { cols: 80, rows: 24 },
+      defaultTheme,
+      noRenderHooks(),
+    );
+    assert.ok(res.ok);
+    const textSnapshot = createTestRenderer({ viewport: { cols: 80, rows: 24 } })
+      .render(vnode)
+      .toText();
+    assert.equal(textSnapshot.includes("Cancel"), true);
+
+    const rects = renderer.getRectByIdIndex();
+    const cancelRect = rects.get("cancel");
+    const confirmRect = rects.get("confirm");
+    assert.ok(cancelRect !== undefined, "cancel rect should exist");
+    assert.ok(confirmRect !== undefined, "confirm rect should exist");
+    if (!cancelRect || !confirmRect) return;
+
+    assert.equal(cancelRect.x < confirmRect.x, true, "cancel should render left of confirm");
+
+    const cancelX = cancelRect.x + Math.max(0, Math.floor((cancelRect.w - 1) / 2));
+    const cancelY = cancelRect.y;
+    renderer.routeEngineEvent(mouseDownEvent(cancelX, cancelY));
+    renderer.routeEngineEvent(mouseEvent(cancelX, cancelY, 4));
+
+    const confirmX = confirmRect.x + Math.max(0, Math.floor((confirmRect.w - 1) / 2));
+    const confirmY = confirmRect.y;
+    renderer.routeEngineEvent(mouseDownEvent(confirmX, confirmY));
+    renderer.routeEngineEvent(mouseEvent(confirmX, confirmY, 4));
+
+    assert.deepEqual(calls, ["cancel", "confirm"]);
+  });
+
   test("splitPane double-click toggles collapse via onCollapse", () => {
     const backend = createNoopBackend();
     const renderer = new WidgetRenderer<void>({