solid-recharts 0.1.0

package/test/cartesian/Line.sparseAnimationPath.spec.tsx

@@ -0,0 +1,98 @@
+// Port of recharts 3.8.1 test/cartesian/Line.sparseAnimationPath.spec.tsx
+// (commit 7a23854). The reference asserts that an animated Line over SPARSE data
+// (only two `redLine` values among seven rows) still renders a single curve whose
+// path `d` keeps a line-to ("L") command — both mid-animation and after it
+// completes. NaN/undefined points must not break the line-to.
+//
+// Harness adaptation: the Solid Line draws via stroke-dasharray (LineDrawShape)
+// over points morphed by AnimatedItems; the `L` command is present at every
+// progress. We drive the wired v3.9 animation with the AnimationControllerProvider
+// + MockControllerAnimationManager pattern (the new engine). getTotalLength is
+// mocked on SVGElement.prototype (jsdom lacks it).
+import { describe, expect, it, beforeAll, afterAll } from "vitest";
+import { flush } from "solid-js";
+import { render } from "../helper/render";
+import { ComposedChart, Line, XAxis } from "../../src";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
+import { assertNotNull } from "../helper/assertNotNull";
+
+const data = [
+  { index: 10000, red: 1643, blue: 790 },
+  { index: 1666, red: 182, blue: 42 },
+  { index: 625, red: 56, blue: 11 },
+  { index: 300, redLine: 0 },
+  { index: 10000, redLine: 1522 },
+  { index: 600, blueLine: 0 },
+  { index: 10000, blueLine: 678 },
+];
+
+type WithTotalLength = { getTotalLength?: () => number };
+
+function getAnimatedLines(container: HTMLElement): SVGPathElement[] {
+  return Array.from(container.querySelectorAll<SVGPathElement>(".recharts-line-curve"));
+}
+
+function getPathCommands(path: SVGPathElement): string[] {
+  const d = path.getAttribute("d");
+  if (d == null) {
+    throw new Error("Expected line path to have a d attribute");
+  }
+
+  return Array.from(d.matchAll(/[A-Za-z]/g), (match) => match[0]);
+}
+
+describe("Line sparse animation path commands", () => {
+  let original: (() => number) | undefined;
+  beforeAll(() => {
+    const proto = SVGElement.prototype as WithTotalLength;
+    original = proto.getTotalLength;
+    proto.getTotalLength = (): number => 100;
+  });
+  afterAll(() => {
+    (SVGElement.prototype as WithTotalLength).getTotalLength = original;
+  });
+
+  function renderTestCase(): {
+    container: HTMLElement;
+    animationManager: MockProgressAnimationManager;
+  } {
+    const animationManager = new MockProgressAnimationManager("line-sparse");
+    const { container } = render(() => (
+      <AnimationControllerProvider value={animationManager.factory}>
+        <ComposedChart data={data} width={100} height={100}>
+          <XAxis dataKey="index" type="number" />
+          <Line dataKey="redLine" stroke="red" />
+        </ComposedChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+    return { container, animationManager };
+  }
+
+  it("should keep a line-to command in the animated sparse line path", async () => {
+    const { container, animationManager } = renderTestCase();
+
+    await animationManager.setAnimationProgress(0.5);
+    flush();
+
+    const lines = getAnimatedLines(container);
+    expect(lines).toHaveLength(1);
+    const path = lines[0];
+    assertNotNull(path);
+    expect(getPathCommands(path)).toContain("L");
+  });
+
+  it("should contain a line-to command after the animation completes", async () => {
+    const { container, animationManager } = renderTestCase();
+
+    await animationManager.completeAnimation();
+    flush();
+
+    const lines = getAnimatedLines(container);
+    expect(lines).toHaveLength(1);
+    const path = lines[0];
+    assertNotNull(path);
+    expect(getPathCommands(path)).toContain("L");
+  });
+});

package/test/cartesian/Line.spec.tsx

@@ -0,0 +1,471 @@
+// Port of recharts 3.8.1 test/cartesian/Line.spec.tsx (commit 7a23854).
+// Tier A (byte-identical DOM assertions): simple path, strokeDasharray=0,
+// custom component, dot=null, clipDot false/true, explicit id, empty data,
+// activeDot true/false.
+// Tier B (React-render-count / internal-prop snapshots adapted):
+//   - ErrorBar-report cases: value asserted via createSelectorTestCase selector
+//     (the Solid-idiomatic equivalent of recharts' <Customized> spy); React
+//     render-count (toHaveBeenCalledTimes) dropped.
+//   - events cases: handler first-arg is the resolved curve props (recharts'
+//     adaptEventHandlers props-first convention); asserted via objectContaining
+//     on the stable observable subset (React-only keys pathRef/width/height
+//     dropped). userEvent → fireEvent.
+//   - tooltip-payload case: value byte-identical; render-count dropped.
+import { describe, expect, it, test, vi } from "vitest";
+import { ErrorBar, Line, LineChart, LineProps, Tooltip, XAxis } from "../../src";
+import { selectErrorBarsSettings } from "../../src/state/selectors/axisSelectors";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { selectTooltipPayload } from "../../src/state/selectors/tooltipSelectors";
+import { expectLines } from "../helper/expectLine";
+import { PageData } from "../_data";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { lineChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import { assertNotNull } from "../helper/assertNotNull";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import { fireEvent, render } from "../helper/render";
+
+describe("<Line />", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  const data = [
+    { x: 10, y: 50, value: 100 },
+    { x: 50, y: 50, value: 100 },
+    { x: 90, y: 50, value: 100 },
+    { x: 130, y: 50, value: 100 },
+    { x: 170, y: 50, value: 100 },
+  ];
+
+  it("Renders a path in a simple Line", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        <Line isAnimationActive={false} data={data} dataKey="y" />
+      </LineChart>
+    ));
+
+    expectLines(container, [{ d: "M5,86.667L127.5,86.667L250,86.667L372.5,86.667L495,86.667" }]);
+  });
+
+  it("Forwards the user `class` onto the line group (recharts clsx('recharts-line', className))", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        <Line isAnimationActive={false} data={data} dataKey="y" class="my-line" />
+      </LineChart>
+    ));
+
+    const group = container.querySelector(".recharts-line");
+    expect(group).not.toBeNull();
+    expect(group?.getAttribute("class")).toContain("recharts-line my-line");
+  });
+
+  it("Does not fall into infinite loop if strokeDasharray is 0", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        <Line data={data} dataKey="y" strokeDasharray="0" />
+      </LineChart>
+    ));
+
+    const line = container.querySelectorAll(".recharts-line-curve");
+    expect(line).toHaveLength(1);
+
+    expect(line[0]!.getAttribute("stroke-dasharray")).toEqual("0px 0px");
+  });
+
+  it("Can be rendered in custom component", () => {
+    const CustomLine = (props: LineProps) => {
+      return <Line {...props} />;
+    };
+
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        <CustomLine isAnimationActive={false} data={data} dataKey="value" />
+      </LineChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line-curve")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-line-dot")).toHaveLength(5);
+  });
+
+  it("Does not throw when dot is null", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        {/* @ts-expect-error Test that the error Cannot read properties of null (reading 'clipDot') does not appear in JS projects */}
+        <Line isAnimationActive={false} data={data} dataKey="value" dot={null} />
+      </LineChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line-curve")).toHaveLength(1);
+    expect(container.querySelectorAll(".recharts-line-dot")).toHaveLength(0);
+  });
+
+  it("Does not render clip dot when clipDot is false", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500} data={data}>
+        <Line isAnimationActive={false} dataKey="x" dot={{ clipDot: false }} />
+        {/* Line must have an XAxis or YAxis in order for clips to render */}
+        <XAxis allowDataOverflow />
+      </LineChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line-curve")).toHaveLength(1);
+    const dots = container.querySelectorAll(".recharts-line-dot");
+    expect(dots).toHaveLength(5);
+
+    const dotsWrapper = container.querySelector(".recharts-line-dots");
+    assertNotNull(dotsWrapper);
+    // Well this is confusing. When clipDot is false the className contains 'dots'. AKA clip path name includes what is showing, rather than what is clipped.
+    expect(dotsWrapper.getAttribute("clip-path")).toContain("url(#clipPath-dots-recharts-line");
+  });
+
+  it("Does render clip dot when clipDot is true", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500} data={data}>
+        <Line isAnimationActive={false} dataKey="x" dot={{ clipDot: true }} />
+        {/* Line must have an XAxis or YAxis in order for clips to render */}
+        <XAxis allowDataOverflow />
+      </LineChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line-curve")).toHaveLength(1);
+
+    const dots = container.querySelectorAll(".recharts-line-dot");
+    expect(dots).toHaveLength(5);
+
+    const dotsWrapper = container.querySelector(".recharts-line-dots");
+    assertNotNull(dotsWrapper);
+    expect(dotsWrapper.hasAttribute("clip-path")).toBe(true);
+    expect(dotsWrapper.getAttribute("clip-path")).toContain("url(#clipPath-recharts-line");
+  });
+
+  describe("with explicit ID prop", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={500}>
+        <Line isAnimationActive={false} data={data} dataKey="y" id="test-line-id" />
+        <XAxis allowDataOverflow />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should pass id prop to an element in the DOM", () => {
+      const { container } = renderTestCase();
+
+      const line = container.querySelector("#test-line-id");
+      assertNotNull(line);
+      expect(line.tagName).toBe("path");
+      expect(line.classList.value).toBe("recharts-curve recharts-line-curve");
+    });
+
+    it("should set the ID on the clipPath, if it needs clipping", () => {
+      const { container } = renderTestCase();
+
+      const clipPath = container.querySelector("#clipPath-test-line-id");
+      assertNotNull(clipPath);
+      expect(clipPath.tagName).toBe("clipPath");
+    });
+  });
+
+  it("Don't render any path when data is empty", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={500}>
+        <Line data={[]} />
+      </LineChart>
+    ));
+
+    expect(container.querySelectorAll(".recharts-line-curve")).toHaveLength(0);
+  });
+
+  it("should report its ErrorBars to state", () => {
+    const { spy } = createSelectorTestCase((props) => (
+      <LineChart width={500} height={500}>
+        <Line data={data} isAnimationActive={false} dataKey="y">
+          <ErrorBar dataKey="x" />
+        </Line>
+        {props.children}
+      </LineChart>
+    ))((state) => selectErrorBarsSettings(state, "yAxis", 0));
+
+    expectLastCalledWith(spy, [
+      {
+        dataKey: "x",
+        // this defaults to y even in an absence of explicit prop
+        direction: "y",
+      },
+    ]);
+  });
+
+  it("should report its ErrorBars to state in vertical chart", () => {
+    const { spy } = createSelectorTestCase((props) => (
+      <LineChart width={500} height={500} layout="vertical">
+        <Line data={data} isAnimationActive={false} dataKey="y">
+          <ErrorBar dataKey="x" />
+        </Line>
+        {props.children}
+      </LineChart>
+    ))((state) => selectErrorBarsSettings(state, "xAxis", 0));
+
+    expectLastCalledWith(spy, [
+      {
+        dataKey: "x",
+        // in horizontal chart the default direction is y, in vertical it's x
+        direction: "x",
+      },
+    ]);
+  });
+
+  describe("activeDot", () => {
+    test("Renders active dot when activeDot=true", () => {
+      const { container } = render(() => (
+        <LineChart width={400} height={400} data={PageData}>
+          <Line activeDot type="monotone" dataKey="uv" />
+          <Tooltip />
+        </LineChart>
+      ));
+
+      showTooltip(container, lineChartMouseHoverTooltipSelector);
+      expect(container.querySelectorAll(".recharts-active-dot")).toHaveLength(1);
+    });
+
+    test("Renders no active dot when activeDot=false", () => {
+      const { container } = render(() => (
+        <LineChart width={400} height={400} data={PageData}>
+          <Line activeDot={false} type="monotone" dataKey="uv" />
+          <Tooltip />
+        </LineChart>
+      ));
+
+      showTooltip(container, lineChartMouseHoverTooltipSelector);
+      expect(container.querySelectorAll(".recharts-active-dot")).toHaveLength(0);
+    });
+
+    test("passes props to activeDot function", () => {
+      const spy = vi.fn();
+      const { container } = render(() => (
+        <LineChart width={400} height={400} data={PageData}>
+          <Line activeDot={spy} type="monotone" dataKey="uv" />
+          <Tooltip />
+        </LineChart>
+      ));
+
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      showTooltip(container, lineChartMouseHoverTooltipSelector);
+
+      expect(spy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          cx: 161,
+          cy: 102.5,
+          fill: "#3182bd",
+          dataKey: "uv",
+          index: 2,
+          payload: {
+            amt: 2400,
+            name: "Page C",
+            pv: 1398,
+            uv: 300,
+          },
+          r: 4,
+          stroke: "#fff",
+          strokeWidth: 2,
+          value: 300,
+        }),
+      );
+    });
+  });
+
+  describe("events", () => {
+    const points = [
+      {
+        payload: { value: 100, x: 10, y: 50 },
+        value: 50,
+        x: 5,
+        y: 86.66666666666666,
+      },
+      {
+        payload: { value: 100, x: 50, y: 50 },
+        value: 50,
+        x: 127.5,
+        y: 86.66666666666666,
+      },
+      {
+        payload: { value: 100, x: 90, y: 50 },
+        value: 50,
+        x: 250,
+        y: 86.66666666666666,
+      },
+      {
+        payload: { value: 100, x: 130, y: 50 },
+        value: 50,
+        x: 372.5,
+        y: 86.66666666666666,
+      },
+      {
+        payload: { value: 100, x: 170, y: 50 },
+        value: 50,
+        x: 495,
+        y: 86.66666666666666,
+      },
+    ];
+    it("should fire onClick event when clicking on the line", () => {
+      const handleClick = vi.fn();
+      const { container } = render(() => (
+        <LineChart width={500} height={500} data={data}>
+          <Line isAnimationActive={false} dataKey="y" onClick={handleClick} />
+        </LineChart>
+      ));
+
+      const linePath = container.querySelector(".recharts-line-curve");
+      assertNotNull(linePath);
+      fireEvent.click(linePath);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expectLastCalledWith(
+        handleClick,
+        expect.objectContaining({
+          connectNulls: false,
+          fill: "none",
+          layout: "horizontal",
+          stroke: "#3182bd",
+          type: "linear",
+          points,
+        }),
+        expect.any(Object),
+      );
+    });
+
+    it("should fire onMouseOver and onMouseOut events when hovering over the line", () => {
+      const handleMouseOver = vi.fn();
+      const handleMouseOut = vi.fn();
+
+      const { container } = render(() => (
+        <LineChart width={500} height={500} data={data}>
+          <Line
+            isAnimationActive={false}
+            dataKey="y"
+            onMouseOver={handleMouseOver}
+            onMouseOut={handleMouseOut}
+          />
+        </LineChart>
+      ));
+
+      const linePath = container.querySelector(".recharts-line-curve");
+      assertNotNull(linePath);
+      fireEvent.mouseOver(linePath);
+      expect(handleMouseOver).toHaveBeenCalledTimes(1);
+      expectLastCalledWith(
+        handleMouseOver,
+        expect.objectContaining({
+          connectNulls: false,
+          fill: "none",
+          layout: "horizontal",
+          points,
+          stroke: "#3182bd",
+          type: "linear",
+        }),
+        expect.any(Object),
+      );
+
+      fireEvent.mouseOut(linePath);
+      expect(handleMouseOut).toHaveBeenCalledTimes(1);
+      expectLastCalledWith(
+        handleMouseOut,
+        expect.objectContaining({
+          connectNulls: false,
+          fill: "none",
+          layout: "horizontal",
+          points,
+          stroke: "#3182bd",
+          type: "linear",
+        }),
+        expect.any(Object),
+      );
+    });
+
+    it("should fire onTouchMove and onTouchEnd events when touching the line", () => {
+      const handleTouchMove = vi.fn();
+      const handleTouchEnd = vi.fn();
+
+      const { container } = render(() => (
+        <LineChart width={500} height={500} data={data} throttledEvents={[]}>
+          <Line
+            isAnimationActive={false}
+            dataKey="y"
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+          />
+        </LineChart>
+      ));
+
+      const linePath = container.querySelector(".recharts-line-curve");
+      assertNotNull(linePath);
+      fireEvent.touchMove(linePath, { touches: [{ clientX: 200, clientY: 200 }] });
+      expect(handleTouchMove).toHaveBeenCalledTimes(1);
+      expectLastCalledWith(
+        handleTouchMove,
+        expect.objectContaining({
+          connectNulls: false,
+          fill: "none",
+          layout: "horizontal",
+          points,
+          stroke: "#3182bd",
+          type: "linear",
+        }),
+        expect.any(Object),
+      );
+    });
+  });
+
+  describe("Tooltip integration", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={100} height={100}>
+        <Line data={data} dataKey="y" isAnimationActive={false} />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select tooltip payload", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "0"));
+      expectLastCalledWith(spy, [
+        {
+          color: "#3182bd",
+          dataKey: "y",
+          fill: "#fff",
+          graphicalItemId: expect.stringMatching(/^recharts-line-.+/),
+          hide: false,
+          name: "y",
+          nameKey: undefined,
+          payload: {
+            value: 100,
+            x: 10,
+            y: 50,
+          },
+          stroke: "#3182bd",
+          strokeWidth: 1,
+          type: undefined,
+          unit: undefined,
+          value: 50,
+        },
+      ]);
+    });
+  });
+
+  describe("Tooltip integration with tooltipType", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={100} height={100}>
+        <Line data={data} dataKey="y" tooltipType="none" isAnimationActive={false} />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should forward tooltipType as the payload entry type", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "0"));
+      expectLastCalledWith(spy, [
+        expect.objectContaining({
+          dataKey: "y",
+          type: "none",
+          value: 50,
+        }),
+      ]);
+    });
+  });
+});