solid-recharts 0.2.0 → 1.0.0

package/test/chart/FunnelChart.spec.tsx

@@ -1,215 +0,0 @@
-// Subset port of recharts 3.8.1 test/chart/FunnelChart.spec.tsx (commit 7a23854):
-// a <Funnel> in a FunnelChart renders one trapezoid per data row, stacked widest →
-// narrowest. `isAnimationActive={false}` so trapezoids are at final geometry;
-// `flush()` because the funnel resolves trapezoids from the store via a selector.
-//
-// Also ported: the FunnelChart layout-context block (viewBox/clipPathId/width/height,
-// via createSelectorTestCase + a value-spy) and the chart-level `onClick` event-fire
-// case. The mouseEnter/mouseMove/mouseLeave chart-level cases are PERMANENT-N/A
-// (non-bubbling wrapper-div handlers; see the note at that test).
-//
-// Per-trapezoid `name` attribute is deferred in the minimal port (see Funnel.tsx),
-// so that reference assertion is intentionally omitted.
-import { describe, expect, it, vi } from "vitest";
-import { flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { FunnelChart, Funnel, Tooltip, Cell } from "../../src";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import { useChartHeight, useChartWidth, useViewBox } from "../../src/context/chartLayoutContext";
-import { useClipPathId } from "../../src/container/ClipPathProvider";
-
-const data = [
-  { value: 100, name: "Show" },
-  { value: 80, name: "Click" },
-  { value: 50, name: "Visit" },
-  { value: 40, name: "Inquiry" },
-  { value: 26, name: "Order" },
-];
-
-// Upper-side width of each rendered trapezoid path (first horizontal segment:
-// "M x,y L x+upper,y ..." → upper = second x minus first x).
-function upperWidths(container: Element): number[] {
-  return [...container.querySelectorAll(".recharts-trapezoid")].map((p) => {
-    const d = p.getAttribute("d") ?? "";
-    const nums = d.match(/-?\d+(?:\.\d+)?/g)?.map(Number) ?? [];
-    return (nums[2] ?? 0) - (nums[0] ?? 0); // x1 - x0
-  });
-}
-
-describe("<FunnelChart />", () => {
-  it("renders one trapezoid per data row", () => {
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300}>
-        <Funnel dataKey="value" data={data} isAnimationActive={false} />
-      </FunnelChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-trapezoids")).toHaveLength(1);
-    expect(container.querySelectorAll(".recharts-funnel-trapezoid")).toHaveLength(data.length);
-    expect(container.querySelectorAll(".recharts-trapezoid")).toHaveLength(data.length);
-  });
-
-  it("stacks trapezoids widest → narrowest (funnel shape)", () => {
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300}>
-        <Funnel dataKey="value" data={data} isAnimationActive={false} />
-      </FunnelChart>
-    ));
-    flush();
-
-    const widths = upperWidths(container);
-    expect(widths).toHaveLength(data.length);
-    // Strictly decreasing: each row's value (100,80,50,40,26) is smaller than the last.
-    for (let i = 1; i < widths.length; i++) {
-      expect(widths[i]!).toBeLessThan(widths[i - 1]!);
-    }
-  });
-
-  it("renders two stacked funnels when nested", () => {
-    const data02 = [
-      { value: 60, name: "Show" },
-      { value: 50, name: "Click" },
-      { value: 30, name: "Visit" },
-    ];
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300} margin={{ top: 20, right: 50, left: 20, bottom: 0 }}>
-        <Funnel dataKey="value" data={data} isAnimationActive={false} />
-        <Funnel dataKey="value" data={data02} isAnimationActive={false} width="80%" />
-      </FunnelChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-trapezoids")).toHaveLength(2);
-    expect(container.querySelectorAll(".recharts-funnel-trapezoid")).toHaveLength(
-      data.length + data02.length,
-    );
-  });
-
-  it("colors each trapezoid from its matching <Cell>", () => {
-    const colors = ["#a00", "#0a0", "#00a", "#aa0", "#0aa"];
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300}>
-        <Funnel dataKey="value" data={data} fill="#888" isAnimationActive={false}>
-          {data.map((_d, i) => (
-            <Cell fill={colors[i]} />
-          ))}
-        </Funnel>
-      </FunnelChart>
-    ));
-    flush();
-
-    const fills = [...container.querySelectorAll(".recharts-trapezoid")].map((p) =>
-      p.getAttribute("fill"),
-    );
-    expect(fills).toEqual(colors);
-  });
-
-  it("activates an item tooltip when a trapezoid is hovered", () => {
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300}>
-        <Funnel dataKey="value" nameKey="name" data={data} isAnimationActive={false} />
-        <Tooltip />
-      </FunnelChart>
-    ));
-    flush();
-
-    const trapezoids = container.querySelectorAll(".recharts-funnel-trapezoid");
-    fireEvent.mouseEnter(trapezoids[1]!);
-    flush();
-
-    const values = [...container.querySelectorAll(".recharts-tooltip-item-value")].map(
-      (n) => n.textContent,
-    );
-    expect(values).toEqual(["80"]); // second row's value
-  });
-
-  it("renders a custom trapezoid via the shape render prop", () => {
-    const { container } = render(() => (
-      <FunnelChart width={500} height={300}>
-        <Funnel
-          dataKey="value"
-          data={data}
-          isAnimationActive={false}
-          shape={(item) => <circle class="custom-trap" data-name={item.name} />}
-        />
-      </FunnelChart>
-    ));
-    flush();
-
-    // No default trapezoids; one custom circle per row, still wrapped per trapezoid.
-    expect(container.querySelectorAll(".recharts-trapezoid")).toHaveLength(0);
-    expect(container.querySelectorAll("circle.custom-trap")).toHaveLength(data.length);
-    expect(container.querySelector("circle.custom-trap[data-name='Show']")).not.toBeNull();
-  });
-
-  // Ported from recharts' `forEach([onClick, onMouseEnter, onMouseMove, onMouseLeave])`
-  // chart-level event test. Only the `click` case is portable: a trapezoid click
-  // bubbles to the chart surface and fires the FunnelChart-level onClick (wired in
-  // RechartsWrapper). The mouseEnter / mouseMove / mouseLeave cases are PERMANENT-N/A:
-  // RechartsWrapper attaches those directly on the wrapper div (native, non-bubbling
-  // for enter/leave; the wrapper isn't on the bubble path for a descendant move that
-  // the React reference catches via synthetic-event delegation) — probe-verified 0
-  // calls, same conclusion as chartEvents.spec. Funnel ALSO exposes per-trapezoid
-  // onMouseEnter/Leave/Move handlers (fired on the trapezoid itself); those are
-  // exercised by the typed spec + the item-tooltip hover case above.
-  const data02 = [
-    { value: 60, name: "Show" },
-    { value: 50, name: "Click" },
-    { value: 30, name: "Visit" },
-    { value: 20, name: "Inquiry" },
-    { value: 6, name: "Order" },
-  ];
-
-  it("should fire click event", () => {
-    const onEventMock = vi.fn();
-    const { container } = render(() => (
-      <FunnelChart
-        margin={{ top: 20, right: 50, left: 20, bottom: 0 }}
-        width={500}
-        height={300}
-        onClick={onEventMock}
-      >
-        <Funnel dataKey="value" data={data} isAnimationActive={false} />
-        <Funnel dataKey="value" data={data02} isAnimationActive={false} width="80%" />
-      </FunnelChart>
-    ));
-    flush();
-
-    const trapezoid = container.querySelectorAll(".recharts-funnel-trapezoid")[2];
-    expect(trapezoid).toBeDefined();
-    fireEvent.click(trapezoid!);
-    flush();
-
-    expect(onEventMock).toHaveBeenCalled();
-  });
-
-  describe("FunnelChart layout context", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <FunnelChart width={100} height={50} barSize={20}>
-        {props.children}
-      </FunnelChart>
-    ));
-
-    it("should provide viewBox", () => {
-      const { spy } = renderTestCase(useViewBox);
-      expectLastCalledWith(spy, { height: 40, width: 90, x: 5, y: 5 });
-    });
-
-    it("should provide clipPathId", () => {
-      const { spy } = renderTestCase(useClipPathId);
-      expectLastCalledWith(spy, expect.stringMatching(/recharts\d+-clip/));
-    });
-
-    it("should provide width", () => {
-      const { spy } = renderTestCase(useChartWidth);
-      expectLastCalledWith(spy, 100);
-    });
-
-    it("should provide height", () => {
-      const { spy } = renderTestCase(useChartHeight);
-      expectLastCalledWith(spy, 50);
-    });
-  });
-});

package/test/chart/FunnelChart.typed.spec.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Funnel, FunnelChart } from "../../src";
-import { render } from "@solidjs/testing-library";
-
-// Ported from recharts 3.8.1 test/chart/FunnelChart.typed.spec.tsx.
-
-type ExampleDataPoint = { value: number; name: string };
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-];
-
-describe("FunnelChart with strong typing", () => {
-  it("should allow implicit chart typing", () => {
-    render(() => (
-      <FunnelChart data={data} width={400} height={400}>
-        <Funnel dataKey="value" isAnimationActive={false} />
-      </FunnelChart>
-    ));
-  });
-
-  it("should allow explicit chart typing", () => {
-    render(() => (
-      <FunnelChart<ExampleDataPoint> data={data} width={400} height={400}>
-        <Funnel dataKey="value" isAnimationActive={false} />
-      </FunnelChart>
-    ));
-  });
-
-  it("should show error when chart data shape does not match explicit generic type", () => {
-    const invalidChart = (
-      // @ts-expect-error TypeScript is correct here - chart data does not match explicit generic type
-      <FunnelChart<ExampleDataPoint> data={{ wrong: 1 }} width={400} height={400}>
-        <Funnel dataKey="value" isAnimationActive={false} />
-      </FunnelChart>
-    );
-    expect(invalidChart).toBeDefined();
-  });
-});

package/test/chart/LineChart.multiseries.spec.tsx

@@ -1,50 +0,0 @@
-// Port of recharts 3.8.1 test/chart/LineChart.multiseries.spec.tsx (commit 7a23854).
-// Tier A — verbatim assertions; harness only (render thunk via createSelectorTestCase).
-import { describe, expect, it, test } from "vitest";
-import { snapshot } from "solid-js";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { Line, LineChart, Tooltip, useActiveTooltipDataPoints } from "../../src";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-
-const data1 = [
-  { numberIndex: 1, date: new Date("2024-10-01"), uv: 4000, amt: undefined },
-  { numberIndex: 2, date: new Date("2024-10-02"), uv: 3000, amt: 2210 },
-  { numberIndex: 3, date: new Date("2024-10-03"), uv: 2000, amt: 2290 },
-  { numberIndex: 4, date: new Date("2024-10-04"), uv: 2780, amt: 2000 },
-  { numberIndex: 5, date: new Date("2024-10-05"), uv: 1890, amt: 2181 },
-];
-
-const data2 = [
-  { numberIndex: 2, date: new Date("2024-10-02"), amt: 2210 },
-  { numberIndex: 3, date: new Date("2024-10-03"), amt: 2290 },
-  { numberIndex: 4, date: new Date("2024-10-04"), amt: 2000 },
-  { numberIndex: 5, date: new Date("2024-10-05"), amt: 2181 },
-];
-
-describe("LineChart with multiple data series", () => {
-  // https://github.com/recharts/recharts/issues/3797
-  const renderTestCase = createSelectorTestCase((props) => (
-    <LineChart width={500} height={300}>
-      <Line data={data1} dataKey="uv" activeDot={{ r: 1 }} fill="red" />
-      <Line data={data2} dataKey="amt" activeDot={{ r: 2 }} fill="green" />
-      <Tooltip defaultIndex={1} />
-      {props.children}
-    </LineChart>
-  ));
-
-  test("useActiveTooltipDataPoints", () => {
-    // The hook returns store-proxied data rows; `snapshot` produces the plain
-    // values so the deep comparison sees real `Date`s (a Solid-store Tier-B delta).
-    const { spy } = renderTestCase(() => {
-      const dataPoints = useActiveTooltipDataPoints();
-      return () => snapshot(dataPoints());
-    });
-    expectLastCalledWith(spy, [data1[1], data2[1]]);
-  });
-
-  it("should activate dots on both lines when hovering over the chart", () => {
-    const { container } = renderTestCase();
-    const allActiveDots = container.querySelectorAll(".recharts-active-dot circle");
-    expect(allActiveDots.length).toBe(2);
-  });
-});

package/test/chart/LineChart.smoke.spec.tsx

@@ -1,50 +0,0 @@
-// Smoke test for the empty-chart vertical (steps 1-8). Not a recharts spec — it
-// validates that the whole scaffold (store → slices → contexts → selectors →
-// containers → chart composition) mounts and renders correct SVG end-to-end.
-// The comprehensive `chartDimensions.spec` parity port is the next milestone.
-import { describe, it, expect } from "vitest";
-import { render } from "@solidjs/testing-library";
-import { LineChart } from "../../src";
-
-describe("LineChart (empty-chart smoke)", () => {
-  // Any reactive-graph diagnostic fired while the chart mounts (e.g. a
-  // STRICT_READ_UNTRACKED from a top-level prop read) FAILS the test via the
-  // global guard in test/setup.ts — that's the diagnostics discipline.
-  it("mounts and renders a sized root Surface driven by the store", () => {
-    const { container } = render(() => (
-      <LineChart
-        width={100}
-        height={200}
-        margin={{ top: 11, right: 12, bottom: 13, left: 14 }}
-        title="Line Chart"
-        desc="This is a line chart"
-      />
-    ));
-
-    // one root <div class="recharts-wrapper">
-    expect(container.querySelector(".recharts-wrapper")).toBeInTheDocument();
-
-    // one root <svg class="recharts-surface"> sized from the store (width/height props)
-    const svgs = container.querySelectorAll("svg");
-    expect(svgs).toHaveLength(1);
-    const surface = svgs[0];
-    expect(surface).toHaveAttribute("width", "100");
-    expect(surface).toHaveAttribute("height", "200");
-    expect(surface).toHaveAttribute("viewBox", "0 0 100 200");
-    expect(surface).toHaveAttribute("tabindex", "0");
-    expect(surface).toHaveAttribute("role", "application");
-
-    // title / desc
-    expect(container.querySelector("title")).toHaveTextContent("Line Chart");
-    expect(container.querySelector("desc")).toHaveTextContent("This is a line chart");
-
-    // one clipPath whose rect is the plot area (chart minus margins): x=14 y=11 w=74 h=176
-    const clipPaths = container.querySelectorAll("clipPath");
-    expect(clipPaths).toHaveLength(1);
-    const rect = clipPaths[0]?.querySelector("rect");
-    expect(rect).toHaveAttribute("x", "14");
-    expect(rect).toHaveAttribute("y", "11");
-    expect(rect).toHaveAttribute("width", "74");
-    expect(rect).toHaveAttribute("height", "176");
-  });
-});