solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,344 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { fireEvent, render } from "@solidjs/testing-library";
+import { PageData } from "../../_data";
+import { getTooltip, hideTooltip, showTooltip } from "./tooltipTestHelpers";
+import {
+  Bar,
+  BarChart,
+  Funnel,
+  FunnelChart,
+  Pie,
+  PieChart,
+  RadialBar,
+  RadialBarChart,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+} from "../../../src";
+import {
+  barChartItemMouseHoverTooltipSelector,
+  barChartMouseHoverTooltipSelector,
+  funnelChartMouseHoverTooltipSelector,
+  pieChartMouseHoverTooltipSelector,
+  radialBarMouseHoverTooltipSelector,
+  scatterChartMouseHoverTooltipSelector,
+} from "./tooltipMouseHoverSelectors";
+import { TooltipTrigger } from "../../../src/chart/types";
+import { assertNotNull } from "../../helper/assertNotNull";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/tooltipEventType.spec.tsx.
+ * Solid adaptations: render(() => …); Component takes props (no destructure);
+ * flush() after each raw fireEvent (Solid defers reactive propagation); userEvent
+ * .hover replaced with fireEvent.mouseOver. Item-hover interactions go through the
+ * mouseMove+mouseEnter showTooltip helper (the port's surface listens for mouseMove,
+ * per-item Layers for the non-bubbling mouseEnter).
+ */
+
+type TooltipTriggerProps = { tooltipTrigger: TooltipTrigger | undefined };
+
+type TooltipEventTypeTestCase = {
+  testName: string;
+  Component: (props: TooltipTriggerProps) => JSX.Element;
+};
+
+type TooltipEventTypeItemTestCase = TooltipEventTypeTestCase & {
+  itemSelector: string;
+};
+
+const axisTestCases: ReadonlyArray<TooltipEventTypeTestCase> = [
+  {
+    testName: "BarChart",
+    Component: (props) => (
+      <BarChart width={500} height={500} data={PageData}>
+        <Bar isAnimationActive={false} dataKey="uv" />
+        <Tooltip trigger={props.tooltipTrigger} />
+      </BarChart>
+    ),
+  },
+  {
+    testName: "RadialBarChart",
+    Component: (props) => (
+      <RadialBarChart width={500} height={500} data={PageData}>
+        <RadialBar dataKey="uv" />
+        <Tooltip trigger={props.tooltipTrigger} />
+      </RadialBarChart>
+    ),
+  },
+];
+
+const itemTestCases: ReadonlyArray<TooltipEventTypeItemTestCase> = [
+  {
+    testName: "BarChart Bar with tooltip.shared=false",
+    Component: (props) => (
+      <BarChart width={500} height={500} data={PageData}>
+        <Bar isAnimationActive={false} dataKey="uv" />
+        <Tooltip shared={false} trigger={props.tooltipTrigger} />
+      </BarChart>
+    ),
+    itemSelector: barChartItemMouseHoverTooltipSelector,
+  },
+  {
+    // This is a special case - Bar shows tooltip when rendering over its background, too.
+    testName: "BarChart Background with tooltip.shared=false",
+    Component: (props) => (
+      <BarChart width={500} height={500} data={PageData}>
+        <Bar isAnimationActive={false} dataKey="uv" background={{ stroke: "red" }} />
+        <Tooltip shared={false} trigger={props.tooltipTrigger} />
+      </BarChart>
+    ),
+    itemSelector: ".recharts-bar-background-rectangle",
+  },
+  {
+    testName: "FunnelChart",
+    Component: (props) => (
+      <FunnelChart width={500} height={500}>
+        <Funnel dataKey="uv" data={PageData} />
+        <Tooltip trigger={props.tooltipTrigger} />
+      </FunnelChart>
+    ),
+    itemSelector: funnelChartMouseHoverTooltipSelector,
+  },
+  {
+    testName: "PieChart",
+    Component: (props) => (
+      <PieChart width={500} height={500}>
+        <Pie
+          isAnimationActive={false}
+          cx={250}
+          cy={250}
+          innerRadius={0}
+          outerRadius={200}
+          data={PageData}
+          dataKey="uv"
+        />
+        <Tooltip trigger={props.tooltipTrigger} />
+      </PieChart>
+    ),
+    itemSelector: pieChartMouseHoverTooltipSelector,
+  },
+  {
+    testName: "ScatterChart",
+    Component: (props) => (
+      <ScatterChart width={500} height={500}>
+        <Scatter data={PageData} dataKey="uv" />
+        <Tooltip trigger={props.tooltipTrigger} />
+      </ScatterChart>
+    ),
+    itemSelector: scatterChartMouseHoverTooltipSelector,
+  },
+  {
+    testName: "RadialBarChart with shared=false",
+    Component: (props) => (
+      <RadialBarChart width={500} height={500} data={PageData}>
+        <RadialBar dataKey="uv" isAnimationActive={false} />
+        <Tooltip shared={false} trigger={props.tooltipTrigger} />
+      </RadialBarChart>
+    ),
+    itemSelector: radialBarMouseHoverTooltipSelector,
+  },
+];
+
+describe("tooltipEventType", () => {
+  describe.each(axisTestCases.concat(itemTestCases))(
+    "basic assumptions in $testName",
+    ({ Component }) => {
+      describe.each(["hover", "click", undefined] as const)("trigger=%s", (tooltipTrigger) => {
+        it("should not display any tooltip before user interaction", () => {
+          const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+          const tooltip = getTooltip(container);
+          expect(tooltip).not.toBeVisible();
+        });
+
+        it("should render chart area", () => {
+          const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+          expect(container.querySelector(".recharts-wrapper")).not.toBeNull();
+          expect(container.querySelector(".recharts-wrapper")).toBeVisible();
+        });
+      });
+    },
+  );
+
+  describe.each(axisTestCases)("axis in $testName", ({ Component }) => {
+    beforeEach(() => {
+      mockGetBoundingClientRect({ width: 100, height: 100 });
+    });
+
+    describe.each(["hover", undefined] as const)("trigger=%s", (tooltipTrigger) => {
+      it("should display tooltip when hovering over chart area, and hide it on mouse out", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+        const tooltip = getTooltip(container);
+
+        showTooltip(container, barChartMouseHoverTooltipSelector);
+
+        expect(tooltip).toBeVisible();
+
+        hideTooltip(container, barChartMouseHoverTooltipSelector);
+
+        expect(tooltip).not.toBeVisible();
+      });
+
+      it("should not react to mouse clicks", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).not.toBeVisible();
+
+        const trigger = container.querySelector(".recharts-wrapper");
+        assertNotNull(trigger);
+
+        fireEvent.click(trigger, { clientX: 200, clientY: 200 });
+        flush();
+
+        expect(tooltip).not.toBeVisible();
+      });
+    });
+
+    describe("trigger=click", () => {
+      const tooltipTrigger = "click";
+      it("should display tooltip when clicking anywhere on the chart, and keep it there when clicking again", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).not.toBeVisible();
+
+        const trigger = container.querySelector(".recharts-wrapper");
+        assertNotNull(trigger);
+
+        fireEvent.click(trigger, { clientX: 200, clientY: 200 });
+        flush();
+
+        expect(tooltip).toBeVisible();
+
+        fireEvent.click(trigger, { clientX: 200, clientY: 200 });
+        flush();
+
+        expect(tooltip).toBeVisible();
+      });
+
+      it("should not react to mouse over", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).not.toBeVisible();
+
+        const trigger = container.querySelector(".recharts-wrapper");
+        assertNotNull(trigger);
+
+        fireEvent.mouseOver(trigger, { clientX: 200, clientY: 200 });
+        flush();
+
+        expect(tooltip).not.toBeVisible();
+      });
+    });
+  });
+
+  describe.each(itemTestCases)("item in $testName", ({ Component, itemSelector }) => {
+    beforeEach(() => {
+      mockGetBoundingClientRect({ width: 100, height: 100 });
+    });
+
+    describe.each(["hover", "click", undefined] as const)("trigger=%s", (tooltipTrigger) => {
+      it("should render some items with given selector", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+        expect(container.querySelector(itemSelector)).not.toBeNull();
+        expect(container.querySelector(itemSelector)).toBeVisible();
+      });
+
+      it("should not react to mouse clicks or hovers on chart area", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+
+        const trigger = container.querySelector(".recharts-wrapper");
+        assertNotNull(trigger);
+
+        fireEvent.click(trigger, { clientX: 200, clientY: 200 });
+        flush();
+        expect(tooltip).not.toBeVisible();
+
+        fireEvent.mouseOver(trigger, { clientX: 200, clientY: 200 });
+        flush();
+        expect(tooltip).not.toBeVisible();
+      });
+    });
+
+    describe.each(["hover", undefined] as const)("trigger=%s", (tooltipTrigger) => {
+      it("should display tooltip when hovering over the item element", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).not.toBeVisible();
+
+        showTooltip(container, itemSelector, undefined, false);
+        expect(tooltip).toBeVisible();
+
+        // this is needed for bar background - for some reason it needs to select the trigger twice, otherwise mouseOut does not dismiss the tooltip
+        const trigger2 = container.querySelector(itemSelector);
+        assertNotNull(trigger2);
+        fireEvent.mouseOut(trigger2);
+        fireEvent.mouseLeave(trigger2);
+        flush();
+        expect(tooltip).not.toBeVisible();
+      });
+
+      it("should not react to mouse clicks on the item", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).not.toBeVisible();
+
+        const trigger = container.querySelector(itemSelector);
+        assertNotNull(trigger);
+
+        fireEvent.click(trigger, { clientX: 200, clientY: 200 });
+        flush();
+        expect(tooltip).not.toBeVisible();
+      });
+    });
+
+    describe("trigger=click", () => {
+      const tooltipTrigger = "click";
+      it("should display tooltip when clicking on the item element, and keep it there on second click too, and after mouse over too", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+
+        const trigger = container.querySelector(itemSelector);
+        assertNotNull(trigger);
+
+        fireEvent.click(trigger, { clientX: 20, clientY: 20 });
+        flush();
+        expect(tooltip).toBeVisible();
+
+        fireEvent.click(trigger, { clientX: 20, clientY: 20 });
+        flush();
+        expect(tooltip).toBeVisible();
+
+        fireEvent.mouseLeave(trigger);
+        flush();
+        expect(tooltip).toBeVisible();
+
+        fireEvent.mouseLeave(container);
+        flush();
+        expect(tooltip).toBeVisible();
+      });
+
+      it("should not react to mouse hover on the item", () => {
+        const { container } = render(() => <Component tooltipTrigger={tooltipTrigger} />);
+
+        const tooltip = getTooltip(container);
+
+        const trigger = container.querySelector(itemSelector);
+        assertNotNull(trigger);
+
+        fireEvent.mouseOver(trigger, { clientX: 20, clientY: 20 });
+        flush();
+        expect(tooltip).not.toBeVisible();
+      });
+    });
+  });
+});

package/test/component/Tooltip/tooltipMouseHoverSelectors.ts

@@ -0,0 +1,41 @@
+/*
+ * Ported verbatim from recharts 3.8.1 test/component/Tooltip/tooltipMouseHoverSelectors.ts.
+ *
+ * Different charts respond differently to mouse hover: some show the tooltip
+ * optimistically (hover anywhere over `.recharts-wrapper`), others require hovering
+ * precisely over a graphical element. Use these selectors with `showTooltip`.
+ */
+export type MouseHoverTooltipTriggerSelector = string;
+
+export const areaChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const barChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const barChartItemMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-bar-rectangle";
+export const barMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-bar-rectangle";
+export const lineChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const composedChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const pieChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-pie-sector";
+export const radarChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const radialBarChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-wrapper";
+export const radialBarMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-radial-bar-sector";
+export const sankeyNodeMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-sankey-nodes .recharts-rectangle";
+export const sankeyLinkMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-sankey-links .recharts-sankey-link";
+export const scatterChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-scatter-symbol";
+export const sunburstChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-sector";
+export const treemapNodeChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-treemap-depth-2 .recharts-rectangle";
+export const funnelChartMouseHoverTooltipSelector: MouseHoverTooltipTriggerSelector =
+  ".recharts-funnel-trapezoid";

package/test/component/Tooltip/tooltipTestHelpers.tsx

@@ -0,0 +1,162 @@
+import { expect, vi } from "vitest";
+import { flush } from "solid-js";
+import { fireEvent } from "@solidjs/testing-library";
+import { assertNotNull } from "../../helper/assertNotNull";
+import type { Coordinate } from "../../../src/util/types";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/tooltipTestHelpers.tsx.
+ * Solid adaptations:
+ *  - recharts triggers the tooltip with `fireEvent.mouseOver`; this port's chart
+ *    surface (RechartsWrapper) listens to `onMouseMove`, and mousemove bubbles up
+ *    from any descendant trigger element, so hover uses `fireEvent.mouseMove`.
+ *  - recharts settles state with `act(() => vi.runOnlyPendingTimers())` (rAF in a
+ *    Redux middleware). This port settles with Solid's `flush()`.
+ * Remember to `mockGetBoundingClientRect({ width, height })` in tests that assert
+ * tooltip visibility/coordinates — jsdom returns an all-zero rect otherwise.
+ */
+
+export function getTooltip(container: Element): HTMLElement {
+  const allWrappers = container.querySelectorAll(".recharts-tooltip-wrapper");
+  assertNotNull(allWrappers);
+  expect(allWrappers).toHaveLength(1);
+  const element = allWrappers[0];
+  assertNotNull(element);
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(`Expected instance of HTMLElement, instead received: [${element.nodeName}]`);
+  }
+  return element;
+}
+
+export type MouseCoordinate = { clientX: number; clientY: number };
+
+const defaultCoordinates: MouseCoordinate = { clientX: 200, clientY: 200 };
+
+function showTooltipWithEvent(
+  container: Element,
+  selector: string | undefined,
+  maybeCoordinate: MouseCoordinate | undefined,
+  event: "click" | "touch" | "hover",
+  debug?: () => void,
+  advanceTimers = true,
+): Element {
+  const tooltipTriggerElement = selector != null ? container.querySelector(selector) : container;
+  if (tooltipTriggerElement == null && debug != null) {
+    debug();
+  }
+  assertNotNull(tooltipTriggerElement);
+  expect(tooltipTriggerElement).toBeInTheDocument();
+  expect(tooltipTriggerElement).toBeVisible();
+  const coordinate = maybeCoordinate ?? defaultCoordinates;
+  switch (event) {
+    case "click": {
+      fireEvent.click(tooltipTriggerElement, coordinate);
+      break;
+    }
+    case "touch": {
+      fireEvent.touchMove(tooltipTriggerElement, { touches: [coordinate] });
+      break;
+    }
+    case "hover": {
+      // recharts fires `mouseOver`. This port's chart surface (RechartsWrapper)
+      // reacts to `mouseMove`, while individual graphical items (Pie/Bar sectors)
+      // react to a non-bubbling `mouseEnter` on their wrapping Layer. Fire both so
+      // a single helper call covers shared-chart and per-item triggers (each is a
+      // no-op on the element that doesn't listen for it).
+      fireEvent.mouseMove(tooltipTriggerElement, coordinate);
+      fireEvent.mouseEnter(tooltipTriggerElement, coordinate);
+      break;
+    }
+    default: {
+      throw new Error("Unexpected event type");
+    }
+  }
+  flush();
+  if (advanceTimers) {
+    vi.runAllTimers();
+    flush();
+  }
+  return tooltipTriggerElement;
+}
+
+/**
+ * Simulate a mouse hover on a trigger element to show the tooltip.
+ * Remember to mock getBoundingClientRect, otherwise jsdom never treats the event
+ * as a chart event. `selector` is the trigger (see tooltipMouseHoverSelectors);
+ * `undefined` uses the container itself.
+ */
+export function showTooltipOnCoordinate(
+  container: Element,
+  selector: string | undefined,
+  coordinates: MouseCoordinate | undefined,
+  debug?: () => void,
+  advanceTimers = true,
+): Element {
+  return showTooltipWithEvent(container, selector, coordinates, "hover", debug, advanceTimers);
+}
+
+export function showTooltipOnCoordinateTouch(
+  container: Element,
+  selector: string | undefined,
+  coordinates: MouseCoordinate | undefined,
+  debug?: () => void,
+): Element {
+  return showTooltipWithEvent(container, selector, coordinates, "touch", debug);
+}
+
+/** Hover the trigger at the default coordinate (200, 200) to show the tooltip. */
+export function showTooltip(
+  container: Element,
+  selector?: string,
+  debug?: () => void,
+  advanceTimers = true,
+): Element {
+  return showTooltipOnCoordinate(container, selector, defaultCoordinates, debug, advanceTimers);
+}
+
+export function hideTooltip(container: Element, mouseHoverSelector: string): void {
+  const element = container.querySelector(mouseHoverSelector);
+  assertNotNull(element);
+  fireEvent.mouseLeave(element);
+  flush();
+}
+
+export function showTooltipClick(
+  container: Element,
+  selector?: string,
+  debug?: () => void,
+): Element {
+  return showTooltipWithEvent(container, selector, defaultCoordinates, "click", debug);
+}
+
+export function expectTooltipNotVisible(container: Element): void {
+  assertNotNull(container);
+  const tooltip = getTooltip(container);
+  expect(tooltip).not.toBeVisible();
+}
+
+export function expectTooltipPayload(
+  container: Element,
+  expectedTooltipTitle: string,
+  expectedTooltipContent: ReadonlyArray<string>,
+): void {
+  const tooltip = getTooltip(container);
+  assertNotNull(tooltip);
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toBeVisible();
+  expect
+    .soft(tooltip.querySelector(".recharts-tooltip-label")?.textContent)
+    .toBe(expectedTooltipTitle);
+  const tooltipItems = tooltip.querySelectorAll(".recharts-tooltip-item");
+  expect
+    .soft(Array.from(tooltipItems).map((item) => item.textContent))
+    .toEqual(expectedTooltipContent);
+}
+
+export function expectTooltipCoordinate(container: Element, expectedCoordinate: Coordinate): void {
+  const tooltip = getTooltip(container);
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toBeVisible();
+  const { transform } = tooltip.style;
+  expect(transform).toContain(`translate(${expectedCoordinate.x}px, ${expectedCoordinate.y}px)`);
+}

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

@@ -0,0 +1,48 @@
+// First-light spec for the Tooltip vertical: with `defaultIndex` the tooltip
+// activates WITHOUT any mouse interaction, exercising the whole payload pipeline
+// — SetTooltipEntrySettings registration → combineTooltipPayloadConfigurations →
+// combineActiveTooltipIndex → combineTooltipPayload (findEntryInArray on the axis
+// dataKey) → combineActiveLabel → DefaultTooltipContent rendering via the portal.
+//
+// `flush()` after render: the line/area register and the tooltip settings dispatch
+// through microtask-batched effects, and the portal target attaches via a ref.
+import { describe, expect, it } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, Tooltip } from "../../src";
+import { PageData } from "../_data";
+
+describe("<Tooltip /> defaultIndex (first light)", () => {
+  it("renders the default-index payload without any interaction", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <Line dataKey="uv" stroke="#ff7300" />
+        <Tooltip defaultIndex={2} />
+      </LineChart>
+    ));
+    flush();
+
+    const tooltip = container.querySelector(".recharts-default-tooltip");
+    expect(tooltip).not.toBeNull();
+
+    // Label = the categorical X tick at index 2 → "Page C".
+    const label = container.querySelector(".recharts-tooltip-label");
+    expect(label?.textContent).toBe("Page C");
+
+    // One item: name falls back to the dataKey ("uv"), value is uv at index 2 (300).
+    const names = [...container.querySelectorAll(".recharts-tooltip-item-name")].map(
+      (n) => n.textContent,
+    );
+    const values = [...container.querySelectorAll(".recharts-tooltip-item-value")].map(
+      (n) => n.textContent,
+    );
+    expect(names).toEqual(["uv"]);
+    expect(values).toEqual(["300"]);
+  });
+});

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

@@ -0,0 +1,61 @@
+// Hover spec for the Tooltip vertical: a mousemove over the chart activates the
+// axis tooltip. Exercises the pointer→index path — getRelativeCoordinate →
+// selectActivePropsFromChartPointer (isInCartesianRange + calculateActiveTickIndex
+// + getActiveCartesianCoordinate) → setMouseOverAxisIndex → the same payload
+// pipeline the defaultIndex spec covers.
+//
+// jsdom getBoundingClientRect is all-zero, so getRelativeCoordinate's scale is 1
+// and relativeX === clientX. The point x-scale over 6 categories in [20, 380]
+// places index 2 ("Page C") at x = 164; a mousemove there selects it.
+import { describe, expect, it, vi } from "vitest";
+import { flush } from "solid-js";
+import { render, fireEvent } from "@solidjs/testing-library";
+import { LineChart, Line, XAxis, Tooltip } from "../../src";
+import { PageData } from "../_data";
+
+describe("<Tooltip /> hover (axis)", () => {
+  it("activates the tooltip at the hovered category", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={PageData}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <XAxis dataKey="name" />
+        <Line dataKey="uv" stroke="#ff7300" />
+        <Tooltip />
+      </LineChart>
+    ));
+    flush();
+
+    // The tooltip box is always in the DOM (visibility toggles); before any
+    // interaction it carries no payload items.
+    expect(container.querySelectorAll(".recharts-tooltip-item")).toHaveLength(0);
+
+    const wrapper = container.querySelector(".recharts-wrapper");
+    expect(wrapper).not.toBeNull();
+
+    // Hover over index 2 ("Page C") at x = 164, y mid-plot.
+    fireEvent.mouseMove(wrapper as Element, { clientX: 164, clientY: 200 });
+    flush();
+    vi.runOnlyPendingTimers();
+    flush();
+
+    const label = container.querySelector(".recharts-tooltip-label");
+    expect(label?.textContent).toBe("Page C");
+    const values = [...container.querySelectorAll(".recharts-tooltip-item-value")].map(
+      (n) => n.textContent,
+    );
+    expect(values).toEqual(["300"]);
+
+    // The cursor highlight (a vertical line for a LineChart) renders while active.
+    expect(container.querySelector(".recharts-tooltip-cursor")).not.toBeNull();
+
+    // Leaving the chart clears the active payload and the cursor.
+    fireEvent.mouseLeave(wrapper as Element);
+    flush();
+    expect(container.querySelectorAll(".recharts-tooltip-item")).toHaveLength(0);
+    expect(container.querySelector(".recharts-tooltip-cursor")).toBeNull();
+  });
+});