solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,234 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,19 @@
+// 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,91 @@
+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);
+  });
+});