solid-recharts 0.2.1 → 1.0.0

package/test/state/selectors/selectStackGroups.spec.tsx

@@ -1,322 +0,0 @@
-// Port of recharts 3.8.1 test/state/selectors/selectStackGroups.spec.tsx (commit 7a23854).
-// Tier-B selector values, golden-anchored. Harness deltas: render+Comp+spy →
-// createSelectorTestCase; `useAppSelectorWithStableTest` → plain selector (no reselect
-// stability in the Solid store). Stacked-data golden uses the toBeRechartsStackedData
-// matcher registered by expectStackGroups (side-effect import). React render-count
-// (toHaveBeenCalledTimes) assertions dropped.
-// The "keep the order ... after hiding one item and displaying it again" case uses a
-// Solid signal (in place of React useState) for the hidden-items set, toggled via the
-// Legend onClick + a fireEvent.click on the legend item. (Parity fix shipped alongside:
-// <Legend> now forwards onClick/onMouseEnter/onMouseLeave to <DefaultLegendContent>,
-// which already wires them onto each .recharts-legend-item.)
-import { createSignal, flush } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { describe, expect, it } from "vitest";
-import { fireEvent } from "@solidjs/testing-library";
-import type { RechartsRootState } from "../../../src/state/store";
-import { selectStackGroups } from "../../../src/state/selectors/axisSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { assertNotNull } from "../../helper/assertNotNull";
-import { Area, AreaChart, Bar, BarChart, Legend, type LegendPayload } from "../../../src";
-import { PageData } from "../../_data";
-import "../../helper/expectStackGroups"; // registers toBeRechartsStackedData (expect.extend)
-
-const selector = (state: RechartsRootState) => selectStackGroups(state, "xAxis", 0, false);
-
-const barSettings = (dataKey: string, stackId: string) => ({
-  id: expect.stringMatching("^recharts-bar-[:a-z0-9]+$"),
-  barSize: undefined,
-  data: undefined,
-  dataKey,
-  hasCustomShape: false,
-  hide: false,
-  isPanorama: false,
-  maxBarSize: undefined,
-  minPointSize: 0,
-  stackId,
-  type: "bar",
-  xAxisId: 0,
-  yAxisId: 0,
-  zAxisId: 0,
-});
-
-describe("selectStackGroups", () => {
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, {});
-
-  it("should return empty object in an empty BarChart", () => {
-    const { spy } = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        {props.children}
-      </BarChart>
-    ))(selector);
-    expectLastCalledWith(spy, {});
-  });
-
-  it("should return object keyed by stack IDs, with bar settings and stacked data", () => {
-    const { spy } = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} data={PageData}>
-        <Bar dataKey="uv" stackId="a" />
-        <Bar dataKey="pv" stackId="a" />
-        <Bar dataKey="uv" stackId="b" />
-        <Bar dataKey="amt" stackId="b" />
-        {props.children}
-      </BarChart>
-    ))(selector);
-    expectLastCalledWith(spy, {
-      a: {
-        graphicalItems: [barSettings("uv", "a"), barSettings("pv", "a")],
-        stackedData: expect.toBeRechartsStackedData([
-          [
-            [0, 400],
-            [0, 300],
-            [0, 300],
-            [0, 200],
-            [0, 278],
-            [0, 189],
-          ],
-          [
-            [400, 2800],
-            [300, 4867],
-            [300, 1698],
-            [200, 10000],
-            [278, 4186],
-            [189, 4989],
-          ],
-        ]),
-      },
-      b: {
-        graphicalItems: [barSettings("uv", "b"), barSettings("amt", "b")],
-        stackedData: expect.toBeRechartsStackedData([
-          [
-            [0, 400],
-            [0, 300],
-            [0, 300],
-            [0, 200],
-            [0, 278],
-            [0, 189],
-          ],
-          [
-            [400, 2800],
-            [300, 2700],
-            [300, 2700],
-            [200, 2600],
-            [278, 2678],
-            [189, 2589],
-          ],
-        ]),
-      },
-    });
-  });
-
-  it("should return empty object for Bars without stackId", () => {
-    const { spy } = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} data={PageData}>
-        <Bar dataKey="uv" />
-        <Bar dataKey="pv" />
-        <Bar dataKey="amt" />
-        {props.children}
-      </BarChart>
-    ))(selector);
-    expectLastCalledWith(spy, {});
-  });
-
-  it("should select two graphical items in stack group in the DOM insertion order", () => {
-    const { spy } = createSelectorTestCase((props) => (
-      <AreaChart width={100} height={100} data={PageData}>
-        <Area dataKey="uv" stackId="a" />
-        <Area dataKey="pv" stackId="a" />
-        {props.children}
-      </AreaChart>
-    ))(selector);
-    const expectedArea = (dataKey: string) => ({
-      id: expect.stringMatching("^recharts-area-[:a-z0-9]+$"),
-      barSize: undefined,
-      baseValue: undefined,
-      connectNulls: false,
-      data: undefined,
-      dataKey,
-      hide: false,
-      isPanorama: false,
-      stackId: "a",
-      type: "area",
-      xAxisId: 0,
-      yAxisId: 0,
-      zAxisId: 0,
-    });
-    expectLastCalledWith(spy, {
-      a: {
-        graphicalItems: [expectedArea("uv"), expectedArea("pv")],
-        stackedData: expect.toBeRechartsStackedData([
-          [
-            [0, 400],
-            [0, 300],
-            [0, 300],
-            [0, 200],
-            [0, 278],
-            [0, 189],
-          ],
-          [
-            [400, 2800],
-            [300, 4867],
-            [300, 1698],
-            [200, 10000],
-            [278, 4186],
-            [189, 4989],
-          ],
-        ]),
-      },
-    });
-  });
-
-  describe("when items in chart get hidden and then displayed again", () => {
-    function MyTestCase(props: { children: JSX.Element }) {
-      const [hiddenItems, setHiddenItems] = createSignal<ReadonlyArray<string>>([]);
-
-      const handleClick = (data: LegendPayload) => {
-        const dataKey = data.dataKey;
-        if (typeof dataKey !== "string") {
-          return;
-        }
-        setHiddenItems((prev) =>
-          prev.includes(dataKey) ? prev.filter((key) => key !== dataKey) : [...prev, dataKey],
-        );
-      };
-
-      return (
-        <AreaChart width={100} height={100} data={PageData}>
-          <Legend onClick={handleClick} />
-          <Area dataKey="uv" stackId="a" hide={hiddenItems().includes("uv")} />
-          <Area dataKey="pv" stackId="a" hide={hiddenItems().includes("pv")} />
-          {props.children}
-        </AreaChart>
-      );
-    }
-
-    const renderTestCase = createSelectorTestCase(MyTestCase);
-
-    describe("after hiding one item and displaying it again", () => {
-      // https://github.com/recharts/recharts/issues/5992
-      it("should keep the order of graphical items in stack group", () => {
-        const { container, spy } = renderTestCase((state: RechartsRootState) =>
-          selectStackGroups(state, "xAxis", 0, false),
-        );
-
-        expectLastCalledWith(spy, {
-          a: expect.objectContaining({
-            graphicalItems: [
-              expect.objectContaining({ dataKey: "uv", hide: false }),
-              expect.objectContaining({ dataKey: "pv", hide: false }),
-            ],
-          }),
-        });
-
-        // Re-query the legend item before each click: Solid's <For> recreates the
-        // legend-item DOM node when the payload re-renders (React would reuse it), so a
-        // node captured before a toggle is stale by the next click.
-        const clickUvLegendItem = (): void => {
-          const items = container.querySelectorAll(".recharts-legend-item");
-          expect(items).toHaveLength(2);
-          const uvItem = items[1];
-          assertNotNull(uvItem);
-          expect(uvItem.textContent).toBe("uv");
-          fireEvent.click(uvItem);
-          flush();
-        };
-
-        clickUvLegendItem();
-
-        expectLastCalledWith(spy, {
-          a: expect.objectContaining({
-            graphicalItems: [expect.objectContaining({ dataKey: "pv", hide: false })],
-          }),
-        });
-
-        clickUvLegendItem();
-
-        expectLastCalledWith(spy, {
-          a: expect.objectContaining({
-            graphicalItems: [
-              // This should be in the same order as before hiding
-              expect.objectContaining({ dataKey: "uv", hide: false }),
-              expect.objectContaining({ dataKey: "pv", hide: false }),
-            ],
-          }),
-        });
-      });
-    });
-  });
-
-  describe("reverseStackOrder", () => {
-    it("should reverse the order of graphical items and stacked data when reverseStackOrder is true", () => {
-      const { spy } = createSelectorTestCase((props) => (
-        <BarChart width={100} height={100} data={PageData} reverseStackOrder>
-          <Bar dataKey="uv" stackId="a" />
-          <Bar dataKey="pv" stackId="a" />
-          {props.children}
-        </BarChart>
-      ))(selector);
-      expectLastCalledWith(spy, {
-        a: {
-          graphicalItems: [barSettings("pv", "a"), barSettings("uv", "a")],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 2400],
-              [0, 4567],
-              [0, 1398],
-              [0, 9800],
-              [0, 3908],
-              [0, 4800],
-            ],
-            [
-              [2400, 2800],
-              [4567, 4867],
-              [1398, 1698],
-              [9800, 10000],
-              [3908, 4186],
-              [4800, 4989],
-            ],
-          ]),
-        },
-      });
-    });
-
-    it("should maintain original order when reverseStackOrder is false", () => {
-      const { spy } = createSelectorTestCase((props) => (
-        <BarChart width={100} height={100} data={PageData} reverseStackOrder={false}>
-          <Bar dataKey="uv" stackId="a" />
-          <Bar dataKey="pv" stackId="a" />
-          {props.children}
-        </BarChart>
-      ))(selector);
-      expectLastCalledWith(spy, {
-        a: {
-          graphicalItems: [barSettings("uv", "a"), barSettings("pv", "a")],
-          stackedData: expect.toBeRechartsStackedData([
-            [
-              [0, 400],
-              [0, 300],
-              [0, 300],
-              [0, 200],
-              [0, 278],
-              [0, 189],
-            ],
-            [
-              [400, 2800],
-              [300, 4867],
-              [300, 1698],
-              [200, 10000],
-              [278, 4186],
-              [189, 4989],
-            ],
-          ]),
-        },
-      });
-    });
-  });
-});

package/test/state/selectors/selectXAxisPosition.spec.tsx

@@ -1,22 +0,0 @@
-import { describe } from "vitest";
-import type { RechartsRootState } from "../../../src/state/store";
-import { selectXAxisPosition } from "../../../src/state/selectors/axisSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
-
-/*
- * Ported from recharts 3.8.1 test/state/selectors/selectXAxisPosition.spec.tsx.
- * The "should be stable between renders" test is omitted — reselect reference
- * stability is N/A in this no-reselect Solid rewrite (see selectorTestHelpers
- * header and the test-porting-tier1-tier2-done memory).
- */
-
-describe("selectXAxisPosition", () => {
-  const selector = (state: RechartsRootState) => selectXAxisPosition(state, defaultAxisId);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, { x: 5, y: 0 });
-});

package/test/state/selectors/selectYAxisPosition.spec.tsx

@@ -1,22 +0,0 @@
-import { describe } from "vitest";
-import type { RechartsRootState } from "../../../src/state/store";
-import { selectYAxisPosition } from "../../../src/state/selectors/axisSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
-
-/*
- * Ported from recharts 3.8.1 test/state/selectors/selectYAxisPosition.spec.tsx.
- * The "should be stable between renders" test is omitted — reselect reference
- * stability is N/A in this no-reselect Solid rewrite (see selectorTestHelpers
- * header and the test-porting-tier1-tier2-done memory).
- */
-
-describe("selectYAxisPosition", () => {
-  const selector = (state: RechartsRootState) => selectYAxisPosition(state, defaultAxisId);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, { x: 0, y: 5 });
-});

package/test/state/selectors/selectorMemoization.spec.tsx

@@ -1,136 +0,0 @@
-// Regression gate for the memoized selector graph (ADR-0002).
-//
-// This is the direct test of the performance win: the expensive
-// applied-values / displayed-data chain must be SHARED (a repeat call returns
-// the identical reference) and must NOT be invalidated by a tooltip/mousemove
-// interaction (the classic recharts hotspot), while STILL invalidating when the
-// underlying chart data actually changes. Reference identity is the observable
-// proxy for "did the O(series×points) combiner re-run".
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { Line, LineChart, XAxis } from "../../../src";
-import { useAppStore } from "../../../src/state/hooks";
-import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
-import {
-  selectAllAppliedValues,
-  selectAxisDomain,
-  selectAxisScale,
-  selectCartesianItemsSettings,
-  selectDisplayedData,
-  selectNumericalDomain,
-  selectTicksOfGraphicalItem,
-} from "../../../src/state/selectors/axisSelectors";
-import type { RechartsStore } from "../../../src/state/store";
-
-const data = [
-  { name: "a", uv: 10 },
-  { name: "b", uv: 30 },
-  { name: "c", uv: 20 },
-  { name: "d", uv: 40 },
-];
-
-function renderChartAndCaptureStore(): RechartsStore {
-  let store: RechartsStore | undefined;
-  const Capture = (): null => {
-    store = useAppStore();
-    return null;
-  };
-  render(() => (
-    <LineChart width={200} height={200} data={data}>
-      <XAxis dataKey="name" />
-      <Line dataKey="uv" isAnimationActive={false} />
-      <Capture />
-    </LineChart>
-  ));
-  flush();
-  flush();
-  flush();
-  if (store == null) {
-    throw new Error("store capture failed");
-  }
-  return store;
-}
-
-describe("memoized selector graph", () => {
-  it("shares the applied-values chain: a repeat call returns the identical reference", () => {
-    const store = renderChartAndCaptureStore();
-    const first = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-    const second = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-    expect(second).toBe(first);
-    // The intermediate nodes are shared too.
-    expect(selectDisplayedData(store.state, "xAxis", defaultAxisId, false)).toBe(
-      selectDisplayedData(store.state, "xAxis", defaultAxisId, false),
-    );
-    expect(selectCartesianItemsSettings(store.state, "xAxis", defaultAxisId)).toBe(
-      selectCartesianItemsSettings(store.state, "xAxis", defaultAxisId),
-    );
-  });
-
-  it("does NOT invalidate the data chain on a tooltip/mousemove interaction (the fan-out win)", () => {
-    const store = renderChartAndCaptureStore();
-    const before = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-    const displayedBefore = selectDisplayedData(store.state, "xAxis", defaultAxisId, false);
-
-    // Simulate the per-frame mousemove state write.
-    store.actions.tooltip.setMouseOverAxisIndex({
-      activeIndex: "2",
-      activeDataKey: undefined,
-      activeCoordinate: { x: 50, y: 50 },
-    });
-    flush();
-
-    const after = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-    const displayedAfter = selectDisplayedData(store.state, "xAxis", defaultAxisId, false);
-    // The expensive chain is untouched by the interaction — same references,
-    // so no combiner re-ran. This is what collapses the ~10× mousemove fan-out.
-    expect(after).toBe(before);
-    expect(displayedAfter).toBe(displayedBefore);
-  });
-
-  it("keeps the full domain→scale→ticks chain stable across a mousemove", () => {
-    const store = renderChartAndCaptureStore();
-    const axes = ["xAxis", "yAxis"] as const;
-    const before = axes.map((axisType) => ({
-      numericalDomain: selectNumericalDomain(store.state, axisType, defaultAxisId, false),
-      axisDomain: selectAxisDomain(store.state, axisType, defaultAxisId, false),
-      scale: selectAxisScale(store.state, axisType, defaultAxisId, false),
-      ticks: selectTicksOfGraphicalItem(store.state, axisType, defaultAxisId, false),
-    }));
-
-    store.actions.tooltip.setMouseOverAxisIndex({
-      activeIndex: "1",
-      activeDataKey: undefined,
-      activeCoordinate: { x: 30, y: 30 },
-    });
-    flush();
-
-    axes.forEach((axisType, i) => {
-      const prev = before[i]!;
-      expect(selectNumericalDomain(store.state, axisType, defaultAxisId, false)).toBe(
-        prev.numericalDomain,
-      );
-      expect(selectAxisDomain(store.state, axisType, defaultAxisId, false)).toBe(prev.axisDomain);
-      expect(selectAxisScale(store.state, axisType, defaultAxisId, false)).toBe(prev.scale);
-      expect(selectTicksOfGraphicalItem(store.state, axisType, defaultAxisId, false)).toBe(
-        prev.ticks,
-      );
-    });
-  });
-
-  it("DOES invalidate when the chart data changes (correctness)", () => {
-    const store = renderChartAndCaptureStore();
-    const before = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-
-    store.actions.chartData.setChartData([
-      { name: "a", uv: 11 },
-      { name: "b", uv: 31 },
-      { name: "c", uv: 21 },
-    ]);
-    flush();
-
-    const after = selectAllAppliedValues(store.state, "xAxis", defaultAxisId, false);
-    expect(after).not.toBe(before);
-    expect(after.map((v) => v.value)).toEqual(["a", "b", "c"]);
-  });
-});