/** * @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ĩ */ 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(); 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(); 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(); 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(); 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(); 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(); 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(); 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(); expect(screen.getByTestId("pipeline-node-plan")).not.toHaveAttribute("data-detected"); }); }); });