solid-recharts 0.2.0 → 1.0.0

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

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

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

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

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

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