@dreamboard-games/ui-sdk 0.0.41

package/src/components/InteractionForm.test.tsx

@@ -0,0 +1,303 @@
+import { expect, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import type { InteractionHandle } from "../hooks/useInteractionHandle.js";
+import { ThemeProvider } from "../theme/ThemeProvider.js";
+import type { InteractionDescriptor } from "../types/plugin-state.js";
+import {
+  InteractionField,
+  InteractionForm,
+  defaultFormInputs,
+  hasDefaultInteractionFormFields,
+} from "./InteractionForm.js";
+
+function createDescriptor(
+  inputs: InteractionDescriptor["inputs"],
+): InteractionDescriptor {
+  return {
+    phaseName: "play",
+    interactionKey: "play.configure",
+    interactionId: "configure",
+    surface: "panel",
+    kind: "action",
+    label: "Configure",
+    inputs,
+    commit: { mode: "manual" },
+    available: true,
+  };
+}
+
+function createHandle(
+  descriptor: InteractionDescriptor,
+  values: Record<string, unknown> = {},
+): InteractionHandle {
+  return {
+    descriptor,
+    commit: descriptor.commit,
+    submit: async () => {},
+    validate: async () => {},
+    validateDraft: () => ({
+      ok: true,
+      params: values,
+      fieldErrors: {},
+      formErrors: [],
+      missing: [],
+    }),
+    validateDraftServer: async () => {},
+    submitDraft: async () => {},
+    available: descriptor.available,
+    unavailableReason: descriptor.unavailableReason,
+    draft: values,
+    values,
+    setInput: () => {},
+    clearInput: () => {},
+    isReady: true,
+    isArmed: false,
+    arm: () => {},
+    disarm: () => {},
+  };
+}
+
+function renderForm(
+  descriptor: InteractionDescriptor,
+  values: Record<string, unknown> = {},
+) {
+  return renderToString(
+    <ThemeProvider>
+      <InteractionForm
+        descriptor={descriptor}
+        handle={createHandle(descriptor, values)}
+      />
+    </ThemeProvider>,
+  );
+}
+
+test("InteractionForm renders choice fields as default controls", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "resource",
+      kind: "form",
+      domain: {
+        type: "choice",
+        choices: [
+          { value: "wood", label: "Wood" },
+          { value: "brick", label: "Brick" },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor);
+
+  expect(html).toContain("Resource");
+  expect(html).toContain("Wood");
+  expect(html).toContain("Brick");
+});
+
+test("InteractionForm renders choice select values with icons", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "resource",
+      kind: "form",
+      defaultValue: "wood",
+      domain: {
+        type: "choice",
+        choices: [
+          { value: "wood", label: "Wood", icon: "🪵" },
+          { value: "brick", label: "Brick", icon: "🧱" },
+          { value: "grain", label: "Grain", icon: "🌾" },
+          { value: "wool", label: "Wool", icon: "🐑" },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor, { resource: "wood" });
+
+  expect(html).toContain("🪵");
+  expect(html).toContain("Wood");
+});
+
+test("InteractionForm renders choice badges and selected descriptions", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "giveResource",
+      kind: "form",
+      defaultValue: "wood",
+      domain: {
+        type: "choice",
+        choices: [
+          {
+            value: "wood",
+            label: "Wood",
+            icon: "🪵",
+            badge: "4:1",
+            description: "Give 4 Wood to receive 1 resource.",
+          },
+          {
+            value: "brick",
+            label: "Brick",
+            icon: "🧱",
+            badge: "3:1",
+          },
+          {
+            value: "grain",
+            label: "Grain",
+            icon: "🌾",
+            badge: "4:1",
+          },
+          {
+            value: "wool",
+            label: "Wool",
+            icon: "🐑",
+            badge: "4:1",
+          },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor, { giveResource: "wood" });
+
+  expect(html).toContain("🪵");
+  expect(html).toContain("Wood");
+  expect(html).toContain("4:1");
+  expect(html).toContain("Give 4 Wood to receive 1 resource.");
+});
+
+test("InteractionForm renders choiceList min/max guidance", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "players",
+      kind: "form",
+      domain: {
+        type: "choiceList",
+        min: 1,
+        max: 2,
+        choices: [
+          { value: "p1", label: "Alice" },
+          { value: "p2", label: "Bob" },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor);
+
+  expect(html).toContain("Players");
+  expect(html).toContain("Pick");
+  expect(html).toContain("Alice");
+  expect(html).toContain("Bob");
+});
+
+test("InteractionForm renders resourceMap steppers with bounds", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "payment",
+      kind: "form",
+      domain: {
+        type: "resourceMap",
+        resources: [
+          { resourceId: "wood", label: "Wood", min: 0, max: 3 },
+          { resourceId: "brick", label: "Brick", min: 0, max: 2 },
+        ],
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor);
+
+  expect(html).toContain("Payment");
+  expect(html).toContain("Wood");
+  expect(html).toContain("Brick");
+  expect(html).toContain("Increase Wood");
+});
+
+test("InteractionForm renders boundedNumber steppers", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "count",
+      kind: "form",
+      domain: { type: "boundedNumber", min: 1, max: 5, step: 1 },
+    },
+  ]);
+
+  const html = renderForm(descriptor);
+
+  expect(html).toContain("Count");
+  expect(html).toContain('type="number"');
+  expect(html).toContain("Decrease count");
+  expect(html).toContain("Increase count");
+});
+
+test("target inputs are hidden from default form fields", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "spaceId",
+      kind: "board-space",
+      domain: {
+        type: "target",
+        targetKind: "space",
+        eligibleTargets: ["space-1"],
+      },
+    },
+  ]);
+
+  expect(hasDefaultInteractionFormFields(descriptor)).toBe(false);
+  expect(defaultFormInputs(descriptor)).toEqual([]);
+});
+
+test("many target inputs render a selected summary in default forms", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "cardIds",
+      kind: "card",
+      domain: {
+        type: "target",
+        targetKind: "card",
+        eligibleTargets: ["card-1", "card-2", "card-3"],
+        selection: {
+          mode: "many",
+          min: 3,
+          max: 3,
+          distinct: true,
+        },
+      },
+    },
+  ]);
+
+  const html = renderForm(descriptor, {
+    cardIds: ["card-1", "card-2", "card-3"],
+  });
+
+  expect(hasDefaultInteractionFormFields(descriptor)).toBe(true);
+  expect(html).toContain("Card Ids");
+  expect(html).toContain("3 selected");
+});
+
+test("InteractionField renders field errors and required state", () => {
+  const descriptor = createDescriptor([
+    {
+      key: "resource",
+      kind: "form",
+      domain: {
+        type: "choice",
+        choices: [{ value: "wood", label: "Wood" }],
+      },
+    },
+  ]);
+
+  const html = renderToString(
+    <ThemeProvider>
+      <InteractionField
+        descriptor={descriptor}
+        inputKey="resource"
+        handle={createHandle(descriptor)}
+        errors={["Pick a valid resource"]}
+        missing
+      />
+    </ThemeProvider>,
+  );
+
+  expect(html).toContain("Pick a valid resource");
+  expect(html).not.toContain("Required");
+});