confidence-engine/tests/ui/scenario-form.test.jsx

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;");
  });
});