solid-recharts 1.0.0 → 2.0.0-beta.1

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

@@ -0,0 +1,1889 @@
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.visibility.spec.tsx (commit 7a23854).
+ * Solid adaptations: render(() => …)/flush; Wrapper uses props.children; createSignal for portal;
+ * flush() replaces act+fake timers; tooltipTestHelpers mouseMove path.
+ */
+import { createSignal, flush, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { beforeEach, describe, expect, it, test, vi } from "vitest";
+import { fireEvent, getByText, render } from "@solidjs/testing-library";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  Brush,
+  CartesianGrid,
+  ComposedChart,
+  DefaultZIndexes,
+  Funnel,
+  FunnelChart,
+  Legend,
+  Line,
+  LineChart,
+  LineDrawShape,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  Sankey,
+  Scatter,
+  ScatterChart,
+  SunburstChart,
+  Tooltip,
+  Treemap,
+  XAxis,
+  YAxis,
+} from "../../src";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { exampleSankeyData, exampleSunburstData, exampleTreemapData, PageData } from "../_data";
+import {
+  expectTooltipNotVisible,
+  expectTooltipPayload,
+  getTooltip,
+  MouseCoordinate,
+  showTooltip,
+  showTooltipOnCoordinate,
+  showTooltipOnCoordinateTouch,
+} from "./Tooltip/tooltipTestHelpers";
+import {
+  areaChartMouseHoverTooltipSelector,
+  barChartMouseHoverTooltipSelector,
+  composedChartMouseHoverTooltipSelector,
+  funnelChartMouseHoverTooltipSelector,
+  lineChartMouseHoverTooltipSelector,
+  MouseHoverTooltipTriggerSelector,
+  pieChartMouseHoverTooltipSelector,
+  radarChartMouseHoverTooltipSelector,
+  radialBarChartMouseHoverTooltipSelector,
+  sankeyNodeMouseHoverTooltipSelector,
+  scatterChartMouseHoverTooltipSelector,
+  sunburstChartMouseHoverTooltipSelector,
+  treemapNodeChartMouseHoverTooltipSelector,
+} from "./Tooltip/tooltipMouseHoverSelectors";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import {
+  selectActiveCoordinate,
+  selectActiveLabel,
+  selectIsTooltipActive,
+  selectTooltipAxisDomain,
+  selectTooltipAxisDomainIncludingNiceTicks,
+  selectTooltipAxisRangeWithReverse,
+  selectTooltipAxisRealScaleType,
+  selectTooltipAxisScale,
+  selectTooltipAxisTicks,
+  selectTooltipCategoricalDomain,
+} from "../../src/state/selectors/tooltipSelectors";
+import { selectChartDataWithIndexes } from "../../src/state/selectors/dataSelectors";
+import { expectLastCalledWithScale } from "../helper/expectScale";
+import { selectChartLayout } from "../../src/context/chartLayoutContext";
+import type { TooltipIndex, TooltipState } from "../../src/state/tooltipSlice";
+import { selectTooltipState } from "../../src/state/selectors/selectTooltipState";
+import { selectChartOffsetInternal } from "../../src/state/selectors/selectChartOffsetInternal";
+import {
+  selectLegendPayload,
+  selectLegendSettings,
+  selectLegendSize,
+} from "../../src/state/selectors/legendSelectors";
+import { mockTouchingElement } from "../helper/mockTouchingElement";
+import { assertNotNull } from "../helper/assertNotNull";
+import type { LegendSettings } from "../../src/state/legendSlice";
+import { selectTooltipAxisId } from "../../src/state/selectors/selectTooltipAxisId";
+import { selectTooltipAxisType } from "../../src/state/selectors/selectTooltipAxisType";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+import { selectTooltipAxis } from "../../src/state/selectors/axisSelectors";
+import { noop } from "../../src/util/DataUtils";
+
+type TooltipVisibilityTestCase = {
+  // For identifying which test is running
+  name: string;
+  mouseHoverSelector: MouseHoverTooltipTriggerSelector;
+  mouseCoordinate?: MouseCoordinate;
+  Wrapper: (props: { children: JSX.Element }) => JSX.Element;
+  expectedTransform: string;
+  tooltipIndex: NonNullable<TooltipIndex>;
+};
+
+const commonChartProps = {
+  throttledEvents: [],
+  width: 400,
+  height: 400,
+  data: PageData,
+};
+
+const AreaChartTestCase: TooltipVisibilityTestCase = {
+  name: "AreaChart",
+  Wrapper: (props) => (
+    <AreaChart {...commonChartProps}>
+      <Area dataKey="uv" id="my-item-id" />
+      {props.children}
+    </AreaChart>
+  ),
+  mouseHoverSelector: areaChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(249px, 211px);",
+  tooltipIndex: "0",
+};
+
+const BarChartTestCase: TooltipVisibilityTestCase = {
+  name: "BarChart",
+  Wrapper: (props) => (
+    <BarChart {...commonChartProps}>
+      <Bar dataKey="uv" id="my-item-id" />
+      {props.children}
+    </BarChart>
+  ),
+  mouseHoverSelector: barChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(242.5px, 211px);",
+  tooltipIndex: "0",
+};
+
+const LineChartHorizontalTestCase: TooltipVisibilityTestCase = {
+  name: "horizontal LineChart",
+  Wrapper: (props) => (
+    <LineChart {...commonChartProps}>
+      <XAxis dataKey="name" />
+      <YAxis />
+      <CartesianGrid strokeDasharray="3 3" />
+      {props.children}
+      <Legend />
+      <Line type="monotone" dataKey="uv" stroke="#82ca9d" id="my-item-id" />
+    </LineChart>
+  ),
+  mouseHoverSelector: lineChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(207px, 211px);",
+  tooltipIndex: "0",
+};
+
+const LineChartVerticalTestCase: TooltipVisibilityTestCase = {
+  name: "vertical LineChart",
+  Wrapper: (props) => (
+    <LineChart
+      layout="vertical"
+      {...commonChartProps}
+      margin={{
+        top: 20,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis type="number" />
+      <YAxis dataKey="name" type="category" />
+      {props.children}
+      <Legend />
+      <Line dataKey="uv" stroke="#82ca9d" id="my-item-id" />
+    </LineChart>
+  ),
+  mouseHoverSelector: lineChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(211px, 231px);",
+  tooltipIndex: "0",
+};
+
+const ComposedChartWithAreaTestCase: TooltipVisibilityTestCase = {
+  name: "ComposedChart with Area",
+  Wrapper: (props) => (
+    <ComposedChart {...commonChartProps}>
+      <XAxis dataKey="name" type="category" />
+      <YAxis dataKey="uv" />
+      {props.children}
+      <Area dataKey="pv" id="my-item-id" />
+    </ComposedChart>
+  ),
+  mouseHoverSelector: composedChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(207px, 211px);",
+  tooltipIndex: "0",
+};
+
+const ComposedChartWithBarTestCase: TooltipVisibilityTestCase = {
+  name: "ComposedChart with Bar",
+  Wrapper: (props) => (
+    <ComposedChart {...commonChartProps}>
+      <XAxis dataKey="name" type="category" />
+      <YAxis dataKey="uv" />
+      {props.children}
+      <Bar dataKey="amt" id="my-item-id" />
+    </ComposedChart>
+  ),
+  mouseHoverSelector: composedChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(212.5px, 211px);",
+  tooltipIndex: "0",
+};
+
+const ComposedChartWithLineTestCase: TooltipVisibilityTestCase = {
+  name: "ComposedChart with Line",
+  Wrapper: (props) => (
+    <ComposedChart {...commonChartProps}>
+      <XAxis dataKey="name" type="category" />
+      <YAxis dataKey="amt" />
+      {props.children}
+      <Line dataKey="pv" id="my-item-id" />
+    </ComposedChart>
+  ),
+  mouseHoverSelector: composedChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(207px, 211px);",
+  tooltipIndex: "0",
+};
+
+const FunnelChartTestCase: TooltipVisibilityTestCase = {
+  name: "FunnelChart",
+  Wrapper: (props) => (
+    <FunnelChart width={700} height={500} throttledEvents={[]}>
+      <Funnel
+        isAnimationActive={false}
+        dataKey="uv"
+        nameKey="name"
+        data={PageData}
+        id="my-item-id"
+      />
+      {props.children}
+    </FunnelChart>
+  ),
+  mouseHoverSelector: funnelChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(360px, 55.833333333333336px);",
+  tooltipIndex: "0",
+};
+
+const PieChartTestCase: TooltipVisibilityTestCase = {
+  name: "PieChart",
+  Wrapper: (props) => (
+    <PieChart height={400} width={400}>
+      <Pie
+        data={PageData}
+        isAnimationActive={false}
+        dataKey="uv"
+        nameKey="name"
+        cx={200}
+        cy={200}
+        id="my-item-id"
+      />
+      {props.children}
+    </PieChart>
+  ),
+  mouseHoverSelector: pieChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(271.8676024097812px, 161.6138988484545px);",
+  tooltipIndex: "0",
+};
+
+const RadarChartTestCase: TooltipVisibilityTestCase = {
+  name: "RadarChart",
+  Wrapper: (props) => (
+    <RadarChart height={600} width={600} data={PageData} throttledEvents={[]}>
+      <PolarGrid />
+      <PolarAngleAxis dataKey="name" />
+      <PolarRadiusAxis />
+      <Radar
+        name="Mike"
+        dataKey="uv"
+        stroke="#8884d8"
+        fill="#8884d8"
+        fillOpacity={0.6}
+        id="my-item-id"
+      />
+      {props.children}
+    </RadarChart>
+  ),
+  mouseHoverSelector: radarChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(188.75025773223268px, 239.9964286625318px);",
+  tooltipIndex: "0",
+};
+
+const RadialBarChartTestCase: TooltipVisibilityTestCase = {
+  name: "RadialBarChart",
+  Wrapper: (props) => (
+    <RadialBarChart height={600} width={600} data={PageData} throttledEvents={[]}>
+      <PolarGrid />
+      <PolarAngleAxis />
+      <PolarRadiusAxis dataKey="name" />
+      <RadialBar
+        name="Mike"
+        dataKey="uv"
+        stroke="#8884d8"
+        fill="#8884d8"
+        fillOpacity={0.6}
+        id="my-item-id"
+      />
+      {props.children}
+    </RadialBarChart>
+  ),
+  mouseHoverSelector: radialBarChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(212.65496645665198px, 212.65496645665195px);",
+  tooltipIndex: "0",
+};
+
+const SankeyTestCase: TooltipVisibilityTestCase = {
+  name: "Sankey",
+  Wrapper: (props) => (
+    <Sankey
+      id="my-item-id"
+      width={400}
+      height={400}
+      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      data={exampleSankeyData}
+      throttledEvents={[]}
+    >
+      {props.children}
+    </Sankey>
+  ),
+  mouseHoverSelector: sankeyNodeMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(35px, 114.89236115144739px);",
+  tooltipIndex: "0",
+};
+
+const ScatterChartTestCase: TooltipVisibilityTestCase = {
+  name: "ScatterChart",
+  Wrapper: (props) => (
+    <ScatterChart
+      width={400}
+      height={400}
+      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      throttledEvents={[]}
+    >
+      <XAxis dataKey="uv" name="stature" unit="cm" />
+      <YAxis dataKey="pv" name="weight" unit="kg" />
+      <Scatter line name="A school" data={PageData} fill="#ff7300" id="my-item-id" />
+      {props.children}
+    </ScatterChart>
+  ),
+  mouseHoverSelector: scatterChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(115px, 280.8px);",
+  tooltipIndex: "0",
+};
+
+const SunburstChartTestCase: TooltipVisibilityTestCase = {
+  name: "SunburstChart",
+  Wrapper: (props) => (
+    <SunburstChart
+      id="my-item-id"
+      width={400}
+      height={400}
+      data={exampleSunburstData}
+      throttledEvents={[]}
+    >
+      {props.children}
+    </SunburstChart>
+  ),
+  mouseHoverSelector: sunburstChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(285px, 210px);",
+  tooltipIndex: "0",
+};
+
+const TreemapTestCase: TooltipVisibilityTestCase = {
+  name: "Treemap",
+  Wrapper: (props) => (
+    <Treemap
+      id="my-item-id"
+      width={400}
+      height={400}
+      data={exampleTreemapData}
+      isAnimationActive={false}
+      nameKey="name"
+      dataKey="value"
+      throttledEvents={[]}
+    >
+      {props.children}
+    </Treemap>
+  ),
+  mouseHoverSelector: treemapNodeChartMouseHoverTooltipSelector,
+  expectedTransform: "transform: translate(94.5px, 58.5px);",
+  tooltipIndex: "children[0]children[0]",
+};
+
+const testCases: ReadonlyArray<TooltipVisibilityTestCase> = [
+  AreaChartTestCase,
+  BarChartTestCase,
+  LineChartHorizontalTestCase,
+  LineChartVerticalTestCase,
+  ComposedChartWithAreaTestCase,
+  ComposedChartWithBarTestCase,
+  ComposedChartWithLineTestCase,
+  FunnelChartTestCase,
+  PieChartTestCase,
+  RadarChartTestCase,
+  RadialBarChartTestCase,
+  SankeyTestCase,
+  ScatterChartTestCase,
+  SunburstChartTestCase,
+  TreemapTestCase,
+];
+
+describe("Tooltip visibility", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe.each(testCases)(
+    "as a child of $name",
+    ({ name, Wrapper, mouseHoverSelector, expectedTransform, tooltipIndex }) => {
+      test("Without an event, the tooltip wrapper is rendered but not visible", () => {
+        const { container } = render(() => (
+          <Wrapper>
+            <Tooltip />
+          </Wrapper>
+        ));
+        flush();
+
+        const wrapper = getTooltip(container);
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).not.toBeVisible();
+      });
+
+      test("No content is rendered without an explicit event", () => {
+        const { container } = render(() => (
+          <Wrapper>
+            <Tooltip />
+          </Wrapper>
+        ));
+        flush();
+
+        const tooltipContentName = container.querySelector(".recharts-tooltip-item-name");
+        const tooltipContentValue = container.querySelector(".recharts-tooltip-item-value");
+        expect(tooltipContentName).toBeNull();
+        expect(tooltipContentValue).toBeNull();
+      });
+
+      test(`Mouse over element ${mouseHoverSelector} renders content`, () => {
+        const { container, debug } = render(() => (
+          <Wrapper>
+            <Tooltip />
+          </Wrapper>
+        ));
+        flush();
+
+        showTooltip(container, mouseHoverSelector, debug);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).toBeVisible();
+
+        // After the mouse over event over the chart, the tooltip wrapper still is not set to visible,
+        // but the content is already created based on the nearest data point.
+        const tooltipContentName = container.querySelector(".recharts-tooltip-item-name");
+        const tooltipContentValue = container.querySelector(".recharts-tooltip-item-value");
+        expect(tooltipContentName).not.toBeNull();
+        expect(tooltipContentValue).not.toBeNull();
+        expect(tooltipContentName).toBeInTheDocument();
+        expect(tooltipContentValue).toBeInTheDocument();
+      });
+
+      test("Should move when the mouse moves", async () => {
+        mockGetBoundingClientRect({
+          width: 10,
+          height: 10,
+        });
+        const { container } = render(() => (
+          <Wrapper>
+            <Tooltip />
+          </Wrapper>
+        ));
+        flush();
+
+        const tooltipTriggerElement = showTooltip(container, mouseHoverSelector);
+
+        const tooltip1 = getTooltip(container);
+        expect(tooltip1.getAttribute("style")).toContain("position: absolute;");
+        expect(tooltip1.getAttribute("style")).toContain("top: 0px");
+        expect(tooltip1.getAttribute("style")).toContain("left: 0px");
+
+        fireEvent.mouseMove(tooltipTriggerElement, { clientX: 201, clientY: 201 });
+
+        flush();
+        vi.runOnlyPendingTimers();
+        flush();
+
+        const tooltip2 = getTooltip(container);
+
+        expect(tooltip2.getAttribute("style")).toContain(expectedTransform);
+      });
+
+      it(`should move tooltip onTouchMove with active tooltip index ${tooltipIndex}`, async (context) => {
+        // TODO: these charts currently do not work onTouchMove. Did they before?
+        // This is because these are set via item rather than axis. The middleware currently only sets axis coordinates.
+        if (
+          name === "SunburstChart" ||
+          name === "FunnelChart" ||
+          name === "Sankey" ||
+          name === "ScatterChart"
+        ) {
+          context.skip();
+        }
+
+        mockTouchingElement(tooltipIndex, "my-item-id");
+
+        mockGetBoundingClientRect({
+          width: 10,
+          height: 10,
+        });
+        const { container } = render(() => (
+          <Wrapper>
+            <Tooltip />
+          </Wrapper>
+        ));
+        flush();
+
+        showTooltipOnCoordinateTouch(container, mouseHoverSelector, {
+          clientX: 200,
+          clientY: 200,
+        });
+
+        const tooltip1 = getTooltip(container);
+        expect(tooltip1.getAttribute("style")).toContain("position: absolute;");
+        expect(tooltip1.getAttribute("style")).toContain("top: 0px");
+        expect(tooltip1.getAttribute("style")).toContain("left: 0px");
+
+        showTooltipOnCoordinateTouch(container, mouseHoverSelector, {
+          clientX: 201,
+          clientY: 201,
+        });
+
+        const tooltip2 = getTooltip(container);
+
+        expect(tooltip2.getAttribute("style")).toContain(expectedTransform);
+      });
+
+      it("should render customized tooltip when content is set to be a react element", () => {
+        const Customized = () => <div class="customized" />;
+        const { container } = render(() => (
+          <Wrapper>
+            <Tooltip content={<Customized />} />
+          </Wrapper>
+        ));
+        flush();
+
+        showTooltip(container, mouseHoverSelector);
+
+        const customizedContent = container.querySelector(".customized");
+        expect(customizedContent).toBeInTheDocument();
+      });
+
+      describe("portal prop", () => {
+        it("should render outside of SVG, as a direct child of recharts-wrapper by default", () => {
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip />
+            </Wrapper>
+          ));
+          flush();
+          showTooltip(container, mouseHoverSelector);
+
+          expect(
+            container.querySelectorAll(".recharts-wrapper svg .recharts-tooltip-wrapper"),
+          ).toHaveLength(0);
+          expect(
+            container.querySelector(".recharts-wrapper > .recharts-tooltip-wrapper"),
+          ).toBeVisible();
+        });
+
+        it('should render in a custom portal if "portal" prop is set', () => {
+          function Example() {
+            const [portalRef, setPortalRef] = createSignal<HTMLElement | null>(null);
+
+            return (
+              <>
+                <Show when={portalRef()}>
+                  {(portal) => (
+                    <Wrapper>
+                      <Tooltip portal={portal()} />
+                    </Wrapper>
+                  )}
+                </Show>
+                <div
+                  data-testid="my-custom-portal-target"
+                  ref={(node) => {
+                    setPortalRef(node ?? null);
+                  }}
+                />
+              </>
+            );
+          }
+          const { container } = render(() => <Example />);
+          flush();
+          showTooltip(container, mouseHoverSelector);
+
+          expect(
+            container.querySelector(".recharts-wrapper .recharts-tooltip-wrapper"),
+          ).not.toBeInTheDocument();
+          expect(
+            container.querySelector(
+              '[data-testid="my-custom-portal-target"] > .recharts-tooltip-wrapper',
+            ),
+          ).toBeVisible();
+        });
+
+        it("should keep custom portal visible when active is true after mouseOut, should no longer have absolute styles", () => {
+          function Example() {
+            const [portalRef, setPortalRef] = createSignal<HTMLElement | null>(null);
+
+            return (
+              <>
+                <Show when={portalRef()}>
+                  {(portal) => (
+                    <Wrapper>
+                      <Tooltip portal={portal()} active />
+                    </Wrapper>
+                  )}
+                </Show>
+                <div
+                  data-testid="my-custom-portal-target"
+                  ref={(node) => {
+                    setPortalRef(node ?? null);
+                  }}
+                />
+              </>
+            );
+          }
+          const { container } = render(() => <Example />);
+          flush();
+          showTooltip(container, mouseHoverSelector);
+
+          const tooltipWrapper = container.querySelector(".recharts-tooltip-wrapper");
+
+          expect(tooltipWrapper).toHaveStyle({ visibility: "visible" });
+          expect(tooltipWrapper).not.toHaveStyle({ position: "absolute" });
+
+          fireEvent.mouseLeave(container, mouseHoverSelector);
+
+          expect(tooltipWrapper).toHaveStyle({ visibility: "visible" });
+          expect(tooltipWrapper).not.toHaveStyle({ position: "absolute" });
+
+          expect(
+            container.querySelector(
+              '[data-testid="my-custom-portal-target"] > .recharts-tooltip-wrapper',
+            ),
+          ).toBeVisible();
+        });
+      });
+
+      describe("active prop", () => {
+        test("with active=true it should render tooltip even after moving the mouse out of the chart.", () => {
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip active />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).not.toBeVisible();
+
+          showTooltip(container, mouseHoverSelector);
+
+          expect(tooltip).toBeVisible();
+
+          const tooltipTriggerElementAfterHover = container.querySelector(mouseHoverSelector);
+          assertNotNull(tooltipTriggerElementAfterHover);
+          fireEvent.mouseOut(tooltipTriggerElementAfterHover);
+          vi.runAllTimers();
+
+          // Still visible after moving out of the chart, because active is true.
+          expect(tooltip).toBeVisible();
+        });
+
+        test("with active=false it should never render tooltip", () => {
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip active={false} />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).not.toBeVisible();
+
+          showTooltip(container, mouseHoverSelector);
+
+          expect(tooltip).not.toBeVisible();
+
+          const tooltipTriggerElementAfterHover = container.querySelector(mouseHoverSelector);
+          assertNotNull(tooltipTriggerElementAfterHover);
+          fireEvent.mouseOut(tooltipTriggerElementAfterHover);
+          vi.runAllTimers();
+
+          expect(tooltip).not.toBeVisible();
+        });
+
+        test("with active=undefined it should render the Tooltip only while in the chart", () => {
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).not.toBeVisible();
+
+          showTooltip(container, mouseHoverSelector);
+
+          expect(tooltip).toBeVisible();
+
+          const tooltipTriggerElementAfterHover = container.querySelector(mouseHoverSelector);
+          assertNotNull(tooltipTriggerElementAfterHover);
+          fireEvent.mouseOut(tooltipTriggerElementAfterHover);
+          vi.runAllTimers();
+
+          expect(tooltip).not.toBeVisible();
+        });
+      });
+
+      describe("defaultIndex prop", () => {
+        it("should show tooltip from the beginning if defaultIndex is set to a valid value", (context) => {
+          if (name === "Sankey") {
+            /*
+             * Sankey chart won't work with numerical indexes and it will need a different format
+             */
+            context.skip();
+          }
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip defaultIndex={tooltipIndex} />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).toBeInTheDocument();
+
+          // Tooltip should be visible, since defaultIndex was set
+          expect(tooltip).toBeVisible();
+
+          const tooltipTriggerElement = showTooltip(container, mouseHoverSelector);
+
+          // Tooltip should be able to move when the mouse moves over the chart
+          expect(tooltip).toBeVisible();
+
+          fireEvent.mouseOver(tooltipTriggerElement, { clientX: 350, clientY: 200 });
+
+          // Tooltip should be able to move when the mouse moves over the chart
+          expect(tooltip).toBeVisible();
+
+          const tooltipTriggerElementAfterHover = container.querySelector(mouseHoverSelector);
+          assertNotNull(tooltipTriggerElementAfterHover);
+          fireEvent.mouseOut(tooltipTriggerElementAfterHover);
+          vi.runAllTimers();
+
+          // Since active is false, the tooltip can be dismissed by mousing out
+          expect(tooltip).not.toBeVisible();
+        });
+
+        it("should ignore invalid defaultIndex value", () => {
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip defaultIndex={NaN} />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).toBeInTheDocument();
+          expect(tooltip).not.toBeVisible();
+        });
+
+        it("should show the last item when defaultIndex is same or larger than the data.length", (context) => {
+          if (name === "FunnelChart") {
+            // FunnelChart throws an error when called with defaultIndex
+            context.skip();
+          }
+          if (name === "Sankey") {
+            // Sankey chart does not support numeric tooltip indexes
+            context.skip();
+          }
+          if (name === "Treemap") {
+            // Treemap chart does not support numeric tooltip indexes
+            context.skip();
+          }
+          if (name === "SunburstChart") {
+            // SunburstChart does not support numeric tooltip indexes
+            context.skip();
+          }
+          const { container } = render(() => (
+            <Wrapper>
+              <Tooltip defaultIndex={commonChartProps.data.length} />
+            </Wrapper>
+          ));
+          flush();
+
+          const tooltip = getTooltip(container);
+          expect(tooltip).toBeInTheDocument();
+          expect(tooltip).toBeVisible();
+        });
+      });
+    },
+  );
+
+  describe(`as a child of vertical LineChart`, () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChartVerticalTestCase.Wrapper>
+        <Tooltip />
+        {props.children}
+      </LineChartVerticalTestCase.Wrapper>
+    ));
+
+    it("should select chart layout", () => {
+      const { spy } = renderTestCase(selectChartLayout);
+      expectLastCalledWith(spy, "vertical");
+    });
+
+    it("should select chart offset", () => {
+      const { spy } = renderTestCase(selectChartOffsetInternal);
+      expectLastCalledWith(spy, {
+        bottom: 135,
+        brushBottom: 35,
+        height: 245,
+        left: 80,
+        right: 30,
+        top: 20,
+        width: 290,
+      });
+    });
+
+    it("should select legend settings", () => {
+      const { spy } = renderTestCase(selectLegendSettings);
+      const expected: LegendSettings = {
+        align: "center",
+        itemSorter: "value",
+        layout: "horizontal",
+        verticalAlign: "bottom",
+      };
+      expectLastCalledWith(spy, expected);
+    });
+
+    it("should select legend size", () => {
+      const { spy } = renderTestCase(selectLegendSize);
+      expectLastCalledWith(spy, {
+        height: 100,
+        width: 100,
+      });
+    });
+
+    it("should select legend payload", () => {
+      const { spy } = renderTestCase(selectLegendPayload);
+      expectLastCalledWith(spy, [
+        {
+          color: "#82ca9d",
+          dataKey: "uv",
+          inactive: false,
+          payload: {
+            activeDot: true,
+            animateNewValues: true,
+            animationBegin: 0,
+            animationDuration: 1500,
+            animationEasing: "ease",
+            connectNulls: false,
+            dataKey: "uv",
+            dot: true,
+            fill: "#fff",
+            hide: false,
+            id: "my-item-id",
+            isAnimationActive: "auto",
+            label: false,
+            legendType: "line",
+            shape: LineDrawShape,
+            stroke: "#82ca9d",
+            strokeWidth: 1,
+            type: "linear",
+            xAxisId: 0,
+            yAxisId: 0,
+            zIndex: DefaultZIndexes.line,
+          },
+          type: "line",
+          value: "uv",
+        },
+      ]);
+    });
+
+    it("should select tooltip axis type", () => {
+      const { spy } = renderTestCase(selectTooltipAxisType);
+      expectLastCalledWith(spy, "yAxis");
+    });
+
+    it("should select tooltip axis ID", () => {
+      const { spy } = renderTestCase(selectTooltipAxisId);
+      expectLastCalledWith(spy, 0);
+    });
+
+    it("should select dataStartIndex and dataEndIndex", () => {
+      const { spy } = renderTestCase(selectChartDataWithIndexes);
+      expectLastCalledWith(spy, {
+        chartData: [
+          {
+            amt: 2400,
+            name: "Page A",
+            pv: 2400,
+            uv: 400,
+          },
+          {
+            amt: 2400,
+            name: "Page B",
+            pv: 4567,
+            uv: 300,
+          },
+          {
+            amt: 2400,
+            name: "Page C",
+            pv: 1398,
+            uv: 300,
+          },
+          {
+            amt: 2400,
+            name: "Page D",
+            pv: 9800,
+            uv: 200,
+          },
+          {
+            amt: 2400,
+            name: "Page E",
+            pv: 3908,
+            uv: 278,
+          },
+          {
+            amt: 2400,
+            name: "Page F",
+            pv: 4800,
+            uv: 189,
+          },
+        ],
+        computedData: undefined,
+        dataEndIndex: 5,
+        dataStartIndex: 0,
+      });
+    });
+
+    it("should select active label", () => {
+      const { spy } = renderTestCase((state) => selectActiveLabel(state, "axis", "hover", "2"));
+      expectLastCalledWith(spy, "Page C");
+    });
+
+    it("should select active coordinate", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectActiveCoordinate(state, "axis", "hover", undefined),
+      );
+      expectLastCalledWith(spy, undefined);
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      showTooltipOnCoordinate(
+        container,
+        LineChartVerticalTestCase.mouseHoverSelector,
+        LineChartVerticalTestCase.mouseCoordinate,
+      );
+
+      expectLastCalledWith(spy, {
+        x: 200,
+        y: 216,
+      });
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it("should select tooltip axis range", () => {
+      const { spy } = renderTestCase(selectTooltipAxisRangeWithReverse);
+      expectLastCalledWith(spy, [20, 265]);
+    });
+
+    it("should select tooltip axis scale", () => {
+      const { spy } = renderTestCase(selectTooltipAxisScale);
+      expectLastCalledWithScale(spy, {
+        domain: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"],
+        range: [20, 265],
+      });
+    });
+
+    it("should select categorical domain", () => {
+      const { spy } = renderTestCase(selectTooltipCategoricalDomain);
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should select tooltip axis ticks", () => {
+      const { spy } = renderTestCase(selectTooltipAxisTicks);
+
+      expectLastCalledWith(spy, [
+        {
+          coordinate: 20,
+          index: 0,
+          offset: 0,
+          value: "Page A",
+        },
+        {
+          coordinate: 69,
+          index: 1,
+          offset: 0,
+          value: "Page B",
+        },
+        {
+          coordinate: 118,
+          index: 2,
+          offset: 0,
+          value: "Page C",
+        },
+        {
+          coordinate: 167,
+          index: 3,
+          offset: 0,
+          value: "Page D",
+        },
+        {
+          coordinate: 216,
+          index: 4,
+          offset: 0,
+          value: "Page E",
+        },
+        {
+          coordinate: 265,
+          index: 5,
+          offset: 0,
+          value: "Page F",
+        },
+      ]);
+    });
+
+    it("should select isActive and activeIndex, and update it after mouse hover", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectIsTooltipActive(state, "axis", "hover", undefined),
+      );
+      expectLastCalledWith(spy, {
+        activeIndex: null,
+        isActive: false,
+      });
+      expect(spy).toHaveBeenCalledTimes(2);
+
+      showTooltipOnCoordinate(
+        container,
+        LineChartVerticalTestCase.mouseHoverSelector,
+        LineChartVerticalTestCase.mouseCoordinate,
+      );
+
+      expectLastCalledWith(spy, {
+        activeIndex: "4",
+        isActive: true,
+      });
+      expect(spy).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe("as a child of RadarChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <RadarChartTestCase.Wrapper>
+        <Tooltip />
+        {props.children}
+      </RadarChartTestCase.Wrapper>
+    ));
+
+    it("should select tooltip axis type", () => {
+      const { spy } = renderTestCase(selectTooltipAxisType);
+      expectLastCalledWith(spy, "angleAxis");
+    });
+
+    it("should select tooltip axis ID", () => {
+      const { spy } = renderTestCase(selectTooltipAxisId);
+      expectLastCalledWith(spy, 0);
+    });
+
+    it("should select tooltip axis settings", () => {
+      const { spy } = renderTestCase(selectTooltipAxis);
+      expectLastCalledWith(spy, {
+        allowDataOverflow: false,
+        allowDecimals: false,
+        allowDuplicatedCategory: false,
+        dataKey: "name",
+        domain: undefined,
+        id: 0,
+        includeHidden: false,
+        name: undefined,
+        reversed: false,
+        niceTicks: "auto",
+        scale: "auto",
+        tick: true,
+        tickCount: undefined,
+        ticks: undefined,
+        type: "category",
+        unit: undefined,
+      });
+    });
+
+    it("should select tooltip axis range", () => {
+      const { spy } = renderTestCase(selectTooltipAxisRangeWithReverse);
+      expectLastCalledWith(spy, [90, -270]);
+    });
+
+    it("should select tooltip axis scale", () => {
+      const { spy } = renderTestCase(selectTooltipAxisScale);
+      expectLastCalledWithScale(spy, {
+        domain: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"],
+        range: [-270, 90],
+      });
+    });
+
+    it("should select tooltip axis ticks", () => {
+      const { spy } = renderTestCase(selectTooltipAxisTicks);
+      expectLastCalledWith(spy, [
+        {
+          coordinate: 90,
+          index: 0,
+          offset: 60,
+          value: "Page A",
+        },
+        {
+          coordinate: 30,
+          index: 1,
+          offset: 60,
+          value: "Page B",
+        },
+        {
+          coordinate: -30,
+          index: 2,
+          offset: 60,
+          value: "Page C",
+        },
+        {
+          coordinate: -90,
+          index: 3,
+          offset: 60,
+          value: "Page D",
+        },
+        {
+          coordinate: -150,
+          index: 4,
+          offset: 60,
+          value: "Page E",
+        },
+        {
+          coordinate: -210,
+          index: 5,
+          offset: 60,
+          value: "Page F",
+        },
+      ]);
+    });
+
+    it("should select tooltip state before & after hover", () => {
+      const { container, spy } = renderTestCase(selectTooltipState);
+
+      const expectedBeforeHover: TooltipState = {
+        axisInteraction: {
+          click: {
+            active: false,
+            dataKey: undefined,
+            index: null,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+          hover: {
+            active: false,
+            dataKey: undefined,
+            index: null,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+        },
+        itemInteraction: {
+          click: {
+            active: false,
+            index: null,
+            dataKey: undefined,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+          hover: {
+            active: false,
+            index: null,
+            dataKey: undefined,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+        },
+        keyboardInteraction: {
+          active: false,
+          dataKey: undefined,
+          index: null,
+          coordinate: undefined,
+          graphicalItemId: undefined,
+        },
+        syncInteraction: {
+          active: false,
+          dataKey: undefined,
+          index: null,
+          coordinate: undefined,
+          label: undefined,
+          sourceViewBox: undefined,
+          graphicalItemId: undefined,
+        },
+        settings: {
+          axisId: 0,
+          shared: undefined,
+          trigger: "hover",
+          active: undefined,
+          defaultIndex: undefined,
+        },
+        tooltipItemPayloads: [
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: noop,
+            settings: {
+              color: "#8884d8",
+              dataKey: "uv",
+              fill: "#8884d8",
+              graphicalItemId: "my-item-id",
+              hide: false,
+              name: "Mike",
+              nameKey: undefined,
+              stroke: "#8884d8",
+              strokeWidth: undefined,
+              type: undefined,
+              unit: "",
+            },
+          },
+        ],
+      };
+      expectLastCalledWith(spy, expectedBeforeHover);
+
+      showTooltip(container, RadarChartTestCase.mouseHoverSelector);
+
+      const expectedAfterHover: TooltipState = {
+        axisInteraction: {
+          click: {
+            active: false,
+            dataKey: undefined,
+            index: null,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+          hover: {
+            active: true,
+            dataKey: undefined,
+            index: "5",
+            coordinate: {
+              angle: -210,
+              clockWise: false,
+              cx: 300,
+              cy: 300,
+              endAngle: -270,
+              innerRadius: 0,
+              outerRadius: 236,
+              radius: 141.4213562373095,
+              startAngle: 90,
+              x: 177.5255128608411,
+              y: 229.28932188134524,
+            },
+            graphicalItemId: undefined,
+          },
+        },
+        itemInteraction: {
+          click: {
+            active: false,
+            index: null,
+            dataKey: undefined,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+          hover: {
+            active: false,
+            index: null,
+            dataKey: undefined,
+            coordinate: undefined,
+            graphicalItemId: undefined,
+          },
+        },
+        keyboardInteraction: {
+          active: false,
+          dataKey: undefined,
+          index: null,
+          coordinate: undefined,
+          graphicalItemId: undefined,
+        },
+        syncInteraction: {
+          active: false,
+          dataKey: undefined,
+          index: null,
+          coordinate: undefined,
+          label: undefined,
+          sourceViewBox: undefined,
+          graphicalItemId: undefined,
+        },
+        settings: {
+          axisId: 0,
+          shared: undefined,
+          trigger: "hover",
+          active: undefined,
+          defaultIndex: undefined,
+        },
+        tooltipItemPayloads: [
+          {
+            dataDefinedOnItem: undefined,
+            getPosition: noop,
+            settings: {
+              color: "#8884d8",
+              dataKey: "uv",
+              fill: "#8884d8",
+              graphicalItemId: "my-item-id",
+              hide: false,
+              name: "Mike",
+              nameKey: undefined,
+              stroke: "#8884d8",
+              strokeWidth: undefined,
+              type: undefined,
+              unit: "",
+            },
+          },
+        ],
+      };
+      expectLastCalledWith(spy, expectedAfterHover);
+    });
+
+    it("should select active label", () => {
+      const { spy } = renderTestCase((state) => selectActiveLabel(state, "axis", "hover", "2"));
+      expectLastCalledWith(spy, "Page C");
+    });
+
+    it("should select active coordinate", () => {
+      const { container, spy } = renderTestCase((state) =>
+        selectActiveCoordinate(state, "axis", "hover", undefined),
+      );
+      expectLastCalledWith(spy, undefined);
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      showTooltipOnCoordinate(
+        container,
+        RadarChartTestCase.mouseHoverSelector,
+        RadarChartTestCase.mouseCoordinate,
+      );
+
+      expectLastCalledWith(spy, {
+        angle: -210,
+        clockWise: false,
+        cx: 300,
+        cy: 300,
+        endAngle: -270,
+        innerRadius: 0,
+        outerRadius: 236,
+        radius: 141.4213562373095,
+        startAngle: 90,
+        x: 177.5255128608411,
+        y: 229.28932188134524,
+      });
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("as a child of RadialBarChart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <RadialBarChartTestCase.Wrapper>
+        <Tooltip />
+        {props.children}
+      </RadialBarChartTestCase.Wrapper>
+    ));
+
+    it("should select chart layout", () => {
+      const { spy } = renderTestCase(selectChartLayout);
+      expectLastCalledWith(spy, "radial");
+    });
+
+    it("should select tooltip axis type", () => {
+      const { spy } = renderTestCase(selectTooltipAxisType);
+      expectLastCalledWith(spy, "radiusAxis");
+    });
+
+    it("should select tooltip axis ID", () => {
+      const { spy } = renderTestCase(selectTooltipAxisId);
+      expectLastCalledWith(spy, 0);
+    });
+
+    it("should select tooltip axis settings", () => {
+      const { spy } = renderTestCase(selectTooltipAxis);
+      expectLastCalledWith(spy, {
+        allowDataOverflow: false,
+        allowDecimals: false,
+        allowDuplicatedCategory: true,
+        dataKey: "name",
+        domain: undefined,
+        id: 0,
+        includeHidden: false,
+        name: undefined,
+        reversed: false,
+        niceTicks: "auto",
+        scale: "auto",
+        tick: true,
+        tickCount: 5,
+        ticks: undefined,
+        type: "category",
+        unit: undefined,
+      });
+    });
+
+    it("should select tooltip axis range", () => {
+      const { spy } = renderTestCase(selectTooltipAxisRangeWithReverse);
+      expectLastCalledWith(spy, [0, 236]);
+    });
+
+    test("selectTooltipAxisDomainIncludingNiceTicks", () => {
+      const { spy } = renderTestCase(selectTooltipAxisDomainIncludingNiceTicks);
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    test("selectTooltipAxisDomain", () => {
+      const { spy } = renderTestCase(selectTooltipAxisDomain);
+      expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
+    });
+
+    it("should select tooltip axis scale", () => {
+      const { spy } = renderTestCase(selectTooltipAxisScale);
+      expectLastCalledWithScale(spy, {
+        domain: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"],
+        range: [0, 236],
+      });
+    });
+
+    it("should select categoricalDomain = undefined", () => {
+      const { spy } = renderTestCase(selectTooltipCategoricalDomain);
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should select tooltip axis ticks", () => {
+      const { spy } = renderTestCase(selectTooltipAxisTicks);
+      expectLastCalledWith(spy, [
+        {
+          coordinate: 19.666666666666668,
+          index: 0,
+          offset: 19.666666666666668,
+          value: "Page A",
+        },
+        {
+          coordinate: 59,
+          index: 1,
+          offset: 19.666666666666668,
+          value: "Page B",
+        },
+        {
+          coordinate: 98.33333333333334,
+          index: 2,
+          offset: 19.666666666666668,
+          value: "Page C",
+        },
+        {
+          coordinate: 137.66666666666666,
+          index: 3,
+          offset: 19.666666666666668,
+          value: "Page D",
+        },
+        {
+          coordinate: 177,
+          index: 4,
+          offset: 19.666666666666668,
+          value: "Page E",
+        },
+        {
+          coordinate: 216.33333333333334,
+          index: 5,
+          offset: 19.666666666666668,
+          value: "Page F",
+        },
+      ]);
+    });
+
+    it("should move when the mouse moves", async () => {
+      mockGetBoundingClientRect({
+        width: 10,
+        height: 10,
+      });
+      const { container } = renderTestCase();
+
+      showTooltipOnCoordinate(container, RadialBarChartTestCase.mouseHoverSelector, {
+        clientX: 200,
+        clientY: 200,
+      });
+
+      const tooltip1 = getTooltip(container);
+      expect(tooltip1.getAttribute("style")).toContain("position: absolute;");
+      expect(tooltip1.getAttribute("style")).toContain("top: 0px");
+      expect(tooltip1.getAttribute("style")).toContain("left: 0px");
+
+      showTooltipOnCoordinate(container, RadialBarChartTestCase.mouseHoverSelector, {
+        clientX: 201,
+        clientY: 201,
+      });
+
+      const tooltip2 = getTooltip(container);
+
+      expect(tooltip2.getAttribute("style")).toContain(RadialBarChartTestCase.expectedTransform);
+    });
+
+    it("should move onTouchMove", async () => {
+      mockGetBoundingClientRect({
+        width: 10,
+        height: 10,
+      });
+      const { container } = renderTestCase();
+
+      showTooltipOnCoordinateTouch(container, RadialBarChartTestCase.mouseHoverSelector, {
+        clientX: 200,
+        clientY: 200,
+      });
+
+      const tooltip1 = getTooltip(container);
+      expect(tooltip1.getAttribute("style")).toContain("position: absolute;");
+      expect(tooltip1.getAttribute("style")).toContain("top: 0px");
+      expect(tooltip1.getAttribute("style")).toContain("left: 0px");
+
+      showTooltipOnCoordinateTouch(container, RadialBarChartTestCase.mouseHoverSelector, {
+        clientX: 201,
+        clientY: 201,
+      });
+
+      const tooltip2 = getTooltip(container);
+
+      expect(tooltip2.getAttribute("style")).toContain(RadialBarChartTestCase.expectedTransform);
+    });
+  });
+
+  describe("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 select tooltip axis ID", () => {
+        const { spy } = renderTestCase(selectTooltipAxisId);
+        expectLastCalledWith(spy, 0);
+      });
+
+      it("should select tooltip axis type", () => {
+        const { spy } = renderTestCase(selectTooltipAxisType);
+        expectLastCalledWith(spy, "xAxis");
+      });
+
+      it("should select active label when given explicit index", () => {
+        const { spy } = renderTestCase((state) => selectActiveLabel(state, "axis", "hover", "2"));
+        expectLastCalledWith(spy, 2400);
+      });
+
+      it("should select active coordinate", () => {
+        const { container, spy } = renderTestCase((state) =>
+          selectActiveCoordinate(state, "axis", "hover", undefined),
+        );
+        expectLastCalledWith(spy, undefined);
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        showTooltip(container, composedChartMouseHoverTooltipSelector);
+
+        expectLastCalledWith(spy, {
+          x: 395,
+          y: 200,
+        });
+        expect(spy).toHaveBeenCalledTimes(2);
+      });
+
+      it("should select tooltip axis scale", () => {
+        const { spy } = renderTestCase(selectTooltipAxisScale);
+        expectLastCalledWithScale(spy, {
+          domain: [0, 2400],
+          range: [65, 395],
+        });
+      });
+
+      it("should select tooltip axis settings", () => {
+        const { spy } = renderTestCase(selectTooltipAxis);
+        expectLastCalledWith(spy, {
+          allowDataOverflow: false,
+          allowDecimals: true,
+          allowDuplicatedCategory: true,
+          angle: 0,
+          dataKey: "amt",
+          domain: undefined,
+          height: 30,
+          hide: false,
+          id: 0,
+          includeHidden: false,
+          interval: "preserveEnd",
+          minTickGap: 5,
+          mirror: false,
+          name: "stature",
+          orientation: "bottom",
+          padding: {
+            left: 0,
+            right: 0,
+          },
+          reversed: false,
+          niceTicks: "auto",
+          scale: "auto",
+          tick: true,
+          tickCount: 5,
+          tickFormatter: undefined,
+          ticks: undefined,
+          type: "number",
+          unit: "cm",
+        });
+      });
+
+      it("should select tooltip axis real scale type", () => {
+        const { spy } = renderTestCase(selectTooltipAxisRealScaleType);
+        expectLastCalledWith(spy, "linear");
+      });
+
+      it("should select tooltip axis ticks", () => {
+        const { spy } = renderTestCase(selectTooltipAxisTicks);
+        expectLastCalledWith(spy, [
+          { coordinate: 395, value: 2400, index: 0, offset: 0 },
+          { coordinate: 395, value: 2400, index: 1, offset: 0 },
+          { coordinate: 395, value: 2400, index: 2, offset: 0 },
+          { coordinate: 395, value: 2400, index: 3, offset: 0 },
+          { coordinate: 395, value: 2400, index: 4, offset: 0 },
+          { coordinate: 395, value: 2400, index: 5, offset: 0 },
+        ]);
+      });
+
+      it("should select isActive", () => {
+        const { container, spy } = renderTestCase((state) =>
+          selectIsTooltipActive(state, "axis", "hover", undefined),
+        );
+        expectLastCalledWith(spy, {
+          activeIndex: null,
+          isActive: false,
+        });
+        expect(spy).toHaveBeenCalledTimes(2);
+
+        showTooltip(container, composedChartMouseHoverTooltipSelector);
+
+        expectLastCalledWith(spy, {
+          activeIndex: "0",
+          isActive: true,
+        });
+        expect(spy).toHaveBeenCalledTimes(3);
+      });
+
+      it("should render tooltip payload for hidden items", () => {
+        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", () => {
+        const { container } = renderTestCase();
+
+        expectTooltipNotVisible(container);
+
+        showTooltip(container, composedChartMouseHoverTooltipSelector);
+
+        expectTooltipPayload(container, "2400", ["5 : 2400"]);
+      });
+    });
+  });
+
+  it("Should display the data selected by Brush", () => {
+    const { container, debug } = render(() => (
+      <LineChart width={600} height={300} data={PageData}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+        <Legend />
+        <Brush dataKey="name" startIndex={1} height={30} stroke="#8884d8" />
+        <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
+        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+      </LineChart>
+    ));
+    flush();
+
+    const line = container.querySelector(".recharts-cartesian-grid-horizontal line")!;
+    showTooltipOnCoordinate(
+      container,
+      lineChartMouseHoverTooltipSelector,
+      {
+        clientX: +line.getAttribute("x")! + 1,
+        clientY: 50,
+      },
+      debug,
+    );
+    expect(getByText(container, "4567")).toBeVisible();
+  });
+
+  test("defaultIndex can be updated by parent control", () => {
+    const data2 = [
+      { x: 100, y: 200, z: 200 },
+      { x: 120, y: 100, z: 260 },
+      { x: 170, y: 300, z: 400 },
+      { x: 140, y: 250, z: 280 },
+      { x: 150, y: 400, z: 500 },
+      { x: 110, y: 280, z: 200 },
+    ];
+    const Example = () => {
+      const [defaultIndex, setDefaultIndex] = createSignal(0);
+
+      return (
+        <div>
+          <ScatterChart
+            width={400}
+            height={400}
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <XAxis dataKey="x" name="stature" unit="cm" />
+            <YAxis dataKey="y" name="weight" unit="kg" />
+            <Scatter line name="A school" data={data2} fill="#ff7300" />
+            <Tooltip defaultIndex={defaultIndex()} active />
+          </ScatterChart>
+          <button type="button" id="goRight" onClick={() => setDefaultIndex(defaultIndex() + 1)}>
+            Go right
+          </button>
+        </div>
+      );
+    };
+    const { container } = render(() => <Example />);
+    flush();
+
+    const tooltip = getTooltip(container);
+    expect(tooltip).toBeInTheDocument();
+
+    // Tooltip should be visible, since defaultIndex was set
+    expect(tooltip).toBeVisible();
+
+    // The cursor should also be visible
+    expect(container.querySelector(".recharts-tooltip-cursor")).toBeVisible();
+
+    // Data should be displayed in the Tooltip payload
+    expect(tooltip.textContent).toBe("stature : 100cmweight : 200kg");
+
+    fireEvent.click(container.querySelector("#goRight") as HTMLButtonElement);
+    flush();
+
+    // Data should be displayed in the Tooltip payload
+    expect(tooltip.textContent).toBe("stature : 120cmweight : 100kg");
+  });
+});
+
+describe("Active element visibility", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe.each([
+    AreaChartTestCase,
+    LineChartHorizontalTestCase,
+    LineChartVerticalTestCase,
+    ComposedChartWithAreaTestCase,
+    ComposedChartWithLineTestCase,
+    RadarChartTestCase,
+  ])("as a child of $name", ({ Wrapper, mouseHoverSelector }) => {
+    it("should display activeDot", () => {
+      const { container, debug } = render(() => (
+        <Wrapper>
+          <Tooltip />
+        </Wrapper>
+      ));
+      flush();
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+
+      showTooltip(container, mouseHoverSelector, debug);
+
+      expect(container.querySelector(".recharts-active-dot")).toBeVisible();
+    });
+  });
+
+  describe.each([
+    BarChartTestCase,
+    ComposedChartWithBarTestCase,
+    PieChartTestCase,
+    RadialBarChartTestCase,
+    SankeyTestCase,
+    ScatterChartTestCase,
+    SunburstChartTestCase,
+    TreemapTestCase,
+  ])("as a child of $name", ({ Wrapper, mouseHoverSelector }) => {
+    it("should not display activeDot", () => {
+      const { container, debug } = render(() => (
+        <Wrapper>
+          <Tooltip />
+        </Wrapper>
+      ));
+      flush();
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+
+      showTooltip(container, mouseHoverSelector, debug);
+
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe("Cursor visibility", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe.each([
+    AreaChartTestCase,
+    BarChartTestCase,
+    LineChartHorizontalTestCase,
+    LineChartVerticalTestCase,
+    ComposedChartWithAreaTestCase,
+    ComposedChartWithLineTestCase,
+    RadarChartTestCase,
+  ])("as a child of $name", ({ Wrapper, mouseHoverSelector }) => {
+    it("should display cursor inside of the SVG", () => {
+      const { container, debug } = render(() => (
+        <Wrapper>
+          <Tooltip />
+        </Wrapper>
+      ));
+      flush();
+      expect(container.querySelector(".recharts-tooltip-cursor")).not.toBeInTheDocument();
+
+      showTooltip(container, mouseHoverSelector, debug);
+
+      expect(
+        container.querySelector(".recharts-wrapper svg .recharts-tooltip-cursor"),
+      ).toBeVisible();
+    });
+
+    it("should not display cursor when cursor=false", () => {
+      const { container, debug } = render(() => (
+        <Wrapper>
+          <Tooltip cursor={false} />
+        </Wrapper>
+      ));
+      flush();
+      expect(container.querySelector(".recharts-tooltip-cursor")).not.toBeInTheDocument();
+
+      showTooltip(container, mouseHoverSelector, debug);
+
+      expect(container.querySelector(".recharts-tooltip-cursor")).not.toBeInTheDocument();
+    });
+  });
+});