solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/component/Tooltip/defaultIndex.spec.tsx

@@ -0,0 +1,227 @@
+import { describe, it, expect } from "vitest";
+import { Bar, BarChart, Line, LineChart, Pie, PieChart, Tooltip, XAxis, YAxis } from "../../../src";
+import { PageData } from "../../_data";
+import {
+  selectActiveIndex,
+  selectActiveLabel,
+  selectTooltipPayload,
+} from "../../../src/state/selectors/tooltipSelectors";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { expectTooltipPayload, showTooltip } from "./tooltipTestHelpers";
+import {
+  barChartMouseHoverTooltipSelector,
+  pieChartMouseHoverTooltipSelector,
+} from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/defaultIndex.spec.tsx.
+ * Selectors imported from tooltipSelectors (no `selectors` barrel in the port).
+ */
+
+describe("defaultIndex", () => {
+  describe("in BarChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={800} height={400} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis dataKey="uv" />
+        <Bar dataKey="uv" id="my-bar-1" />
+        <Tooltip defaultIndex={3} />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should select tooltip payload", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "3"));
+      expectLastCalledWith(spy, [
+        {
+          color: undefined,
+          dataKey: "uv",
+          fill: undefined,
+          graphicalItemId: "my-bar-1",
+          hide: false,
+          name: "uv",
+          nameKey: undefined,
+          payload: {
+            amt: 2400,
+            name: "Page D",
+            pv: 9800,
+            uv: 200,
+          },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 200,
+        },
+      ]);
+    });
+
+    it("should update the payload after mouse hover", () => {
+      mockGetBoundingClientRect({ width: 100, height: 100 });
+      const { container, spy } = renderTestCase((state) =>
+        selectTooltipPayload(state, "axis", "hover", undefined),
+      );
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expectLastCalledWith(spy, [
+        {
+          color: undefined,
+          dataKey: "uv",
+          fill: undefined,
+          graphicalItemId: "my-bar-1",
+          hide: false,
+          name: "uv",
+          nameKey: undefined,
+          payload: {
+            amt: 2400,
+            name: "Page B",
+            pv: 4567,
+            uv: 300,
+          },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 300,
+        },
+      ]);
+    });
+
+    it("should render tooltip before user interaction", () => {
+      const { container } = renderTestCase();
+      expectTooltipPayload(container, "Page D", ["uv : 200"]);
+    });
+  });
+
+  describe("in LineChart with multiple XAxes", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={400} height={400} data={PageData}>
+        <Line dataKey="uv" isAnimationActive={false} id="my-line-1" />
+        <XAxis dataKey="name" xAxisId="xaxis-name" />
+        <XAxis dataKey="pv" orientation="top" xAxisId="xaxis-pv" />
+        <YAxis dataKey="uv" />
+        <Tooltip defaultIndex={3} axisId="xaxis-name" />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should select tooltip axis ticks", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "3"));
+      expectLastCalledWith(spy, [
+        {
+          color: "#3182bd",
+          dataKey: "uv",
+          fill: "#fff",
+          graphicalItemId: "my-line-1",
+          hide: false,
+          name: "uv",
+          nameKey: undefined,
+          payload: {
+            amt: 2400,
+            name: "Page D",
+            pv: 9800,
+            uv: 200,
+          },
+          stroke: "#3182bd",
+          strokeWidth: 1,
+          type: undefined,
+          unit: undefined,
+          value: 200,
+        },
+      ]);
+    });
+
+    it("should select active label", () => {
+      const { spy } = renderTestCase((state) => selectActiveLabel(state, "axis", "hover", "3"));
+      expectLastCalledWith(spy, "Page D");
+    });
+
+    it("should render tooltip before user interaction", () => {
+      const { container } = renderTestCase();
+      expectTooltipPayload(container, "Page D", ["uv : 200"]);
+    });
+  });
+
+  describe("in PieChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <PieChart width={400} height={400}>
+        <Pie data={PageData} dataKey="pv" isAnimationActive={false} id="my-pie-1" />
+        {props.children}
+      </PieChart>
+    ));
+
+    it("should select active index as the default", () => {
+      const { spy } = renderTestCase((state) => selectActiveIndex(state, "item", "hover", "3"));
+      expectLastCalledWith(spy, "3");
+    });
+
+    it("should render sectors", () => {
+      const { container } = renderTestCase();
+      expect(container.querySelectorAll(pieChartMouseHoverTooltipSelector)).toHaveLength(6);
+    });
+
+    it("should update the active index after mouse hover", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectActiveIndex(state, "item", "hover", "3"),
+      );
+      showTooltip(container, pieChartMouseHoverTooltipSelector);
+      expectLastCalledWith(spy, "0");
+    });
+
+    it("should select tooltip payload", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "item", "hover", "3"));
+      expectLastCalledWith(spy, [
+        {
+          color: "#808080",
+          dataKey: "pv",
+          fill: "#808080",
+          graphicalItemId: "my-pie-1",
+          hide: false,
+          name: "Page D",
+          nameKey: "name",
+          payload: {
+            amt: 2400,
+            name: "Page D",
+            pv: 9800,
+            uv: 200,
+          },
+          stroke: "#fff",
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 9800,
+        },
+      ]);
+    });
+
+    it("should update the payload after mouse hover", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectTooltipPayload(state, "item", "hover", "3"),
+      );
+      showTooltip(container, pieChartMouseHoverTooltipSelector);
+      expectLastCalledWith(spy, [
+        {
+          color: "#808080",
+          dataKey: "pv",
+          fill: "#808080",
+          graphicalItemId: "my-pie-1",
+          hide: false,
+          name: "Page A",
+          nameKey: "name",
+          payload: {
+            amt: 2400,
+            name: "Page A",
+            pv: 2400,
+            uv: 400,
+          },
+          stroke: "#fff",
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 2400,
+        },
+      ]);
+    });
+  });
+});

package/test/component/Tooltip/graphicalItem.formatter.spec.tsx

@@ -0,0 +1,138 @@
+/**
+ * Tests for per-graphical-item formatter prop, addressing:
+ * https://github.com/recharts/recharts/issues/6210
+ *
+ * Ported from recharts 3.9.1 test/component/Tooltip/graphicalItem.formatter.spec.tsx.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { BarChart, XAxis, YAxis, Tooltip, Bar, LineChart, Line } from "../../../src";
+import { PageData } from "../../_data";
+import { expectTooltipNotVisible, expectTooltipPayload, showTooltip } from "./tooltipTestHelpers";
+import {
+  barChartMouseHoverTooltipSelector,
+  lineChartMouseHoverTooltipSelector,
+} from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { selectTooltipPayload } from "../../../src/state/selectors/tooltipSelectors";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+describe("per-graphical-item formatter prop (issue #6210)", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe("Bar with formatter", () => {
+    const barFormatter = vi.fn(() => "BAR_FORMATTED");
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={500} height={300} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Bar dataKey="pv" fill="#8884d8" id="bar-pv" formatter={barFormatter} />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should include formatter in the tooltip payload entry", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "1"));
+      expectLastCalledWith(spy, [
+        expect.objectContaining({
+          dataKey: "pv",
+          formatter: barFormatter,
+        }),
+      ]);
+    });
+
+    it("should render the formatted value in the tooltip", () => {
+      const { container } = renderTestCase();
+      expectTooltipNotVisible(container);
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expectTooltipPayload(container, "Page B", ["pv : BAR_FORMATTED"]);
+    });
+  });
+
+  describe("Bar formatter takes precedence over Tooltip formatter", () => {
+    const barFormatter = vi.fn(() => "PER_BAR");
+    const tooltipFormatter = vi.fn(() => "TOOLTIP_LEVEL");
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={500} height={300} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip formatter={tooltipFormatter} />
+        <Bar dataKey="pv" fill="#8884d8" id="bar-pv" formatter={barFormatter} />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should render value from the per-item formatter, not the tooltip-level formatter", () => {
+      const { container } = renderTestCase();
+      expectTooltipNotVisible(container);
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expectTooltipPayload(container, "Page B", ["pv : PER_BAR"]);
+    });
+  });
+
+  describe("mixed: two Bars, one with formatter, one without", () => {
+    const barFormatterForPv = vi.fn(() => "FORMATTED_PV");
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart width={500} height={300} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Bar dataKey="pv" fill="#8884d8" id="bar-pv" formatter={barFormatterForPv} />
+        <Bar dataKey="uv" fill="#82ca9d" id="bar-uv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should apply per-item formatter to pv but not uv", () => {
+      const { container } = renderTestCase();
+      expectTooltipNotVisible(container);
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+      expectTooltipPayload(container, "Page B", ["pv : FORMATTED_PV", "uv : 300"]);
+    });
+
+    it("should include formatter only on the bar that has it", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "1"));
+      expectLastCalledWith(spy, [
+        expect.objectContaining({ dataKey: "pv", formatter: barFormatterForPv }),
+        expect.objectContaining({ dataKey: "uv", formatter: undefined }),
+      ]);
+    });
+  });
+
+  describe("Line with formatter", () => {
+    const lineFormatter = vi.fn(() => "LINE_FORMATTED");
+
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart width={500} height={300} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Line dataKey="pv" stroke="#8884d8" id="line-pv" formatter={lineFormatter} />
+        {props.children}
+      </LineChart>
+    ));
+
+    it("should include formatter in the tooltip payload entry", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "1"));
+      expectLastCalledWith(spy, [
+        expect.objectContaining({
+          dataKey: "pv",
+          formatter: lineFormatter,
+        }),
+      ]);
+    });
+
+    it("should render the formatted value in the tooltip", () => {
+      const { container } = renderTestCase();
+      expectTooltipNotVisible(container);
+      showTooltip(container, lineChartMouseHoverTooltipSelector);
+      expectTooltipPayload(container, "Page C", ["pv : LINE_FORMATTED"]);
+    });
+  });
+});