@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-5d0cc20d809e

package/src/report/__tests__/captureChartElement.test.ts

@@ -0,0 +1,205 @@
+import html2canvas from "html2canvas-pro";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { captureChartElement } from "../captureChartElement.js";
+
+vi.mock("html2canvas-pro", () => ({
+  default: vi.fn(async () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    return canvas;
+  }),
+}));
+
+const mockedHtml2Canvas = vi.mocked(html2canvas);
+
+afterEach(() => {
+  mockedHtml2Canvas.mockClear();
+  document.body.replaceChildren();
+  document.documentElement.classList.remove(
+    "pf-v6-theme-dark",
+    "pf-v5-theme-dark",
+  );
+  document.documentElement.style.colorScheme = "";
+  document.body.style.colorScheme = "";
+});
+
+describe("captureChartElement", () => {
+  it("temporarily unhides ancestors so a hidden tab panel can be measured", async () => {
+    const panel = document.createElement("div");
+    panel.hidden = true;
+    const chart = document.createElement("div");
+    panel.append(chart);
+    document.body.append(panel);
+
+    mockedHtml2Canvas.mockImplementation(async () => {
+      expect(panel.hidden).toBe(false);
+      expect(panel.style.display).toBe("block");
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(chart);
+
+    expect(panel.hidden).toBe(true);
+  });
+
+  it("temporarily unhides ancestors hidden with display none", async () => {
+    const panel = document.createElement("div");
+    panel.style.display = "none";
+    const chart = document.createElement("div");
+    panel.append(chart);
+    document.body.append(panel);
+
+    mockedHtml2Canvas.mockImplementation(async () => {
+      expect(panel.style.display).toBe("block");
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(chart);
+
+    expect(panel.style.display).toBe("none");
+  });
+
+  it("paints a real card border and hides the PatternFly ::before during capture", async () => {
+    const root = document.createElement("div");
+    const card = document.createElement("div");
+    card.className = "pf-v6-c-card";
+    card.style.borderRadius = "16px";
+    card.style.backgroundColor = "rgb(255, 255, 255)";
+    card.style.border = "1px solid rgb(200, 200, 200)";
+    root.append(card);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      expect(card.style.borderWidth).toBe("1px");
+      expect(card.style.overflow).toBe("hidden");
+      expect(
+        document.head.querySelector("[data-chart-export-hide-before]"),
+      ).not.toBeNull();
+
+      const cloneRoot = document.createElement("div");
+      const cloneCard = document.createElement("div");
+      cloneCard.className = "pf-v6-c-card";
+      cloneRoot.append(cloneCard);
+      options?.onclone?.(document, cloneRoot);
+      expect(cloneCard.style.borderWidth).toBe("1px");
+      expect(cloneCard.style.borderStyle).toBe("solid");
+      expect(cloneCard.style.overflow).toBe("hidden");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(card.style.borderWidth).toBe("1px");
+    expect(card.style.overflow).toBe("");
+    expect(
+      document.head.querySelector("[data-chart-export-hide-before]"),
+    ).toBeNull();
+  });
+
+  it("inlines computed card title padding so content stays inset", async () => {
+    const root = document.createElement("div");
+    const title = document.createElement("div");
+    title.className = "pf-v6-c-card__title";
+    title.style.padding = "24px 24px 16px 24px";
+    root.append(title);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      expect(title.style.paddingTop).not.toBe("");
+      expect(title.style.paddingLeft).not.toBe("");
+
+      const cloneRoot = document.createElement("div");
+      const cloneTitle = document.createElement("div");
+      cloneTitle.className = "pf-v6-c-card__title";
+      cloneRoot.append(cloneTitle);
+      options?.onclone?.(document, cloneRoot);
+      expect(cloneTitle.style.paddingTop).not.toBe("");
+      expect(cloneTitle.style.paddingLeft).not.toBe("");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+  });
+
+  it("applies light theme on the clone and leaves the live document dark", async () => {
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const root = document.createElement("div");
+    const card = document.createElement("div");
+    card.className = "pf-v6-c-card";
+    card.style.backgroundColor = "rgb(30, 30, 30)";
+    card.style.border = "1px solid rgb(80, 80, 80)";
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    text.style.fill = "rgb(255, 255, 255)";
+    text.textContent = "42";
+    svg.append(text);
+    card.append(svg);
+    root.append(card);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      expect(
+        document.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(true);
+
+      const clonedDoc = document.implementation.createHTMLDocument("export");
+      clonedDoc.documentElement.classList.add("pf-v6-theme-dark");
+      const cloneRoot = clonedDoc.createElement("div");
+      const cloneCard = clonedDoc.createElement("div");
+      cloneCard.className = "pf-v6-c-card";
+      cloneCard.style.backgroundColor = "rgb(30, 30, 30)";
+      const cloneSvg = clonedDoc.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+      );
+      const cloneText = clonedDoc.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text",
+      );
+      cloneText.style.fill = "rgb(255, 255, 255)";
+      cloneSvg.append(cloneText);
+      cloneCard.append(cloneSvg);
+      cloneRoot.append(cloneCard);
+      clonedDoc.body.append(cloneRoot);
+
+      await options?.onclone?.(clonedDoc, cloneRoot);
+
+      expect(
+        clonedDoc.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(false);
+      expect(
+        document.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(true);
+      expect(cloneCard.style.backgroundColor).toBe("rgb(255, 255, 255)");
+      expect(cloneCard.style.borderColor).toBe("rgb(224, 224, 224)");
+      expect(cloneText.style.fill).toBe("rgb(21, 21, 21)");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    expect(card.style.backgroundColor).toBe("rgb(30, 30, 30)");
+  });
+});

package/src/report/__tests__/chartExportPackagers.test.ts

@@ -0,0 +1,299 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyLightThemeToDocument,
+  chartExportViewsFromLabels,
+  restoreChartExportViews,
+  sortRegisteredChartsByDocumentOrder,
+  toBulkChartCaptureSources,
+} from "../chartExport.js";
+import { getChartExportFilename } from "../chartExportFilenames.js";
+import { buildHtmlReport, escapeHtml } from "../htmlExport.js";
+import { buildPdfFromCharts } from "../pdfExport.js";
+import {
+  fitPdfImageSize,
+  placePdfBlock,
+  splitSegmentForPageHeight,
+} from "../pdfPage.js";
+
+describe("chart export filenames", () => {
+  const date = new Date("2026-07-01T15:30:00");
+
+  it("names pdf, html, and zip downloads with the export date", () => {
+    expect(getChartExportFilename("pdf", date)).toBe(
+      "migration-export-2026-07-01.pdf",
+    );
+    expect(getChartExportFilename("html", date)).toBe(
+      "migration-export-2026-07-01.html",
+    );
+    expect(getChartExportFilename("zip", date)).toBe(
+      "migration-export-2026-07-01-charts.zip",
+    );
+  });
+});
+
+describe("dropdown chart export views", () => {
+  it("builds a titled view list from card dropdown labels", () => {
+    expect(
+      chartExportViewsFromLabels("VM migration status", {
+        issuesVsNoIssues: "No issues vs with issues",
+        issuesBreakdown: "With issues breakdown",
+      }),
+    ).toEqual([
+      {
+        id: "issuesVsNoIssues",
+        title: "VM migration status — No issues vs with issues",
+      },
+      {
+        id: "issuesBreakdown",
+        title: "VM migration status — With issues breakdown",
+      },
+    ]);
+  });
+
+  it("captures every dropdown view then restores the visible one", async () => {
+    const element = document.createElement("div");
+    const activated: string[] = [];
+    const charts = [
+      {
+        id: "vm",
+        title: "Visible",
+        filename: "visible.png",
+        element,
+        exportViews: [
+          { id: "a", title: "View A" },
+          { id: "b", title: "View B" },
+        ],
+        activeExportViewId: "a",
+        setExportView: async (viewId: string) => {
+          activated.push(viewId);
+        },
+      },
+    ];
+
+    const sources = toBulkChartCaptureSources(charts, async () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    expect(sources.map((source) => source.title)).toEqual(["View A", "View B"]);
+    await sources[0].capture();
+    await sources[1].capture();
+    await restoreChartExportViews(charts);
+
+    expect(activated).toEqual(["a", "b", "a"]);
+  });
+
+  it("lays out hidden cards before switching dropdown views", async () => {
+    const element = document.createElement("div");
+    const order: string[] = [];
+    const charts = [
+      {
+        id: "vm",
+        title: "Visible",
+        filename: "visible.png",
+        element,
+        exportViews: [
+          { id: "a", title: "View A" },
+          { id: "b", title: "View B" },
+        ],
+        activeExportViewId: "a",
+        setExportView: async () => {
+          order.push("setView");
+        },
+      },
+    ];
+
+    const [source] = toBulkChartCaptureSources(
+      charts,
+      async () => {
+        order.push("capture");
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        return canvas;
+      },
+      () => {
+        order.push("prepare");
+        return () => {
+          order.push("restore");
+        };
+      },
+    );
+
+    await source.capture();
+    expect(order).toEqual(["prepare", "setView", "capture", "restore"]);
+  });
+});
+
+describe("sortRegisteredChartsByDocumentOrder", () => {
+  it("orders registered nodes by their position in the document", () => {
+    const root = document.createElement("div");
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    root.append(first, second);
+    document.body.append(root);
+
+    const sorted = sortRegisteredChartsByDocumentOrder([
+      {
+        id: "second",
+        title: "Second",
+        filename: "second.png",
+        element: second,
+      },
+      {
+        id: "first",
+        title: "First",
+        filename: "first.png",
+        element: first,
+      },
+    ]);
+
+    expect(sorted.map((chart) => chart.id)).toEqual(["first", "second"]);
+    root.remove();
+  });
+});
+
+describe("splitSegmentForPageHeight", () => {
+  it("splits a tall chart across page height", () => {
+    expect(
+      splitSegmentForPageHeight({ top: 0, height: 250 }, 250, 100),
+    ).toEqual([
+      { top: 0, height: 100 },
+      { top: 100, height: 100 },
+      { top: 200, height: 50 },
+    ]);
+  });
+});
+
+describe("fitPdfImageSize", () => {
+  it("keeps full content width when the chart fits the page", () => {
+    expect(fitPdfImageSize(800, 200, 190, 277)).toEqual({
+      widthMm: 190,
+      heightMm: 47.5,
+    });
+  });
+
+  it("scales down a chart taller than the page", () => {
+    expect(fitPdfImageSize(1000, 2000, 200, 100)).toEqual({
+      widthMm: 50,
+      heightMm: 100,
+    });
+  });
+});
+
+describe("placePdfBlock", () => {
+  it("stacks charts on the same page while they fit", () => {
+    expect(placePdfBlock(null, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+    expect(placePdfBlock(68, 50, 10, 287)).toEqual({
+      y: 68,
+      needsNewPage: false,
+    });
+    expect(placePdfBlock(250, 50, 10, 287)).toEqual({
+      y: 10,
+      needsNewPage: true,
+    });
+  });
+});
+
+describe("buildPdfFromCharts with extra text pages", () => {
+  it("appends a text page even when there are no chart captures", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations",
+        items: [
+          { label: "Cluster name", value: "cluster-1" },
+          { label: "Target platform", value: "Bare metal" },
+          {
+            label: "Total nodes",
+            value: "6 (3 workers + 3 control plane)",
+          },
+          { label: "Failover capacity", value: "1 failover nodes" },
+          { label: "Worker node size", value: "8 CPU, 32 GB memory" },
+          {
+            label: "Control plane node size",
+            value: "16 CPU, 64 GB memory",
+          },
+        ],
+        footer: "Note: estimates only.",
+      },
+    ]);
+
+    expect(blob).toBeInstanceOf(Blob);
+    expect(blob.size).toBeGreaterThan(0);
+    expect(blob.type).toBe("application/pdf");
+  });
+
+  it("paginates extra pages with many rows without throwing", async () => {
+    const manyItems = Array.from({ length: 60 }, (_, index) => ({
+      label: `Field ${index}`,
+      value: `Value ${index}`,
+    }));
+
+    const blob = await buildPdfFromCharts([], "Report", [
+      { title: "Cluster sizing recommendations", items: manyItems },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+
+  it("supports multiple extra pages (e.g. one per sized cluster)", async () => {
+    const blob = await buildPdfFromCharts([], "Report", [
+      {
+        title: "Cluster sizing recommendations — cluster-a",
+        items: [{ label: "Cluster name", value: "cluster-a" }],
+      },
+      {
+        title: "Cluster sizing recommendations — cluster-b",
+        items: [{ label: "Cluster name", value: "cluster-b" }],
+      },
+    ]);
+
+    expect(blob.size).toBeGreaterThan(0);
+  });
+});
+
+describe("buildHtmlReport", () => {
+  it("embeds captured chart images and escapes the title", () => {
+    const html = buildHtmlReport(
+      'Report <script>alert("x")</script>',
+      [
+        {
+          name: "Infrastructure summary",
+          dataUrl: "data:image/png;base64,abc",
+        },
+      ],
+      new Date("2026-07-01T15:30:00"),
+    );
+
+    expect(html).toContain(
+      "Report &lt;script&gt;alert(&quot;x&quot;)&lt;/script&gt;",
+    );
+    expect(html).toContain('src="data:image/png;base64,abc"');
+    expect(html).toContain("Infrastructure summary");
+    expect(html).not.toContain("border:");
+    expect(html).toContain("width: 100%");
+    expect(escapeHtml("<b>")).toBe("&lt;b&gt;");
+    expect(escapeHtml("it's")).toBe("it&#39;s");
+  });
+});
+
+describe("applyLightThemeToDocument", () => {
+  it("removes PatternFly dark theme classes from the given document", () => {
+    const clone = document.implementation.createHTMLDocument("export");
+    clone.documentElement.classList.add("pf-v6-theme-dark");
+    clone.body.style.colorScheme = "dark";
+
+    applyLightThemeToDocument(clone);
+
+    expect(clone.documentElement.classList.contains("pf-v6-theme-dark")).toBe(
+      false,
+    );
+    expect(clone.documentElement.style.colorScheme).toBe("light");
+    expect(clone.body.style.colorScheme).toBe("light");
+  });
+});