solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,128 @@
+// Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.content.spec.tsx.
+//
+// The function-form `content` receives the resolved tooltip prop bag; this spec
+// asserts on that bag at hover time. Harness adaptations: React render → Solid
+// render via createSelectorTestCase; `content` is called with a single argument
+// (no React ref), so the trailing `expect.any(Object)` ref is dropped.
+//
+// PERMANENT-N/A: "should be called and receive payload before any user
+// interactions" (asserts content is invoked with active:false / payload:[] BEFORE
+// any hover) — in the Solid port `content` is only rendered while the tooltip box
+// is mounted (active), so it is never called for the inactive state. The
+// `toHaveBeenCalledTimes(N)` assertions are render-count coupled and likewise
+// dropped (the prop-bag value is what carries the behavior).
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Mock } from "vitest";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { PageData } from "../../_data";
+import { Area, AreaChart, Tooltip } from "../../../src";
+import type { TooltipContentProps } from "../../../src/component/Tooltip";
+import { showTooltip } from "./tooltipTestHelpers";
+import { areaChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+
+const commonChartProps = {
+  width: 400,
+  height: 400,
+};
+
+describe("Tooltip.content", () => {
+  const spy: Mock<(props: TooltipContentProps) => null> = vi.fn(() => null);
+
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+    spy.mockClear();
+  });
+
+  const renderTestCase = createSelectorTestCase((props) => (
+    <AreaChart {...commonChartProps} data={PageData}>
+      <Area dataKey="uv" unit="kg" id="area-uv" />
+      <Area dataKey="pv" unit="$$$" name="My custom name" id="area-pv" />
+      <Area dataKey="amt" id="area-amt" />
+      <Tooltip content={spy} />
+      {props.children}
+    </AreaChart>
+  ));
+
+  it("should be called and receive payload on hover", () => {
+    const { container } = renderTestCase();
+    showTooltip(container, areaChartMouseHoverTooltipSelector);
+
+    // Assert on the first argument only: Solid's JSX runtime appends a resolver
+    // argument when a function child is materialized, which is not part of the
+    // recharts contract (React passes a ref as the 2nd arg, also dropped here).
+    expect(spy.mock.calls.at(-1)?.[0]).toEqual({
+      accessibilityLayer: true,
+      active: true,
+      activeIndex: "2",
+      allowEscapeViewBox: { x: false, y: false },
+      animationDuration: 400,
+      animationEasing: "ease",
+      axisId: 0,
+      content: spy,
+      contentStyle: {},
+      coordinate: { x: 161, y: 200 },
+      cursor: true,
+      filterNull: true,
+      includeHidden: false,
+      isAnimationActive: "auto",
+      itemSorter: "name",
+      itemStyle: {},
+      label: 2,
+      labelStyle: {},
+      offset: 10,
+      payload: [
+        {
+          color: "#3182bd",
+          dataKey: "uv",
+          fill: "#3182bd",
+          graphicalItemId: "area-uv",
+          hide: false,
+          name: "uv",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page C", pv: 1398, uv: 300 },
+          stroke: "#3182bd",
+          strokeWidth: 1,
+          type: undefined,
+          unit: "kg",
+          value: 300,
+        },
+        {
+          color: "#3182bd",
+          dataKey: "pv",
+          fill: "#3182bd",
+          graphicalItemId: "area-pv",
+          hide: false,
+          name: "My custom name",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page C", pv: 1398, uv: 300 },
+          stroke: "#3182bd",
+          strokeWidth: 1,
+          type: undefined,
+          unit: "$$$",
+          value: 1398,
+        },
+        {
+          color: "#3182bd",
+          dataKey: "amt",
+          fill: "#3182bd",
+          graphicalItemId: "area-amt",
+          hide: false,
+          name: "amt",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page C", pv: 1398, uv: 300 },
+          stroke: "#3182bd",
+          strokeWidth: 1,
+          type: undefined,
+          unit: undefined,
+          value: 2400,
+        },
+      ],
+      reverseDirection: { x: false, y: false },
+      separator: " : ",
+      trigger: "hover",
+      useTranslate3d: false,
+      wrapperStyle: {},
+    });
+  });
+});

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

@@ -0,0 +1,152 @@
+import { describe, it, beforeEach } from "vitest";
+import { BarChart, YAxis, XAxis, Tooltip, Bar } from "../../../src";
+import { PageData } from "../../_data";
+import { expectTooltipNotVisible, expectTooltipPayload, showTooltip } from "./tooltipTestHelpers";
+import { barChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { selectTooltipPayload } from "../../../src/state/selectors/tooltipSelectors";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.formatter.spec.tsx
+ * (reproducing https://github.com/recharts/recharts/issues/5658). Validates the
+ * Solid-adapted tooltip test helpers (showTooltip/expectTooltipPayload via
+ * mouseMove + flush). selectTooltipPayload is imported from this port's
+ * tooltipSelectors (recharts re-exports it from selectors).
+ */
+
+describe("Tooltip.formatter reproducing https://github.com/recharts/recharts/issues/5658", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+  const dataKeyAsFunction = (x: any) => x.pv;
+
+  describe("with a name prop", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart
+        width={500}
+        height={300}
+        data={PageData}
+        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip formatter={() => "FORMATTED"} />
+        <Bar dataKey={dataKeyAsFunction} name="ultraviolet" fill="#8884d8" id="bar-with-function" />
+        <Bar dataKey="pv" fill="#8ff4d8" id="bar-pv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should render inside tooltip value what the formatter returned", () => {
+      const { container } = renderTestCase();
+
+      expectTooltipNotVisible(container);
+
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+
+      expectTooltipPayload(container, "Page B", ["pv : FORMATTED", "ultraviolet : FORMATTED"]);
+    });
+
+    it("should select payload", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "1"));
+      expectLastCalledWith(spy, [
+        {
+          color: "#8884d8",
+          dataKey: dataKeyAsFunction,
+          fill: "#8884d8",
+          graphicalItemId: "bar-with-function",
+          hide: false,
+          name: "ultraviolet",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page B", pv: 4567, uv: 300 },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 4567,
+        },
+        {
+          color: "#8ff4d8",
+          dataKey: "pv",
+          fill: "#8ff4d8",
+          graphicalItemId: "bar-pv",
+          hide: false,
+          name: "pv",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page B", pv: 4567, uv: 300 },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 4567,
+        },
+      ]);
+    });
+  });
+
+  describe("without name prop", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <BarChart
+        width={500}
+        height={300}
+        data={PageData}
+        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+      >
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip formatter={() => "FORMATTED"} />
+        <Bar dataKey={dataKeyAsFunction} fill="#8884d8" id="bar-with-function" />
+        <Bar dataKey="pv" fill="#8ff4d8" id="bar-pv" />
+        {props.children}
+      </BarChart>
+    ));
+
+    it("should render inside tooltip value what the formatter returned", () => {
+      const { container } = renderTestCase();
+
+      expectTooltipNotVisible(container);
+
+      showTooltip(container, barChartMouseHoverTooltipSelector);
+
+      expectTooltipPayload(container, "Page B", ["pv : FORMATTED", "FORMATTED"]);
+    });
+
+    it("should select payload", () => {
+      const { spy } = renderTestCase((state) => selectTooltipPayload(state, "axis", "hover", "1"));
+      expectLastCalledWith(spy, [
+        {
+          color: "#8884d8",
+          dataKey: dataKeyAsFunction,
+          fill: "#8884d8",
+          hide: false,
+          name: undefined,
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page B", pv: 4567, uv: 300 },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 4567,
+          graphicalItemId: "bar-with-function",
+        },
+        {
+          color: "#8ff4d8",
+          dataKey: "pv",
+          fill: "#8ff4d8",
+          hide: false,
+          name: "pv",
+          nameKey: undefined,
+          payload: { amt: 2400, name: "Page B", pv: 4567, uv: 300 },
+          stroke: undefined,
+          strokeWidth: undefined,
+          type: undefined,
+          unit: undefined,
+          value: 4567,
+          graphicalItemId: "bar-pv",
+        },
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,79 @@
+import { describe, it } from "vitest";
+import { Area, Bar, ComposedChart, Line, Scatter, Tooltip, XAxis, YAxis } from "../../../src";
+import { PageData } from "../../_data";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { expectTooltipNotVisible, expectTooltipPayload, showTooltip } from "./tooltipTestHelpers";
+import { composedChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.visibility.spec.tsx
+ * "includeHidden prop" block — the two rendered-text behavioral assertions.
+ * The block's many selector-shape tests (selectTooltipAxis settings shape, etc.)
+ * are omitted (brittle vs this port's settings shape); these two cover the actual
+ * includeHidden behaviour: with `includeHidden`, hidden series still appear in the
+ * tooltip; without it, only visible series do.
+ */
+
+describe("Tooltip includeHidden prop", () => {
+  describe("when includeHidden = true", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={400} height={400} data={PageData}>
+        <Area dataKey="uv" hide name="1" />
+        <Bar dataKey="pv" hide name="2" />
+        <Line dataKey="amt" hide name="3" />
+        <Scatter dataKey="uv" hide name="4" />
+        <Line dataKey="pv" name="5" />
+        <XAxis type="number" dataKey="amt" name="stature" unit="cm" />
+        <YAxis type="number" dataKey="pv" name="weight" unit="kg" />
+        <Tooltip includeHidden />
+        {props.children}
+      </ComposedChart>
+    ));
+
+    it("should render tooltip payload for hidden items", () => {
+      mockGetBoundingClientRect({ width: 100, height: 100 });
+      const { container } = renderTestCase();
+
+      expectTooltipNotVisible(container);
+
+      showTooltip(container, composedChartMouseHoverTooltipSelector);
+
+      expectTooltipPayload(container, "2400", [
+        "1 : 400",
+        "2 : 2400",
+        "3 : 2400",
+        "5 : 2400",
+        "stature : 2400cm",
+        "weight : 2400kg",
+      ]);
+    });
+  });
+
+  describe("when includeHidden = false", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={400} height={400} data={PageData}>
+        <Area dataKey="uv" hide name="1" />
+        <Bar dataKey="pv" hide name="2" />
+        <Line dataKey="amt" hide name="3" />
+        <Scatter dataKey="uv" hide name="4" />
+        <Line dataKey="pv" name="5" />
+        <XAxis type="number" dataKey="amt" name="stature" unit="cm" />
+        <YAxis type="number" dataKey="pv" name="weight" unit="kg" />
+        <Tooltip includeHidden={false} />
+        {props.children}
+      </ComposedChart>
+    ));
+
+    it("should hide tooltip for hidden items", () => {
+      mockGetBoundingClientRect({ width: 100, height: 100 });
+      const { container } = renderTestCase();
+
+      expectTooltipNotVisible(container);
+
+      showTooltip(container, composedChartMouseHoverTooltipSelector);
+
+      expectTooltipPayload(container, "2400", ["5 : 2400"]);
+    });
+  });
+});

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

@@ -0,0 +1,165 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from "../../../src";
+import {
+  selectAxisScale,
+  selectCartesianGraphicalItemsData,
+  selectDisplayedData,
+} from "../../../src/state/selectors/axisSelectors";
+import { selectActiveTooltipIndex } from "../../../src/state/selectors/tooltipSelectors";
+import { showTooltipOnCoordinate } from "./tooltipTestHelpers";
+import { composedChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+import { expectLastCalledWithScale } from "../../helper/expectScale";
+import { expectLines } from "../../helper/expectLine";
+import { assertNotNull } from "../../helper/assertNotNull";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.multipleDataArrays.spec.tsx
+ * (reproducing https://github.com/recharts/recharts/issues/3044 — two <Line>s each
+ * with their own `data`). Ported the robust, soup-free selector value assertions
+ * (combined item data, displayed data, golden scale + scale.map) plus the
+ * active-index hover/defaultIndex tests. Solid deviations: selectors return
+ * Accessors spied via createSelectorTestCase, so exact React render-count
+ * assertions (toHaveBeenCalledTimes) are relaxed to value parity
+ * (expectLastCalledWith); the `toBeRechartsScale` custom matcher is replaced by
+ * expectLastCalledWithScale. Omitted: `should select activeTooltipDataPoints` —
+ * its load-bearing by-reference identity assertion (data points must be `===` the
+ * original input rows, which recharts' Redux store preserves) cannot hold in this
+ * port because state flows through Solid store proxies, not plain objects.
+ */
+
+describe("Tooltip in chart with multiple data arrays", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  const data1 = [
+    { xAxis: 10, y1: 4 },
+    { xAxis: 20, y1: 10 },
+    { xAxis: 30, y1: 6 },
+    { xAxis: 40, y1: 8 },
+  ];
+
+  const data2 = [
+    { xAxis: 5, y2: 9 },
+    { xAxis: 12, y2: 7 },
+    { xAxis: 13, y2: 8 },
+    { xAxis: 18, y2: 12 },
+    { xAxis: 25, y2: 12 },
+    { xAxis: 30, y2: 12 },
+  ];
+
+  describe("with default props", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={500} height={300}>
+        <XAxis dataKey="xAxis" type="number" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Line dataKey="y1" data={data1} isAnimationActive={false} />
+        <Line dataKey="y2" data={data2} isAnimationActive={false} />
+        {props.children}
+      </ComposedChart>
+    ));
+
+    it("should render two lines", () => {
+      const { container } = renderTestCase();
+      expectLines(container, [
+        { d: "M172.5,111.667L280,31.667L387.5,85L495,58.333" },
+        { d: "M118.75,45L194,71.667L204.75,58.333L258.5,5L333.75,5L387.5,5" },
+      ]);
+    });
+
+    it("should select individual items data", () => {
+      const { spy } = renderTestCase((state) =>
+        selectCartesianGraphicalItemsData(state, "xAxis", 0),
+      );
+
+      expectLastCalledWith(spy, [
+        { xAxis: 10, y1: 4 },
+        { xAxis: 20, y1: 10 },
+        { xAxis: 30, y1: 6 },
+        { xAxis: 40, y1: 8 },
+        { xAxis: 5, y2: 9 },
+        { xAxis: 12, y2: 7 },
+        { xAxis: 13, y2: 8 },
+        { xAxis: 18, y2: 12 },
+        { xAxis: 25, y2: 12 },
+        { xAxis: 30, y2: 12 },
+      ]);
+    });
+
+    it("should select displayed data", () => {
+      const { spy } = renderTestCase((state) => selectDisplayedData(state, "xAxis", 0, false));
+
+      expectLastCalledWith(spy, [
+        { xAxis: 10, y1: 4 },
+        { xAxis: 20, y1: 10 },
+        { xAxis: 30, y1: 6 },
+        { xAxis: 40, y1: 8 },
+        { xAxis: 5, y2: 9 },
+        { xAxis: 12, y2: 7 },
+        { xAxis: 13, y2: 8 },
+        { xAxis: 18, y2: 12 },
+        { xAxis: 25, y2: 12 },
+        { xAxis: 30, y2: 12 },
+      ]);
+    });
+
+    it("should select scale", () => {
+      const { spy } = renderTestCase((state) => selectAxisScale(state, "xAxis", 0, false));
+
+      expectLastCalledWithScale(spy, { domain: [0, 40], range: [65, 495] });
+      const scale = spy.mock.lastCall?.[0];
+      assertNotNull(scale);
+      expect(scale.map(5)).toBe(118.75);
+      expect(scale.map(30)).toBe(387.5);
+      expect(scale.map(40)).toBe(495);
+    });
+
+    it("should highlight the first dot when hovering the first xaxis tick", () => {
+      const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+      expectLastCalledWith(spy, null);
+
+      showTooltipOnCoordinate(container, composedChartMouseHoverTooltipSelector, {
+        clientX: 118.75,
+        clientY: 100,
+      });
+      // this is 4 because the tick is at xAxis=5 which is the fifth point in the displayedData array
+      expectLastCalledWith(spy, "4");
+    });
+
+    it("should highlight the last dot when hovering the last xaxis tick", () => {
+      const { container, spy } = renderTestCase(selectActiveTooltipIndex);
+      expectLastCalledWith(spy, null);
+
+      showTooltipOnCoordinate(container, composedChartMouseHoverTooltipSelector, {
+        clientX: 495,
+        clientY: 100,
+      });
+      // this is 3 because the tick is at xAxis=40 which is the fourth point in the displayedData array
+      expectLastCalledWith(spy, "3");
+    });
+  });
+
+  describe("with defaultIndex=0", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={500} height={300}>
+        <XAxis dataKey="xAxis" type="number" />
+        <YAxis />
+        <Tooltip defaultIndex={0} />
+        <Legend />
+        <Line dataKey="y1" data={data1} isAnimationActive={false} />
+        <Line dataKey="y2" data={data2} isAnimationActive={false} />
+        {props.children}
+      </ComposedChart>
+    ));
+
+    it("should highlight the first dot", () => {
+      const { spy } = renderTestCase(selectActiveTooltipIndex);
+      expectLastCalledWith(spy, "0");
+    });
+  });
+});

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

@@ -0,0 +1,113 @@
+import { describe, it, beforeEach } from "vitest";
+import type { ComponentProps } from "solid-js";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { Line, LineChart, Tooltip } from "../../../src";
+import { expectTooltipCoordinate, showTooltipOnCoordinate } from "./tooltipTestHelpers";
+import { lineChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+
+/* Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.offset.spec.tsx. */
+
+describe("Tooltip offset", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 10, height: 10 });
+  });
+
+  const renderTestCase = (offset: ComponentProps<typeof Tooltip>["offset"]) =>
+    createSelectorTestCase((props) => (
+      <LineChart
+        width={100}
+        height={100}
+        data={[
+          { name: "A", value: 1 },
+          { name: "B", value: 1 },
+          { name: "C", value: 1 },
+        ]}
+        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+      >
+        <Line dataKey="value" />
+        {props.children}
+        <Tooltip offset={offset} />
+      </LineChart>
+    ))();
+
+  describe("with number offset", () => {
+    it("should position tooltip at { x: 10, y: 30 } with default offset (10)", () => {
+      const { container } = renderTestCase(10);
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      /*
+       * Data points: A(x=0), B(x=50), C(x=100) with width=100, margin=0
+       * Mouse at (20, 20) is closest to point A at x=0
+       * tooltipX = 0 + offset(10) = 10
+       * tooltipY = 20 + offset(10) = 30
+       */
+      expectTooltipCoordinate(container, { x: 10, y: 30 });
+    });
+
+    it("should position tooltip at { x: 20, y: 40 } with offset=20", () => {
+      const { container } = renderTestCase(20);
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 20, y: 40 });
+    });
+
+    it("should position tooltip at { x: 0, y: 20 } with offset=0", () => {
+      const { container } = renderTestCase(0);
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 0, y: 20 });
+    });
+  });
+
+  describe("with Coordinate offset (different x and y)", () => {
+    it("should position tooltip at { x: 10, y: 50 } with offset={ x: 10, y: 30 }", () => {
+      const { container } = renderTestCase({ x: 10, y: 30 });
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 10, y: 50 });
+    });
+
+    it("should position tooltip at { x: 0, y: 30 } with offset={ x: 0, y: 10 }", () => {
+      const { container } = renderTestCase({ x: 0, y: 10 });
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 0, y: 30 });
+    });
+
+    it("should position tooltip at { x: 10, y: 20 } with offset={ x: 10, y: 0 }", () => {
+      const { container } = renderTestCase({ x: 10, y: 0 });
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 20,
+        clientY: 20,
+      });
+      expectTooltipCoordinate(container, { x: 10, y: 20 });
+    });
+  });
+
+  describe("with negative offset value", () => {
+    it("should position tooltip at { x: 45, y: 35 } with offset={ x: -5, y: 15 }", () => {
+      const { container } = renderTestCase({ x: -5, y: 15 });
+      showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+        clientX: 50,
+        clientY: 20,
+      });
+      /*
+       * Mouse at (50, 20) is closest to point B at x=50
+       * tooltipX = 50 + offset(-5) = 45
+       * tooltipY = 20 + offset(15) = 35
+       */
+      expectTooltipCoordinate(container, { x: 45, y: 35 });
+    });
+  });
+});