feat: connect UI to situation graph start flow

2026-08-02 07:21:40 +01:00
parent 84858107b7
commit 575b8fd971
6 changed files with 450 additions and 101 deletions
@@ -0,0 +1,190 @@
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import DiagnosticsView from "@/components/diagnostics-view.jsx";
+import SituationGraphView from "@/components/situation-graph-view.jsx";
+import {
+  ScenarioResultPanels,
+  submitScenarioForStartCase,
+} from "@/components/scenario-form.jsx";
+
+function makeGraphResult(overrides = {}) {
+  return {
+    success: true,
+    situationGraph: {
+      centralStatement: "Complaints increased while production increased.",
+      currentSummary:
+        "Nodes: 2 observation, 1 unknown | Edges: 2 total | Unknowns: 1 unresolved",
+      activeUnknownNodeId: "n-unknown",
+      resolvedNodeIds: [],
+      nodes: [
+        {
+          id: "n-1",
+          label: "Complaints up 35%",
+          description: "Complaints increased by 35%",
+          kind: "observation",
+          status: "supported",
+          confidence: "high",
+          value: 35,
+          unit: "%",
+        },
+        {
+          id: "n-2",
+          label: "Production up 40%",
+          description: "Production increased by 40%",
+          kind: "observation",
+          status: "supported",
+          confidence: "high",
+          value: 40,
+          unit: "%",
+        },
+        {
+          id: "n-unknown",
+          label: "Complaint rate denominator",
+          description: "Need the denominator for complaint rate",
+          kind: "unknown",
+          status: "unknown",
+          confidence: "medium",
+          value: null,
+          unit: null,
+        },
+      ],
+      edges: [
+        { id: "e1", fromNodeId: "n-1", toNodeId: "n-unknown" },
+        { id: "e2", fromNodeId: "n-2", toNodeId: "n-unknown" },
+      ],
+    },
+    selectedQuestion: {
+      question: "What denominator is being used for the complaint rate?",
+    },
+    diagnostics: {
+      modelName: "test",
+      responseDurationMs: 1234,
+      validationStatus: "valid",
+      promptVersion: "test-prompt",
+      nodeCount: 3,
+      edgeCount: 2,
+      graphReferenceValidation: { valid: true, errors: [] },
+    },
+    ...overrides,
+  };
+}
+
+describe("scenario-form UI helpers", () => {
+  it("submits to /api/cases/start", async () => {
+    const fetchImpl = vi.fn().mockResolvedValue({ ok: true });
+
+    await submitScenarioForStartCase(fetchImpl, "Scenario text");
+
+    expect(fetchImpl).toHaveBeenCalledWith(
+      "/api/cases/start",
+      expect.objectContaining({
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+  });
+});
+
+describe("graph-backed UI rendering", () => {
+  it("renders central statement from successful graph response", () => {
+    const data = makeGraphResult();
+    const html = renderToStaticMarkup(
+      <SituationGraphView
+        situationGraph={data.situationGraph}
+        selectedQuestion={data.selectedQuestion}
+      />,
+    );
+
+    expect(html).toContain("Central statement");
+    expect(html).toContain("Complaints increased while production increased.");
+  });
+
+  it("renders active unknown", () => {
+    const data = makeGraphResult();
+    const html = renderToStaticMarkup(
+      <SituationGraphView
+        situationGraph={data.situationGraph}
+        selectedQuestion={data.selectedQuestion}
+      />,
+    );
+
+    expect(html).toContain("Active unknown");
+    expect(html).toContain("Complaint rate denominator");
+  });
+
+  it("renders selected question exactly once", () => {
+    const data = makeGraphResult();
+    const html = renderToStaticMarkup(
+      <SituationGraphView
+        situationGraph={data.situationGraph}
+        selectedQuestion={data.selectedQuestion}
+      />,
+    );
+
+    expect(
+      html.match(/What denominator is being used for the complaint rate\?/g) ||
+        [],
+    ).toHaveLength(1);
+  });
+
+  it("renders diagnostics", () => {
+    const html = renderToStaticMarkup(
+      <DiagnosticsView result={makeGraphResult()} />,
+    );
+
+    expect(html).toContain("Diagnostics");
+    expect(html).toContain("test");
+    expect(html).toContain("1234ms");
+    expect(html).toContain("Node count");
+    expect(html).toContain("Edge count");
+    expect(html).toContain("Graph references");
+  });
+
+  it("hides empty sections", () => {
+    const base = makeGraphResult();
+    const result = makeGraphResult({
+      selectedQuestion: null,
+      situationGraph: {
+        ...base.situationGraph,
+        activeUnknownNodeId: null,
+        nodes: [base.situationGraph.nodes[0]],
+        edges: [],
+      },
+    });
+
+    const html = renderToStaticMarkup(
+      <SituationGraphView
+        situationGraph={result.situationGraph}
+        selectedQuestion={result.selectedQuestion}
+      />,
+    );
+
+    expect(html).not.toContain("Selected Question");
+    expect(html).not.toContain("Active unknown");
+  });
+
+  it("displays API error clearly", () => {
+    const html = renderToStaticMarkup(
+      <ScenarioResultPanels
+        status="error"
+        result={{ error: "Invalid start-case request" }}
+      />,
+    );
+
+    expect(html).toContain("Error: Invalid start-case request");
+  });
+
+  it("renders expandable raw graph JSON", () => {
+    const data = makeGraphResult();
+    const html = renderToStaticMarkup(
+      <SituationGraphView
+        situationGraph={data.situationGraph}
+        selectedQuestion={data.selectedQuestion}
+      />,
+    );
+
+    expect(html).toContain("Raw graph JSON");
+    expect(html).toContain("&quot;centralStatement&quot;");
+  });
+});