@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-0ad1e70d1fa5

package/src/report/__tests__/ChartExportProvider.test.tsx

@@ -0,0 +1,474 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ChartExportProvider, useChartExport } from "../ChartExportProvider.js";
+import { ChartExportSurface } from "../ChartExportSurface.js";
+import {
+  CHART_EXPORT_HIDE_ATTR,
+  chartPngFilename,
+  shouldIgnoreChartExportElement,
+  slugifyExportName,
+} from "../chartExport.js";
+import { useRegisterChart } from "../chartExportContext.js";
+import { HostPowerStates } from "../HostPowerStates.js";
+import { ExportReportButton, ReportExportMenu } from "../ReportExportMenu.js";
+import { standardReportExportOptions } from "../reportExportOptions.js";
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: ({
+    title,
+    subTitle,
+  }: {
+    title?: string;
+    subTitle?: string;
+  }): JSX.Element => (
+    <div data-testid="power-donut">
+      {title} {subTitle}
+    </div>
+  ),
+}));
+
+afterEach(() => cleanup());
+
+function RegisteredChart({
+  id,
+  title,
+}: {
+  id: string;
+  title: string;
+}): JSX.Element {
+  const ref = useRegisterChart({ id, title });
+  return (
+    <div ref={ref} data-testid={`chart-${id}`}>
+      {title}
+    </div>
+  );
+}
+
+function DownloadAllButton(): JSX.Element {
+  const exportApi = useChartExport();
+  return (
+    <button type="button" onClick={() => void exportApi?.downloadAll()}>
+      Download all
+    </button>
+  );
+}
+
+describe("chart export names", () => {
+  it("slugifies titles for PNG filenames", () => {
+    expect(slugifyExportName("CPU & memory")).toBe("cpu-memory");
+    expect(chartPngFilename("CPU & memory", "cpu")).toBe("cpu-memory.png");
+  });
+});
+
+describe("shouldIgnoreChartExportElement", () => {
+  it("keeps the capture root and skips sibling cards", () => {
+    const page = document.createElement("div");
+    const card = document.createElement("div");
+    const sibling = document.createElement("div");
+    page.append(card, sibling);
+
+    expect(shouldIgnoreChartExportElement(card, card)).toBe(false);
+    expect(shouldIgnoreChartExportElement(sibling, card)).toBe(true);
+    expect(shouldIgnoreChartExportElement(page, card)).toBe(false);
+  });
+
+  it("skips chrome marked for export hide inside the card", () => {
+    const card = document.createElement("div");
+    const hide = document.createElement("button");
+    hide.setAttribute(CHART_EXPORT_HIDE_ATTR, "");
+    card.append(hide);
+
+    expect(shouldIgnoreChartExportElement(hide, card)).toBe(true);
+  });
+});
+
+function fakeCanvas(): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = 10;
+  canvas.height = 10;
+  return canvas;
+}
+
+function DownloadChartButton({ id }: { id: string }): JSX.Element {
+  const exportApi = useChartExport();
+  return (
+    <button type="button" onClick={() => void exportApi?.downloadChart(id)}>
+      Download {id}
+    </button>
+  );
+}
+
+function DownloadPdfButton(): JSX.Element {
+  const exportApi = useChartExport();
+  return (
+    <button
+      type="button"
+      onClick={() => void exportApi?.downloadPdf("Overview")}
+    >
+      Download pdf
+    </button>
+  );
+}
+
+function DownloadHtmlButton(): JSX.Element {
+  const exportApi = useChartExport();
+  return (
+    <button
+      type="button"
+      onClick={() => void exportApi?.downloadHtml("Overview")}
+    >
+      Download html
+    </button>
+  );
+}
+
+describe("ChartExportProvider", () => {
+  it("snapshots registered live nodes instead of a second chart tree", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const encodePng = vi.fn(async () => new Blob(["png"]));
+    const zipFiles = vi.fn(
+      async (files: { filename: string; blob: Blob }[]) => {
+        return new Blob([files.map((file) => file.filename).join(",")]);
+      },
+    );
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        encodePng={encodePng}
+        zipFiles={zipFiles}
+        downloadFile={downloadFile}
+        getZipFilename={() => "charts.zip"}
+      >
+        <RegisteredChart id="cpu-memory" title="CPU and memory" />
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadAllButton />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download all" }));
+
+    expect(zipFiles).toHaveBeenCalledTimes(1);
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "charts.zip");
+  });
+
+  it("downloads one registered node as a PNG", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const encodePng = vi.fn(async () => new Blob(["png"]));
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        encodePng={encodePng}
+        zipFiles={vi.fn()}
+        downloadFile={downloadFile}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadChartButton id="storage" />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download storage" }));
+
+    expect(capture).toHaveBeenCalledTimes(1);
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "disks.png");
+  });
+
+  it("re-registers charts after React Strict Mode's extra effect cycle", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const encodePng = vi.fn(async () => new Blob(["png"]));
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        encodePng={encodePng}
+        zipFiles={vi.fn()}
+        downloadFile={downloadFile}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadChartButton id="storage" />
+      </ChartExportProvider>,
+      { reactStrictMode: true },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download storage" }));
+
+    expect(capture).toHaveBeenCalledTimes(1);
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "disks.png");
+  });
+
+  it("builds a PDF from the same captured canvases", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const buildPdf = vi.fn(async () => new Blob(["pdf"]));
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        zipFiles={vi.fn()}
+        buildPdf={buildPdf}
+        downloadFile={downloadFile}
+        getPdfFilename={() => "report.pdf"}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadPdfButton />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download pdf" }));
+
+    expect(buildPdf).toHaveBeenCalledTimes(1);
+    expect(buildPdf.mock.calls[0]?.[1]).toBe("Overview");
+    expect(buildPdf.mock.calls[0]?.[0][0]).toMatchObject({
+      id: "storage",
+      title: "Disks",
+    });
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.pdf");
+  });
+
+  it("builds HTML from the same captured canvases", async () => {
+    const user = userEvent.setup();
+    const capture = vi.fn(async () => fakeCanvas());
+    const buildHtml = vi.fn(async () => new Blob(["html"]));
+    const downloadFile = vi.fn();
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        zipFiles={vi.fn()}
+        buildHtml={buildHtml}
+        downloadFile={downloadFile}
+        getHtmlFilename={() => "report.html"}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadHtmlButton />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download html" }));
+
+    expect(buildHtml).toHaveBeenCalledTimes(1);
+    expect(buildHtml.mock.calls[0]?.[1]).toBe("Overview");
+    expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.html");
+  });
+
+  it("captures every dropdown view for PDF, HTML, and zip exports", async () => {
+    const user = userEvent.setup();
+    const seenViews: string[] = [];
+    const capture = vi.fn(async (element: HTMLElement) => {
+      seenViews.push(
+        element.querySelector("[data-testid='active-view']")?.textContent ?? "",
+      );
+      return fakeCanvas();
+    });
+    const encodePng = vi.fn(async () => new Blob(["png"]));
+    const zipFiles = vi.fn(
+      async (files: { filename: string; blob: Blob }[]) => {
+        return new Blob([files.map((file) => file.filename).join(",")]);
+      },
+    );
+    const buildPdf = vi.fn(
+      async (
+        sources: { title: string; capture: () => Promise<HTMLCanvasElement> }[],
+      ) => {
+        for (const source of sources) {
+          await source.capture();
+        }
+        return new Blob(["pdf"]);
+      },
+    );
+    const downloadFile = vi.fn();
+
+    function DropdownChart(): JSX.Element {
+      const [view, setView] = useState("a");
+      return (
+        <ChartExportSurface
+          id="vm"
+          title={view === "a" ? "View A" : "View B"}
+          exportViews={[
+            { id: "a", title: "View A" },
+            { id: "b", title: "View B" },
+          ]}
+          activeExportViewId={view}
+          onExportViewChange={setView}
+        >
+          <div data-testid="active-view">{view}</div>
+        </ChartExportSurface>
+      );
+    }
+
+    render(
+      <ChartExportProvider
+        capture={capture}
+        encodePng={encodePng}
+        zipFiles={zipFiles}
+        buildPdf={buildPdf}
+        downloadFile={downloadFile}
+        getZipFilename={() => "charts.zip"}
+        getPdfFilename={() => "report.pdf"}
+      >
+        <DropdownChart />
+        <DownloadAllButton />
+        <DownloadPdfButton />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download all" }));
+    await waitFor(() => expect(zipFiles).toHaveBeenCalledTimes(1));
+    expect(seenViews).toEqual(["a", "b"]);
+    expect(zipFiles.mock.calls[0]?.[0].map((file) => file.filename)).toEqual([
+      "01-view-a.png",
+      "02-view-b.png",
+    ]);
+    expect(screen.getByTestId("active-view")).toHaveTextContent("a");
+
+    seenViews.length = 0;
+    await user.click(screen.getByRole("button", { name: "Download pdf" }));
+    await waitFor(() =>
+      expect(downloadFile).toHaveBeenCalledWith(expect.any(Blob), "report.pdf"),
+    );
+    expect(buildPdf.mock.calls[0]?.[0].map((source) => source.title)).toEqual([
+      "View A",
+      "View B",
+    ]);
+    expect(seenViews).toEqual(["a", "b"]);
+    expect(screen.getByTestId("active-view")).toHaveTextContent("a");
+  });
+
+  it("warns when two live charts share an id", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+    render(
+      <ChartExportProvider capture={vi.fn()} zipFiles={vi.fn()}>
+        <RegisteredChart id="storage" title="Disks" />
+        <RegisteredChart id="storage" title="Disks copy" />
+      </ChartExportProvider>,
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('Duplicate chart export id "storage"'),
+    );
+    warn.mockRestore();
+  });
+
+  it("shows a generic error when capture fails", async () => {
+    const user = userEvent.setup();
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    function ErrorText(): JSX.Element {
+      const exportApi = useChartExport();
+      return <div>{exportApi?.exportError}</div>;
+    }
+
+    render(
+      <ChartExportProvider
+        capture={vi.fn(async () => {
+          throw new Error("canvas tainted");
+        })}
+        zipFiles={vi.fn()}
+      >
+        <RegisteredChart id="storage" title="Disks" />
+        <DownloadChartButton id="storage" />
+        <ErrorText />
+      </ChartExportProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Download storage" }));
+
+    expect(
+      await screen.findByText("Failed to export PNG. Please try again."),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("canvas tainted")).not.toBeInTheDocument();
+    vi.mocked(console.error).mockRestore();
+  });
+
+  it("hides per-chart download when no provider is present", () => {
+    render(<HostPowerStates hostPowerStates={{ green: 3 }} />);
+
+    expect(
+      screen.queryByRole("button", { name: /download/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows a per-chart download button when the provider is present", () => {
+    render(
+      <ChartExportProvider capture={vi.fn()} zipFiles={vi.fn()}>
+        <HostPowerStates hostPowerStates={{ green: 3 }} />
+      </ChartExportProvider>,
+    );
+
+    expect(
+      screen.getByRole("button", {
+        name: "Download ESXi host power states as PNG",
+      }),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("standardReportExportOptions", () => {
+  it("omits formats whose handlers are missing", () => {
+    const onExportPng = vi.fn();
+    expect(
+      standardReportExportOptions({ onExportPng }).map((option) => option.key),
+    ).toEqual(["png"]);
+  });
+});
+
+describe("ReportExportMenu", () => {
+  it("renders nothing without options", () => {
+    const { container } = render(<ReportExportMenu options={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("invokes the PNG handler from the menu", async () => {
+    const user = userEvent.setup();
+    const onExportPng = vi.fn();
+
+    render(<ExportReportButton onExportPng={onExportPng} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "Export report options" }),
+    );
+    await user.click(screen.getByRole("menuitem", { name: /png/i }));
+
+    expect(onExportPng).toHaveBeenCalledTimes(1);
+  });
+
+  it("places the loading spinner in the toggle icon slot", () => {
+    render(
+      <ReportExportMenu
+        isLoading
+        loadingLabel="Generating PNG..."
+        options={[
+          {
+            key: "png",
+            label: "PNG",
+            description: "Download all charts as PNG files",
+            onSelect: vi.fn(),
+          },
+        ]}
+      />,
+    );
+
+    const toggle = screen.getByRole("button", {
+      name: "Export report options",
+    });
+    expect(toggle).toHaveTextContent("Generating PNG...");
+    const iconSlot = toggle.querySelector(".pf-v6-c-menu-toggle__icon");
+    expect(iconSlot).not.toBeNull();
+    expect(iconSlot?.querySelector('[role="progressbar"]')).not.toBeNull();
+    expect(
+      toggle.querySelector(".pf-v6-c-menu-toggle__text")?.textContent,
+    ).toBe("Generating PNG...");
+  });
+});

package/src/report/__tests__/HostPowerStates.test.tsx

@@ -0,0 +1,47 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { HostPowerStates } from "../HostPowerStates.js";
+import { VmPowerStates } from "../VmPowerStates.js";
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: ({
+    title,
+    subTitle,
+  }: {
+    title?: string;
+    subTitle?: string;
+  }): JSX.Element => (
+    <div data-testid="power-donut">
+      {title} {subTitle}
+    </div>
+  ),
+}));
+
+afterEach(() => cleanup());
+
+describe("HostPowerStates", () => {
+  it("renders the host power donut from inventory data", () => {
+    render(<HostPowerStates hostPowerStates={{ green: 7 }} />);
+
+    expect(screen.getByText("ESXi host power states")).toBeInTheDocument();
+    expect(screen.getByTestId("power-donut")).toHaveTextContent("7 Hosts");
+  });
+
+  it("shows an empty state when host power data is missing", () => {
+    render(<HostPowerStates hostPowerStates={{}} />);
+
+    expect(
+      screen.getByText("Host power state data not collected"),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("VmPowerStates", () => {
+  it("renders the VM power donut from inventory data", () => {
+    render(<VmPowerStates powerStates={{ poweredOff: 297, poweredOn: 53 }} />);
+
+    expect(screen.getByText("VM power states")).toBeInTheDocument();
+    expect(screen.getByTestId("power-donut")).toHaveTextContent("350 VMs");
+  });
+});

package/src/report/__tests__/InfrastructureSummary.test.tsx

@@ -0,0 +1,126 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { InfrastructureSummary } from "../InfrastructureSummary.js";
+import { VCenterClusterDetails } from "../VCenterClusterDetails.js";
+
+afterEach(() => cleanup());
+
+describe("InfrastructureSummary", () => {
+  it("renders inventory summary fields from the mapped model", () => {
+    render(
+      <InfrastructureSummary
+        summary={{
+          vmwareVersion: "vSphere 7.0.3",
+          datacenters: 1,
+          vCenters: 1,
+          esxiHosts: 12,
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Infrastructure summary")).toBeInTheDocument();
+    expect(screen.getByText("vSphere 7.0.3")).toBeInTheDocument();
+    expect(screen.getByText("Datacenters")).toBeInTheDocument();
+    expect(screen.getByText("vCenters")).toBeInTheDocument();
+    expect(screen.getByText("ESXi hosts")).toBeInTheDocument();
+    expect(screen.getByText("12")).toBeInTheDocument();
+  });
+});
+
+describe("VCenterClusterDetails", () => {
+  it("renders the aggregate cluster table with feature statuses", () => {
+    render(
+      <VCenterClusterDetails
+        isAggregateView
+        rows={[
+          {
+            id: "Cluster-Prod-01",
+            name: "Cluster-Prod-01",
+            hosts: 5,
+            vms: 280,
+            vmotion: "enabled",
+            drs: "enabled",
+            vsan: "enabled",
+          },
+          {
+            id: "Cluster-Dev-02",
+            name: "Cluster-Dev-02",
+            hosts: 7,
+            vms: 350,
+            vmotion: "enabled",
+            drs: "disabled",
+            vsan: "enabled",
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("vCenter cluster details")).toBeInTheDocument();
+    expect(screen.getByText("Cluster-Prod-01")).toBeInTheDocument();
+    expect(screen.getByText("Cluster-Dev-02")).toBeInTheDocument();
+    expect(screen.getAllByText("Enabled").length).toBeGreaterThan(0);
+    expect(screen.getByText("Disabled")).toBeInTheDocument();
+  });
+
+  it("limits the aggregate table height so long cluster lists can scroll", () => {
+    render(
+      <VCenterClusterDetails
+        isAggregateView
+        rows={Array.from({ length: 12 }, (_, index) => ({
+          id: `cluster-${index}`,
+          name: `cluster-${index}`,
+          hosts: index + 1,
+          vms: (index + 1) * 10,
+          vmotion: "unknown",
+          drs: "unknown",
+          vsan: "disabled",
+        }))}
+      />,
+    );
+
+    expect(
+      screen.getByTestId("vcenter-cluster-details-table").parentElement,
+    ).toHaveAttribute("data-scroll-constrained", "true");
+  });
+
+  it("renders the detailed cluster cards for a single cluster", () => {
+    render(
+      <VCenterClusterDetails
+        isAggregateView={false}
+        rows={[]}
+        details={{
+          hosts: 7,
+          vms: 350,
+          networksDetected: 2,
+          vmotion: "enabled",
+          drs: "disabled",
+          ha: "enabled",
+          vsan: "disabled",
+          networks: [
+            {
+              name: "VDS-Dev",
+              vlanId: "10",
+              displayName: "VDS-Dev (VLAN 10)",
+            },
+            {
+              name: "VDS-Dev",
+              vlanId: "11",
+              displayName: "VDS-Dev (VLAN 11)",
+            },
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Core infrastructure")).toBeInTheDocument();
+    expect(screen.getByText("vSAN capabilities")).toBeInTheDocument();
+    expect(screen.getByText("Network topology")).toBeInTheDocument();
+    expect(screen.getByText("vMotion")).toBeInTheDocument();
+    expect(screen.getByText("DRS")).toBeInTheDocument();
+    expect(screen.getByText("HA")).toBeInTheDocument();
+    expect(screen.getByText("VDS-Dev (VLAN 10)")).toBeInTheDocument();
+    expect(screen.getByText("VDS-Dev (VLAN 11)")).toBeInTheDocument();
+    expect(screen.queryByText("VM encryption")).toBeNull();
+  });
+});

package/src/report/__tests__/OSDistribution.test.tsx

@@ -82,14 +82,13 @@ describe("OSBarChart", () => {
     expect(within(popover).getByText("Upgrade to RHEL 7")).toBeInTheDocument();
   });
 
-  it("does not show upgrade recommendation icon in export mode", () => {
-    render(<OSBarChart osData={sampleOsData} isExportMode />);
+  it("marks the upgrade recommendation icon as capture chrome", () => {
+    render(<OSBarChart osData={sampleOsData} />);
 
-    expect(
-      screen.queryByRole("button", {
-        name: "Open operating system upgrade information",
-      }),
-    ).not.toBeInTheDocument();
+    const upgradeButton = screen.getByRole("button", {
+      name: "Open operating system upgrade information",
+    });
+    expect(upgradeButton.closest("[data-chart-export-hide]")).not.toBeNull();
   });
 
   it("shows official Red Hat definitions in tier badge tooltips", async () => {
@@ -149,12 +148,12 @@ describe("OSBarChart", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders export-friendly inline tier badge colors in export mode", () => {
-    render(<OSBarChart osData={sampleOsData} isExportMode />);
+  it("uses explicit badge colors so html2canvas can capture them", () => {
+    render(<OSBarChart osData={sampleOsData} />);
 
     const certifiedBadge = screen.getByText("Certified");
-    expect(certifiedBadge.tagName).toBe("SPAN");
-    expect(certifiedBadge).toHaveStyle({
+    const styledBadge = certifiedBadge.closest("[style]") ?? certifiedBadge;
+    expect(styledBadge).toHaveStyle({
       backgroundColor: "rgb(185, 218, 252)",
       color: "rgb(0, 77, 153)",
     });