From 463ea22e31001546fec509ce41859f4de7f88693 Mon Sep 17 00:00:00 2001 From: JSONbored <49853598+JSONbored@users.noreply.github.com> Date: Thu, 30 Jul 2026 21:52:50 -0700 Subject: [PATCH] style(ui-kit): format chart.test.tsx, which left ui:lint red on main The tests added in #9977 were never run through prettier, and `ui:lint` runs `format:check` across the ui-kit workspace as part of `test:ci` -- so main has been failing lint since that merge, and every PR inherits it. My regression, and the same cause as the last one: I ran a checker subset (typecheck, dead-exports, the pack test, the ui-kit suite) and not `ui:lint`, which is the one that would have caught it. No behaviour changes -- prettier reflow only, and the 10 tests still pass. --- .../src/components/chart.test.tsx | 80 +++++++++++++++---- 1 file changed, 66 insertions(+), 14 deletions(-) diff --git a/packages/loopover-ui-kit/src/components/chart.test.tsx b/packages/loopover-ui-kit/src/components/chart.test.tsx index 15326edf2..f23723865 100644 --- a/packages/loopover-ui-kit/src/components/chart.test.tsx +++ b/packages/loopover-ui-kit/src/components/chart.test.tsx @@ -10,7 +10,9 @@ import { describe, expect, it, vi } from "vitest"; // asserting against a mock rather than against `chart.tsx`. vi.mock("recharts", async (importOriginal) => ({ ...(await importOriginal()), - ResponsiveContainer: ({ children }: { children?: React.ReactNode }) =>
{children}
, + ResponsiveContainer: ({ children }: { children?: React.ReactNode }) => ( +
{children}
+ ), })); import { @@ -35,8 +37,20 @@ const config = { } satisfies ChartConfig; const payload = [ - { dataKey: "revenue", name: "revenue", value: 120, color: "#0ea5e9", payload: { month: "Jan", revenue: 120 } }, - { dataKey: "cost", name: "cost", value: 80, color: "#111827", payload: { month: "Jan", cost: 80 } }, + { + dataKey: "revenue", + name: "revenue", + value: 120, + color: "#0ea5e9", + payload: { month: "Jan", revenue: 120 }, + }, + { + dataKey: "cost", + name: "cost", + value: 80, + color: "#111827", + payload: { month: "Jan", cost: 80 }, + }, ]; /** ChartTooltipContent calls useChart(), so it must render inside a provider. ChartContainer is that @@ -51,14 +65,19 @@ function renderInChart(node: React.ReactNode) { ); // Scoped through this render's OWN container, not the shared document: a test that renders twice would // otherwise match both slots and fail on "found multiple elements". - return { ...result, slot: () => result.container.querySelector('[data-testid="slot"]')! }; + return { + ...result, + slot: () => result.container.querySelector('[data-testid="slot"]')!, + }; } describe("ChartTooltipContent (recharts v3, #8610)", () => { it("renders one row per payload entry, labelled from the chart config", () => { // The config's `label` -- not the raw dataKey -- is what a reader sees. Regressing to the dataKey is the // most likely silent breakage, and it still "renders fine". - const chart = renderInChart(); + const chart = renderInChart( + , + ); expect(chart.getByText("Revenue")).toBeTruthy(); expect(chart.getByText("Cost")).toBeTruthy(); @@ -69,7 +88,9 @@ describe("ChartTooltipContent (recharts v3, #8610)", () => { it("INVARIANT: renders nothing when inactive or when the payload is empty", () => { // A tooltip that paints on an empty payload follows the cursor around an empty chart. Both arms, because // `!active || !payload?.length` is two conditions and only testing one leaves the other free to invert. - const inactive = renderInChart(); + const inactive = renderInChart( + , + ); expect(inactive.slot().textContent).toBe(""); const empty = renderInChart(); @@ -77,27 +98,52 @@ describe("ChartTooltipContent (recharts v3, #8610)", () => { }); it("hides the label when asked, and formats it through labelFormatter otherwise", () => { - const formatted = renderInChart( `Month: ${String(value)}`} />); + const formatted = renderInChart( + `Month: ${String(value)}`} + />, + ); expect(formatted.getByText("Month: Jan")).toBeTruthy(); - const hidden = renderInChart(); + const hidden = renderInChart( + , + ); expect(hidden.queryByText("Jan")).toBeNull(); }); it("routes the value through a custom formatter when one is supplied", () => { - const chart = renderInChart( `$${String(value)}`} />); + const chart = renderInChart( + `$${String(value)}`} + />, + ); expect(chart.getByText("$120")).toBeTruthy(); }); it("resolves a series by nameKey when the payload's own key is not the config key", () => { - const chart = renderInChart(); + const chart = renderInChart( + , + ); expect(chart.getByText("Revenue")).toBeTruthy(); }); }); describe("ChartLegendContent (recharts v3, #8610)", () => { it("labels each legend entry from the config", () => { - const chart = renderInChart(); + const chart = renderInChart( + , + ); expect(chart.getByText("Revenue")).toBeTruthy(); }); @@ -111,7 +157,9 @@ describe("ChartStyle", () => { it("emits per-theme CSS variables only for series that declare a colour", () => { // The `theme` and `color` arms of ChartConfig are a union, and both have to reach the stylesheet -- a // series configured with `theme` produces one variable per theme selector. - const { container } = render(); + const { container } = render( + , + ); const css = container.querySelector("style")?.innerHTML ?? ""; expect(css).toContain("--color-revenue: #0ea5e9"); @@ -121,7 +169,9 @@ describe("ChartStyle", () => { }); it("emits no stylesheet at all when no series declares a colour", () => { - const { container } = render(); + const { container } = render( + , + ); expect(container.querySelector("style")).toBeNull(); }); }); @@ -130,6 +180,8 @@ describe("useChart", () => { it("REGRESSION: throws a named error outside a ChartContainer rather than reading null", () => { // Without the guard this is a `Cannot read properties of null` deep inside a tooltip render, which is a // materially harder thing to diagnose than the message the component actually throws. - expect(() => render()).toThrow(/useChart must be used within a /); + expect(() => + render(), + ).toThrow(/useChart must be used within a /); }); });