@dreamboard-games/ui-sdk 0.0.41

package/src/primitives/interaction.test.tsx

@@ -0,0 +1,420 @@
+import { expect, mock, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import type {
+  InteractionDescriptor,
+  PluginStateSnapshot,
+} from "../types/plugin-state.js";
+import type { RuntimeAPI, PluginSessionState } from "../types/runtime-api.js";
+import { createInteractionUiStore } from "../context/InteractionDraftContext.js";
+import { GameUIProvider } from "./game-ui-provider.js";
+import { Interaction } from "./interaction.js";
+import { Zone } from "./zone.js";
+
+function createSessionState(): PluginSessionState {
+  return {
+    status: "ready",
+    sessionId: "session-1",
+    controllablePlayerIds: ["player-1"],
+    controllingPlayerId: "player-1",
+    userId: "user-1",
+  };
+}
+
+function createSnapshot(
+  overrides: Partial<PluginStateSnapshot["gameplay"]> = {},
+): PluginStateSnapshot {
+  return {
+    view: {},
+    gameplay: {
+      currentPhase: "setup",
+      currentStage: null,
+      activePlayers: ["player-1"],
+      zones: {},
+      availableInteractions: [
+        {
+          phaseName: "setup",
+          interactionKey: "setup.ready",
+          interactionId: "ready",
+          kind: "action",
+          inputs: [],
+          commit: { mode: "manual" },
+          available: true,
+        },
+      ],
+      ...overrides,
+    },
+    lobby: null,
+    notifications: [],
+    session: createSessionState(),
+    history: null,
+    syncId: 1,
+  };
+}
+
+function createRuntime(snapshot: PluginStateSnapshot): RuntimeAPI {
+  return {
+    validateInteraction: async () => ({ valid: true }),
+    submitInteraction: mock(async () => undefined),
+    getSessionState: () => snapshot.session,
+    disconnect: () => undefined,
+    getSnapshot: () => snapshot,
+    subscribeToState: () => () => undefined,
+  } as RuntimeAPI;
+}
+
+test("Interaction primitives render descriptor state through data attributes", () => {
+  const runtime = createRuntime(createSnapshot());
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.ready">
+        <Interaction.Trigger asChild className="primitive">
+          <button className="author">Open</button>
+        </Interaction.Trigger>
+        <Interaction.Label />
+        <Interaction.Description />
+        <Interaction.Submit>Submit</Interaction.Submit>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-dreamboard-interaction-trigger=""');
+  expect(html).toContain('data-interaction-id="ready"');
+  expect(html).toContain('data-available="true"');
+  expect(html).toContain('class="primitive author"');
+  expect(html).toContain("Ready");
+  expect(html).toContain('data-dreamboard-interaction-submit=""');
+  expect(html).toContain('data-ready="true"');
+});
+
+test("Interaction primitives surface unavailable descriptors without author wiring", () => {
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        {
+          phaseName: "setup",
+          interactionKey: "setup.ready",
+          interactionId: "ready",
+          kind: "action",
+          inputs: [],
+          commit: { mode: "manual" },
+          available: false,
+          unavailableReason: "Wait for another player.",
+        },
+      ],
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.ready">
+        <Interaction.Trigger>Open</Interaction.Trigger>
+        <Interaction.UnavailableMessage />
+        <Interaction.Submit>Submit</Interaction.Submit>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-available="false"');
+  expect(html).toContain("disabled=");
+  expect(html).toContain("Wait for another player.");
+});
+
+test("Interaction label falls back for missing descriptors", () => {
+  const runtime = createRuntime(createSnapshot({ availableInteractions: [] }));
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="playing.playCard">
+        <Interaction.Label />
+        <Interaction.Submit>Submit</Interaction.Submit>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain("Play Card");
+  expect(html).toContain('data-state="unavailable"');
+  expect(html).toContain("disabled=");
+});
+
+test("Interaction submit stays disabled until required draft inputs are ready", () => {
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        {
+          phaseName: "passing",
+          interactionKey: "passing.passCards",
+          interactionId: "passCards",
+          kind: "action",
+          inputs: [
+            {
+              key: "cardIds",
+              kind: "card",
+              domain: {
+                type: "target",
+                targetKind: "card",
+                eligibleTargets: ["card-1"],
+                selection: { mode: "many", min: 1, max: 3, distinct: true },
+              },
+            },
+          ],
+          commit: { mode: "manual" },
+          available: true,
+        },
+      ],
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="passing.passCards">
+        <Interaction.Submit disabled={false}>Submit</Interaction.Submit>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-ready="false"');
+  expect(html).toContain("disabled=");
+});
+
+test("Interaction primitives do not let disabled=false force-enable unavailable controls", () => {
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [
+        {
+          phaseName: "setup",
+          interactionKey: "setup.ready",
+          interactionId: "ready",
+          kind: "action",
+          inputs: [
+            {
+              key: "name",
+              kind: "form",
+              domain: { type: "freeform" },
+            },
+          ],
+          commit: { mode: "manual" },
+          available: false,
+        },
+      ],
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="setup.ready">
+        <Interaction.Trigger disabled={false}>Open</Interaction.Trigger>
+        <Interaction.Input name="name" disabled={false} />
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain(
+    '<button type="button" disabled="" aria-disabled="true" data-dreamboard-interaction-trigger=""',
+  );
+  expect(html).toContain(
+    '<input disabled="" aria-disabled="true" data-dreamboard-interaction-input=""',
+  );
+});
+
+test("Interaction.CardInput reads Zone.Item card context and many-selection state", () => {
+  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],
+      zones: {
+        hand: {
+          cardIds: ["card-1"],
+          cardsById: { "card-1": '{"id":"card-1"}' },
+          playableByCardId: { "card-1": [passCards] },
+        },
+      },
+    }),
+  );
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("passing.passCards", "cardIds", ["card-1"]);
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <Interaction.Root interaction="passing.passCards">
+        <Zone.Root zone="hand">
+          <Zone.List>
+            <Zone.Item card="card-1">
+              <Interaction.CardInput input="cardIds">
+                Card one
+              </Interaction.CardInput>
+            </Zone.Item>
+          </Zone.List>
+        </Zone.Root>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-dreamboard-zone-root=""');
+  expect(html).toContain('data-dreamboard-zone-item=""');
+  expect(html).toContain('data-dreamboard-interaction-card-input=""');
+  expect(html).toContain('data-card-id="card-1"');
+  expect(html).toContain('data-zone="hand"');
+  expect(html).toContain('data-selected="true"');
+  expect(html).toContain('data-eligible="true"');
+});
+
+test("Interaction.CardInput marks unselected cards once a many selection is full", () => {
+  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: 1, distinct: true },
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const runtime = createRuntime(
+    createSnapshot({
+      availableInteractions: [passCards],
+      zones: {
+        hand: {
+          cardIds: ["card-1", "card-2"],
+          cardsById: {
+            "card-1": '{"id":"card-1"}',
+            "card-2": '{"id":"card-2"}',
+          },
+          playableByCardId: {
+            "card-1": [passCards],
+            "card-2": [passCards],
+          },
+        },
+      },
+    }),
+  );
+  const interactionStore = createInteractionUiStore();
+  interactionStore.setInput("passing.passCards", "cardIds", ["card-1"]);
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime} interactionStore={interactionStore}>
+      <Interaction.Root interaction="passing.passCards">
+        <Zone.Root zone="hand">
+          <Zone.List>
+            <Zone.Item card="card-1">
+              <Interaction.CardInput input="cardIds">
+                Card one
+              </Interaction.CardInput>
+            </Zone.Item>
+            <Zone.Item card="card-2">
+              <Interaction.CardInput input="cardIds" disabled={false}>
+                Card two
+              </Interaction.CardInput>
+            </Zone.Item>
+          </Zone.List>
+        </Zone.Root>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-card-id="card-1"');
+  expect(html).toContain('data-selected="true"');
+  expect(html).toContain('data-card-id="card-2"');
+  expect(html).toContain('data-selectable="false"');
+});
+
+test("Interaction.CardInput marks card candidates unavailable in zone projection", () => {
+  const playCard: InteractionDescriptor = {
+    phaseName: "playing",
+    interactionKey: "playing.playCard",
+    interactionId: "playCard",
+    kind: "action",
+    inputs: [
+      {
+        key: "cardId",
+        kind: "card",
+        domain: {
+          type: "target",
+          targetKind: "card",
+          eligibleTargets: ["card-1", "card-2"],
+        },
+      },
+    ],
+    commit: { mode: "manual" },
+    available: true,
+  };
+  const unavailableCard = {
+    ...playCard,
+    available: false,
+    unavailableReason: "Lead with the two of clubs.",
+  };
+  const runtime = createRuntime(
+    createSnapshot({
+      currentPhase: "playing",
+      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": [unavailableCard],
+          },
+        },
+      },
+    }),
+  );
+
+  const html = renderToString(
+    <GameUIProvider runtime={runtime}>
+      <Interaction.Root interaction="playing.playCard">
+        <Zone.Root zone="hand">
+          <Zone.List>
+            <Zone.Item card="card-1">
+              <Interaction.CardInput input="cardId">
+                Card one
+              </Interaction.CardInput>
+            </Zone.Item>
+            <Zone.Item card="card-2">
+              <Interaction.CardInput input="cardId">
+                Card two
+              </Interaction.CardInput>
+            </Zone.Item>
+          </Zone.List>
+        </Zone.Root>
+      </Interaction.Root>
+    </GameUIProvider>,
+  );
+
+  expect(html).toContain('data-card-id="card-1"');
+  expect(html).toContain('data-card-available="true"');
+  expect(html).toContain('data-card-id="card-2"');
+  expect(html).toContain('data-card-available="false"');
+});