Claude-Code-Monitor/client/src/components/lanes/__tests__/PipelineMap.test.tsx

/**
 * @file Rendering tests for the lane pipeline map: every node renders with a
 * state-specific class so "done", "current" and "passed without evidence" stay
 * visually distinguishable, and the amber state is never conflated with done.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import PipelineMap from "../PipelineMap";
import type { LaneNode } from "../../../lib/types";

const nodes: LaneNode[] = [
  { id: "plan", label: "plan", icon: "🧭", gate: false, state: "done" },
  { id: "implement", label: "implement", icon: "🛠", gate: false, state: "passed-no-evidence" },
  { id: "review", label: "review", icon: "👀", gate: true, state: "current" },
  { id: "gate", label: "gate", icon: "🚦", gate: true, state: "failed" },
  { id: "done", label: "done", icon: "✅", gate: false, state: "pending" },
];

describe("PipelineMap", () => {
  it("renders one element per node, labelled by state", () => {
    render(<PipelineMap nodes={nodes} />);
    expect(screen.getAllByTestId(/^pipeline-node-/)).toHaveLength(5);
    expect(screen.getByTestId("pipeline-node-plan")).toHaveAttribute("data-state", "done");
    expect(screen.getByTestId("pipeline-node-implement")).toHaveAttribute(
      "data-state",
      "passed-no-evidence"
    );
    expect(screen.getByTestId("pipeline-node-review")).toHaveAttribute("data-state", "current");
    expect(screen.getByTestId("pipeline-node-gate")).toHaveAttribute("data-state", "failed");
    expect(screen.getByTestId("pipeline-node-done")).toHaveAttribute("data-state", "pending");
  });

  it("gives amber nodes a different class from done nodes", () => {
    render(<PipelineMap nodes={nodes} />);
    const done = screen.getByTestId("pipeline-node-plan").className;
    const amber = screen.getByTestId("pipeline-node-implement").className;
    // The done node must contain emerald colour token and the amber node must contain amber token.
    expect(done).toContain("emerald");
    expect(amber).toContain("amber");
    expect(done).not.toEqual(amber);
  });

  it("renders nothing but an empty hint when there are no nodes", () => {
    render(<PipelineMap nodes={[]} />);
    expect(screen.queryAllByTestId(/^pipeline-node-/)).toHaveLength(0);
  });

  describe("detected (inferred) nodes", () => {
    const detectedNodes: LaneNode[] = [
      { id: "intake", label: "intake", icon: "📥", gate: false, state: "pending", detected: true },
      { id: "tests", label: "tests", icon: "🧪", gate: false, state: "pending", detected: true },
      { id: "plan", label: "plan", icon: "🧭", gate: false, state: "done" },
      {
        id: "implement",
        label: "implement",
        icon: "🛠",
        gate: false,
        state: "passed-no-evidence",
      },
    ];

    it("marks a detected node with data-detected and a dashed-border class token", () => {
      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
      const node = screen.getByTestId("pipeline-node-tests");
      expect(node).toHaveAttribute("data-detected", "true");
      expect(node.className).toContain("border-dashed");
    });

    it("gives a detected node a class different from both done and plain passed-no-evidence", () => {
      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
      const detected = screen.getByTestId("pipeline-node-tests").className;
      const done = screen.getByTestId("pipeline-node-plan").className;
      const amber = screen.getByTestId("pipeline-node-implement").className;
      expect(detected).not.toEqual(done);
      expect(detected).not.toEqual(amber);
    });

    it("names the signal in the detected node's tooltip", () => {
      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
      const node = screen.getByTestId("pipeline-node-tests");
      expect(node).toHaveAttribute("title", "tests ← npm run test:server");
    });

    it("PREMISE GUARD: detected wins over state=done — dashed amber, never emerald", () => {
      // The server never emits this pair, and this is the guard that says the
      // component would not paint an inference green even if it did. Asserting
      // against a fixture whose detected nodes are already `pending` would only
      // re-assert the fixture.
      const impossible: LaneNode[] = [
        { id: "tests", label: "tests", icon: "🧪", gate: false, state: "done", detected: true },
      ];
      render(<PipelineMap nodes={impossible} detectedSignal="npm run test:server" />);
      const node = screen.getByTestId("pipeline-node-tests");
      expect(node.className).toContain("border-dashed");
      expect(node.className).toContain("amber");
      expect(node.className).not.toContain("emerald");
    });

    it("non-detected nodes carry no data-detected attribute", () => {
      render(<PipelineMap nodes={detectedNodes} detectedSignal="npm run test:server" />);
      expect(screen.getByTestId("pipeline-node-plan")).not.toHaveAttribute("data-detected");
    });
  });
});