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

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

@@ -0,0 +1,269 @@
+import "@testing-library/jest-dom";
+import {
+  chart_color_black_500,
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_orange_100,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_red_orange_200,
+  chart_color_teal_200,
+  chart_color_teal_400,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { MigrationDonutChartProps } from "../../charts/MigrationDonutChart.js";
+import { NetworkOverview } from "../NetworkOverview.js";
+
+const donutProps = vi.hoisted(() => ({
+  current: null as MigrationDonutChartProps | null,
+}));
+
+vi.mock("../../charts/MigrationDonutChart.js", () => ({
+  MigrationDonutChart: (props: MigrationDonutChartProps): JSX.Element => {
+    donutProps.current = props;
+    return (
+      <div data-testid="network-donut">
+        {props.title} {props.subTitle}
+      </div>
+    );
+  },
+}));
+
+afterEach(() => {
+  donutProps.current = null;
+  cleanup();
+});
+
+const renderedDonut = (): MigrationDonutChartProps => {
+  const props = donutProps.current;
+  if (!props) {
+    throw new Error("expected a network donut to render");
+  }
+  return props;
+};
+
+describe("NetworkOverview", () => {
+  it("shows the network empty state when no networks were collected", () => {
+    render(<NetworkOverview />);
+
+    expect(screen.getByText("Networks")).toBeInTheDocument();
+    expect(screen.getByText("Top 5 networks")).toBeInTheDocument();
+    expect(screen.getByText("Network data not collected")).toBeInTheDocument();
+    expect(screen.queryByTestId("network-donut")).not.toBeInTheDocument();
+  });
+
+  it("keeps the top 4 networks and rolls the rest into one slice", () => {
+    render(
+      <NetworkOverview
+        infra={{
+          networks: [
+            { vmsCount: 10, vlanId: "100" },
+            { vmsCount: 8, vlanId: 200 },
+            { vmsCount: 6, vlanId: "   " },
+            { vmsCount: 4 },
+            { vmsCount: 3, vlanId: "9" },
+            { vmsCount: 1, vlanId: "8" },
+            { vmsCount: Number.NaN },
+          ],
+        }}
+      />,
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("32");
+    expect(props.subTitle).toBe("VMs");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Network 1", 10],
+      ["Network 2", 8],
+      ["Network 3", 6],
+      ["Network 4", 4],
+      ["Rest of networks", 4],
+    ]);
+    expect(props.legend).toEqual({
+      "Network 1": chart_color_blue_300.value,
+      "Network 2": chart_color_purple_300.value,
+      "Network 3": chart_color_purple_100.value,
+      "Network 4": chart_color_teal_200.value,
+      "Rest of networks": chart_color_yellow_400.value,
+    });
+    expect(props.legendVariant).toBe("html");
+    expect(props.height).toBe(300);
+    expect(props.width).toBe(420);
+    expect(props.donutThickness).toBe(18);
+    expect(props.titleFontSize).toBe(34);
+    expect(props.labelFontSize).toBe(18);
+    expect(props.itemsPerRow).toBe(3);
+    expect(props.marginLeft).toBe("0%");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Network 1",
+          y: 10,
+          countDisplay: "10 VMs",
+          legendCategory: "Network 1",
+        },
+        percent: 31.25,
+        total: 32,
+      }),
+    ).toBe("10 VMs\n31.3%\nVLAN: 100");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Network 2",
+          y: 8,
+          countDisplay: "8 VMs",
+          legendCategory: "Network 2",
+        },
+        percent: 25,
+        total: 32,
+      }),
+    ).toBe("8 VMs\n25.0%\nVLAN: 200");
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "Rest of networks",
+          y: 4,
+          countDisplay: "4 VMs",
+          legendCategory: "Rest of networks",
+        },
+        percent: 12.5,
+        total: 32,
+      }),
+    ).toBe("4 VMs\n12.5%\nVLAN: -");
+  });
+
+  it("switches to NIC count and falls back to the histogram", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        legendVariant="chart"
+        nicCount={{
+          total: 9,
+          histogram: { minValue: 1, step: 1, data: [4, 0, 5] },
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(screen.queryByText("Top 5 networks")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "VM distribution by NIC count" }),
+    ).toBeInTheDocument();
+
+    const props = renderedDonut();
+    expect(props.legendVariant).toBe("chart");
+    expect(props.title).toBe("9");
+    expect(props.data.map((slice) => [slice.name, slice.count])).toEqual([
+      ["1 NIC", 4],
+      ["3 NIC", 5],
+    ]);
+    expect(
+      props.tooltipLabelFormatter?.({
+        datum: {
+          x: "1 NIC",
+          y: 4,
+          countDisplay: "4 VMs",
+          legendCategory: "1 NIC",
+        },
+        percent: 44.444,
+        total: 9,
+      }),
+    ).toBe("4 VMs\n44.4%");
+  });
+
+  it("plots distributionByNicCount ahead of the deprecated histogram", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        distributionByNicCount={{ "2": 5, "4+": 2, "1": 3, "0": 1 }}
+        nicCount={{
+          total: 99,
+          histogram: { minValue: 1, step: 1, data: [9] },
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    const props = renderedDonut();
+    expect(props.title).toBe("11");
+    expect(props.data.map((slice) => slice.name)).toEqual([
+      "0 NIC",
+      "1 NIC",
+      "2 NIC",
+      "4+ NIC",
+    ]);
+    expect(props.legend).toEqual({
+      "0 NIC": chart_color_blue_300.value,
+      "1 NIC": chart_color_purple_300.value,
+      "2 NIC": chart_color_purple_100.value,
+      "4+ NIC": chart_color_teal_200.value,
+    });
+  });
+
+  it("shows the NIC empty state when the selected distribution is empty", async () => {
+    const user = userEvent.setup();
+    render(<NetworkOverview distributionByNicCount={{}} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(
+      screen.getByText("NIC count data not collected"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("network-donut")).not.toBeInTheDocument();
+  });
+
+  it("uses the extended palette when there are more NIC buckets than base colors", async () => {
+    const user = userEvent.setup();
+    render(
+      <NetworkOverview
+        distributionByNicCount={{
+          "0": 1,
+          "1": 1,
+          "2": 1,
+          "3": 1,
+          "4": 1,
+          "5": 1,
+          "6": 1,
+          "7": 1,
+          "8": 1,
+          "9": 1,
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "VM distribution by network" }),
+    );
+    await user.click(
+      screen.getByRole("menuitem", { name: "VM distribution by NIC count" }),
+    );
+
+    expect(renderedDonut().legend).toMatchObject({
+      "5 NIC": chart_color_green_300.value,
+      "6 NIC": chart_color_orange_100.value,
+      "7 NIC": chart_color_red_orange_200.value,
+      "8 NIC": chart_color_teal_400.value,
+      "9 NIC": chart_color_black_500.value,
+    });
+  });
+});

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)",
     });

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)");
+  });
+});