solid-recharts 0.2.1 → 1.0.0

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

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

@@ -1,138 +0,0 @@
-/**
- * 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"]);
-    });
-  });
-});