insomni-plot 0.1.0-alpha.0

package/src/grammar/chart.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vite-plus/test";
+import { plot } from "./chart.ts";
+import { line, point } from "./geoms/index.ts";
+
+interface Sale {
+  quarter: string;
+  revenue: number;
+  region: string;
+}
+
+const sales: Sale[] = [
+  { quarter: "Q1", revenue: 100, region: "AMER" },
+  { quarter: "Q2", revenue: 120, region: "AMER" },
+  { quarter: "Q3", revenue: 90, region: "EMEA" },
+  { quarter: "Q4", revenue: 140, region: "EMEA" },
+];
+
+describe("plot()", () => {
+  it("constructs a chart from a spec", () => {
+    const chart = plot({ data: sales }).layer(point({ x: "revenue", y: "revenue" }));
+    expect(chart).toBeDefined();
+    expect(typeof chart.layer).toBe("function");
+    expect(typeof chart.toSVG).toBe("function");
+  });
+
+  it("is immutable: each builder method returns a new chart", () => {
+    const a = plot({ data: sales });
+    const b = a.layer(point({ x: "revenue", y: "revenue" }));
+    expect(a).not.toBe(b);
+    expect(typeof b.layer).toBe("function");
+  });
+
+  it("renders to SVG without a GPU device", () => {
+    const svg = plot({ data: sales, width: 400, height: 300 })
+      .layer(point({ x: "revenue", y: "revenue" }))
+      .toSVG();
+    expect(svg).toBeInstanceOf(SVGSVGElement);
+    expect(svg.getAttribute("width")).toBe("400");
+    expect(svg.getAttribute("height")).toBe("300");
+  });
+
+  it("renders multiple layers", () => {
+    const chart = plot({ data: sales, width: 400, height: 300 })
+      .layer(line({ x: "revenue", y: "revenue" }))
+      .layer(point({ x: "revenue", y: "revenue" }));
+    const svg = chart.toSVG();
+    expect(svg).toBeInstanceOf(SVGSVGElement);
+  });
+
+  it("title/subtitle setters return a new chart", () => {
+    const a = plot({ data: sales }).layer(point({ x: "revenue", y: "revenue" }));
+    const b = a.title({ title: "Hello", subtitle: "World" });
+    expect(a).not.toBe(b);
+    const svg = b.toSVG({ width: 400, height: 300 });
+    expect(svg).toBeInstanceOf(SVGSVGElement);
+  });
+
+  it("scale override is applied via .scale()", () => {
+    const chart = plot({ data: sales, width: 400, height: 300 })
+      .layer(point({ x: "revenue", y: "revenue" }))
+      .scale("x", { domain: [0, 200], nice: true });
+    expect(chart.toSVG()).toBeInstanceOf(SVGSVGElement);
+  });
+
+  it("mount() throws a clear error when device is missing and no externals supplied", () => {
+    // GPU paths can't run under jsdom, but we can verify the input-validation
+    // contract: mount() must explain how to fix the missing device, and must
+    // NOT silently fall back. (The full mount loop needs a real browser.)
+    const canvas = document.createElement("canvas");
+    const chart = plot({ data: sales }).layer(point({ x: "revenue", y: "revenue" }));
+    expect(() => chart.mount(canvas)).toThrow(/device/i);
+  });
+
+  it("toSVG renders axis + title text labels as semantic <text>", () => {
+    const svg = plot({ data: sales, width: 400, height: 300 })
+      .title({ title: "Revenue Report", subtitle: "by region" })
+      .layer(point({ x: "revenue", y: "revenue" }))
+      .toSVG();
+    const texts = svg.getElementsByTagName("text");
+    // Axis tick labels + axis structure + title/subtitle all emit <text>.
+    expect(texts.length).toBeGreaterThan(0);
+    // The title is emitted as ONE element with the whole string (not split).
+    const strings = Array.from(texts).map((t) => t.textContent);
+    expect(strings).toContain("Revenue Report");
+    expect(strings).toContain("by region");
+  });
+
+  it("toSVG keeps each multi-character tick label in a single <text> (no splitting/merging)", () => {
+    const svg = plot({ data: sales, width: 400, height: 300 })
+      .layer(point({ x: "revenue", y: "revenue" }))
+      .scale("x", { domain: [0, 1000], nice: true })
+      .toSVG();
+    const strings = Array.from(svg.getElementsByTagName("text")).map((t) => (t.textContent ?? "").trim());
+    // At least one tick label is a multi-digit number rendered whole — assert no
+    // tick string is a lone leading digit fragment of a longer sibling (the old
+    // per-glyph bug split e.g. "1000" → "100"+"0"). Every emitted text node is a
+    // complete label, so each appears exactly once and is non-empty.
+    expect(strings.some((s) => s.length >= 2)).toBe(true);
+    expect(strings.every((s) => s.length > 0)).toBe(true);
+  });
+
+  it("multi-line by color channel splits into one path per category", () => {
+    const chart = plot({ data: sales, width: 400, height: 300 }).layer(
+      line({ x: "revenue", y: "revenue", color: "region" }),
+    );
+    const svg = chart.toSVG();
+    // SVGRenderer tessellates polylines into triangulated polygons. Two regions
+    // → 2 polylines → at least 2 fill colors among emitted polygons.
+    const polygons = svg.getElementsByTagName("polygon");
+    const fills = new Set<string>();
+    for (let i = 0; i < polygons.length; i++) {
+      const f = polygons[i]!.getAttribute("fill");
+      if (f) fills.add(f);
+    }
+    expect(fills.size).toBeGreaterThanOrEqual(2);
+  });
+});