@dreamboard-games/ui-sdk 0.0.42 → 0.0.45

package/src/primitives/interaction.test.tsx

@@ -87,6 +87,272 @@ test("Interaction primitives render descriptor state through data attributes", (
   expect(html).toContain('data-ready="true"');
 });
 
+test("Interaction.Form renders the bound descriptor without author handle plumbing", () => {
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        {
+          phaseName: "setup",
+          interactionKey: "setup.namePlayer",
+          interactionId: "namePlayer",
+          kind: "action",
+          inputs: [
+            {
+              key: "age",
+              kind: "form",
+              domain: { type: "boundedNumber", min: 1, max: 120 },
+            },
+          ],
+          commit: { mode: "manual" },
+          available: true,
+        },
+      ],
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.namePlayer">
+        <Interaction.Form
+          title="Name player"
+          submitLabel="Save name"
+          accordion={false}
+        />
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain("Name player");
+  expect(html).toContain("Save name");
+  expect(html).toContain('type="number"');
+  expect(html).toContain("Increase age");
+});
+
+test("Interaction.Field renders a single bound form input from Root context", () => {
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        {
+          phaseName: "setup",
+          interactionKey: "setup.namePlayer",
+          interactionId: "namePlayer",
+          kind: "action",
+          inputs: [
+            {
+              key: "age",
+              kind: "form",
+              domain: { type: "boundedNumber", min: 1, max: 120 },
+            },
+          ],
+          commit: { mode: "manual" },
+          available: true,
+        },
+      ],
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.namePlayer">
+        <Interaction.Field input="age" />
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('type="number"');
+  expect(html).toContain("Increase age");
+});
+
+test("Interaction.Dialog owns headless lifecycle state", () => {
+  const runtime = createRuntime(createSnapshot());
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.ready">
+        <Interaction.Dialog>
+          {({ open, minimized, interaction }) => (
+            <div
+              data-interaction={interaction}
+              data-open={open}
+              data-minimized={minimized}
+            />
+          )}
+        </Interaction.Dialog>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-interaction="setup.ready"');
+  expect(html).toContain('data-open="true"');
+  expect(html).toContain('data-minimized="false"');
+});
+
+test("Interaction.Switch routes the selected descriptor through Interaction.Root", () => {
+  const runtime = createRuntime(createSnapshot());
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Switch
+        interaction="setup.ready"
+        routes={{
+          "setup.ready": ({ interaction, descriptor }) => (
+            <Interaction.State unavailable={null}>
+              {({ isReady }) => (
+                <span>
+                  {interaction}:{descriptor.interactionId}:{String(isReady)}
+                </span>
+              )}
+            </Interaction.State>
+          ),
+        }}
+      />
+    </GameUIProvider>,
+  ).replace(/<!-- -->/g, "");
+
+  expect(html).toContain("setup.ready:ready:true");
+});
+
+test("Interaction.Switch renders fallback when no route matches", () => {
+  const runtime = createRuntime(createSnapshot());
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Switch routes={{}} fallback={<span>No route</span>} />
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain("No route");
+});
+
+test("Interaction.Switch without an explicit interaction routes the pending graph", () => {
+  const moveRaider: InteractionDescriptor = {
+    phaseName: "playing",
+    interactionKey: "playing.moveRaider",
+    interactionId: "moveRaider",
+    kind: "action",
+    inputs: [
+      {
+        key: "spaceId",
+        kind: "board-space",
+        domain: {
+          type: "target",
+          targetKind: "board-space",
+          eligibleTargets: ["space-1"],
+        },
+      },
+      {
+        key: "stealFromPlayerId",
+        kind: "form",
+        domain: {
+          type: "choice",
+          choices: [{ value: "player-2", label: "Player 2" }],
+          dependsOn: ["spaceId"],
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        createSnapshot().gameplay.availableInteractions[0]!,
+        moveRaider,
+      ],
+    }),
+  );
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("playing.moveRaider", "spaceId", "space-1");
+  interactionStore.setPendingInteraction("playing.moveRaider");
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <Interaction.Switch
+        routes={{
+          "setup.ready": () => <span>Ready route</span>,
+          "playing.moveRaider": ({ interaction }) => (
+            <Interaction.State unavailable={null}>
+              {({ readyFrontier }) => (
+                <span>
+                  {interaction}:{readyFrontier.join(",")}
+                </span>
+              )}
+            </Interaction.State>
+          ),
+        }}
+      />
+    </GameUIProvider>,
+  );
+
+  expect(html.replace(/<!-- -->/g, "")).toContain(
+    "playing.moveRaider:stealFromPlayerId",
+  );
+  expect(html).not.toContain("Ready route");
+});
+
+test("Interaction.State exposes draft and status without hook plumbing", () => {
+  const passCards: InteractionDescriptor = {
+    phaseName: "passing",
+    interactionKey: "passing.passCards",
+    interactionId: "passCards",
+    kind: "action",
+    inputs: [
+      {
+        key: "cardIds",
+        kind: "card",
+        domain: {
+          type: "target",
+          targetKind: "card",
+          eligibleTargets: ["card-1", "card-2"],
+          selection: { mode: "many", min: 1, max: 3, distinct: true },
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const runtime = createRuntime(
+    createSnapshot({ availableInteractions: [passCards] }),
+  );
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("passing.passCards", "cardIds", ["card-1"]);
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <Interaction.Root interaction="passing.passCards">
+        <Interaction.State<{ cardIds: readonly string[] }> unavailable={null}>
+          {({
+            draft,
+            status,
+            isReady,
+            hasInputs,
+            inputKeys,
+            missingInputs,
+            readyFrontier,
+            blockedInputs,
+          }) => (
+            <span>
+              selected:{draft.cardIds?.join(",")} status:{status} ready:
+              {String(isReady)} hasInputs:{String(hasInputs)} inputs:
+              {inputKeys.join(",")} missing:{missingInputs.join(",")} frontier:
+              {readyFrontier.join(",")} blocked:{blockedInputs.join(",")}
+            </span>
+          )}
+        </Interaction.State>
+      </Interaction.Root>
+    </GameUIProvider>,
+  ).replace(/<!-- -->/g, "");
+
+  expect(html).toContain("selected:card-1");
+  expect(html).toContain("status:open");
+  expect(html).toContain("ready:true");
+  expect(html).toContain("hasInputs:true");
+  expect(html).toContain("inputs:cardIds");
+  expect(html).toContain("missing:");
+  expect(html).toContain("frontier:");
+  expect(html).toContain("blocked:");
+});
+
 test("Interaction primitives surface unavailable descriptors without author wiring", () => {
   const runtime = createRuntime(
     createSnapshot({
@@ -276,6 +542,7 @@ test("Interaction.CardInput reads Zone.Item card context and many-selection stat
   expect(html).toContain('data-zone="hand"');
   expect(html).toContain('data-selected="true"');
   expect(html).toContain('data-eligible="true"');
+  expect(html).toContain('data-target-valid="true"');
 });
 
 test("Interaction.CardInput marks unselected cards once a many selection is full", () => {
@@ -345,6 +612,8 @@ test("Interaction.CardInput marks unselected cards once a many selection is full
   expect(html).toContain('data-selected="true"');
   expect(html).toContain('data-card-id="card-2"');
   expect(html).toContain('data-selectable="false"');
+  expect(html).toContain('data-disabled="true"');
+  expect(html).toContain("disabled=");
 });
 
 test("Interaction.CardInput marks card candidates unavailable in zone projection", () => {
@@ -417,4 +686,131 @@ test("Interaction.CardInput marks card candidates unavailable in zone projection
   expect(html).toContain('data-card-available="true"');
   expect(html).toContain('data-card-id="card-2"');
   expect(html).toContain('data-card-available="false"');
+  expect(html).toContain(
+    'data-card-unavailable-reason="Lead with the two of clubs."',
+  );
+  expect(html).toContain('data-target-valid="true"');
+});
+
+test("Interaction.CardInput separates invalid target state from unavailable cards", () => {
+  const playCard: InteractionDescriptor = {
+    phaseName: "playing",
+    interactionKey: "playing.playCard",
+    interactionId: "playCard",
+    kind: "action",
+    inputs: [
+      {
+        key: "cardId",
+        kind: "card",
+        domain: {
+          type: "target",
+          targetKind: "card",
+          zoneIds: ["hand"],
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [playCard],
+      zones: {
+        hand: {
+          cardIds: ["card-1", "card-2"],
+          cardsById: {
+            "card-1": '{"id":"card-1"}',
+            "card-2": '{"id":"card-2"}',
+          },
+          playableByCardId: {
+            "card-1": [playCard],
+            "card-2": [],
+          },
+        },
+      },
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="playing.playCard">
+        <Zone.Root zone="hand">
+          <Zone.Item card="card-2">
+            <Interaction.CardInput input="cardId">
+              Card two
+            </Interaction.CardInput>
+          </Zone.Item>
+        </Zone.Root>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-card-id="card-2"');
+  expect(html).toContain('data-target-valid="false"');
+  expect(html).toContain('data-target-invalid-reason="not-top-card"');
+  expect(html).toContain('data-card-available="false"');
+});
+
+test("Interaction.CardInput throws dev errors for unsafe card mismatches", () => {
+  const playCard: InteractionDescriptor = {
+    phaseName: "playing",
+    interactionKey: "playing.playCard",
+    interactionId: "playCard",
+    kind: "action",
+    inputs: [
+      {
+        key: "cardId",
+        kind: "card",
+        domain: {
+          type: "target",
+          targetKind: "card",
+          zoneIds: ["hand"],
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [playCard],
+      zones: {
+        hand: {
+          cardIds: ["card-1"],
+          cardsById: { "card-1": '{"id":"card-1"}' },
+          playableByCardId: { "card-1": [playCard] },
+        },
+      },
+    }),
+  );
+
+  expect(() =>
+    renderToString(
+      <GameUIProvider runtime={runtime}>
+        <Interaction.Root interaction="playing.playCard">
+          <Zone.Root zone="hand">
+            <Zone.Item card="card-1">
+              <Interaction.CardInput input="cardId" unsafeCardId="card-2">
+                Card
+              </Interaction.CardInput>
+            </Zone.Item>
+          </Zone.Root>
+        </Interaction.Root>
+      </GameUIProvider>,
+    ),
+  ).toThrow("does not match surrounding Zone.Item card");
+
+  expect(() =>
+    renderToString(
+      <GameUIProvider runtime={runtime}>
+        <Interaction.Root interaction="playing.playCard">
+          <Zone.Root zone="hand">
+            <Interaction.CardInput input="cardId" unsafeCardId="missing-card">
+              Card
+            </Interaction.CardInput>
+          </Zone.Root>
+        </Interaction.Root>
+      </GameUIProvider>,
+    ),
+  ).toThrow("is not present in surrounding zone");
 });