solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/shape/Curve.spec.tsx

@@ -0,0 +1,368 @@
+// Ported from recharts 3.8.1 test/shape/Curve.spec.tsx.
+// Harness changes only: render/fireEvent from the local Solid shim (thunk),
+// no React import; `className` → `class`; React.createRef → signal ref;
+// render takes a thunk. All assertions are byte-identical.
+import { describe, expect, it, test } from "vitest";
+import { createSignal } from "solid-js";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { curveLinear } from "d3-shape";
+import { Surface, Curve } from "../../src";
+import { getPath, type CurveType } from "../../src/shape/Curve";
+import { assertNotNull } from "../helper/assertNotNull";
+
+describe("<Curve />", () => {
+  describe("all points defined", () => {
+    const points = [
+      { x: 10, y: 10 },
+      { x: 25, y: 40 },
+      { x: 40, y: 10 },
+      { x: 55, y: 40 },
+      { x: 70, y: 10 },
+    ];
+
+    const points02 = [
+      { x: 10, y: 100 },
+      { x: 25, y: 400 },
+      { x: 40, y: 100 },
+      { x: 55, y: 400 },
+      { x: 70, y: 100 },
+    ];
+
+    test("renders 1 curve", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={points} />
+        </Surface>
+      ));
+
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("renders 1 vertical layout area", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={points} baseLine={0} />
+        </Surface>
+      ));
+
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("renders 1 horizontal layout area", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={points} baseLine={0} />
+        </Surface>
+      ));
+
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("renders 1 area", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={points} baseLine={points02} />
+        </Surface>
+      ));
+
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("Not render when points is empty", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={[]} />
+        </Surface>
+      ));
+
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(0);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("renders a path when path prop is passed", () => {
+      const path = "M10,10 L20,20 C30,30 40,40 50,50";
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve path={path} />
+        </Surface>
+      ));
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      const curve = container.querySelector(".recharts-curve");
+      assertNotNull(curve);
+      expect(curve.getAttribute("d")).toBe(path);
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  describe("connectNulls", () => {
+    const pointsWithNulls = [
+      { x: 10, y: 10 },
+      { x: 25, y: 40 },
+      { x: 40, y: null },
+      { x: 55, y: 40 },
+      { x: 70, y: 10 },
+    ];
+
+    test("renders a broken line when connectNulls is false and points have nulls", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={pointsWithNulls} />
+        </Surface>
+      ));
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      const path = container.querySelector(".recharts-curve");
+      assertNotNull(path);
+      const d = path.getAttribute("d");
+      assertNotNull(d);
+      // When not connecting nulls, d3's `defined` will create a break in the path.
+      // This results in multiple "M" commands in the `d` attribute.
+      expect(d.match(/M/g) ?? []).toHaveLength(2);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("renders a single connected line when connectNulls is true and points have nulls", () => {
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve stroke="#000" fill="none" type="monotone" points={pointsWithNulls} connectNulls />
+        </Surface>
+      ));
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      const path = container.querySelector(".recharts-curve");
+      assertNotNull(path);
+      // When connecting nulls, we filter points, so it should be a single path
+      // without breaks. A break would be indicated by another "M" command.
+      const d = path.getAttribute("d");
+      assertNotNull(d);
+      expect(d.match(/M/g) ?? []).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("should not throw when connectNulls is true and baseLine has nulls", () => {
+      const points = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+      ];
+      const baseLineWithNulls = [
+        { x: 1, y: 10 },
+        { x: 2, y: null },
+      ];
+
+      // This should render without throwing an error
+      const renderCurve = () =>
+        render(() => (
+          <Surface width={400} height={400}>
+            <Curve points={points} baseLine={baseLineWithNulls} connectNulls />
+          </Surface>
+        ));
+
+      expect(renderCurve).not.toThrow();
+      const { container } = renderCurve();
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      expect(container).toMatchSnapshot();
+    });
+
+    test("should render a broken area when connectNulls is false and baseLine has nulls", () => {
+      const points = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+      ];
+      const baseLineWithNulls = [
+        { x: 1, y: 10 },
+        { x: 2, y: null },
+        { x: 3, y: 30 },
+      ];
+
+      const { container } = render(() => (
+        <Surface width={400} height={400}>
+          <Curve points={points} baseLine={baseLineWithNulls} connectNulls={false} />
+        </Surface>
+      ));
+      expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+      const path = container.querySelector(".recharts-curve");
+      assertNotNull(path);
+      const d = path.getAttribute("d");
+      assertNotNull(d);
+      // The path should be broken into two areas
+      expect(d.match(/M/g) ?? []).toHaveLength(2);
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
+
+describe("type prop", () => {
+  const points = [
+    { x: 10, y: 10 },
+    { x: 25, y: 40 },
+    { x: 40, y: 10 },
+    { x: 55, y: 40 },
+    { x: 70, y: 10 },
+  ];
+
+  test("renders a linear curve as fallback for invalid type", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        {/* @ts-expect-error testing invalid type */}
+        <Curve points={points} type="invalidCurveType" />
+      </Surface>
+    ));
+
+    const { container: linearContainer } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} type="linear" />
+      </Surface>
+    ));
+
+    const path1 = container.querySelector(".recharts-curve")?.getAttribute("d");
+    const path2 = linearContainer.querySelector(".recharts-curve")?.getAttribute("d");
+    expect(path1).toBe(path2);
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders a curve when type is a custom function", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} type={curveLinear} />
+      </Surface>
+    ));
+
+    const { container: linearContainer } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} type="linear" />
+      </Surface>
+    ));
+
+    const path1 = container.querySelector(".recharts-curve")?.getAttribute("d");
+    const path2 = linearContainer.querySelector(".recharts-curve")?.getAttribute("d");
+    expect(path1).toBe(path2);
+    expect(container).toMatchSnapshot();
+  });
+
+  const curveTypes: ReadonlyArray<CurveType> = [
+    "basis",
+    "basisClosed",
+    "basisOpen",
+    "bumpX",
+    "bumpY",
+    "linear",
+    "linearClosed",
+    "natural",
+    "monotoneX",
+    "monotoneY",
+    "step",
+    "stepBefore",
+    "stepAfter",
+  ];
+
+  it.each(curveTypes)("renders a %s curve", (type) => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} type={type} />
+      </Surface>
+    ));
+    expect(container.querySelectorAll(".recharts-curve")).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe("event handlers and refs", () => {
+  const points = [
+    { x: 10, y: 10 },
+    { x: 25, y: 40 },
+  ];
+  test("calls onClick handler when curve is clicked", () => {
+    const onClick = vi.fn();
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} onClick={onClick} />
+      </Surface>
+    ));
+    const curve = container.querySelector(".recharts-curve");
+    assertNotNull(curve);
+    fireEvent.click(curve);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test("sets the pathRef to the path element", () => {
+    const [ref, setRef] = createSignal<SVGPathElement | null>(null);
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Curve points={points} pathRef={setRef} />
+      </Surface>
+    ));
+    expect(ref()).not.toBeNull();
+    expect(ref()).toBe(container.querySelector(".recharts-curve"));
+  });
+});
+
+describe("getPath", () => {
+  it("should return null when called without parameters", () => {
+    const actual = getPath({});
+    expect(actual).toBeNull();
+  });
+
+  it("should return null when points is an empty array", () => {
+    const actual = getPath({
+      points: [],
+    });
+    expect(actual).toBeNull();
+  });
+
+  it("should return path if points has some points in it", () => {
+    const actual = getPath({
+      points: [{ x: 1, y: 2 }],
+    });
+    expect(actual).toBe("M1,2Z");
+  });
+
+  it("should return same path for vertical layout", () => {
+    const actual = getPath({
+      layout: "vertical",
+      points: [{ x: 1, y: 2 }],
+    });
+    expect(actual).toBe("M1,2Z");
+  });
+
+  it("should return new path if baseLine is an array", () => {
+    const actual = getPath({
+      layout: "horizontal",
+      points: [{ x: 1, y: 2 }],
+      baseLine: [{ x: 100, y: 200 }],
+    });
+    expect(actual).toBe("M1,2L1,200Z");
+  });
+
+  it("should return yet different path in vertical layout if baseLine is an array", () => {
+    const actual = getPath({
+      layout: "vertical",
+      points: [{ x: 1, y: 2 }],
+      baseLine: [{ x: 100, y: 200 }],
+    });
+    expect(actual).toBe("M1,2L100,2Z");
+  });
+
+  it("should return path when baseLine is undefined", () => {
+    const actual = getPath({
+      type: "linear",
+      layout: "horizontal",
+      points: [{ x: 5, y: 5 }],
+      baseLine: undefined,
+    });
+    expect(actual).toBe("M5,5Z");
+  });
+
+  it("should return null when point.y is null", () => {
+    const actual = getPath({
+      type: "linear",
+      layout: "horizontal",
+      // typescript type says not-null but when I try in sandbox I can see nulls coming here
+      points: [{ x: 5, y: null }],
+      baseLine: undefined,
+    });
+    expect(actual).toBeNull();
+  });
+});

package/test/shape/Curve.typed.spec.tsx

@@ -0,0 +1,69 @@
+/**
+ * Ported from recharts 3.8.1 test/shape/Curve.typed.spec.tsx (commit 7a23854).
+ *
+ * .typed spec: correctness is enforced by `tsc --noEmit` (the package tsconfig
+ * includes test/). "should allow X" cases compile + render; "should NOT allow X"
+ * cases carry a `// @ts-expect-error` on the line Solid genuinely rejects.
+ *
+ * SOLID DEVIATION (Tier-B, golden-anchored to the Solid type surface):
+ *   The recharts reference declares each handler props-first —
+ *   `onClick={(_curveProps: CurveProps, e) => getRelativeCoordinate(e)}` —
+ *   because recharts' Curve types its handlers as `(props, event)`. In Solid,
+ *   `CurveProps` extends `JSX.PathSVGAttributes<SVGPathElement>`, so `onClick`,
+ *   `onMouseDown`, … are the standard Solid DOM `EventHandlerUnion` —
+ *   single-argument `(e) => void` where `e` is a `MouseEvent`/`TouchEvent`
+ *   whose `currentTarget` is the `SVGPathElement`. The props-first wrapping is an
+ *   implementation detail of `adaptEventHandlers` at runtime, NOT part of the
+ *   prop type. So the assertion ported here is: a Solid Curve event handler
+ *   receives a DOM event that `getRelativeCoordinate` accepts. (The two-argument
+ *   `(_curveProps, e)` React signature is reported in blocked.)
+ */
+import { describe, it } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { Curve, getRelativeCoordinate } from "../../src";
+
+describe("Curve types", () => {
+  it("should allow calling getRelativeCoordinate with the event provided by a Curve event handler", () => {
+    render(() => (
+      <Curve
+        points={[
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+        ]}
+        onClick={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseDown={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseUp={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseMove={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseLeave={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseOver={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseOut={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onMouseEnter={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onTouchStart={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onTouchMove={(e) => {
+          getRelativeCoordinate(e);
+        }}
+        onTouchEnd={(e) => {
+          getRelativeCoordinate(e);
+        }}
+      />
+    ));
+  });
+});

package/test/shape/Dot.spec.tsx

@@ -0,0 +1,73 @@
+// Ported from recharts 3.8.1 test/shape/Dot.spec.tsx.
+// Harness changes only: render from local Solid shim, no React import, render takes a thunk.
+// All assertions are byte-identical to recharts.
+import { describe, test, expect } from "vitest";
+import { render } from "@solidjs/testing-library";
+
+import { Surface, Dot } from "../../src";
+import { assertNotNull } from "../helper/assertNotNull";
+
+describe("<Dot />", () => {
+  test("Render 1 circle in simple Dot", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Dot cx={100} cy={100} r={5} fill="#ff7300" />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-dot")).toHaveLength(1);
+  });
+
+  test("Don't Render any circle when cx is invalid", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Dot cy={100} r={5} fill="#ff7300" />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-dot")).toHaveLength(0);
+  });
+
+  test("Don't Render any circle when cy is invalid", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Dot cx={100} r={5} fill="#ff7300" />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-dot")).toHaveLength(0);
+  });
+
+  test("Don't Render any circle when r is invalid", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Dot cx={100} cy={5} fill="#ff7300" />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-dot")).toHaveLength(0);
+  });
+
+  test("does not pass event handler props to circle", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Dot
+          cx={100}
+          cy={200}
+          r={5}
+          fill="#ff7300"
+          class="my-custom-classname"
+          onClick={() => {}}
+        />
+      </Surface>
+    ));
+    const circle = container.querySelector(".recharts-dot");
+    assertNotNull(circle);
+    expect.soft(circle.getAttributeNames().sort()).toEqual(["class", "cx", "cy", "fill", "r"]);
+    expect.soft(circle.getAttribute("class")).toEqual("recharts-dot my-custom-classname");
+    expect.soft(circle.getAttribute("cx")).toEqual("100");
+    expect.soft(circle.getAttribute("cy")).toEqual("200");
+    expect.soft(circle.getAttribute("fill")).toEqual("#ff7300");
+    expect.soft(circle.getAttribute("r")).toEqual("5");
+  });
+});

package/test/shape/Dot.typed.spec.tsx

@@ -0,0 +1,30 @@
+import { describe, it } from "vitest";
+import { Dot, getRelativeCoordinate } from "../../src";
+
+// Ported from recharts 3.8.1 test/shape/Dot.typed.spec.tsx.
+// Solid deviation: event handlers are native single-arg DOM handlers (recharts passes
+// (dotProps, event)); the lone event arg satisfies getRelativeCoordinate's MousePointer /
+// TouchPointer overloads. Mirrors the sibling Cross.typed.spec.tsx port.
+
+describe("Dot types", () => {
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    return (
+      <Dot
+        cx={10}
+        cy={10}
+        r={5}
+        onClick={(e) => getRelativeCoordinate(e)}
+        onMouseDown={(e) => getRelativeCoordinate(e)}
+        onMouseUp={(e) => getRelativeCoordinate(e)}
+        onMouseMove={(e) => getRelativeCoordinate(e)}
+        onMouseLeave={(e) => getRelativeCoordinate(e)}
+        onMouseOver={(e) => getRelativeCoordinate(e)}
+        onMouseOut={(e) => getRelativeCoordinate(e)}
+        onMouseEnter={(e) => getRelativeCoordinate(e)}
+        onTouchStart={(e) => getRelativeCoordinate(e)}
+        onTouchMove={(e) => getRelativeCoordinate(e)}
+        onTouchEnd={(e) => getRelativeCoordinate(e)}
+      />
+    );
+  });
+});