@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-6fd4e1ee8e11

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

@@ -0,0 +1,132 @@
+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();
+});
+
+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);
+  });
+});

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

@@ -0,0 +1,224 @@
+import { describe, expect, it } from "vitest";
+import {
+  chartExportViewsFromLabels,
+  restoreChartExportViews,
+  sortRegisteredChartsByDocumentOrder,
+  toBulkChartCaptureSources,
+} from "../chartExport.js";
+import { getChartExportFilename } from "../chartExportFilenames.js";
+import { buildHtmlReport, escapeHtml } from "../htmlExport.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("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");
+  });
+});

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

@@ -0,0 +1,224 @@
+import { describe, expect, it } from "vitest";
+import {
+  booleanToFeatureStatus,
+  buildClusterDetailRows,
+  buildClusterDetails,
+  buildInfrastructureSummary,
+  countVCenters,
+  formatVSphereVersion,
+  hostCapabilityStatus,
+  type InventoryCluster,
+  type InventoryHost,
+  type InventoryInfra,
+  visibleNetworks,
+  vsanStatus,
+} from "../infrastructureSummaryModel.js";
+
+const createInfra = (
+  overrides: Partial<InventoryInfra> = {},
+): InventoryInfra => ({
+  totalHosts: 0,
+  networks: [],
+  datastores: [],
+  ...overrides,
+});
+
+describe("formatVSphereVersion", () => {
+  it("formats API versions as vSphere labels and drops trailing build zeros", () => {
+    expect(formatVSphereVersion("7.0.3.0")).toBe("vSphere 7.0.3");
+    expect(formatVSphereVersion("8.0.3.0")).toBe("vSphere 8.0.3");
+  });
+
+  it("keeps an existing vSphere prefix and missing values", () => {
+    expect(formatVSphereVersion("vSphere 7.0.3")).toBe("vSphere 7.0.3");
+    expect(formatVSphereVersion(undefined)).toBe("—");
+    expect(formatVSphereVersion("")).toBe("—");
+  });
+});
+
+describe("feature status helpers", () => {
+  it("maps booleans to enabled, disabled, or unknown", () => {
+    expect(booleanToFeatureStatus(true)).toBe("enabled");
+    expect(booleanToFeatureStatus(false)).toBe("disabled");
+    expect(booleanToFeatureStatus(undefined)).toBe("unknown");
+  });
+
+  it("treats vMotion as enabled when any host supports it", () => {
+    const hosts: InventoryHost[] = [
+      { vmotionSupported: false },
+      { vmotionSupported: true },
+    ];
+    expect(hostCapabilityStatus(hosts, "vmotionSupported")).toBe("enabled");
+  });
+
+  it("treats vMotion as disabled when every known host reports false", () => {
+    const hosts: InventoryHost[] = [
+      { vmotionSupported: false },
+      { vmotionSupported: false },
+    ];
+    expect(hostCapabilityStatus(hosts, "vmotionSupported")).toBe("disabled");
+  });
+
+  it("treats missing host capability flags as unknown", () => {
+    expect(hostCapabilityStatus([{}], "vmotionSupported")).toBe("unknown");
+    expect(hostCapabilityStatus([], "vmotionSupported")).toBe("unknown");
+  });
+
+  it("detects vSAN from datastore type or disk type", () => {
+    expect(
+      vsanStatus(
+        createInfra({
+          datastores: [{ type: "vSAN" }],
+        }),
+      ),
+    ).toBe("enabled");
+    expect(
+      vsanStatus(createInfra(), { total: 10, diskTypes: { vSAN: {} } }),
+    ).toBe("enabled");
+    expect(vsanStatus(createInfra({ datastores: [] }))).toBe("disabled");
+    expect(vsanStatus()).toBe("unknown");
+  });
+});
+
+describe("buildInfrastructureSummary", () => {
+  it("maps inventory metadata into the summary card model", () => {
+    const summary = buildInfrastructureSummary({
+      infra: createInfra({
+        totalHosts: 12,
+        totalDatacenters: 1,
+      }),
+      vcenterVersion: "7.0.3.0",
+      vcenterId: "vc-1",
+      clusters: {},
+    });
+
+    expect(summary).toEqual({
+      vmwareVersion: "vSphere 7.0.3",
+      datacenters: 1,
+      vCenters: 1,
+      esxiHosts: 12,
+    });
+  });
+
+  it("falls back to clustersPerDatacenter length and unique vCenter ids", () => {
+    const summary = buildInfrastructureSummary({
+      infra: createInfra({
+        totalHosts: 7,
+        clustersPerDatacenter: [1, 1],
+      }),
+      clusters: {
+        A: {
+          infra: createInfra(),
+          vms: { total: 1 },
+          vcenter: { id: "vc-a" },
+        },
+        B: {
+          infra: createInfra(),
+          vms: { total: 1 },
+          vcenter: { id: "vc-b" },
+        },
+      },
+    });
+
+    expect(summary.datacenters).toBe(2);
+    expect(summary.vCenters).toBe(2);
+  });
+});
+
+describe("countVCenters", () => {
+  it("returns undefined when no vCenter identity is present", () => {
+    expect(countVCenters(undefined, undefined)).toBeUndefined();
+  });
+});
+
+describe("cluster details", () => {
+  it("builds sorted aggregate rows from cluster features", () => {
+    const clusters: Record<string, InventoryCluster> = {
+      "Cluster-Dev-02": {
+        infra: createInfra({
+          totalHosts: 7,
+          hosts: [{ vmotionSupported: true }],
+          datastores: [],
+        }),
+        vms: { total: 350 },
+        clusterFeatures: { drsEnabled: false, haEnabled: true },
+      },
+      "Cluster-Prod-01": {
+        infra: createInfra({
+          totalHosts: 5,
+          hosts: [{ vmotionSupported: true }],
+          datastores: [{ type: "vSAN" }],
+        }),
+        vms: { total: 280 },
+        clusterFeatures: { drsEnabled: true, haEnabled: true },
+      },
+    };
+
+    const rows = buildClusterDetailRows(clusters);
+    expect(rows.map((row) => row.name)).toEqual([
+      "Cluster-Dev-02",
+      "Cluster-Prod-01",
+    ]);
+    expect(rows[0]).toMatchObject({
+      hosts: 7,
+      vms: 350,
+      vmotion: "enabled",
+      drs: "disabled",
+      vsan: "disabled",
+    });
+    expect(rows[1]).toMatchObject({
+      hosts: 5,
+      vms: 280,
+      drs: "enabled",
+      vsan: "enabled",
+    });
+  });
+
+  it("builds the detailed cluster model including HA and network labels", () => {
+    const details = buildClusterDetails({
+      infra: createInfra({
+        totalHosts: 7,
+        hosts: [{ vmotionSupported: true }],
+        networks: [
+          { type: "distributed", name: "VDS-Dev", vlanId: "10" },
+          { type: "distributed", name: "VDS-Dev", vlanId: "11" },
+          { type: "dvswitch", name: "vDSwitch0" },
+        ],
+      }),
+      vms: { total: 350 },
+      clusterFeatures: { drsEnabled: false, haEnabled: true },
+    });
+
+    expect(details).toMatchObject({
+      hosts: 7,
+      vms: 350,
+      networksDetected: 2,
+      vmotion: "enabled",
+      drs: "disabled",
+      ha: "enabled",
+      vsan: "disabled",
+    });
+    expect(details?.networks.map((network) => network.displayName)).toEqual([
+      "VDS-Dev (VLAN 10)",
+      "VDS-Dev (VLAN 11)",
+    ]);
+  });
+});
+
+describe("visibleNetworks", () => {
+  it("omits unnamed networks and dvswitches", () => {
+    expect(
+      visibleNetworks(
+        createInfra({
+          networks: [
+            { type: "distributed", name: "  " },
+            { type: "dvswitch", name: "switch" },
+            { type: "standard", name: "VM Network" },
+          ],
+        }),
+      ),
+    ).toEqual([
+      { name: "VM Network", vlanId: undefined, displayName: "VM Network" },
+    ]);
+  });
+});

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

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildHostPowerStateChart,
+  buildVmPowerStateChart,
+} from "../powerStates.js";
+
+describe("buildHostPowerStateChart", () => {
+  it("maps overallStatus green to powered on and keeps zero categories", () => {
+    const chart = buildHostPowerStateChart({ green: 7 });
+
+    expect(chart.total).toBe(7);
+    expect(chart.slices.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Powered on", 7],
+      ["Powered off", 0],
+      ["Standby", 0],
+      ["Not responding", 0],
+      ["Maintenance", 0],
+    ]);
+    expect(chart.slices[0].countDisplay).toBe("7 hosts");
+  });
+
+  it("maps explicit host power and maintenance keys", () => {
+    const chart = buildHostPowerStateChart({
+      poweredOn: 5,
+      poweredOff: 1,
+      standBy: 1,
+      notResponding: 1,
+      inMaintenanceMode: 2,
+    });
+
+    expect(chart.total).toBe(10);
+    expect(
+      chart.slices.find((slice) => slice.name === "Maintenance")?.count,
+    ).toBe(2);
+    expect(
+      chart.slices.find((slice) => slice.name === "Not responding")?.count,
+    ).toBe(1);
+  });
+});
+
+describe("buildVmPowerStateChart", () => {
+  it("maps VM power states and omits unused suspended", () => {
+    const chart = buildVmPowerStateChart({
+      poweredOff: 297,
+      poweredOn: 53,
+    });
+
+    expect(chart.total).toBe(350);
+    expect(chart.slices.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Powered off", 297],
+      ["Powered on", 53],
+    ]);
+    expect(chart.slices[0].countDisplay).toBe("297 VMs");
+  });
+
+  it("includes suspended when present", () => {
+    const chart = buildVmPowerStateChart({
+      poweredOn: 10,
+      poweredOff: 2,
+      suspended: 1,
+    });
+
+    expect(chart.slices.map((slice) => slice.name)).toEqual([
+      "Powered off",
+      "Powered on",
+      "Suspended",
+    ]);
+    expect(chart.slices[2].countDisplay).toBe("1 VM");
+  });
+});