solid-recharts 0.2.1 → 1.0.0

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

@@ -1,234 +0,0 @@
-import { beforeEach, describe, it } from "vitest";
-import { flush } from "solid-js";
-import { fireEvent } from "@solidjs/testing-library";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { RadialBar, RadialBarChart, Tooltip } from "../../../src";
-import { PageData } from "../../_data";
-import { selectActiveTooltipIndex } from "../../../src/state/selectors/tooltipSelectors";
-import { showTooltip } from "../../component/Tooltip/tooltipTestHelpers";
-import { assertNotNull } from "../../helper/assertNotNull";
-import { radialBarChartMouseHoverTooltipSelector } from "../../component/Tooltip/tooltipMouseHoverSelectors";
-import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-
-describe("selectActiveTooltipIndex", () => {
-  beforeEach(() => {
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  describe("in RadialChart", () => {
-    describe("with default Tooltip", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={300} height={300} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} />
-          <Tooltip />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should return undefined before any interaction", () => {
-        const { spy } = renderTestCase(selectActiveTooltipIndex);
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return index after mouse hover, and undefined again after mouse leave", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        showTooltip(container, ".recharts-radial-bar-sector");
-        expectLastCalledWith(spy, "3");
-        const wrapper = container.querySelector(".recharts-wrapper");
-        assertNotNull(wrapper);
-        fireEvent.mouseLeave(wrapper);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return undefined after clicking on a sector", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = container.querySelector(".recharts-radial-bar-sector");
-        assertNotNull(trigger);
-        expectLastCalledWith(spy, null);
-        fireEvent.click(trigger);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-    });
-
-    describe("with defaultIndex=number", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={300} height={300} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} />
-          <Tooltip defaultIndex={0} />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should return the default index before any interaction", () => {
-        const { spy } = renderTestCase(selectActiveTooltipIndex);
-        expectLastCalledWith(spy, "0");
-      });
-
-      it("should return mouse hover index after mouse hover, and undefined again after mouse leave", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-        expectLastCalledWith(spy, "3");
-        fireEvent.mouseLeave(trigger);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return the default index after clicking on a sector", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = container.querySelector(".recharts-radial-bar-sector");
-        assertNotNull(trigger);
-        expectLastCalledWith(spy, "0");
-        fireEvent.click(trigger);
-        flush();
-        expectLastCalledWith(spy, "0");
-      });
-    });
-
-    describe("with shared=false", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={300} height={300} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} />
-          <Tooltip shared={false} />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should return undefined before any interaction", () => {
-        const { spy } = renderTestCase(selectActiveTooltipIndex);
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return index after mouse hover, and undefined again after mouse leave", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = showTooltip(container, ".recharts-radial-bar-sector");
-        expectLastCalledWith(spy, "0");
-        fireEvent.mouseLeave(trigger);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return undefined after clicking on a sector", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = container.querySelector(".recharts-radial-bar-sector");
-        assertNotNull(trigger);
-        expectLastCalledWith(spy, null);
-        fireEvent.click(trigger);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-    });
-
-    describe("with shared=false and defaultIndex=number", () => {
-      const renderTestCase = createSelectorTestCase((props) => (
-        <RadialBarChart width={300} height={300} data={PageData}>
-          <RadialBar dataKey="uv" isAnimationActive={false} />
-          <Tooltip shared={false} defaultIndex={3} />
-          {props.children}
-        </RadialBarChart>
-      ));
-
-      it("should return the default index before any interaction", () => {
-        const { spy } = renderTestCase(selectActiveTooltipIndex);
-        expectLastCalledWith(spy, "3");
-      });
-
-      it("should return mouse hover index after mouse hover, and undefined again after mouse leave", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = showTooltip(container, ".recharts-radial-bar-sector");
-        expectLastCalledWith(spy, "0");
-        fireEvent.mouseLeave(trigger);
-        flush();
-        expectLastCalledWith(spy, null);
-      });
-
-      it("should return the default index after clicking on a sector", () => {
-        const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-        const trigger = container.querySelector(".recharts-radial-bar-sector");
-        assertNotNull(trigger);
-        expectLastCalledWith(spy, "3");
-        fireEvent.click(trigger);
-        flush();
-        expectLastCalledWith(spy, "3");
-      });
-    });
-
-    describe("with trigger=click", () => {
-      describe("without defaultIndex", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadialBarChart width={300} height={300} data={PageData}>
-            <RadialBar dataKey="uv" isAnimationActive={false} />
-            <Tooltip trigger="click" />
-            {props.children}
-          </RadialBarChart>
-        ));
-
-        it("should return undefined before any interaction", () => {
-          const { spy } = renderTestCase(selectActiveTooltipIndex);
-          expectLastCalledWith(spy, null);
-        });
-
-        it("should return index after clicking on a chart, and continue returning that index after clicking again", () => {
-          const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-          const trigger = container.querySelector(radialBarChartMouseHoverTooltipSelector);
-          assertNotNull(trigger);
-          expectLastCalledWith(spy, null);
-          fireEvent.click(trigger, { clientX: 200, clientY: 200 });
-          flush();
-          expectLastCalledWith(spy, "3");
-          fireEvent.click(trigger, { clientX: 200, clientY: 200 });
-          flush();
-          expectLastCalledWith(spy, "3");
-        });
-
-        it("should return undefined after mouse hover", () => {
-          const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-          const trigger = showTooltip(container, ".recharts-radial-bar-sector");
-          expectLastCalledWith(spy, null);
-          fireEvent.mouseLeave(trigger);
-          flush();
-          expectLastCalledWith(spy, null);
-        });
-      });
-
-      describe("with defaultIndex=number", () => {
-        const renderTestCase = createSelectorTestCase((props) => (
-          <RadialBarChart width={300} height={300} data={PageData}>
-            <RadialBar dataKey="uv" isAnimationActive={false} />
-            <Tooltip trigger="click" defaultIndex={1} />
-            {props.children}
-          </RadialBarChart>
-        ));
-
-        it("should return the default index before any interaction", () => {
-          const { spy } = renderTestCase(selectActiveTooltipIndex);
-          expectLastCalledWith(spy, "1");
-        });
-
-        it("should return mouse hover index after clicking on the chart, and continue returning that index after clicking again", () => {
-          const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-          const trigger = container.querySelector(radialBarChartMouseHoverTooltipSelector);
-          assertNotNull(trigger);
-          expectLastCalledWith(spy, "1");
-          fireEvent.click(trigger, { clientX: 200, clientY: 200 });
-          flush();
-          expectLastCalledWith(spy, "3");
-          fireEvent.click(trigger, { clientX: 200, clientY: 200 });
-          flush();
-          expectLastCalledWith(spy, "3");
-        });
-
-        it("should ignore mouse hover events", () => {
-          const { container, spy } = renderTestCase(selectActiveTooltipIndex);
-          const trigger = showTooltip(container, radialBarChartMouseHoverTooltipSelector);
-          expectLastCalledWith(spy, "1");
-          fireEvent.mouseLeave(trigger);
-          flush();
-          expectLastCalledWith(spy, "1");
-        });
-      });
-    });
-  });
-});

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

@@ -1,18 +0,0 @@
-import { describe } from "vitest";
-import { selectAllXAxes, selectAllYAxes } from "../../../src/state/selectors/selectAllAxes";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-
-// Ported from recharts 3.8.1 test/state/selectors/selectAllAxes.spec.tsx.
-
-describe("selectAllXAxes", () => {
-  shouldReturnUndefinedOutOfContext(selectAllXAxes);
-  shouldReturnFromInitialState(selectAllXAxes, []);
-});
-
-describe("selectAllYAxes", () => {
-  shouldReturnUndefinedOutOfContext(selectAllYAxes);
-  shouldReturnFromInitialState(selectAllYAxes, []);
-});

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

@@ -1,21 +0,0 @@
-import { describe } from "vitest";
-import type { RechartsRootState } from "../../../src/state/store";
-import { selectAxisDomain } 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/selectAxisDomain.spec.tsx.
- * The "stable between renders" test is omitted (reselect stability — N/A here).
- */
-
-describe("selectAxisDomain stable rendering", () => {
-  const selector = (state: RechartsRootState) =>
-    selectAxisDomain(state, "xAxis", defaultAxisId, false);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-});

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

@@ -1,19 +0,0 @@
-// Port of recharts 3.8.1 test/state/selectors/selectAxisDomainIncludingNiceTicks.spec.tsx
-// (commit 7a23854). The out-of-context + initial-state VALUE cases are ported; the
-// `assertStableBetweenRenders` reselect reference-stability case is omitted — N/A in the
-// no-reselect Solid store (see selectorTestHelpers header / state-architecture-decision).
-import { describe } from "vitest";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-import { selectAxisDomainIncludingNiceTicks } from "../../../src/state/selectors/axisSelectors";
-import { RechartsRootState } from "../../../src/state/store";
-import { defaultAxisId } from "../../../src/state/cartesianAxisSlice";
-
-describe("selectAxisDomainIncludingNiceTicks", () => {
-  const selector = (state: RechartsRootState) =>
-    selectAxisDomainIncludingNiceTicks(state, "xAxis", defaultAxisId, false);
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, undefined);
-});

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

@@ -1,22 +0,0 @@
-import { describe } from "vitest";
-import type { RechartsRootState } from "../../../src/state/store";
-import { selectAxisRangeWithReverse } from "../../../src/state/selectors/axisSelectors";
-import {
-  shouldReturnFromInitialState,
-  shouldReturnUndefinedOutOfContext,
-} from "../../helper/selectorTestHelpers";
-
-/*
- * Ported from recharts 3.8.1 test/state/selectors/selectAxisRangeWithReverse.spec.tsx.
- * Omitted: the "stable between rerenders" and "should not recompute …" tests —
- * both assert reselect reference stability across a Redux dispatch, which is N/A
- * in this no-reselect Solid rewrite (no dispatch, no selector memoization).
- */
-
-describe("selectAxisRangeWithReverse", () => {
-  const selector = (state: RechartsRootState) =>
-    selectAxisRangeWithReverse(state, "xAxis", "0", false);
-
-  shouldReturnUndefinedOutOfContext(selector);
-  shouldReturnFromInitialState(selector, [5, 5]);
-});

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

@@ -1,91 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { RechartsRootState } from "../../../src/state/store";
-import { createRechartsStore } from "../../../src/state/store";
-import { selectAxisScale } from "../../../src/state/selectors/axisSelectors";
-import { shouldReturnUndefinedOutOfContext } from "../../helper/selectorTestHelpers";
-import { Bar, BarChart, XAxis } from "../../../src";
-import { expectXAxisTicks } from "../../helper/expectAxisTicks";
-import { PageData } from "../../_data";
-import { expectLastCalledWithScale } from "../../helper/expectScale";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-
-/*
- * Ported from recharts 3.8.1 test/state/selectors/selectAxisScale.spec.tsx.
- * Omitted: the reselect `toBe` stability tests and the Redux `dispatch(...)`
- * "should not recompute" test (N/A — no reselect/dispatch in this Solid rewrite).
- * Ported: the value assertions (implicit scale, real scale) and the golden
- * domain/range + rendered X-axis tick geometry.
- */
-
-describe("selectAxisScale", () => {
-  shouldReturnUndefinedOutOfContext((state: RechartsRootState) =>
-    selectAxisScale(state, "xAxis", "foo", false),
-  );
-
-  it("should return implicit scale if there is no XAxis with this ID", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart data={PageData} width={100} height={100}>
-        <Bar dataKey="uv" />
-        <XAxis dataKey="name" />
-        {props.children}
-      </BarChart>
-    ));
-    const { container, spy } = renderTestCase((state: RechartsRootState) =>
-      selectAxisScale(state, "xAxis", "this id is not present in the chart", false),
-    );
-    expect(container.querySelector(".recharts-xAxis")).toBeTruthy();
-    expectLastCalledWithScale(spy, { domain: [0, 1, 2, 3, 4, 5], range: [5, 95] });
-  });
-
-  it("should return scale if there is an Axis in the chart", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart data={PageData} width={100} height={100}>
-        <Bar dataKey="uv" />
-        <XAxis dataKey="name" />
-        {props.children}
-      </BarChart>
-    ));
-    const { container, spy } = renderTestCase((state: RechartsRootState) =>
-      selectAxisScale(state, "xAxis", "0", false),
-    );
-    expect(container.querySelector(".recharts-xAxis")).toBeTruthy();
-    expectLastCalledWithScale(spy, {
-      domain: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"],
-      range: [5, 95],
-    });
-  });
-
-  it("should set the scale domain and range based on the axis type, and data", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart data={PageData} width={100} height={100}>
-        <Bar dataKey="uv" />
-        <XAxis dataKey="name" />
-        {props.children}
-      </BarChart>
-    ));
-    const { container } = renderTestCase((state: RechartsRootState) =>
-      selectAxisScale(state, "xAxis", "0", false),
-    );
-    expectXAxisTicks(container, [
-      { textContent: "Page A", x: "12.5", y: "73" },
-      { textContent: "Page B", x: "27.5", y: "73" },
-      { textContent: "Page C", x: "42.5", y: "73" },
-      { textContent: "Page D", x: "57.5", y: "73" },
-      { textContent: "Page E", x: "72.5", y: "73" },
-      { textContent: "Page F", x: "87.5", y: "73" },
-    ]);
-  });
-
-  it("should not change when an irrelevant property in the state changes", () => {
-    const store = createRechartsStore();
-    const result1 = selectAxisScale(store.state, "xAxis", "0", false);
-    store.actions.tooltip.setActiveMouseOverItemIndex({
-      activeCoordinate: undefined,
-      activeDataKey: "x",
-      activeIndex: "7",
-      activeGraphicalItemId: "foo",
-    });
-    const result2 = selectAxisScale(store.state, "xAxis", "0", false);
-    expect(result1).toEqual(result2);
-  });
-});