solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/Scatter.spec.tsx

@@ -1,406 +0,0 @@
-// Port of recharts 3.8.1 test/cartesian/Scatter.spec.tsx (commit 7a23854) — the
-// behavioral subset whose features the Solid Scatter implements: symbol geometry,
-// custom component, empty data, function-form `shape`, the function-form `line`
-// connector, the explicit-id DOM element + clipPath, implicit `fill` read from the
-// data array, and Tooltip-payload selector integration.
-//
-// PERMANENT-N/A (NOT ported):
-//   - element-form `shape`/`line` ReactElement cases (no React.isValidElement /
-//     cloneElement in Solid; function form IS ported);
-//   - mouse-over/-out + touch event-prop snapshots (Scatter exposes only
-//     onClick/onMouseEnter/onMouseLeave — recharts' onMouseOver/onMouseOut/
-//     onTouchMove/onTouchEnd pass-through props are not part of the Solid surface);
-//   - the <Customized>/render-count state-integration case (Customized +
-//     toHaveBeenCalledTimes — no Customized, render-count coupling out of scope).
-import { describe, expect, it, test, vi } from "vitest";
-import { flush } from "solid-js";
-import { Scatter, ScatterChart, ScatterProps, Tooltip, XAxis, YAxis, ZAxis } from "../../src";
-import { assertNotNull } from "../helper/assertNotNull";
-import { expectScatterPoints } from "../helper/expectScatterPoints";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import { fireEvent, render } from "@solidjs/testing-library";
-import { dataWithSpecialNameAndFillProperties, PageData } from "../_data";
-import { selectTooltipPayload } from "../../src/state/selectors/tooltipSelectors";
-import { selectActiveTooltipPayload } from "../../src/state/selectors/tooltipSelectors";
-
-describe("<Scatter />", () => {
-  const data = [
-    { cx: 10, cy: 50, size: 64, payload: { x: 12, y: 23, z: 78 } },
-    { cx: 50, cy: 50, size: 64, payload: { x: 12, y: 23, z: 78 } },
-    { cx: 90, cy: 50, size: 64, payload: { x: 12, y: 23, z: 78 } },
-    { cx: 130, cy: 50, size: 64, payload: { x: 12, y: 23, z: 78 } },
-    { cx: 170, cy: 50, size: 64, payload: { x: 12, y: 23, z: 78 } },
-  ];
-
-  test("Render symbols in a simple Scatter", () => {
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter data={data} dataKey="cx" />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, [
-      {
-        cx: "54",
-        cy: "467.77777777777777",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(54, 467.77777777777777)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "152",
-        cy: "358.8888888888889",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(152, 358.8888888888889)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "250",
-        cy: "250",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(250, 250)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "348",
-        cy: "141.11111111111111",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(348, 141.11111111111111)",
-        width: "9.0270333367641",
-      },
-      {
-        cx: "446",
-        cy: "32.222222222222236",
-        d: "M0,0",
-        height: "9.0270333367641",
-        transform: "translate(446, 32.222222222222236)",
-        width: "9.0270333367641",
-      },
-    ]);
-  });
-
-  test("Can render in custom component", () => {
-    const CustomScatter = (props: ScatterProps) => {
-      return <Scatter {...props} />;
-    };
-
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <CustomScatter data={[]} />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, []);
-  });
-
-  test("Don't render any symbols when data is empty", () => {
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter data={[]} />
-      </ScatterChart>
-    ));
-
-    expectScatterPoints(container, []);
-  });
-
-  test("Render customized symbols when shape is set to be a function", () => {
-    const renderCustomizedShape = ({ cx, cy }: { cx?: number; cy?: number }) => (
-      <circle cx={cx} cy={cy} r={5} class="customized-shape" />
-    );
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter
-          isAnimationActive={false}
-          shape={renderCustomizedShape}
-          data={data}
-          dataKey="size"
-        />
-      </ScatterChart>
-    ));
-
-    expect(container.querySelectorAll(".customized-shape")).toHaveLength(data.length);
-  });
-
-  test("Render customized line when line is set to be a function", () => {
-    const renderCustomizedLine = () => <path d="M0,0L200,200" class="customized-line" />;
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter isAnimationActive={false} line={renderCustomizedLine} data={data} dataKey="size" />
-      </ScatterChart>
-    ));
-
-    expect(container.querySelectorAll(".customized-line")).toHaveLength(1);
-  });
-
-  test("mouse enter or mouse leave a symbol", () => {
-    const onClick = vi.fn();
-    const onMouseEnter = vi.fn();
-    const onMouseLeave = vi.fn();
-
-    const { container } = render(() => (
-      <ScatterChart width={500} height={500}>
-        <Scatter
-          isAnimationActive={false}
-          data={data}
-          dataKey="cx"
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-        />
-      </ScatterChart>
-    ));
-    // recharts binds the handlers on the symbol via React synthetic delegation; the
-    // Solid port binds them on the wrapping `.recharts-scatter-symbol` Layer <g>. Since
-    // mouseEnter/mouseLeave do not bubble in the DOM, fire on that carrier element (the
-    // 5th symbol's <g>) — harness-only swap of the queried element.
-    const symbol = container.querySelectorAll(".recharts-scatter-symbol")[4];
-    assertNotNull(symbol);
-    fireEvent.mouseEnter(symbol);
-    expect(onMouseEnter).toHaveBeenCalled();
-    fireEvent.mouseLeave(symbol);
-    expect(onMouseLeave).toHaveBeenCalled();
-    fireEvent.click(symbol);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it("should implicitly read `fill` property from the data array but not `name`", () => {
-    const view = render(() => (
-      <ScatterChart width={500} height={500} data={dataWithSpecialNameAndFillProperties}>
-        <Scatter dataKey="value" />
-      </ScatterChart>
-    ));
-    const { container } = view;
-    expect.soft(view.queryByText("name1")).not.toBeInTheDocument();
-    expect.soft(view.queryByText("name2")).not.toBeInTheDocument();
-    expect.soft(view.queryByText("name3")).not.toBeInTheDocument();
-    expect.soft(view.queryByText("name4")).not.toBeInTheDocument();
-    expect.soft(container.querySelector('[fill="fill1"]')).toBeInTheDocument();
-    expect.soft(container.querySelector('[fill="fill2"]')).toBeInTheDocument();
-    expect.soft(container.querySelector('[fill="fill3"]')).toBeInTheDocument();
-    expect.soft(container.querySelector('[fill="fill4"]')).toBeInTheDocument();
-  });
-
-  describe("with explicit ID prop", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <ScatterChart width={500} height={500}>
-        <Scatter isAnimationActive={false} data={data} dataKey="cx" id="test-scatter-id" />
-        <XAxis allowDataOverflow />
-        {props.children}
-      </ScatterChart>
-    ));
-
-    it("should pass id prop to an element in the DOM", () => {
-      const { container } = renderTestCase();
-
-      const scatter = container.querySelector("#test-scatter-id");
-      assertNotNull(scatter);
-      expect(scatter.tagName).toBe("g");
-      expect(scatter.classList.value).toBe("recharts-layer recharts-scatter");
-    });
-
-    it("should set the ID on the clipPath, if it needs clipping", () => {
-      const { container } = renderTestCase();
-
-      const clipPath = container.querySelector("#clipPath-test-scatter-id");
-      assertNotNull(clipPath);
-      expect(clipPath.tagName).toBe("clipPath");
-    });
-  });
-
-  describe("events", () => {
-    // recharts uses userEvent.click; the established Solid harness convention swaps
-    // userEvent → fireEvent.click (the dispatch hook fires (data, index, event)).
-    it("should fire onClick event when clicking on a scatter point", () => {
-      const handleClick = vi.fn();
-      const { container } = render(() => (
-        <ScatterChart width={500} height={500}>
-          <Scatter data={data} dataKey="cx" onClick={handleClick} />
-        </ScatterChart>
-      ));
-
-      const scatterPoints = container.querySelectorAll(".recharts-symbols");
-      const firstPoint = scatterPoints[0];
-      assertNotNull(firstPoint);
-      fireEvent.click(firstPoint);
-      expect(handleClick).toHaveBeenCalledTimes(1);
-      expectLastCalledWith(
-        handleClick,
-        {
-          cx: 54,
-          cy: 467.77777777777777,
-          height: 9.0270333367641,
-          node: { x: 10, y: 10, z: "-" },
-          payload: {
-            cx: 10,
-            cy: 50,
-            payload: { x: 12, y: 23, z: 78 },
-            size: 64,
-          },
-          size: 0,
-          tooltipPayload: [
-            {
-              dataKey: "cx",
-              name: undefined,
-              payload: {
-                cx: 10,
-                cy: 50,
-                payload: { x: 12, y: 23, z: 78 },
-                size: 64,
-              },
-              type: undefined,
-              unit: "",
-              value: 10,
-              graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
-            },
-            {
-              dataKey: "cx",
-              name: undefined,
-              payload: {
-                cx: 10,
-                cy: 50,
-                payload: { x: 12, y: 23, z: 78 },
-                size: 64,
-              },
-              type: undefined,
-              unit: "",
-              value: 10,
-              graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
-            },
-          ],
-          tooltipPosition: { x: 54, y: 467.77777777777777 },
-          width: 9.0270333367641,
-          x: 49.48648333161795,
-          y: 463.2642611093957,
-        },
-        0,
-        expect.any(Object),
-      );
-    });
-  });
-
-  describe("Tooltip integration", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <ScatterChart width={100} height={100}>
-        <Scatter isAnimationActive={false} data={PageData} />
-        <XAxis dataKey="uv" />
-        <YAxis dataKey="pv" />
-        {props.children}
-      </ScatterChart>
-    ));
-
-    it("should return tooltip payload", () => {
-      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "0"));
-      expectLastCalledWith(spy, [
-        {
-          color: undefined,
-          dataKey: "uv",
-          fill: undefined,
-          graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
-          hide: false,
-          name: "uv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page A",
-            pv: 2400,
-            uv: 400,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-          value: 400,
-        },
-        {
-          color: undefined,
-          dataKey: "pv",
-          fill: undefined,
-          graphicalItemId: expect.stringMatching(/^recharts-scatter-.+/),
-          hide: false,
-          name: "pv",
-          nameKey: undefined,
-          payload: {
-            amt: 2400,
-            name: "Page A",
-            pv: 2400,
-            uv: 400,
-          },
-          stroke: undefined,
-          strokeWidth: undefined,
-          type: undefined,
-          unit: "",
-          value: 2400,
-        },
-      ]);
-    });
-
-    describe("Multiple Scatter components tooltip filtering", () => {
-      /**
-       * https://github.com/recharts/recharts/pull/6537
-       * https://github.com/recharts/recharts/issues/6075
-       */
-      it("should only show tooltip data from the hovered Scatter component", () => {
-        const data01 = [
-          { x: 10, y: 20, z: 30 },
-          { x: 20, y: 30, z: 40 },
-        ];
-        const data02 = [
-          { x: 15, y: 25, z: 35 },
-          { x: 25, y: 35, z: 45 },
-        ];
-
-        const renderTooltipTestCase = createSelectorTestCase((props) => (
-          <ScatterChart width={400} height={400}>
-            <XAxis dataKey="x" type="number" allowDecimals={false} />
-            <YAxis dataKey="y" type="number" allowDecimals={false} />
-            <ZAxis dataKey="z" type="number" range={[64, 144]} />
-            <Tooltip cursor={false} />
-            <Scatter name="A school" data={data01} fill="#8884d8" />
-            <Scatter name="B school" data={data02} fill="#82ca9d" />
-            {props.children}
-          </ScatterChart>
-        ));
-
-        const { container, spy } = renderTooltipTestCase(selectActiveTooltipPayload);
-
-        const scatterPoints = container.querySelectorAll(".recharts-scatter-symbol");
-        fireEvent.mouseEnter(scatterPoints[0]!);
-        flush();
-
-        const payloadFromFirstScatter = spy.mock.calls.at(-1)?.[0];
-        assertNotNull(payloadFromFirstScatter);
-        expect(payloadFromFirstScatter).toEqual(
-          expect.arrayContaining([
-            expect.objectContaining({ payload: expect.objectContaining(data01[0]) }),
-          ]),
-        );
-        expect(payloadFromFirstScatter).not.toEqual(
-          expect.arrayContaining([
-            expect.objectContaining({ payload: expect.objectContaining(data02[0]) }),
-          ]),
-        );
-
-        fireEvent.mouseEnter(scatterPoints[2]!);
-        flush();
-
-        const payloadFromSecondScatter = spy.mock.calls.at(-1)?.[0];
-        assertNotNull(payloadFromSecondScatter);
-        expect(payloadFromSecondScatter).toEqual(
-          expect.arrayContaining([
-            expect.objectContaining({ payload: expect.objectContaining(data02[0]) }),
-          ]),
-        );
-        expect(payloadFromSecondScatter).not.toEqual(
-          expect.arrayContaining([
-            expect.objectContaining({ payload: expect.objectContaining(data01[0]) }),
-          ]),
-        );
-      });
-    });
-  });
-});

package/test/cartesian/Scatter.typed.spec.tsx

@@ -1,153 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/Scatter.typed.spec.tsx.
-//
-// A `.typed` spec: each case compiles+renders, and "should NOT allow" cases sit
-// on a line tsc genuinely rejects (// @ts-expect-error). Correctness is enforced
-// by `pnpm --filter solid-recharts typecheck` (tsc --noEmit over test/).
-//
-// SOLID DIVERGENCES from the React reference (golden-anchored to the Solid type
-// surface in src/cartesian/Scatter.tsx):
-//   1. `ScatterProps.dataKey` is `DataKey<unknown>` (NON-generic) and `Scatter`
-//      is a plain function component (not generic). So:
-//        - string dataKeys ("value"/"name"/"foo") always compile (string|number);
-//        - a dataKey FUNCTION with an IMPLICIT param gets `entry: unknown`, so
-//          accessing any property is a tsc error → those reference "should allow"
-//          cases flip to @ts-expect-error here (provenance: Solid `unknown` param);
-//        - a dataKey function with an EXPLICITLY annotated param compiles.
-//      The reference's "with explicit Scatter type parameters" describe block
-//      (`Scatter<ExampleDataPoint, number>`) cannot be ported — Scatter takes 0
-//      type arguments in Solid. See `blocked` in the agent report.
-//   2. The event-handler block's `getRelativeCoordinate(e)` relies on the React
-//      handler giving a recharts `MousePointer`; the Solid handler `event` is a
-//      plain DOM `MouseEvent` (not a `MousePointer`), and Solid `ScatterProps`
-//      only exposes onClick/onMouseEnter/onMouseLeave. Ported as a reduced
-//      compile-only handler case; full getRelativeCoordinate parity is blocked.
-import { describe, expect, it } from "vitest";
-import { Scatter, ScatterChart } from "../../src";
-import type { ScatterPointItem } from "../../src/cartesian/Scatter";
-import { render } from "@solidjs/testing-library";
-
-type ExampleDataPoint = {
-  x: number;
-  y: number;
-  value: number;
-  name: string;
-};
-
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { x: 10, y: 50, value: 100, name: "a" },
-  { x: 50, y: 50, value: 100, name: "b" },
-  { x: 90, y: 50, value: 100, name: "c" },
-  { x: 130, y: 50, value: 100, name: "d" },
-  { x: 170, y: 50, value: 100, name: "e" },
-];
-
-describe("Scatter with strong typing", () => {
-  describe("with all implicit types", () => {
-    it("should render Scatter with correct data and correct dataKey", () => {
-      const { container } = render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          <Scatter dataKey="value" isAnimationActive={false} />
-        </ScatterChart>
-      ));
-      expect(container.querySelectorAll(".recharts-scatter-symbol")).toHaveLength(data.length);
-    });
-
-    it("should allow using incorrect type dataKey", () => {
-      render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          <Scatter dataKey="name" isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-
-    it("should allow using non-existent dataKey", () => {
-      render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          <Scatter dataKey="foo" isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-
-    it("should require an explicit param annotation on a dataKey function (reference allows implicit)", () => {
-      render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          {/* Reference: "should allow using dataKey function that returns wrong value".
-              Solid: the implicit param is `unknown`, so `.name` is a tsc error. */}
-          {/* @ts-expect-error Solid dataKey function param is `unknown` (DataKey<unknown>) */}
-          <Scatter dataKey={(entry) => entry.name} isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-
-    it("should reject accessing a non-existent property on an implicit dataKey param", () => {
-      render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          {/* Reference: "should allow ... accesses non-existent property".
-              Solid: implicit param is `unknown` → tsc error. */}
-          {/* @ts-expect-error Solid dataKey function param is `unknown` (DataKey<unknown>) */}
-          <Scatter dataKey={(entry) => entry.foo} isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-
-    it("should allow a dataKey function with an explicitly annotated param", () => {
-      render(() => (
-        <ScatterChart data={data} width={400} height={400}>
-          <Scatter dataKey={(entry: ExampleDataPoint) => entry.value} isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-
-    it("should allow when Scatter data is matching Scatter dataKey as string", () => {
-      const { container } = render(() => (
-        <ScatterChart width={400} height={400}>
-          <Scatter data={data} dataKey="value" isAnimationActive={false} />
-        </ScatterChart>
-      ));
-      expect(container.querySelectorAll(".recharts-scatter-symbol")).toHaveLength(data.length);
-    });
-
-    it("should allow when Scatter data is matching Scatter dataKey as function (explicit param)", () => {
-      const { container } = render(() => (
-        <ScatterChart width={400} height={400}>
-          <Scatter
-            data={data}
-            dataKey={(entry: ExampleDataPoint) => entry.value}
-            isAnimationActive={false}
-          />
-        </ScatterChart>
-      ));
-      expect(container.querySelectorAll(".recharts-scatter-symbol")).toHaveLength(data.length);
-    });
-
-    it("should allow when Scatter data is not matching Scatter dataKey", () => {
-      render(() => (
-        <ScatterChart width={400} height={400}>
-          <Scatter data={data} dataKey="foo" isAnimationActive={false} />
-          {/* Reference flags `entry => entry.foo` here. In Solid the same line is a
-              tsc error, but because the implicit param is `unknown` (not because of
-              a data/dataKey mismatch — Scatter is non-generic). */}
-          {/* @ts-expect-error Solid dataKey function param is `unknown` (DataKey<unknown>) */}
-          <Scatter data={data} dataKey={(entry) => entry.foo} isAnimationActive={false} />
-        </ScatterChart>
-      ));
-    });
-  });
-});
-
-describe("Scatter event handlers", () => {
-  it("should allow typed mouse event handlers (data, index, event)", () => {
-    const { container } = render(() => (
-      <ScatterChart data={data} width={100} height={100}>
-        <Scatter
-          dataKey="value"
-          isAnimationActive={false}
-          onClick={(_data: ScatterPointItem, _i: number, _e: MouseEvent) => {}}
-          onMouseEnter={(_data: ScatterPointItem, _i: number, _e: MouseEvent) => {}}
-          onMouseLeave={(_data: ScatterPointItem, _i: number, _e: MouseEvent) => {}}
-        />
-      </ScatterChart>
-    ));
-    expect(container.querySelectorAll(".recharts-scatter-symbol")).toHaveLength(data.length);
-  });
-});