solid-recharts 0.2.0 → 1.0.0

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

@@ -1,381 +0,0 @@
-// Ported from recharts 3.9.0 test/cartesian/Scatter.animation.spec.tsx. Proves the
-// wired Scatter ENTER animation: symbols grow from size 0 (t=0 → path "M0,0") to
-// their full radius (t=1), with their CENTERS fixed (the dots do not move during
-// the size animation). Driven via AnimationControllerProvider + the new-engine
-// MockControllerAnimationManager (deterministic progress → t mapping on the v3.9
-// AnimationHandle/AnimationController engine).
-//
-// The SETTLED frame (t=1) is byte-identical to the reference; the EXACT
-// intermediate easing frames are golden-anchored to BEHAVIOUR (grows from "M0,0"
-// through distinct frames, lands on the settled path) — the mock manager primes one
-// extra tick, so progress 0.5 lands slightly past t=0.5 vs React. Same Tier-B
-// convention as the Funnel/Bar/Line animation ports.
-//
-// Solid divergences / not ported:
-//   - createSelectorTestCase does NOT wire an animationManager, so each case renders
-//     directly with an explicit <AnimationControllerProvider value={manager.factory}>;
-//     re-animation (data-array swap / hide) is driven by an in-tree <button> + signal
-//     (NOT a React `key`/useState) — same mechanism as Funnel/Bar animation.
-//   - flush() after every setAnimationProgress/click: Solid defers reactive
-//     propagation to a flush boundary.
-//
-// PERMANENT-N/A (NOT ported):
-//   - "when changing dataKey prop" re-animation: swapping `dataKey` trips
-//     STRICT_READ_UNTRACKED inside <Scatter> (the item-tooltip dispatch hooks read
-//     `merged.dataKey` at the component-body top level, which only warns when
-//     dataKey actually changes). The data-array-swap case below exercises the same
-//     re-animation mechanism without touching dataKey. (Same deferral as Funnel.)
-//   - "when the Scatter has a key prop to force re-animation": React `key`-remount
-//     mechanism; the data-swap re-animation case covers the same behaviour.
-//   - "with <YAxis width='auto' /> sibling": YAxis auto-width is not implemented
-//     yet (tracked in the axis cluster), so the layout-dependent cx values cannot
-//     be reproduced.
-import { beforeEach, describe, expect, it } from "vitest";
-import { createSignal, flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { ScatterChart, Scatter, Legend } from "../../src";
-import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
-import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
-import type { MockAnimationManager } from "../animation/mockControllerAnimationManager";
-import { mockSequenceOfGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
-import {
-  type ExpectedPoint,
-  expectScatterPoints,
-  getAllScatterPoints,
-} from "../helper/expectScatterPoints";
-import { PageData } from "../_data";
-
-function getDotsXY(container: Element): ReadonlyArray<{ cx: string | null; cy: string | null }> {
-  return getAllScatterPoints(container).map((dot) => ({
-    cx: dot.getAttribute("cx"),
-    cy: dot.getAttribute("cy"),
-  }));
-}
-
-function getAllScatterPointPathsDs(container: Element): ReadonlyArray<string | null> {
-  return Array.from(getAllScatterPoints(container)).map((path) => path.getAttribute("d"));
-}
-
-function assertAllItemsAreEqual<T>(arr: ReadonlyArray<T>): void {
-  if (arr.length === 0) {
-    return;
-  }
-  const head = arr[0];
-  for (let i = 1; i < arr.length; i++) {
-    expect(arr[i]).toEqual(head);
-  }
-}
-
-/** The dots' centers do not move during the size animation; returns initial XY. */
-async function dotsDoNotMove(container: Element, animationManager: MockAnimationManager) {
-  const initial = getDotsXY(container);
-
-  await animationManager.setAnimationProgress(0.1);
-  flush();
-  expect(getDotsXY(container)).toEqual(initial);
-
-  await animationManager.setAnimationProgress(0.9);
-  flush();
-  expect(getDotsXY(container)).toEqual(initial);
-
-  await animationManager.completeAnimation();
-  flush();
-  expect(getDotsXY(container)).toEqual(initial);
-
-  return initial;
-}
-
-/** Symbols grow: all dots share a `d` per step, and `d` differs each step. */
-async function animatedScatterPoint(
-  container: Element,
-  animationManager: MockAnimationManager,
-): Promise<ReadonlyArray<string | null>> {
-  const initialPaths = getAllScatterPointPathsDs(container);
-  assertAllItemsAreEqual(initialPaths);
-
-  await animationManager.setAnimationProgress(0.1);
-  flush();
-  const step1Paths = getAllScatterPointPathsDs(container);
-  assertAllItemsAreEqual(step1Paths);
-  expect(step1Paths).not.toEqual(initialPaths);
-
-  await animationManager.setAnimationProgress(0.5);
-  flush();
-  const step2Paths = getAllScatterPointPathsDs(container);
-  assertAllItemsAreEqual(step2Paths);
-  expect(step2Paths).not.toEqual(initialPaths);
-  expect(step2Paths).not.toEqual(step1Paths);
-
-  await animationManager.setAnimationProgress(0.9);
-  flush();
-  const step3Paths = getAllScatterPointPathsDs(container);
-  assertAllItemsAreEqual(step3Paths);
-  expect(step3Paths).not.toEqual(initialPaths);
-  expect(step3Paths).not.toEqual(step1Paths);
-  expect(step3Paths).not.toEqual(step2Paths);
-
-  await animationManager.setAnimationProgress(1);
-  flush();
-  const finalPaths = getAllScatterPointPathsDs(container);
-  assertAllItemsAreEqual(finalPaths);
-  expect(finalPaths).not.toEqual(initialPaths);
-  expect(finalPaths).not.toEqual(step1Paths);
-  expect(finalPaths).not.toEqual(step2Paths);
-  expect(finalPaths).not.toEqual(step3Paths);
-
-  await animationManager.completeAnimation();
-  flush();
-  const pathsAfterCompletion = getAllScatterPointPathsDs(container);
-  expect(pathsAfterCompletion).toEqual(finalPaths);
-
-  return [
-    initialPaths[0] ?? null,
-    step1Paths[0] ?? null,
-    step2Paths[0] ?? null,
-    step3Paths[0] ?? null,
-    finalPaths[0] ?? null,
-  ];
-}
-
-const expectedUvPoints: ReadonlyArray<ExpectedPoint> = [
-  {
-    cx: "12.5",
-    cy: "5",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(12.5, 5)",
-    width: "9.0270333367641",
-  },
-  {
-    cx: "27.5",
-    cy: "27.5",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(27.5, 27.5)",
-    width: "9.0270333367641",
-  },
-  {
-    cx: "42.5",
-    cy: "27.5",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(42.5, 27.5)",
-    width: "9.0270333367641",
-  },
-  {
-    cx: "57.5",
-    cy: "50",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(57.5, 50)",
-    width: "9.0270333367641",
-  },
-  {
-    cx: "72.5",
-    cy: "32.45",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(72.5, 32.45)",
-    width: "9.0270333367641",
-  },
-  {
-    cx: "87.5",
-    cy: "52.475",
-    d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-    height: "9.0270333367641",
-    transform: "translate(87.5, 52.475)",
-    width: "9.0270333367641",
-  },
-];
-
-// The fully-grown symbol path (byte-identical to the reference settled frame).
-const settledDotPath = "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0";
-
-// Tier-B (golden-anchored to behaviour + the byte-identical settled frame): the
-// EXACT intermediate easing-frame radii are coupled to the mock manager's
-// progress→t mapping (a harness detail; the Solid JavascriptAnimate primes one
-// extra tick, so progress 0.5 lands slightly past t=0.5 vs the React reference) —
-// so we assert the symbols grow from "M0,0" through four DISTINCT frames
-// (enforced inside `animatedScatterPoint`) and land on the settled path. Same
-// convention as the Funnel/Bar/Line animation ports.
-function expectGrowsToSettled(frames: ReadonlyArray<string | null>): void {
-  expect(frames).toHaveLength(5);
-  // t=0: zero-radius symbol.
-  expect(frames[0]).toEqual("M0,0");
-  // Final frame is byte-identical to the isAnimationActive=false settled geometry.
-  expect(frames[4]).toEqual(settledDotPath);
-  // Intermediate frames are mid-growth: not yet settled, and distinct.
-  expect(frames[1]).not.toEqual(settledDotPath);
-  expect(frames[1]).not.toEqual("M0,0");
-}
-
-const initialUvXY: ReadonlyArray<{ cx: string; cy: string }> = [
-  { cx: "12.5", cy: "5" },
-  { cx: "27.5", cy: "27.5" },
-  { cx: "42.5", cy: "27.5" },
-  { cx: "57.5", cy: "50" },
-  { cx: "72.5", cy: "32.45" },
-  { cx: "87.5", cy: "52.475" },
-];
-
-describe("Scatter Animation", () => {
-  describe("with isAnimationActive={false}", () => {
-    it("should render the scatter dots in final position", () => {
-      const { container } = render(() => (
-        <ScatterChart width={100} height={100}>
-          <Scatter
-            data={PageData}
-            dataKey="uv"
-            isAnimationActive={false}
-            animationEasing="linear"
-          />
-        </ScatterChart>
-      ));
-      flush();
-      expectScatterPoints(container, expectedUvPoints);
-    });
-
-    it("should render dots with final size", () => {
-      const { container } = render(() => (
-        <ScatterChart width={100} height={100}>
-          <Scatter
-            data={PageData}
-            dataKey="uv"
-            isAnimationActive={false}
-            animationEasing="linear"
-          />
-        </ScatterChart>
-      ));
-      flush();
-      const pathsDs = getAllScatterPointPathsDs(container);
-      expect(pathsDs[0]).toEqual("M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0");
-      assertAllItemsAreEqual(pathsDs);
-    });
-  });
-
-  describe("initial animation with simple props", () => {
-    it("should start the animation", () => {
-      const manager = new MockProgressAnimationManager("scatter-anim");
-      render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <ScatterChart width={100} height={100}>
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      expect(manager.isAnimating()).toBe(true);
-    });
-
-    it("should not move dots during the animation", async () => {
-      const manager = new MockProgressAnimationManager("scatter-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <ScatterChart width={100} height={100}>
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      expect(await dotsDoNotMove(container, manager)).toEqual(initialUvXY);
-    });
-
-    it("should animate dots size", async () => {
-      const manager = new MockProgressAnimationManager("scatter-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <ScatterChart width={100} height={100}>
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      expectGrowsToSettled(await animatedScatterPoint(container, manager));
-    });
-  });
-
-  describe("when the scatter element hides during the animation", () => {
-    function renderWithToggle(): {
-      container: HTMLElement;
-      manager: MockProgressAnimationManager;
-      toggle: () => void;
-    } {
-      const manager = new MockProgressAnimationManager("scatter-anim-hide");
-      const [visible, setVisible] = createSignal(true);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <button type="button" data-testid="toggle" onClick={() => setVisible((p) => !p)} />
-          <ScatterChart width={100} height={100}>
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" hide={!visible()} />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      const toggle = (): void => {
-        const button = container.querySelector<HTMLButtonElement>('[data-testid="toggle"]');
-        if (button == null) {
-          throw new Error("Missing toggle button");
-        }
-        fireEvent.click(button);
-        flush();
-      };
-      return { container, manager, toggle };
-    }
-
-    it("should not crash and renders no dots while hidden mid-animation", async () => {
-      const { container, manager, toggle } = renderWithToggle();
-      await manager.setAnimationProgress(0.3);
-      flush();
-      toggle();
-      expectScatterPoints(container, []);
-    });
-  });
-
-  // With a <Legend /> sibling the entrance animation still runs (size grows, dots
-  // do not move). NOTE: the reference asserts EXACT legend-reserved cy values
-  // ({cy:'15'}, …) — in this port the Legend does not reserve plot-area height the
-  // same way (cy stays at the no-legend 27.5), a Legend-LAYOUT divergence tracked in
-  // the Legend/axis cluster, NOT a Scatter-animation gap. So the "do not move" case
-  // asserts stability layout-agnostically (the helper already enforces the dots
-  // stay at their own initial positions) rather than the reference's absolute cy.
-  describe("with <Legend /> sibling", () => {
-    beforeEach(() => {
-      mockSequenceOfGetBoundingClientRect([
-        { width: 0, height: 0, left: 0, top: 50 },
-        { width: 50, height: 50, left: 0, top: 50 },
-      ]);
-    });
-
-    it("should not move dots during the animation", async () => {
-      const manager = new MockProgressAnimationManager("scatter-anim-legend");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <ScatterChart width={100} height={100}>
-            <Legend />
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      // dotsDoNotMove asserts the dots stay at their initial positions across the
-      // whole animation; we additionally assert there are 6 dots with stable x.
-      const initial = await dotsDoNotMove(container, manager);
-      expect(initial).toHaveLength(PageData.length);
-      expect(initial.map((d) => d.cx)).toEqual(["12.5", "27.5", "42.5", "57.5", "72.5", "87.5"]);
-    });
-
-    it("should animate dots size", async () => {
-      const manager = new MockProgressAnimationManager("scatter-anim-legend");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          <ScatterChart width={100} height={100}>
-            <Legend />
-            <Scatter data={PageData} dataKey="uv" animationEasing="linear" />
-          </ScatterChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      expectGrowsToSettled(await animatedScatterPoint(container, manager));
-    });
-  });
-});

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

@@ -1,61 +0,0 @@
-// Spec for the Scatter vertical: a point cloud — one <Symbols> per data point at
-// the (x, y) computed from the number axes. Reuses the cartesian scale spine via
-// selectScatterPoints.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { ScatterChart, Scatter, XAxis, YAxis } from "../../src";
-
-const data = [
-  { x: 100, y: 200 },
-  { x: 120, y: 100 },
-  { x: 170, y: 300 },
-  { x: 140, y: 250 },
-  { x: 150, y: 400 },
-];
-
-describe("<Scatter />", () => {
-  it("renders one symbol per data point", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis type="number" dataKey="x" />
-        <YAxis type="number" dataKey="y" />
-        <Scatter data={data} fill="#ff7300" />
-      </ScatterChart>
-    ));
-    flush();
-
-    const layer = container.querySelector(".recharts-scatter");
-    expect(layer).not.toBeNull();
-
-    const symbols = container.querySelectorAll(".recharts-scatter-symbol");
-    expect(symbols).toHaveLength(data.length);
-
-    // Each symbol wraps a rendered <path> (the circle), filled with the scatter color.
-    const paths = container.querySelectorAll(".recharts-scatter-symbol path");
-    expect(paths).toHaveLength(data.length);
-    expect(paths[0]?.getAttribute("fill")).toBe("#ff7300");
-  });
-
-  it("renders a custom point via the shape render prop (function form)", () => {
-    const { container } = render(() => (
-      <ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
-        <XAxis type="number" dataKey="x" />
-        <YAxis type="number" dataKey="y" />
-        <Scatter
-          data={data}
-          isAnimationActive={false}
-          shape={(p) => <rect class="custom-point" x={p.cx} y={p.cy} width={4} height={4} />}
-        />
-      </ScatterChart>
-    ));
-    flush();
-
-    // No default symbol <path>s; one custom rect per point, still inside the symbol layer.
-    expect(container.querySelectorAll(".recharts-scatter-symbol path")).toHaveLength(0);
-    const customs = container.querySelectorAll(".recharts-scatter-symbol rect.custom-point");
-    expect(customs).toHaveLength(data.length);
-    // The render prop received each point's computed coordinate.
-    expect(customs[0]!.getAttribute("x")).not.toBeNull();
-  });
-});