solid-recharts 0.1.0

package/test/chart/Treemap.spec.tsx

@@ -0,0 +1,1003 @@
+// Subset port of recharts 3.8.1 test/chart/Treemap.spec.tsx (commit 7a23854): the
+// squarified treemap renders one <Rectangle> per node (an implicit root + every
+// data node), laid out so children tile their parent's rect. `flush()` because the
+// chart size is reported via an effect before the layout computes.
+import { describe, expect, it, vi } from "vitest";
+import { createEffect, flush } from "solid-js";
+import { render, fireEvent, screen } from "../helper/render";
+import { Tooltip, Treemap, XAxis, YAxis } from "../../src";
+import { getTooltip, showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { treemapNodeChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import {
+  type TreemapNode,
+  addToTreemapNodeIndex,
+  computeNode,
+  treemapPayloadSearcher,
+} from "../../src/chart/Treemap";
+import {
+  useChartHeight,
+  useChartWidth,
+  useMargin,
+  useViewBox,
+} from "../../src/context/chartLayoutContext";
+import { exampleTreemapData } from "../_data";
+import { assertNotNull } from "../helper/assertNotNull";
+import { mockTouchingElement } from "../helper/mockTouchingElement";
+
+const data = [
+  {
+    name: "A",
+    children: [
+      { name: "U", value: 12490887132 },
+      { name: "V", value: 10772738863 },
+      { name: "W", value: 8236223813 },
+    ],
+  },
+  { name: "B", value: 12490887132 },
+  { name: "C", value: 10772738863 },
+  { name: "D", value: 8236223813 },
+  { name: "E", value: 6583448127 },
+  { name: "F", value: 5834718183 },
+];
+
+describe("<Treemap />", () => {
+  it("renders one rectangle per node (implicit root + every data node)", () => {
+    const { container } = render(() => <Treemap width={500} height={250} data={data} />);
+    flush();
+
+    // root(1) + 6 top-level (A..F) + 3 nested (U,V,W under A) = 10.
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(10);
+  });
+
+  it("nests children by depth (depth-1 wraps depth-2 rects)", () => {
+    const { container } = render(() => <Treemap width={500} height={250} data={data} />);
+    flush();
+
+    expect(container.querySelector(".recharts-treemap-depth-0")).not.toBeNull();
+    expect(container.querySelectorAll(".recharts-treemap-depth-1").length).toBeGreaterThan(0);
+    // "A" has children → there are depth-2 rects (U/V/W).
+    expect(container.querySelectorAll(".recharts-treemap-depth-2")).toHaveLength(3);
+  });
+
+  it("tiles the full chart area at the root and packs children within it", () => {
+    const { container } = render(() => <Treemap width={500} height={250} data={data} />);
+    flush();
+
+    const rootRect = container.querySelector(".recharts-treemap-depth-0 .recharts-rectangle");
+    expect(rootRect).not.toBeNull();
+    // The root rect spans the whole surface.
+    expect(Number(rootRect!.getAttribute("width"))).toBeCloseTo(500, 0);
+    expect(Number(rootRect!.getAttribute("height"))).toBeCloseTo(250, 0);
+  });
+
+  it("fires onClick with the clicked leaf node (flat mode gates onClick to leaves)", () => {
+    const onClick = vi.fn();
+    const { container } = render(() => (
+      <Treemap width={500} height={250} data={data} onClick={onClick} />
+    ));
+    flush();
+
+    // In flat mode recharts only fires onClick on leaf nodes. "A" has children, so
+    // click the leaf "B" rect (the 2nd depth-1 node in depth-first order).
+    const leafRect = container.querySelectorAll(
+      ".recharts-treemap-depth-1 .recharts-rectangle",
+    )[1]!;
+    fireEvent.click(leafRect);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0]![0]).toMatchObject({ name: "B", depth: 1 });
+  });
+
+  it("renders a custom node via the content render prop (replacing the default rect)", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={data}
+        content={(node) => <circle class="custom-node" data-name={node.name} />}
+      />
+    ));
+    flush();
+
+    // No default rects; one custom circle per node (root + 6 + 3 = 10).
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(0);
+    expect(container.querySelectorAll("circle.custom-node")).toHaveLength(10);
+    // The render prop received the node (its name is forwarded).
+    expect(container.querySelector("circle.custom-node[data-name='A']")).not.toBeNull();
+  });
+
+  it("still dispatches clicks with custom content (handlers are on the node layer)", () => {
+    const onClick = vi.fn();
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={data}
+        onClick={onClick}
+        content={(node) => <circle class="custom-node" data-name={node.name} />}
+      />
+    ));
+    flush();
+
+    // Leaf "B" (flat mode gates onClick to leaves).
+    fireEvent.click(container.querySelector("circle.custom-node[data-name='B']")!);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0]![0]).toMatchObject({ name: "B" });
+  });
+
+  it("renders 24 rectangles in simple (flat) TreemapChart", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+      />
+    ));
+    flush();
+
+    // root(1) + 20 top-level (A..T) + 3 nested (U,V,W under A) = 24.
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(24);
+  });
+
+  it("renders 21 rectangles in nest TreemapChart (root + direct children only)", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    // root(1) + 20 top-level (A..T); nested U/V/W are NOT shown until you drill in.
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(21);
+  });
+
+  it("uses the same drawing height for nest layout and surface", () => {
+    const chartHeight = 250;
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={chartHeight}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    const depth0Rect = container.querySelector(".recharts-treemap-depth-0 .recharts-rectangle");
+    assertNotNull(depth0Rect);
+    // nest mode subtracts the 30px breadcrumb strip.
+    expect(depth0Rect.getAttribute("height")).toBe(String(chartHeight - 30));
+  });
+});
+
+describe("<Treemap /> nest navigation", () => {
+  it("navigates through nested nodes correctly", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(21);
+    expect(container.querySelectorAll(".recharts-treemap-depth-1")).toHaveLength(20);
+
+    const nodeWithChildren = screen.getByText("A");
+    fireEvent.click(nodeWithChildren);
+    flush();
+
+    expect(container.querySelectorAll(".recharts-rectangle")).toHaveLength(4);
+    expect(container.querySelectorAll(".recharts-treemap-depth-1")).toHaveLength(3);
+    expect(container.querySelectorAll(".recharts-treemap-depth-1")[0]).toHaveTextContent("U");
+  });
+
+  it("breadcrumb navigation allows going back to root", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    const initialNodeCount = container.querySelectorAll(".recharts-rectangle").length;
+    expect(initialNodeCount).toBeGreaterThan(4);
+
+    fireEvent.click(screen.getByText("A"));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-rectangle").length).toBeLessThan(initialNodeCount);
+
+    const breadcrumbWrapper = container.querySelector(".recharts-treemap-nest-index-wrapper");
+    expect(breadcrumbWrapper).toBeInTheDocument();
+
+    const rootBreadcrumb = breadcrumbWrapper?.querySelector(".recharts-treemap-nest-index-box");
+    expect(rootBreadcrumb).toBeInTheDocument();
+    assertNotNull(rootBreadcrumb);
+    fireEvent.click(rootBreadcrumb);
+    flush();
+
+    expect(container.querySelectorAll(".recharts-rectangle").length).toBe(initialNodeCount);
+  });
+
+  it("clicking the current root cell in nest mode does not drill repeatedly", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    fireEvent.click(screen.getByText("A"));
+    flush();
+
+    const breadcrumbCountBefore = container.querySelectorAll(
+      ".recharts-treemap-nest-index-box",
+    ).length;
+    const currentRootCell = container.querySelector(
+      ".recharts-treemap-depth-0 .recharts-rectangle",
+    );
+    assertNotNull(currentRootCell);
+
+    fireEvent.click(currentRootCell);
+    flush();
+
+    const breadcrumbCountAfter = container.querySelectorAll(
+      ".recharts-treemap-nest-index-box",
+    ).length;
+    expect(breadcrumbCountAfter).toBe(breadcrumbCountBefore);
+  });
+
+  it("does not render the drill-down arrow on the current root cell in nest mode", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    fireEvent.click(screen.getByText("A"));
+    flush();
+
+    const rootLayer = container.querySelector(".recharts-treemap-depth-0");
+    assertNotNull(rootLayer);
+    expect(rootLayer.querySelector(".recharts-polygon")).not.toBeInTheDocument();
+  });
+
+  it("renders custom nestIndexContent when provided as function", () => {
+    const customContent = vi.fn((item: TreemapNode, i: number) => (
+      <span data-testid={`breadcrumb-${i}`}>Custom: {item.name || "root"}</span>
+    ));
+
+    render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+        nestIndexContent={customContent}
+      />
+    ));
+    flush();
+
+    fireEvent.click(screen.getByText("A"));
+    flush();
+
+    expect(customContent).toHaveBeenCalled();
+    expect(screen.getByTestId("breadcrumb-0")).toBeInTheDocument();
+    expect(screen.getByTestId("breadcrumb-1")).toBeInTheDocument();
+  });
+
+  it("clicking leaf nodes in nest mode does not navigate", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={exampleTreemapData}
+        isAnimationActive={false}
+        nameKey="name"
+        dataKey="value"
+        type="nest"
+      />
+    ));
+    flush();
+
+    const initialNodeCount = container.querySelectorAll(".recharts-rectangle").length;
+
+    fireEvent.click(screen.getByText("A"));
+    flush();
+
+    const nestedNodeCount = container.querySelectorAll(".recharts-rectangle").length;
+    expect(nestedNodeCount).toBeLessThan(initialNodeCount);
+
+    // "U" is a leaf — clicking it should not drill further.
+    fireEvent.click(screen.getByText("U"));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-rectangle").length).toBe(nestedNodeCount);
+  });
+});
+
+describe("<Treemap /> mouse events", () => {
+  const mouseData = [
+    { name: "A", size: 24593 },
+    { name: "B", size: 1302 },
+    { name: "C", size: 652 },
+    { name: "D", size: 636 },
+    { name: "E", size: 6703 },
+  ];
+
+  it("renders a treemap with basic data", () => {
+    const { container } = render(() => (
+      <Treemap width={500} height={250} data={mouseData} nameKey="name" dataKey="size" />
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-treemap-depth-1")).toHaveLength(mouseData.length);
+  });
+
+  it("should call onMouseEnter with correct arguments", () => {
+    const onMouseEnter = vi.fn();
+    const onMouseLeave = vi.fn();
+    const onClick = vi.fn();
+
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={mouseData}
+        nameKey="name"
+        dataKey="size"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onClick={onClick}
+        isAnimationActive={false}
+      />
+    ));
+    flush();
+
+    const firstNode = container.querySelectorAll(".recharts-treemap-depth-1 g")[0]!;
+    expect(firstNode).toBeInTheDocument();
+
+    fireEvent.mouseEnter(firstNode);
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+    expect(onMouseEnter.mock.calls[0]).toHaveLength(2);
+    const arg1 = onMouseEnter.mock.calls[0]![0];
+    const expectedTreemapNode: TreemapNode = {
+      id: expect.stringMatching(/^recharts-treemap-+/) as unknown as string,
+      width: 363,
+      height: 250,
+      name: "A",
+      size: 24593,
+      children: null,
+      value: 24593,
+      depth: 1,
+      index: 0,
+      tooltipIndex: "children[0]",
+      area: 90719.61872159594,
+      x: 0,
+      y: 0,
+      root: {
+        children: [
+          {
+            name: "A",
+            size: 24593,
+            children: null,
+            value: 24593,
+            depth: 1,
+            index: 0,
+            tooltipIndex: "children[0]",
+            area: 90719.61872159594,
+            x: 0,
+            y: 0,
+            width: 363,
+            height: 250,
+          },
+          {
+            name: "B",
+            size: 1302,
+            children: null,
+            value: 1302,
+            depth: 1,
+            index: 1,
+            tooltipIndex: "children[1]",
+            area: 4802.868441244172,
+            x: 363,
+            y: 0,
+            height: 70,
+            width: 69,
+          },
+          {
+            name: "C",
+            size: 652,
+            children: null,
+            value: 652,
+            depth: 1,
+            index: 2,
+            tooltipIndex: "children[2]",
+            area: 2405.1230596706605,
+            x: 432,
+            y: 0,
+            height: 70,
+            width: 34,
+          },
+          {
+            name: "D",
+            size: 636,
+            children: null,
+            value: 636,
+            depth: 1,
+            index: 3,
+            tooltipIndex: "children[3]",
+            area: 2346.1016348934663,
+            x: 466,
+            y: 0,
+            height: 70,
+            width: 34,
+          },
+          {
+            name: "E",
+            size: 6703,
+            children: null,
+            value: 6703,
+            depth: 1,
+            index: 4,
+            tooltipIndex: "children[4]",
+            area: 24726.28814259576,
+            x: 363,
+            y: 70,
+            height: 180,
+            width: 137,
+          },
+        ],
+        x: 0,
+        y: 0,
+        width: 500,
+        height: 250,
+        name: "",
+        value: 33886,
+        depth: 0,
+        index: 0,
+        tooltipIndex: "",
+      },
+    } as unknown as TreemapNode;
+    expect(arg1).toEqual(expectedTreemapNode);
+    const arg2 = onMouseEnter.mock.calls[0]![1];
+    expect(arg2.type).toBe("mouseenter");
+    expect(arg2.target).toBeInstanceOf(SVGElement);
+    expect(arg2.target.tagName).toBe("g");
+    expect(arg2.target.classList.toString()).toEqual("recharts-layer");
+
+    expect(onMouseLeave).not.toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("should call onMouseLeave when moving between nodes", () => {
+    const onMouseLeave = vi.fn();
+    const onMouseEnter = vi.fn();
+
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={mouseData}
+        nameKey="name"
+        dataKey="size"
+        onMouseLeave={onMouseLeave}
+        onMouseEnter={onMouseEnter}
+        isAnimationActive={false}
+      />
+    ));
+    flush();
+
+    const nodes = container.querySelectorAll(".recharts-treemap-depth-1 g");
+    expect(nodes[0]).toBeInTheDocument();
+    expect(nodes[1]).toBeInTheDocument();
+
+    fireEvent.mouseEnter(nodes[0]!);
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseLeave(nodes[0]!);
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseEnter(nodes[1]!);
+    expect(onMouseEnter).toHaveBeenCalledTimes(2);
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+
+    expect(onMouseLeave.mock.calls[0]).toHaveLength(2);
+    const arg1 = onMouseLeave.mock.calls[0]![0];
+    expect(arg1).toMatchObject({
+      id: expect.stringMatching(/^recharts-treemap-+/),
+      name: "A",
+      depth: 1,
+      index: 0,
+      tooltipIndex: "children[0]",
+    });
+    const arg2 = onMouseLeave.mock.calls[0]![1];
+    expect(arg2.type).toBe("mouseleave");
+    expect(arg2.target).toBeInstanceOf(SVGElement);
+    expect(arg2.target.tagName).toBe("g");
+    expect(arg2.target.classList.toString()).toEqual("recharts-layer");
+  });
+
+  it("should call onClick with correct arguments", () => {
+    const onClick = vi.fn();
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={mouseData}
+        nameKey="name"
+        dataKey="size"
+        onClick={onClick}
+        isAnimationActive={false}
+      />
+    ));
+    flush();
+
+    const firstNode = container.querySelectorAll(".recharts-treemap-depth-1 g")[0]!;
+    expect(firstNode).toBeInTheDocument();
+
+    fireEvent.click(firstNode);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0]).toHaveLength(1);
+    const arg1 = onClick.mock.calls[0]![0];
+    expect(arg1).toMatchObject({
+      id: expect.stringMatching(/^recharts-treemap-+/),
+      name: "A",
+      depth: 1,
+      index: 0,
+      tooltipIndex: "children[0]",
+      value: 24593,
+      size: 24593,
+    });
+    expect(arg1.root).toMatchObject({ depth: 0, name: "", value: 33886, tooltipIndex: "" });
+  });
+
+  it("should not call touch event handlers", () => {
+    mockTouchingElement("0", "size");
+    const onTouchMove = vi.fn();
+    const onTouchEnd = vi.fn();
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={mouseData}
+        nameKey="name"
+        dataKey="size"
+        // @ts-expect-error Treemap does not fire external touch events; it activates Tooltip internally.
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        isAnimationActive={false}
+      />
+    ));
+    flush();
+
+    const firstNode = container.querySelectorAll(".recharts-treemap-depth-1 g")[0]!;
+    expect(firstNode).toBeInTheDocument();
+
+    fireEvent.touchMove(firstNode, { touches: [{ clientX: 200, clientY: 200 }] });
+    expect(onTouchMove).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe("with Tooltip trigger=hover", () => {
+  it("should display Tooltip on mouse enter on a Node and hide it on mouse leave", () => {
+    const { container } = render(() => (
+      <Treemap width={1000} height={500} data={exampleTreemapData}>
+        <Tooltip trigger="hover" />
+      </Treemap>
+    ));
+    flush();
+
+    const tooltip = getTooltip(container);
+    expect(tooltip).not.toBeVisible();
+
+    const tooltipTriggerElement = showTooltip(container, treemapNodeChartMouseHoverTooltipSelector);
+
+    expect(tooltip).toBeVisible();
+
+    fireEvent.mouseOut(tooltipTriggerElement);
+
+    expect(tooltip).not.toBeVisible();
+  });
+
+  // Deferred: with custom content the tooltip-activation handler lives only on the
+  // wrapping node <Layer> (faithful to recharts' ContentItem). recharts' helper fires
+  // a *bubbling* `mouseOver` on the inner element, which React synthesizes into the
+  // Layer's `onMouseEnter`; this port's helper fires a non-bubbling `mouseEnter` on the
+  // inner element, which never reaches the Layer. Default content works because the
+  // <Rectangle> itself carries the handler. Pure event-model divergence, not an impl gap.
+  it("should display/hide Tooltip on mouse enter/leave when custom content is passed as a function", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={1000}
+        height={500}
+        data={exampleTreemapData}
+        content={(props) => {
+          const { depth, x, y, width, height, index, name } = props;
+
+          return (
+            <g>
+              <rect
+                x={x}
+                y={y}
+                width={width}
+                height={height}
+                style={{
+                  fill: "#111",
+                  stroke: "#fff",
+                  "stroke-width": 2 / (depth + 1e-10),
+                  "stroke-opacity": 1 / (depth + 1e-10),
+                }}
+                // needed for unit tests to find the tooltip
+                class="recharts-rectangle"
+              />
+              {depth === 1 ? (
+                <text
+                  x={x + width / 2}
+                  y={y + height / 2 + 7}
+                  text-anchor="middle"
+                  fill="#fff"
+                  font-size="14"
+                >
+                  {name}
+                </text>
+              ) : null}
+              {depth === 1 ? (
+                <text x={x + 4} y={y + 18} fill="#fff" font-size="16" fill-opacity="0.9">
+                  {index + 1}
+                </text>
+              ) : null}
+            </g>
+          );
+        }}
+      >
+        <Tooltip trigger="hover" />
+      </Treemap>
+    ));
+    flush();
+
+    const tooltip = getTooltip(container);
+    expect(tooltip).not.toBeVisible();
+
+    const tooltipTriggerElement = showTooltip(container, treemapNodeChartMouseHoverTooltipSelector);
+
+    expect(tooltip).toBeVisible();
+
+    fireEvent.mouseOut(tooltipTriggerElement);
+
+    expect(tooltip).not.toBeVisible();
+  });
+
+  it("should not display Tooltip when clicking on a Node", () => {
+    const { container } = render(() => (
+      <Treemap width={1000} height={500} data={exampleTreemapData}>
+        <Tooltip trigger="hover" />
+      </Treemap>
+    ));
+    flush();
+
+    const tooltip = getTooltip(container);
+    const tooltipTriggerElement = container.querySelector(
+      treemapNodeChartMouseHoverTooltipSelector,
+    );
+    assertNotNull(tooltipTriggerElement);
+    expect(tooltip).not.toBeVisible();
+
+    fireEvent.click(tooltipTriggerElement);
+
+    expect(tooltip).not.toBeVisible();
+  });
+});
+
+describe("with Tooltip trigger=click", () => {
+  it("should display Tooltip on mouse enter on a Node and keep it on mouse leave", () => {
+    const { container } = render(() => (
+      <Treemap width={1000} height={500} data={exampleTreemapData}>
+        <Tooltip trigger="click" />
+      </Treemap>
+    ));
+    flush();
+
+    const tooltip = getTooltip(container);
+    expect(tooltip).not.toBeVisible();
+
+    const tooltipTriggerElement = container.querySelector(
+      treemapNodeChartMouseHoverTooltipSelector,
+    );
+    assertNotNull(tooltipTriggerElement);
+    fireEvent.click(tooltipTriggerElement);
+    flush();
+
+    expect(tooltip).toBeVisible();
+
+    fireEvent.click(tooltipTriggerElement);
+    flush();
+
+    expect(tooltip).toBeVisible();
+  });
+
+  it("should do nothing on hover over Node", () => {
+    const { container } = render(() => (
+      <Treemap width={1000} height={500} data={exampleTreemapData}>
+        <Tooltip trigger="click" />
+      </Treemap>
+    ));
+    flush();
+
+    const tooltip = getTooltip(container);
+    showTooltip(container, treemapNodeChartMouseHoverTooltipSelector);
+    expect(tooltip).not.toBeVisible();
+  });
+});
+
+describe("Treemap geometry (nodeInset / nodeGap)", () => {
+  const multiLevelInsetData = [
+    {
+      name: "Root A",
+      children: [
+        {
+          name: "A1",
+          children: [{ name: "A1a", value: 100 }],
+        },
+      ],
+    },
+  ];
+
+  const siblingGapData = [
+    { name: "Left", value: 100 },
+    { name: "Right", value: 100 },
+  ];
+
+  it("renders nested children directly on top of parent when nodeInset is not set", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={multiLevelInsetData}
+        isAnimationActive={false}
+        dataKey="value"
+        nameKey="name"
+      />
+    ));
+    flush();
+
+    const depth1Rect = container.querySelector(".recharts-treemap-depth-1 .recharts-rectangle");
+    const depth2Rect = container.querySelector(".recharts-treemap-depth-2 .recharts-rectangle");
+    assertNotNull(depth1Rect);
+    assertNotNull(depth2Rect);
+
+    expect(depth2Rect.getAttribute("x")).toBe(depth1Rect.getAttribute("x"));
+    expect(depth2Rect.getAttribute("y")).toBe(depth1Rect.getAttribute("y"));
+    expect(depth2Rect.getAttribute("width")).toBe(depth1Rect.getAttribute("width"));
+    expect(depth2Rect.getAttribute("height")).toBe(depth1Rect.getAttribute("height"));
+  });
+
+  it("insets nested children when nodeInset is set", () => {
+    const nodeInset = 8;
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={multiLevelInsetData}
+        isAnimationActive={false}
+        dataKey="value"
+        nameKey="name"
+        nodeInset={nodeInset}
+      />
+    ));
+    flush();
+
+    const depth1Rect = container.querySelector(".recharts-treemap-depth-1 .recharts-rectangle");
+    const depth2Rect = container.querySelector(".recharts-treemap-depth-2 .recharts-rectangle");
+    assertNotNull(depth1Rect);
+    assertNotNull(depth2Rect);
+
+    const depth1X = Number(depth1Rect.getAttribute("x"));
+    const depth1Y = Number(depth1Rect.getAttribute("y"));
+    const depth1Width = Number(depth1Rect.getAttribute("width"));
+    const depth1Height = Number(depth1Rect.getAttribute("height"));
+    const depth2X = Number(depth2Rect.getAttribute("x"));
+    const depth2Y = Number(depth2Rect.getAttribute("y"));
+    const depth2Width = Number(depth2Rect.getAttribute("width"));
+    const depth2Height = Number(depth2Rect.getAttribute("height"));
+
+    expect(depth2X).toBe(depth1X + nodeInset);
+    expect(depth2Y).toBe(depth1Y + nodeInset);
+    expect(depth2Width).toBe(depth1Width - nodeInset * 2);
+    expect(depth2Height).toBe(depth1Height - nodeInset * 2);
+  });
+
+  it("renders sibling nodes without spacing when nodeGap is not set", () => {
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={siblingGapData}
+        isAnimationActive={false}
+        dataKey="value"
+        nameKey="name"
+      />
+    ));
+    flush();
+
+    const depth1Rects = container.querySelectorAll(".recharts-treemap-depth-1 .recharts-rectangle");
+    expect(depth1Rects).toHaveLength(2);
+
+    const firstRect = depth1Rects[0];
+    const secondRect = depth1Rects[1];
+    assertNotNull(firstRect);
+    assertNotNull(secondRect);
+
+    const firstX = Number(firstRect.getAttribute("x"));
+    const firstY = Number(firstRect.getAttribute("y"));
+    const firstWidth = Number(firstRect.getAttribute("width"));
+    const firstHeight = Number(firstRect.getAttribute("height"));
+    const secondX = Number(secondRect.getAttribute("x"));
+    const secondY = Number(secondRect.getAttribute("y"));
+    const secondWidth = Number(secondRect.getAttribute("width"));
+    const secondHeight = Number(secondRect.getAttribute("height"));
+    const gapX = Math.max(secondX - (firstX + firstWidth), firstX - (secondX + secondWidth), 0);
+    const gapY = Math.max(secondY - (firstY + firstHeight), firstY - (secondY + secondHeight), 0);
+
+    expect(Math.max(gapX, gapY)).toBe(0);
+  });
+
+  it("adds spacing between sibling nodes when nodeGap is set", () => {
+    const nodeGap = 10;
+    const { container } = render(() => (
+      <Treemap
+        width={500}
+        height={250}
+        data={siblingGapData}
+        isAnimationActive={false}
+        dataKey="value"
+        nameKey="name"
+        nodeGap={nodeGap}
+      />
+    ));
+    flush();
+
+    const depth1Rects = container.querySelectorAll(".recharts-treemap-depth-1 .recharts-rectangle");
+    expect(depth1Rects).toHaveLength(2);
+
+    const firstRect = depth1Rects[0];
+    const secondRect = depth1Rects[1];
+    assertNotNull(firstRect);
+    assertNotNull(secondRect);
+
+    const firstX = Number(firstRect.getAttribute("x"));
+    const firstY = Number(firstRect.getAttribute("y"));
+    const firstWidth = Number(firstRect.getAttribute("width"));
+    const firstHeight = Number(firstRect.getAttribute("height"));
+    const secondX = Number(secondRect.getAttribute("x"));
+    const secondY = Number(secondRect.getAttribute("y"));
+    const secondWidth = Number(secondRect.getAttribute("width"));
+    const secondHeight = Number(secondRect.getAttribute("height"));
+    const gapX = Math.max(secondX - (firstX + firstWidth), firstX - (secondX + secondWidth), 0);
+    const gapY = Math.max(secondY - (firstY + firstHeight), firstY - (secondY + secondHeight), 0);
+
+    expect(Math.max(gapX, gapY)).toBe(nodeGap);
+  });
+});
+
+describe("Treemap layout context", () => {
+  it("should set width and height and margin in state", () => {
+    const sizeSpy = vi.fn();
+    const viewBoxSpy = vi.fn();
+    const marginSpy = vi.fn();
+    const Comp = (): null => {
+      const width = useChartWidth();
+      const height = useChartHeight();
+      const viewBox = useViewBox();
+      const margin = useMargin();
+      createEffect(
+        () => ({ width: width(), height: height() }),
+        (v) => sizeSpy(v),
+      );
+      createEffect(
+        () => viewBox(),
+        (v) => viewBoxSpy(v),
+      );
+      createEffect(
+        () => margin(),
+        (v) => marginSpy(v),
+      );
+      return null;
+    };
+    render(() => (
+      <Treemap width={100} height={50}>
+        <Comp />
+      </Treemap>
+    ));
+    expect(marginSpy).toHaveBeenLastCalledWith({ bottom: 0, left: 0, right: 0, top: 0 });
+    expect(sizeSpy).toHaveBeenLastCalledWith({ width: 100, height: 50 });
+    expect(viewBoxSpy).toHaveBeenLastCalledWith({ x: 0, y: 0, width: 100, height: 50 });
+  });
+
+  it("should not throw if axes are provided - they are not an allowed child", () => {
+    expect(() =>
+      render(() => (
+        <Treemap width={100} height={50}>
+          <XAxis dataKey="number" type="number" />
+          <YAxis type="category" dataKey="name" />
+        </Treemap>
+      )),
+    ).not.toThrow();
+  });
+});
+
+describe("addToTreemapNodeIndex + treemapPayloadSearcher tandem", () => {
+  const dummyRoot = {
+    children: exampleTreemapData,
+    value: 0,
+    depth: 0,
+    index: 0,
+  };
+  const computedRootNode: TreemapNode = computeNode({
+    depth: 0,
+    index: 0,
+    node: dummyRoot,
+    dataKey: "value",
+    nameKey: "name",
+    nestedActiveTooltipIndex: undefined,
+  });
+  it("should return index for root node and then look it up", () => {
+    expect(computedRootNode.children?.[4]).toBeDefined();
+    const activeIndex = addToTreemapNodeIndex(4);
+    expect(activeIndex).toEqual("children[4]");
+    expect(treemapPayloadSearcher(computedRootNode, activeIndex)).toBe(
+      computedRootNode.children?.[4],
+    );
+  });
+
+  it("should return index for nested node and then look it up", () => {
+    const level1 = computedRootNode.children?.[0];
+    assertNotNull(level1);
+    const activeIndex1 = addToTreemapNodeIndex(0);
+    const level2 = level1.children?.[1];
+    const activeIndex2 = addToTreemapNodeIndex(1, activeIndex1);
+    expect(activeIndex2).toEqual("children[0]children[1]");
+    expect(level2).toBeDefined();
+    expect(treemapPayloadSearcher(computedRootNode, activeIndex1)).toBe(level1);
+    expect(treemapPayloadSearcher(computedRootNode, activeIndex2)).toBe(level2);
+  });
+});