solid-recharts 0.2.0 → 1.0.0

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

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