shipwright-cli 2.3.1 → 3.0.0

package/dashboard/src/components/charts/bar.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from "vitest";
+import { renderSVGBarChart } from "./bar";
+
+describe("bar", () => {
+  describe("renderSVGBarChart", () => {
+    it("returns empty string for empty data", () => {
+      expect(renderSVGBarChart([])).toBe("");
+    });
+
+    it("returns empty string for null/undefined", () => {
+      expect(renderSVGBarChart(null as unknown as never[])).toBe("");
+    });
+
+    it("returns SVG with rect for single bar", () => {
+      const data = [{ date: "2025-02-17", completed: 5, failed: 2 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain('<svg class="svg-bar-chart"');
+      expect(svg).toContain("<rect");
+      expect(svg).toContain('fill="#4ade80"');
+      expect(svg).toContain('fill="#f43f5e"');
+    });
+
+    it("returns SVG with multiple rects for multiple bars", () => {
+      const data = [
+        { date: "2025-02-15", completed: 3, failed: 0 },
+        { date: "2025-02-16", completed: 5, failed: 1 },
+        { date: "2025-02-17", completed: 2, failed: 3 },
+      ];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain('<svg class="svg-bar-chart"');
+      const rectCount = (svg.match(/<rect/g) || []).length;
+      expect(rectCount).toBeGreaterThanOrEqual(3);
+      const textCount = (svg.match(/<text/g) || []).length;
+      expect(textCount).toBe(3);
+    });
+
+    it("renders zero-value bars as thin rect (1px)", () => {
+      const data = [{ date: "2025-02-17", completed: 0, failed: 0 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain("<rect");
+      expect(svg).toContain('height="1"');
+      expect(svg).toContain('fill="#0d1f3c"');
+    });
+
+    it("renders labels from date (MM/DD format)", () => {
+      const data = [{ date: "2025-02-17", completed: 1, failed: 0 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain("02/17");
+    });
+
+    it("handles dates without enough parts (falls back to full date)", () => {
+      const data = [{ date: "2025", completed: 1, failed: 0 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain("2025");
+    });
+
+    it("escapes HTML in labels", () => {
+      const data = [{ date: "2025-02-17<script>", completed: 1, failed: 0 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain("&lt;script&gt;");
+      expect(svg).not.toContain("<script>");
+    });
+
+    it("handles missing completed/failed (treats as 0)", () => {
+      const data = [
+        { date: "2025-02-17", completed: undefined, failed: undefined },
+      ];
+      const svg = renderSVGBarChart(data as never[]);
+      expect(svg).toContain("<rect");
+      expect(svg).toContain('height="1"');
+    });
+
+    it("has correct viewBox dimensions", () => {
+      const data = [{ date: "2025-02-17", completed: 5, failed: 2 }];
+      const svg = renderSVGBarChart(data);
+      expect(svg).toContain('viewBox="0 0 700 120"');
+    });
+  });
+});

package/dashboard/src/components/charts/donut.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect } from "vitest";
+import { renderSVGDonut } from "./donut";
+
+describe("donut", () => {
+  describe("renderSVGDonut", () => {
+    it("renders SVG with zero rate", () => {
+      const svg = renderSVGDonut(0);
+      expect(svg).toContain('<svg class="svg-donut"');
+      expect(svg).toContain('viewBox="0 0 120 120"');
+      expect(svg).toContain("<circle");
+      expect(svg).toContain("0.0%");
+    });
+
+    it("renders SVG with single segment (partial fill)", () => {
+      const svg = renderSVGDonut(50);
+      expect(svg).toContain('<svg class="svg-donut"');
+      expect(svg).toContain("<circle");
+      expect(svg).toContain("50.0%");
+      expect(svg).toContain("stroke-dasharray");
+      expect(svg).toContain("stroke-dashoffset");
+    });
+
+    it("renders SVG with full segment (100%)", () => {
+      const svg = renderSVGDonut(100);
+      expect(svg).toContain('<svg class="svg-donut"');
+      expect(svg).toContain("100.0%");
+    });
+
+    it("contains expected SVG elements: circle, defs, text", () => {
+      const svg = renderSVGDonut(75);
+      expect(svg).toContain("<defs>");
+      expect(svg).toContain("linearGradient");
+      expect(svg).toContain("donut-grad");
+      expect(svg).toContain("<circle");
+      expect(svg).toContain("<text");
+      expect(svg).toContain('text-anchor="middle"');
+    });
+
+    it("clamps negative rate to 0", () => {
+      const svg = renderSVGDonut(-10);
+      expect(svg).toContain("0.0%");
+    });
+
+    it("clamps rate above 100 to 100", () => {
+      const svg = renderSVGDonut(150);
+      expect(svg).toContain("100.0%");
+    });
+
+    it("renders label with percentage", () => {
+      const svg = renderSVGDonut(33.5);
+      expect(svg).toContain("33.5%");
+    });
+
+    it("has fixed size 120x120", () => {
+      const svg = renderSVGDonut(25);
+      expect(svg).toContain('width="120"');
+      expect(svg).toContain('height="120"');
+    });
+
+    it("uses background circle and gradient stroke circle", () => {
+      const svg = renderSVGDonut(50);
+      const circleCount = (svg.match(/<circle/g) || []).length;
+      expect(circleCount).toBe(2);
+      expect(svg).toContain('stroke="#0d1f3c"');
+      expect(svg).toContain('stroke="url(#donut-grad)"');
+    });
+  });
+});

package/dashboard/src/components/charts/pipeline-rail.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect } from "vitest";
+import { renderPipelineSVG, renderDoraGrades } from "./pipeline-rail";
+import type { PipelineInfo } from "../../types/api";
+
+describe("renderPipelineSVG", () => {
+  it("renders SVG for an empty pipeline", () => {
+    const pipeline = { status: "pending" } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("<svg");
+    expect(svg).toContain("</svg>");
+    expect(svg).toContain("pipeline-svg");
+  });
+
+  it("renders completed stages with green fill", () => {
+    const pipeline = {
+      stagesDone: ["intake", "plan"],
+      stage: "build",
+      status: "running",
+    } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("#4ade80"); // green for completed
+    expect(svg).toContain("#00d4ff"); // cyan for active
+  });
+
+  it("renders failed pipeline with red fill", () => {
+    const pipeline = {
+      stagesDone: ["intake", "plan"],
+      stage: "build",
+      status: "failed",
+    } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("#f43f5e"); // red for failed
+  });
+
+  it("renders stage labels", () => {
+    const pipeline = {
+      stagesDone: [],
+      stage: "intake",
+      status: "running",
+    } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("intake");
+  });
+
+  it("renders connecting lines between stages", () => {
+    const pipeline = { status: "pending" } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("<line");
+  });
+
+  it("renders animation for active stage", () => {
+    const pipeline = {
+      stagesDone: [],
+      stage: "intake",
+      status: "running",
+    } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("animate");
+    expect(svg).toContain("stage-node-active");
+  });
+
+  it("uses dashed lines for incomplete connections", () => {
+    const pipeline = {
+      stagesDone: [],
+      stage: "intake",
+      status: "running",
+    } as PipelineInfo;
+    const svg = renderPipelineSVG(pipeline);
+    expect(svg).toContain("stroke-dasharray");
+  });
+});
+
+describe("renderDoraGrades", () => {
+  it("returns empty string for null dora", () => {
+    expect(renderDoraGrades(null)).toBe("");
+  });
+
+  it("returns empty string for undefined dora", () => {
+    expect(renderDoraGrades(undefined)).toBe("");
+  });
+
+  it("renders DORA metrics cards", () => {
+    const dora = {
+      deploy_freq: { grade: "Elite", value: 7.5, unit: "/week" },
+      lead_time: { grade: "High", value: 2.1, unit: "hours" },
+      cfr: { grade: "Medium", value: 15.0, unit: "%" },
+      mttr: { grade: "Low", value: 24.0, unit: "hours" },
+    };
+    const html = renderDoraGrades(dora);
+    expect(html).toContain("dora-grades-row");
+    expect(html).toContain("Deploy Frequency");
+    expect(html).toContain("Lead Time");
+    expect(html).toContain("Change Failure Rate");
+    expect(html).toContain("Mean Time to Recovery");
+    expect(html).toContain("Elite");
+    expect(html).toContain("dora-elite");
+    expect(html).toContain("7.5");
+    expect(html).toContain("/week");
+  });
+
+  it("handles missing metrics gracefully", () => {
+    const dora = {
+      deploy_freq: { grade: "Elite", value: 5.0, unit: "/week" },
+    };
+    const html = renderDoraGrades(dora);
+    expect(html).toContain("Deploy Frequency");
+    expect(html).not.toContain("Lead Time");
+  });
+
+  it("handles null value with dash", () => {
+    const dora = {
+      cfr: { grade: "N/A", value: null as unknown as number, unit: "%" },
+    };
+    const html = renderDoraGrades(dora);
+    expect(html).toContain("\u2014");
+  });
+});

package/dashboard/src/components/charts/sparkline.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { renderSparkline, renderSVGLineChart } from "./sparkline";
+
+describe("sparkline", () => {
+  describe("renderSparkline", () => {
+    it("returns empty string for empty data", () => {
+      expect(renderSparkline([], "#fff", 100, 40)).toBe("");
+    });
+
+    it("returns empty string for single point", () => {
+      expect(renderSparkline([5], "#fff", 100, 40)).toBe("");
+      expect(renderSparkline([{ value: 10 }], "#fff", 100, 40)).toBe("");
+    });
+
+    it("returns empty string for null/undefined points", () => {
+      expect(
+        renderSparkline(null as unknown as number[], "#fff", 100, 40),
+      ).toBe("");
+    });
+
+    it("returns SVG with path for multiple points (number array)", () => {
+      const svg = renderSparkline([10, 20, 30, 40], "#00d4ff", 100, 40);
+      expect(svg).toContain('<svg class="sparkline"');
+      expect(svg).toContain('viewBox="0 0 100 40"');
+      expect(svg).toContain("<path");
+      expect(svg).toContain('stroke="#00d4ff"');
+      expect(svg).toContain('stroke-width="1.5"');
+      expect(svg).toContain('fill="none"');
+      expect(svg).toContain("d=");
+      expect(svg).toMatch(/M[\d.]+,[\d.]+ L[\d.]+,[\d.]+/);
+    });
+
+    it("returns SVG with path for object array with value property", () => {
+      const svg = renderSparkline(
+        [{ value: 5 }, { value: 15 }, { value: 25 }],
+        "#7c3aed",
+        80,
+        32,
+      );
+      expect(svg).toContain('<svg class="sparkline"');
+      expect(svg).toContain("<path");
+      expect(svg).toContain('stroke="#7c3aed"');
+    });
+
+    it("handles object values with missing value (treats as 0)", () => {
+      const svg = renderSparkline([{ value: 0 }, { value: 0 }], "#333", 50, 20);
+      expect(svg).toContain('<svg class="sparkline"');
+      expect(svg).toContain("<path");
+    });
+
+    it("uses correct dimensions in output", () => {
+      const svg = renderSparkline([1, 2, 3], "#000", 200, 60);
+      expect(svg).toContain('width="200"');
+      expect(svg).toContain('height="60"');
+    });
+  });
+
+  describe("renderSVGLineChart", () => {
+    it("returns empty-state div for empty points", () => {
+      const out = renderSVGLineChart([], "value", "#00d4ff", 100, 40);
+      expect(out).toContain('<div class="empty-state">');
+      expect(out).toContain("Not enough data");
+    });
+
+    it("returns empty-state div for single point", () => {
+      const out = renderSVGLineChart(
+        [{ value: 10 }],
+        "value",
+        "#00d4ff",
+        100,
+        40,
+      );
+      expect(out).toContain('<div class="empty-state">');
+      expect(out).toContain("Not enough data");
+    });
+
+    it("returns empty-state for null/undefined points", () => {
+      const out = renderSVGLineChart(
+        null as unknown as Record<string, number>[],
+        "value",
+        "#00d4ff",
+        100,
+        40,
+      );
+      expect(out).toContain("Not enough data");
+    });
+
+    it("returns SVG with path and grid lines for multiple points", () => {
+      const points = [
+        { value: 10 },
+        { value: 30 },
+        { value: 20 },
+        { value: 50 },
+      ];
+      const svg = renderSVGLineChart(points, "value", "#4ade80", 300, 120);
+      expect(svg).toContain('<svg class="svg-line-chart"');
+      expect(svg).toContain('viewBox="0 0 300 120"');
+      expect(svg).toContain("<path");
+      expect(svg).toContain('stroke="#4ade80"');
+      expect(svg).toContain("<line");
+      expect(svg).toContain('stroke="#1a3a6a"');
+    });
+
+    it("uses custom valueKey when provided", () => {
+      const points = [{ count: 5 }, { count: 15 }, { count: 25 }];
+      const svg = renderSVGLineChart(points, "count", "#ff0000", 200, 80);
+      expect(svg).toContain('<svg class="svg-line-chart"');
+      expect(svg).toContain("<path");
+      expect(svg).toContain('stroke="#ff0000"');
+    });
+
+    it("falls back to value when valueKey missing", () => {
+      const points = [{ value: 1 }, { value: 2 }];
+      const svg = renderSVGLineChart(points, "missing", "#000", 100, 50);
+      expect(svg).toContain("<path");
+    });
+
+    it("handles all-zero max (uses maxVal=1 to avoid div by zero)", () => {
+      const points = [{ value: 0 }, { value: 0 }];
+      const svg = renderSVGLineChart(points, "value", "#000", 100, 50);
+      expect(svg).toContain("<svg");
+      expect(svg).not.toContain("Not enough data");
+    });
+  });
+});