solid-recharts 0.2.0 → 1.0.0

package/test/shape/Polygon.spec.tsx

@@ -1,357 +0,0 @@
-// Ported from recharts 3.8.1 test/shape/Polygon.spec.tsx.
-// Harness changes only: render/fireEvent from the local Solid shim (thunk), no
-// React import; `className` → `class` (the sanctioned prop rename). Path `d`
-// assertions are byte-identical (the parity signal); snapshots self-record.
-import { render, fireEvent } from "@solidjs/testing-library";
-import { Surface, Polygon } from "../../src";
-import { Coordinate } from "../../src/util/types";
-import { assertNotNull } from "../helper/assertNotNull";
-
-describe("<Polygon />", () => {
-  test("Render 1 path in simple Polygon", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={points} fill="#ff7300" />
-      </Surface>
-    ));
-
-    expect(container.querySelectorAll(".recharts-polygon")).toHaveLength(1);
-    expect(container).toMatchSnapshot();
-  });
-
-  test("Don't render any path when points is empty or null", () => {
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={[]} fill="#ff7300" />
-        <Polygon fill="#ff7300" />
-      </Surface>
-    ));
-
-    expect(container.querySelectorAll(".recharts-polygon")).toHaveLength(0);
-  });
-
-  test("Renders null when points array has no valid points", () => {
-    const invalidPoints = [
-      { x: NaN, y: 100 },
-      { x: 100, y: NaN },
-      { x: "100", y: 100 },
-      null,
-      undefined,
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        {/* @ts-expect-error invalid points type */}
-        <Polygon points={invalidPoints} fill="#ff7300" />
-      </Surface>
-    ));
-    // Renders a path but empty d - what's the point?
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path.getAttribute("d")).toBe("");
-  });
-
-  test("Filters out points with only one valid coordinate", () => {
-    const mixedPoints = [
-      { x: 100, y: 100 },
-      { x: NaN, y: 400 }, // Invalid x, valid y
-      { x: 500, y: NaN }, // Valid x, invalid y
-      { x: 200, y: 200 },
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={mixedPoints} />
-      </Surface>
-    ));
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    expect(path.getAttribute("d")).toBe("M100,100M200,200L100,100");
-  });
-
-  test("Render multi paths in simple Polygon when connectNulls is false", () => {
-    const pointsWithNull = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-      null,
-      { x: 400, y: 300 },
-      { x: 600, y: 300 },
-      { x: 500, y: 50 },
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        {/* @ts-expect-error invalid points in array */}
-        <Polygon points={pointsWithNull} fill="#ff7300" connectNulls={false} />
-      </Surface>
-    ));
-
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    // Should render connected paths without Z, last segment connected to first point
-    expect(path.getAttribute("d")).toMatch(
-      /M100,300L300,300L200,50M400,300L600,300L500,50L100,300/,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test("Render 1 path in simple Polygon when connectNulls is true", () => {
-    const pointsWithNull = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-      null,
-      { x: 400, y: 300 },
-      { x: 600, y: 300 },
-      { x: 500, y: 50 },
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        {/* @ts-expect-error invalid points in array */}
-        <Polygon points={pointsWithNull} fill="#ff7300" connectNulls />
-      </Surface>
-    ));
-
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    // Should render one contiguous shape "M...Z" without intermediate M
-    expect(path.getAttribute("d")).not.toMatch(/M.*Z.*M.*Z/);
-    expect(path.getAttribute("d")).toMatch(/^M.*Z$/);
-    expect(container).toMatchSnapshot();
-  });
-
-  test("Render range polygon with baseLinePoints", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-    ];
-    const baseLinePoints = [
-      { x: 100, y: 400 },
-      { x: 300, y: 400 },
-      { x: 200, y: 200 },
-    ];
-
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon
-          points={points}
-          baseLinePoints={baseLinePoints}
-          stroke="black"
-          fill="blue"
-          class="custom-polygon"
-        />
-      </Surface>
-    ));
-
-    // Should render a group
-    const group = container.querySelector(".recharts-polygon.custom-polygon");
-    assertNotNull(group);
-    expect(group).toBeInTheDocument();
-    expect(group.tagName).toBe("g");
-
-    // Should contain 3 paths: 1 filled area, 1 stroke for points, 1 stroke for baseLinePoints
-    const paths = group.querySelectorAll("path");
-    assertNotNull(paths);
-    expect(paths).toHaveLength(3);
-    // strict noUncheckedIndexedAccess: narrow the indexed elements (harness only)
-    assertNotNull(paths[0]);
-    assertNotNull(paths[1]);
-    assertNotNull(paths[2]);
-
-    // First path: filled area (points key + reversed baseline)
-    expect(paths[0].getAttribute("fill")).toBe("blue");
-    expect(paths[0].getAttribute("stroke")).toBe("none");
-    // Verify d to ensure baseline is reversed and joined correctly
-    expect(paths[0].getAttribute("d")).toBe(
-      "M100,300L300,300L200,50L100,300L200,200L300,400L100,400L200,200Z",
-    );
-
-    // Second path: stroke for points
-    expect(paths[1].getAttribute("fill")).toBe("none");
-    expect(paths[1].getAttribute("stroke")).toBe("black");
-    expect(paths[1].getAttribute("d")).toMatch(/M100,300L300,300L200,50L100,300Z/);
-
-    // Third path: stroke for baseLinePoints
-    expect(paths[2].getAttribute("fill")).toBe("none");
-    expect(paths[2].getAttribute("stroke")).toBe("black");
-    expect(paths[2].getAttribute("d")).toMatch(/M100,400L300,400L200,200L100,400Z/);
-  });
-
-  test("Render range polygon with discontinuous points (no Z in outerPath)", () => {
-    const pointsWithNull = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      null,
-      { x: 400, y: 300 },
-      { x: 600, y: 300 },
-    ];
-    const baseLinePoints = [
-      { x: 100, y: 400 },
-      { x: 600, y: 400 },
-    ];
-
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon
-          // @ts-expect-error invalid points in array
-          points={pointsWithNull}
-          baseLinePoints={baseLinePoints}
-          connectNulls={false}
-          fill="blue"
-        />
-      </Surface>
-    ));
-    // outerPath has no Z.
-    const group = container.querySelector(".recharts-polygon");
-    assertNotNull(group);
-    const path = group.querySelector("path");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    expect(path.getAttribute("fill")).toBe("blue");
-    const d = path.getAttribute("d");
-    expect(d).toContain("M100,300"); // start
-    expect(d).toMatch(/L100,300L600,400/);
-  });
-
-  test("Render range polygon with discontinuous baseline (no Z in rangePath)", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 600, y: 300 },
-    ];
-    const baseLineWithNull: ReadonlyArray<Coordinate> = [
-      { x: 100, y: 400 },
-      // @ts-expect-error null point
-      null,
-      { x: 600, y: 400 },
-    ];
-
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon
-          points={points}
-          baseLinePoints={baseLineWithNull}
-          connectNulls={false}
-          fill="blue"
-        />
-      </Surface>
-    ));
-
-    const group = container.querySelector(".recharts-polygon");
-    assertNotNull(group);
-    const path = group.querySelector("path");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    expect(path.getAttribute("fill")).toBe("none");
-
-    const d = path.getAttribute("d");
-    expect(d).toContain("M100,300");
-    expect(d).toContain("600,400");
-    expect(d).toContain("100,400");
-    expect(d).not.toMatch(/Z$/);
-  });
-
-  test("Render range polygon without stroke", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-    ];
-    const baseLinePoints = [
-      { x: 100, y: 400 },
-      { x: 300, y: 400 },
-      { x: 200, y: 200 },
-    ];
-
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={points} baseLinePoints={baseLinePoints} stroke="none" fill="blue" />
-      </Surface>
-    ));
-
-    const group = container.querySelector(".recharts-polygon");
-    assertNotNull(group);
-    const paths = group.querySelectorAll("path");
-    expect(paths).toHaveLength(1);
-    assertNotNull(paths[0]);
-    expect(paths[0].getAttribute("fill")).toBe("blue");
-  });
-
-  test("Handles events correctly", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-    ];
-    const onClick = vi.fn();
-    const onMouseEnter = vi.fn();
-    const onMouseLeave = vi.fn();
-
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon
-          points={points}
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-        />
-      </Surface>
-    ));
-
-    const path = container.querySelector(".recharts-polygon");
-    if (path) {
-      fireEvent.click(path);
-      expect(onClick).toHaveBeenCalled();
-      fireEvent.mouseEnter(path);
-      expect(onMouseEnter).toHaveBeenCalled();
-      fireEvent.mouseLeave(path);
-      expect(onMouseLeave).toHaveBeenCalled();
-    }
-  });
-
-  test("Renders standard polygon with custom className", () => {
-    const points = [
-      { x: 100, y: 300 },
-      { x: 300, y: 300 },
-      { x: 200, y: 50 },
-    ];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={points} class="my-custom-polygon" />
-      </Surface>
-    ));
-    expect(container.querySelector(".recharts-polygon.my-custom-polygon")).toBeInTheDocument();
-  });
-
-  test("Handles single point correctly", () => {
-    const singlePoint = [{ x: 100, y: 100 }];
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={singlePoint} />
-      </Surface>
-    ));
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    expect(path.getAttribute("d")).toBe("M100,100L100,100Z");
-  });
-
-  test("Correctly handles last invalid point if it causes empty segment", () => {
-    const { container } = render(() => (
-      <Surface width={400} height={400}>
-        <Polygon points={[{ x: NaN, y: NaN }]} />
-      </Surface>
-    ));
-    const path = container.querySelector(".recharts-polygon");
-    assertNotNull(path);
-    expect(path).toBeInTheDocument();
-    // what's the point of rendering an empty path?
-    expect(path.getAttribute("d")).toBe("");
-  });
-});

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

@@ -1,28 +0,0 @@
-import { describe, it } from "vitest";
-import { Polygon, getRelativeCoordinate } from "../../src";
-
-// Ported from recharts 3.8.1 test/shape/Polygon.typed.spec.tsx.
-
-describe("Polygon types", () => {
-  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
-    return (
-      <Polygon
-        points={[
-          { x: 10, y: 10 },
-          { x: 20, y: 20 },
-        ]}
-        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)}
-      />
-    );
-  });
-});