solid-recharts 0.2.0 → 1.0.0

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

@@ -1,496 +0,0 @@
-// Port of recharts 3.8.1 test/state/selectors/radarSelectors.spec.tsx (commit 7a23854).
-// Tier-B selector values, golden-anchored to recharts. Harness deltas: render+Comp+spy
-// → createSelectorTestCase; the `scale` field is asserted via the Solid `expectScale`
-// helper (the Solid port has no `toBeRechartsScale` asymmetric matcher) with the rest of
-// the axis object via objectContaining. The "should return new data after interaction"
-// case uses a Solid signal (in place of React useState) to flip the Radar dataKey and
-// asserts the selector VALUE before/after the click (render-count assertions dropped).
-import { createEffect, createSignal, flush } from "solid-js";
-import { describe, expect, it, vi } from "vitest";
-import { fireEvent, render } from "@solidjs/testing-library";
-import { useAppSelectorWithStableTest } from "../../helper/selectorTestHelpers";
-import { RechartsRootState } from "../../../src/state/store";
-import {
-  selectAngleAxisForBandSize,
-  selectAngleAxisWithScaleAndViewport,
-  selectRadarPoints,
-  selectRadiusAxisForBandSize,
-} from "../../../src/state/selectors/radarSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { expectScale } from "../../helper/expectScale";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { PolarAngleAxis, PolarRadiusAxis, Radar, RadarChart } from "../../../src";
-import { exampleRadarData } from "../../_data";
-
-/** Reads the `.scale` off a spied axis object without a type assertion. */
-function scaleOf(value: unknown): unknown {
-  return value != null && typeof value === "object" && "scale" in value ? value.scale : undefined;
-}
-
-describe("selectRadarPoints", () => {
-  const selector = (state: RechartsRootState) =>
-    selectRadarPoints(state, 0, 0, false, "radar-value");
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <RadarChart width={500} height={500} data={exampleRadarData}>
-      <Radar dataKey="value" id="radar-value" />
-      <PolarRadiusAxis dataKey="value" />
-      {props.children}
-    </RadarChart>
-  ));
-
-  it("should return radar points in a chart", () => {
-    const { spy } = renderTestCase(selector);
-    expectLastCalledWith(spy, {
-      baseLinePoints: [],
-      isRange: false,
-      points: [
-        {
-          angle: 90,
-          cx: 250,
-          cy: 250,
-          name: 0,
-          payload: { half: 210, name: "iPhone 3GS", value: 420 },
-          radius: 82.32,
-          value: 420,
-          x: 250,
-          y: 167.68,
-        },
-        {
-          angle: 45,
-          cx: 250,
-          cy: 250,
-          name: 1,
-          payload: { half: 230, name: "iPhone 4", value: 460 },
-          radius: 90.16000000000001,
-          value: 460,
-          x: 313.75274739177917,
-          y: 186.2472526082209,
-        },
-        {
-          angle: 0,
-          cx: 250,
-          cy: 250,
-          name: 2,
-          payload: { half: 500, name: "iPhone 4s", value: 999 },
-          radius: 195.804,
-          value: 999,
-          x: 445.804,
-          y: 250,
-        },
-        {
-          angle: -45,
-          cx: 250,
-          cy: 250,
-          name: 3,
-          payload: { half: 250, name: "iPhone 5", value: 500 },
-          radius: 98,
-          value: 500,
-          x: 319.29646455628165,
-          y: 319.29646455628165,
-        },
-        {
-          angle: -90,
-          cx: 250,
-          cy: 250,
-          name: 4,
-          payload: { half: 432, name: "iPhone 5s", value: 864 },
-          radius: 169.344,
-          value: 864,
-          x: 250,
-          y: 419.344,
-        },
-        {
-          angle: -135,
-          cx: 250,
-          cy: 250,
-          name: 5,
-          payload: { half: 325, name: "iPhone 6", value: 650 },
-          radius: 127.4,
-          value: 650,
-          x: 159.91459607683385,
-          y: 340.08540392316615,
-        },
-        {
-          angle: -180,
-          cx: 250,
-          cy: 250,
-          name: 6,
-          payload: { half: 383, name: "iPhone 6s", value: 765 },
-          radius: 149.94,
-          value: 765,
-          x: 100.06,
-          y: 250.00000000000003,
-        },
-        {
-          angle: -225,
-          cx: 250,
-          cy: 250,
-          name: 7,
-          payload: { half: 183, name: "iPhone 5se", value: 365 },
-          radius: 71.53999999999999,
-          value: 365,
-          x: 199.41358087391438,
-          y: 199.41358087391438,
-        },
-      ],
-    });
-  });
-
-  it("should return new data after interaction", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      const points = useAppSelectorWithStableTest((state) =>
-        selectRadarPoints(state, 0, 0, false, "radar-value"),
-      );
-      createEffect(
-        () => points(),
-        (value) => spy(value),
-      );
-      return null;
-    };
-    const TestCase = () => {
-      const [dataKey, setDataKey] = createSignal<"value" | "half">("value");
-      return (
-        <>
-          {dataKey() === "value" ? (
-            <button type="button" onClick={() => setDataKey("half")}>
-              Change DataKey to half
-            </button>
-          ) : (
-            <button type="button" onClick={() => setDataKey("value")}>
-              Change DataKey to value
-            </button>
-          )}
-          <RadarChart data={exampleRadarData} width={400} height={400}>
-            <Radar dataKey={dataKey()} id="radar-value" />
-            <Comp />
-          </RadarChart>
-        </>
-      );
-    };
-    const { container } = render(() => <TestCase />);
-    flush();
-
-    const expectedResultBefore: ReturnType<typeof selectRadarPoints> = {
-      baseLinePoints: [],
-      isRange: false,
-      points: [
-        {
-          angle: 90,
-          cx: 200,
-          cy: 200,
-          name: 0,
-          payload: { half: 210, name: "iPhone 3GS", value: 420 },
-          radius: 65.52,
-          value: 420,
-          x: 200,
-          y: 134.48000000000002,
-        },
-        {
-          angle: 45,
-          cx: 200,
-          cy: 200,
-          name: 1,
-          payload: { half: 230, name: "iPhone 4", value: 460 },
-          radius: 71.76,
-          value: 460,
-          x: 250.74198261794666,
-          y: 149.25801738205337,
-        },
-        {
-          angle: 0,
-          cx: 200,
-          cy: 200,
-          name: 2,
-          payload: { half: 500, name: "iPhone 4s", value: 999 },
-          radius: 155.844,
-          value: 999,
-          x: 355.844,
-          y: 200,
-        },
-        {
-          angle: -45,
-          cx: 200,
-          cy: 200,
-          name: 3,
-          payload: { half: 250, name: "iPhone 5", value: 500 },
-          radius: 78,
-          value: 500,
-          x: 255.1543289325507,
-          y: 255.1543289325507,
-        },
-        {
-          angle: -90,
-          cx: 200,
-          cy: 200,
-          name: 4,
-          payload: { half: 432, name: "iPhone 5s", value: 864 },
-          radius: 134.784,
-          value: 864,
-          x: 200,
-          y: 334.784,
-        },
-        {
-          angle: -135,
-          cx: 200,
-          cy: 200,
-          name: 5,
-          payload: { half: 325, name: "iPhone 6", value: 650 },
-          radius: 101.4,
-          value: 650,
-          x: 128.2993723876841,
-          y: 271.70062761231594,
-        },
-        {
-          angle: -180,
-          cx: 200,
-          cy: 200,
-          name: 6,
-          payload: { half: 383, name: "iPhone 6s", value: 765 },
-          radius: 119.34,
-          value: 765,
-          x: 80.66,
-          y: 200.00000000000003,
-        },
-        {
-          angle: -225,
-          cx: 200,
-          cy: 200,
-          name: 7,
-          payload: { half: 183, name: "iPhone 5se", value: 365 },
-          radius: 56.94,
-          value: 365,
-          x: 159.737339879238,
-          y: 159.737339879238,
-        },
-      ],
-    };
-
-    expectLastCalledWith(spy, expectedResultBefore);
-
-    const button = container.querySelector("button");
-    expect(button).not.toBeNull();
-    fireEvent.click(button!);
-    flush();
-
-    const expectedResultAfter: ReturnType<typeof selectRadarPoints> = {
-      baseLinePoints: [],
-      isRange: false,
-      points: [
-        {
-          angle: 90,
-          cx: 200,
-          cy: 200,
-          name: 0,
-          payload: { half: 210, name: "iPhone 3GS", value: 420 },
-          radius: 54.599999999999994,
-          value: 210,
-          x: 200,
-          y: 145.4,
-        },
-        {
-          angle: 45,
-          cx: 200,
-          cy: 200,
-          name: 1,
-          payload: { half: 230, name: "iPhone 4", value: 460 },
-          radius: 59.800000000000004,
-          value: 230,
-          x: 242.28498551495557,
-          y: 157.71501448504446,
-        },
-        {
-          angle: 0,
-          cx: 200,
-          cy: 200,
-          name: 2,
-          payload: { half: 500, name: "iPhone 4s", value: 999 },
-          radius: 130,
-          value: 500,
-          x: 330,
-          y: 200,
-        },
-        {
-          angle: -45,
-          cx: 200,
-          cy: 200,
-          name: 3,
-          payload: { half: 250, name: "iPhone 5", value: 500 },
-          radius: 65,
-          value: 250,
-          x: 245.9619407771256,
-          y: 245.9619407771256,
-        },
-        {
-          angle: -90,
-          cx: 200,
-          cy: 200,
-          name: 4,
-          payload: { half: 432, name: "iPhone 5s", value: 864 },
-          radius: 112.32,
-          value: 432,
-          x: 200,
-          y: 312.32,
-        },
-        {
-          angle: -135,
-          cx: 200,
-          cy: 200,
-          name: 5,
-          payload: { half: 325, name: "iPhone 6", value: 650 },
-          radius: 84.5,
-          value: 325,
-          x: 140.24947698973673,
-          y: 259.7505230102633,
-        },
-        {
-          angle: -180,
-          cx: 200,
-          cy: 200,
-          name: 6,
-          payload: { half: 383, name: "iPhone 6s", value: 765 },
-          radius: 99.58,
-          value: 383,
-          x: 100.42,
-          y: 200,
-        },
-        {
-          angle: -225,
-          cx: 200,
-          cy: 200,
-          name: 7,
-          payload: { half: 183, name: "iPhone 5se", value: 365 },
-          radius: 47.58,
-          value: 183,
-          x: 166.35585935114406,
-          y: 166.3558593511441,
-        },
-      ],
-    };
-
-    expectLastCalledWith(spy, expectedResultAfter);
-  });
-});
-
-describe("selectRadiusAxisForBandSize", () => {
-  const selector = (state: RechartsRootState) => selectRadiusAxisForBandSize(state, 0);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <RadarChart width={500} height={500} data={exampleRadarData}>
-      <Radar dataKey="value" />
-      <PolarRadiusAxis dataKey="value" />
-      {props.children}
-    </RadarChart>
-  ));
-
-  it("should return axis object in radar chart", () => {
-    const { spy } = renderTestCase(selector);
-    const last: unknown = spy.mock.calls.at(-1)?.[0];
-    expect(last).toEqual(
-      expect.objectContaining({
-        allowDataOverflow: false,
-        allowDecimals: false,
-        allowDuplicatedCategory: true,
-        dataKey: "value",
-        domain: undefined,
-        id: 0,
-        includeHidden: false,
-        name: undefined,
-        reversed: false,
-        niceTicks: "auto",
-        tick: true,
-        tickCount: 5,
-        ticks: undefined,
-        type: "number",
-        unit: undefined,
-      }),
-    );
-    expectScale(scaleOf(last), { domain: [0, 1000], range: [0, 196] });
-  });
-});
-
-describe("selectAngleAxisForBandSize", () => {
-  const selector = (state: RechartsRootState) => selectAngleAxisForBandSize(state, 0);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <RadarChart width={500} height={500} data={exampleRadarData}>
-      <Radar dataKey="value" />
-      <PolarAngleAxis dataKey="value" />
-      {props.children}
-    </RadarChart>
-  ));
-
-  it("should return axis object in radar chart", () => {
-    const { spy } = renderTestCase(selector);
-    const last: unknown = spy.mock.calls.at(-1)?.[0];
-    expect(last).toEqual(
-      expect.objectContaining({
-        allowDataOverflow: false,
-        allowDecimals: false,
-        allowDuplicatedCategory: false,
-        dataKey: "value",
-        domain: undefined,
-        id: 0,
-        includeHidden: false,
-        name: undefined,
-        reversed: false,
-        niceTicks: "auto",
-        tick: true,
-        tickCount: undefined,
-        ticks: undefined,
-        type: "category",
-        unit: undefined,
-      }),
-    );
-    expectScale(scaleOf(last), {
-      domain: [420, 460, 999, 500, 864, 650, 765, 365],
-      range: [-270, 90],
-    });
-  });
-});
-
-describe("selectAngleAxisWithScaleAndViewport", () => {
-  const selector = (state: RechartsRootState) => selectAngleAxisWithScaleAndViewport(state, 0);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-
-  const renderTestCase = createSelectorTestCase((props) => (
-    <RadarChart width={500} height={500} data={exampleRadarData}>
-      <Radar dataKey="value" />
-      <PolarAngleAxis dataKey="value" />
-      {props.children}
-    </RadarChart>
-  ));
-
-  it("should return angle axis object", () => {
-    const { spy } = renderTestCase(selector);
-    const last: unknown = spy.mock.calls.at(-1)?.[0];
-    expect(last).toEqual(
-      expect.objectContaining({
-        cx: 250,
-        cy: 250,
-        dataKey: "value",
-        type: "category",
-      }),
-    );
-    expectScale(scaleOf(last), {
-      domain: [420, 460, 999, 500, 864, 650, 765, 365],
-      range: [-270, 90],
-    });
-  });
-});

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

@@ -1,169 +0,0 @@
-// Ported from recharts 3.8.1 test/state/selectors/rootPropsSelectors.spec.tsx
-// (commit 7a23854). Solid deviations: update assertions are driven by signals.
-import { createSignal } from "solid-js";
-import { describe, expect, it } from "vitest";
-import { Bar, BarChart } from "../../../src";
-import { createRechartsStore } from "../../../src/state/store";
-import {
-  selectBarCategoryGap,
-  selectBarGap,
-  selectRootBarSize,
-  selectRootMaxBarSize,
-  selectSyncMethod,
-} from "../../../src/state/selectors/rootPropsSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { SyncMethod } from "../../../src/util/types";
-
-describe("selectRootMaxBarSize", () => {
-  shouldReturnUndefinedOutOfContext(selectRootMaxBarSize);
-  shouldReturnFromInitialState(selectRootMaxBarSize, undefined);
-
-  it("should return undefined in an empty chart", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy } = renderTestCase(selectRootMaxBarSize);
-    expectLastCalledWith(spy, undefined);
-  });
-
-  it("should return and update maxBarSize defined on chart root", () => {
-    const [maxBarSize, setMaxBarSize] = createSignal(10);
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} maxBarSize={maxBarSize()}>
-        <Bar maxBarSize={5} />
-        {props.children}
-      </BarChart>
-    ));
-    const { spy, rerenderSameComponent } = renderTestCase(selectRootMaxBarSize);
-    expectLastCalledWith(spy, 10);
-
-    setMaxBarSize(20);
-    rerenderSameComponent();
-    expectLastCalledWith(spy, 20);
-  });
-});
-
-describe("selectBarGap", () => {
-  shouldReturnUndefinedOutOfContext(selectBarGap);
-  shouldReturnFromInitialState(selectBarGap, 4);
-
-  it("should return default value in a chart without barGap prop", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy } = renderTestCase(selectBarGap);
-    expectLastCalledWith(spy, 4);
-  });
-
-  it("should return and update barGap defined on chart root", () => {
-    const [barGap, setBarGap] = createSignal(10);
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} barGap={barGap()}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy, rerenderSameComponent } = renderTestCase(selectBarGap);
-    expectLastCalledWith(spy, 10);
-
-    setBarGap(20);
-    rerenderSameComponent();
-    expectLastCalledWith(spy, 20);
-  });
-});
-
-describe("selectBarCategoryGap", () => {
-  shouldReturnUndefinedOutOfContext(selectBarCategoryGap);
-  shouldReturnFromInitialState(selectBarCategoryGap, "10%");
-
-  it("should return default value for initial state", () => {
-    const store = createRechartsStore();
-    expect(selectBarCategoryGap(store.state)).toBe("10%");
-  });
-
-  it("should return default value in an empty chart", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy } = renderTestCase(selectBarCategoryGap);
-    expectLastCalledWith(spy, "10%");
-  });
-
-  it("should return and update barCategoryGap defined on chart root", () => {
-    const [barCategoryGap, setBarCategoryGap] = createSignal<string | number>(10);
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} barCategoryGap={barCategoryGap()}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy, rerenderSameComponent } = renderTestCase(selectBarCategoryGap);
-    expectLastCalledWith(spy, 10);
-
-    setBarCategoryGap(20);
-    rerenderSameComponent();
-    expectLastCalledWith(spy, 20);
-  });
-});
-
-describe("selectRootBarSize", () => {
-  shouldReturnUndefinedOutOfContext(selectRootBarSize);
-  shouldReturnFromInitialState(selectRootBarSize, undefined);
-
-  it("should return undefined in an empty chart", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy } = renderTestCase(selectRootBarSize);
-    expectLastCalledWith(spy, undefined);
-  });
-
-  it("should return and update barSize defined on chart root", () => {
-    const [barSize, setBarSize] = createSignal(10);
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} barSize={barSize()}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy, rerenderSameComponent } = renderTestCase(selectRootBarSize);
-    expectLastCalledWith(spy, 10);
-
-    setBarSize(20);
-    rerenderSameComponent();
-    expectLastCalledWith(spy, 20);
-  });
-});
-
-describe("selectSyncMethod", () => {
-  it('should return "index" by default', () => {
-    const store = createRechartsStore();
-    expect(store.state.rootProps.syncMethod).toBe("index");
-  });
-
-  it("should return and update syncMethod defined on chart root", () => {
-    const fn = () => 1;
-    const [syncMethod, setSyncMethod] = createSignal<SyncMethod>("value");
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} syncMethod={syncMethod()}>
-        {props.children}
-      </BarChart>
-    ));
-    const { spy, rerenderSameComponent } = renderTestCase(selectSyncMethod);
-    expectLastCalledWith(spy, "value");
-
-    setSyncMethod(() => fn);
-    rerenderSameComponent();
-    expectLastCalledWith(spy, fn);
-  });
-});

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

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { selectScatterPoints } from "../../../src/state/selectors/scatterSelectors";
-import { Pie, PieChart } from "../../../src";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import type { RechartsRootState } from "../../../src/state/store";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-
-/*
- * Ported from recharts 3.8.1 test/state/selectors/scatterSelectors.spec.tsx.
- * The "computed scatter points" golden test depends on the storybook `pageData`
- * dataset (not available here) and is omitted. Ported: the pure value assertions
- * and the "chart that does not support Scatter → undefined" guard.
- * Note: this port's selectScatterPoints signature is
- * (state, xAxisId, yAxisId, zAxisId, id, isPanorama, cells?).
- */
-
-describe("selectScatterPoints", () => {
-  const selector = (state: RechartsRootState) =>
-    selectScatterPoints(state, 0, 0, 0, "scatter-id", false);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-
-  describe("in a chart that does not support Scatter", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <PieChart width={100} height={200}>
-        <Pie
-          data={[{ uv: 1 }]}
-          dataKey="uv"
-          isAnimationActive={false}
-          cx="50%"
-          cy="50%"
-          outerRadius={80}
-        />
-        {props.children}
-      </PieChart>
-    ));
-
-    it("should return undefined", () => {
-      const { spy } = renderTestCase(selector);
-      expect(spy).toHaveBeenCalledWith(undefined);
-    });
-  });
-});