solid-recharts 0.2.0 → 1.0.0

package/test/polar/Radar.animation.spec.tsx

@@ -1,570 +0,0 @@
-// Ported from recharts 3.8.1 test/polar/Radar.animation.spec.tsx (commit 7a23854).
-//
-// <Radar> animates on the v3.9 engine: the polygon (and, for range radars, its
-// baseline) is driven by <AnimatedItems> + the default `defaultRadarAnimateItems`
-// interpolation (matched points tween prev→next x/y; added points grow from the
-// (cx,cy) center; removed points drop). Animation is driven in tests via
-// AnimationControllerProvider + the new-engine MockControllerAnimationManager.
-//
-// Ported: the POLYGON-based cases — isAnimationActive=false (settled, byte-identical)
-// + the initial-animation polygon case (Tier-B: the exact intermediate easing-frame
-// geometry is coupled to the mock manager's progress→t mapping, a harness detail, so
-// anchored to behaviour + the byte-identical settled final frame).
-//
-// Ported re-animation: dataKey-change and data-array-change both re-run the
-// polygon animation (see the describe blocks below; Tier-B — the exact mid frames
-// are harness-coupled, so anchored to behaviour + the settled frame).
-//
-// DOT cases (`expectRadarDots`/`getRadarDots`) and radii cases (`getRadarDotRadii`)
-// are ported: Radar dots render inside the animation frame from the interpolated
-// stepData, so they animate with the polygon. Settled-frame assertions are Tier-A
-// (byte-identical to the reference); mid-animation frames are Tier-B (the exact
-// easing-frame geometry is coupled to the mock manager's progress→t mapping, so we
-// assert every dot moves each step and the animation lands on the settled values).
-// The reference's `key`-prop re-animation describe is driven here by REMOUNTING the
-// chart via a keyed <Show> (Solid has no React `key` prop) — same semantics: all
-// tween state resets and the entrance animation re-runs from the center.
-import { describe, expect, it, vi } from "vitest";
-import { createSignal, flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { assertNotNull } from "../helper/assertNotNull";
-import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
-import type { AnimationController } from "../../src";
-import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
-import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "../../src";
-import { PageData } from "../_data";
-
-const RADAR_RADIUS = 40;
-const CX = 50;
-const CY = 50;
-
-const smallerData = PageData.slice(0, 3);
-const biggerData = PageData.slice(3, 5);
-
-// The new engine increments the animation id every cycle (useAnimationId), so each
-// re-animation subscribes a fresh AnimationController via the context factory. We
-// hand the context ONE MockControllerAnimationManager whose factory rebinds to the
-// newest AnimationHandle on every subscribe, so `current()` always drives the most
-// recently created animation — the same idiom Bar.animation.spec uses.
-function createManagerRegistry(): {
-  factory: AnimationController;
-  current: () => MockProgressAnimationManager;
-} {
-  const manager = new MockProgressAnimationManager("radar-anim");
-  return {
-    factory: manager.factory,
-    current: (): MockProgressAnimationManager => manager,
-  };
-}
-
-function getRadarPolygons(container: Element): ReadonlyArray<SVGPathElement> {
-  return Array.from(container.querySelectorAll(".recharts-radar-polygon path"));
-}
-
-function getPolygonPath(container: Element): string {
-  const allPolygons = getRadarPolygons(container);
-  if (allPolygons.length !== 1) {
-    throw new Error(`Expected exactly one polygon, but found ${allPolygons.length}`);
-  }
-  const polygon = allPolygons[0];
-  assertNotNull(polygon);
-  const d = polygon.getAttribute("d");
-  if (!d) {
-    throw new Error('Polygon does not have a "d" attribute or it is empty');
-  }
-  return d;
-}
-
-// Steps the animation through `steps` progress points, asserting the polygon path
-// changes each step and differs from the initial frame; returns the frames.
-async function expectAnimatedRadarPolygons(
-  container: Element,
-  manager: MockProgressAnimationManager,
-  steps = 5,
-): Promise<ReadonlyArray<string>> {
-  let progress = 0.1;
-  await manager.setAnimationProgress(progress);
-  flush();
-  const stepSize = (1 - progress) / steps;
-  const initialPath = getPolygonPath(container);
-
-  const polygonsDuringAnimation: Array<string> = [];
-  for (progress += stepSize; progress < 1; progress += stepSize) {
-    await manager.setAnimationProgress(progress);
-    flush();
-    const currentPath = getPolygonPath(container);
-    polygonsDuringAnimation.push(currentPath);
-    expect(currentPath).not.toBe(initialPath);
-  }
-
-  await manager.completeAnimation();
-  flush();
-  const finalPath = getPolygonPath(container);
-  expect(finalPath).not.toBe(initialPath);
-  polygonsDuringAnimation.push(finalPath);
-  expect(polygonsDuringAnimation).toHaveLength(steps);
-  return polygonsDuringAnimation;
-}
-
-// --- Radar dot helpers (ported from the reference's expectRadarPolygons helper) ---
-
-type DotPos = { cx: string; cy: string };
-
-function getRadarDots(container: Element): ReadonlyArray<SVGCircleElement> {
-  return Array.from(container.querySelectorAll(".recharts-radar-dots circle.recharts-radar-dot"));
-}
-
-function getDotPosition(dot: SVGCircleElement): DotPos {
-  return { cx: dot.getAttribute("cx") ?? "", cy: dot.getAttribute("cy") ?? "" };
-}
-
-function expectRadarDots(container: Element, expected: ReadonlyArray<DotPos>): void {
-  expect(getRadarDots(container).map(getDotPosition)).toEqual(expected);
-}
-
-function getDotRadius(dot: SVGCircleElement): number {
-  const cx = parseFloat(dot.getAttribute("cx") ?? "0");
-  const cy = parseFloat(dot.getAttribute("cy") ?? "0");
-  return Math.sqrt((cx - CX) ** 2 + (cy - CY) ** 2);
-}
-
-function getRadarDotRadii(container: Element): ReadonlyArray<number> {
-  return getRadarDots(container).map(getDotRadius);
-}
-
-// Steps the animation through `steps` progress points, asserting every dot moves
-// (at least one of cx/cy changes — a dot exactly at a multiple of 90° keeps one
-// coordinate constant) each step and after the final frame; returns the frames.
-// Tier-B: the exact intermediate geometry is coupled to the mock manager's
-// progress→t mapping, so callers assert movement + the byte-identical settled frame.
-async function expectAnimatedRadarDots(
-  container: Element,
-  manager: MockProgressAnimationManager,
-  steps = 5,
-): Promise<ReadonlyArray<ReadonlyArray<DotPos>>> {
-  let progress = 0.1;
-  await manager.setAnimationProgress(progress);
-  flush();
-  const stepSize = (1 - progress) / steps;
-  const initialDots = getRadarDots(container).map(getDotPosition);
-
-  const dotsDuringAnimation: Array<ReadonlyArray<DotPos>> = [];
-  for (progress += stepSize; progress < 1; progress += stepSize) {
-    await manager.setAnimationProgress(progress);
-    flush();
-    const currentDots = getRadarDots(container).map(getDotPosition);
-    dotsDuringAnimation.push(currentDots);
-    initialDots.forEach((initial, index) => {
-      const current = currentDots[index];
-      assertNotNull(current);
-      expect(initial.cx !== current.cx || initial.cy !== current.cy).toBe(true);
-    });
-  }
-
-  await manager.completeAnimation();
-  flush();
-  const finalDots = getRadarDots(container).map(getDotPosition);
-  finalDots.forEach((final, index) => {
-    const initial = initialDots[index];
-    assertNotNull(initial);
-    expect(final.cx !== initial.cx || final.cy !== initial.cy).toBe(true);
-  });
-  dotsDuringAnimation.push(finalDots);
-  expect(dotsDuringAnimation).toHaveLength(steps);
-  return dotsDuringAnimation;
-}
-
-// Same drive as expectAnimatedRadarDots but tracks each dot's radius from (CX,CY),
-// asserting every radius changes each step (the polygon grows from the center).
-async function expectAnimatedDotRadii(
-  container: Element,
-  manager: MockProgressAnimationManager,
-  steps = 5,
-): Promise<ReadonlyArray<ReadonlyArray<number>>> {
-  let progress = 0.1;
-  await manager.setAnimationProgress(progress);
-  flush();
-  const stepSize = (1 - progress) / steps;
-  const initialRadii = getRadarDotRadii(container);
-
-  const radiiDuringAnimation: Array<ReadonlyArray<number>> = [];
-  for (progress += stepSize; progress < 1; progress += stepSize) {
-    await manager.setAnimationProgress(progress);
-    flush();
-    const currentRadii = getRadarDotRadii(container);
-    radiiDuringAnimation.push(currentRadii);
-    initialRadii.forEach((initial, index) => {
-      expect(currentRadii[index]).not.toBe(initial);
-    });
-  }
-
-  await manager.completeAnimation();
-  flush();
-  const finalRadii = getRadarDotRadii(container);
-  finalRadii.forEach((final, index) => {
-    expect(final).not.toBe(initialRadii[index]);
-  });
-  radiiDuringAnimation.push(finalRadii);
-  expect(radiiDuringAnimation).toHaveLength(steps);
-  return radiiDuringAnimation;
-}
-
-const renderRadarChart = (radar: () => unknown) => (
-  <RadarChart
-    cx={CX}
-    cy={CY}
-    outerRadius={RADAR_RADIUS}
-    width={100}
-    height={100}
-    data={smallerData}
-  >
-    <PolarGrid />
-    <PolarAngleAxis dataKey="name" />
-    <PolarRadiusAxis />
-    {radar()}
-  </RadarChart>
-);
-
-describe("Radar animation", () => {
-  describe("with isAnimationActive=false", () => {
-    const onAnimationStart = vi.fn();
-    const onAnimationEnd = vi.fn();
-
-    it("should render one path without animation", () => {
-      const { container } = render(() =>
-        renderRadarChart(() => (
-          <Radar
-            dataKey="pv"
-            isAnimationActive={false}
-            onAnimationStart={onAnimationStart}
-            onAnimationEnd={onAnimationEnd}
-            dot
-          />
-        )),
-      );
-      flush();
-
-      expect(getPolygonPath(container)).toBe("M50,34L76.3676,65.2233L41.9286,54.66L50,34Z");
-    });
-
-    it("should render dots without animation", () => {
-      const { container } = render(() =>
-        renderRadarChart(() => (
-          <Radar
-            dataKey="pv"
-            isAnimationActive={false}
-            onAnimationStart={onAnimationStart}
-            onAnimationEnd={onAnimationEnd}
-            dot
-          />
-        )),
-      );
-      flush();
-
-      // Byte-identical to the reference (settled dots render at full-precision cx/cy).
-      expectRadarDots(container, [
-        { cx: "50", cy: "34" },
-        { cx: "76.36758679389021", cy: "65.22333333333333" },
-        { cx: "41.92864323672903", cy: "54.66" },
-      ]);
-    });
-
-    it("should render path at the final radius", () => {
-      const { container } = render(() =>
-        renderRadarChart(() => <Radar dataKey="pv" isAnimationActive={false} dot />),
-      );
-      flush();
-
-      const radii = getRadarDotRadii(container);
-      expect(radii.map((r) => r.toFixed(2))).toEqual(["16.00", "30.45", "9.32"]);
-    });
-
-    it("should not call animation start or end callbacks", () => {
-      onAnimationStart.mockClear();
-      onAnimationEnd.mockClear();
-      render(() =>
-        renderRadarChart(() => (
-          <Radar
-            dataKey="pv"
-            isAnimationActive={false}
-            onAnimationStart={onAnimationStart}
-            onAnimationEnd={onAnimationEnd}
-            dot
-          />
-        )),
-      );
-      flush();
-
-      expect(onAnimationStart).not.toHaveBeenCalled();
-      expect(onAnimationEnd).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("initial animation with simple props", () => {
-    const onAnimationStart = vi.fn();
-    const onAnimationEnd = vi.fn();
-
-    it("should render polygons with animation", async () => {
-      const manager = new MockProgressAnimationManager("radar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          {renderRadarChart(() => (
-            <Radar
-              dot
-              dataKey="amt"
-              isAnimationActive
-              onAnimationStart={onAnimationStart}
-              onAnimationEnd={onAnimationEnd}
-            />
-          ))}
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // Tier-B (golden-anchored to behaviour + the byte-identical settled frame): the
-      // exact intermediate easing-frame geometry is coupled to the mock manager's
-      // progress→t mapping (a harness detail), so we assert the animation runs (frames
-      // differ from the settled state) and lands on the settled polygon.
-      const paths = await expectAnimatedRadarPolygons(container, manager);
-      const settled = "M50,10L84.641,70L15.359,70L50,10Z";
-      expect(paths).toHaveLength(5);
-      // Final frame is the settled geometry.
-      expect(paths[paths.length - 1]).toBe(settled);
-      // A mid-animation frame is not yet settled (polygon still expanding from center).
-      expect(paths[0]).not.toBe(settled);
-      expect(onAnimationEnd).toHaveBeenCalledTimes(1);
-    });
-
-    it("should render dots with initial animation", async () => {
-      const manager = new MockProgressAnimationManager("radar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          {renderRadarChart(() => (
-            <Radar dot dataKey="amt" isAnimationActive />
-          ))}
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // Tier-B: the dots move each step (they render from the interpolated stepData,
-      // so they entrance-animate with the polygon) and land on the byte-identical
-      // settled positions.
-      const dots = await expectAnimatedRadarDots(container, manager);
-      expect(dots).toHaveLength(5);
-      expect(dots[dots.length - 1]).toEqual([
-        { cx: "50", cy: "10" },
-        { cx: "84.64101615137756", cy: "70" },
-        { cx: "15.35898384862245", cy: "70" },
-      ]);
-    });
-
-    it("should render points radii with animation", async () => {
-      const manager = new MockProgressAnimationManager("radar-anim");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={manager.factory}>
-          {renderRadarChart(() => (
-            <Radar dot dataKey="amt" isAnimationActive />
-          ))}
-        </AnimationControllerProvider>
-      ));
-      flush();
-
-      // Tier-B: each dot's radius grows from the center each step and settles at the
-      // outer radius (40) for the "amt" series.
-      const radii = await expectAnimatedDotRadii(container, manager);
-      expect(radii).toHaveLength(5);
-      const settledRadii = radii[radii.length - 1];
-      assertNotNull(settledRadii);
-      expect(settledRadii.map((r) => Math.round(r))).toEqual([40, 40, 40]);
-    });
-  });
-
-  // POLYGON + DOT re-animation. Re-animation has no React `key`: the chart's
-  // `dataKey`/`data` is a signal swapped via an in-tree button click (so the re-render
-  // runs inside the render-root owner). A fresh points reference yields a new
-  // useAnimationId memo → a NEW animation subscribes a NEW manager via the context
-  // factory; a manager registry drives the most-recently-created one. Tier-B: the exact
-  // mid frames are harness-coupled, so we assert the animation re-runs, the dots move,
-  // and everything lands on the byte-identical settled frame.
-  describe("when changing dataKey prop", () => {
-    // Renders the chart with a signal-swapped dataKey and primes it (completes the
-    // entrance animation, then flips the dataKey to arm the re-animation).
-    async function renderAndPrime(): Promise<{
-      container: HTMLElement;
-      registry: ReturnType<typeof createManagerRegistry>;
-    }> {
-      const registry = createManagerRegistry();
-      const [dataKey, setDataKey] = createSignal("amt");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={registry.factory}>
-          <button
-            type="button"
-            data-testid="swap"
-            onClick={() => setDataKey((prev) => (prev === "amt" ? "pv" : "amt"))}
-          />
-          <RadarChart
-            cx={CX}
-            cy={CY}
-            outerRadius={RADAR_RADIUS}
-            width={100}
-            height={100}
-            data={smallerData}
-          >
-            <PolarGrid />
-            <PolarAngleAxis dataKey="name" />
-            <PolarRadiusAxis />
-            <Radar dot dataKey={dataKey()} isAnimationActive />
-          </RadarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      await registry.current().completeAnimation();
-      flush();
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-      return { container, registry };
-    }
-
-    it("should re-run the radar polygon animation", async () => {
-      const registry = createManagerRegistry();
-      const [dataKey, setDataKey] = createSignal("amt");
-      const { container } = render(() => (
-        <AnimationControllerProvider value={registry.factory}>
-          <button
-            type="button"
-            data-testid="swap"
-            onClick={() => setDataKey((prev) => (prev === "amt" ? "pv" : "amt"))}
-          />
-          <RadarChart
-            cx={CX}
-            cy={CY}
-            outerRadius={RADAR_RADIUS}
-            width={100}
-            height={100}
-            data={smallerData}
-          >
-            <PolarGrid />
-            <PolarAngleAxis dataKey="name" />
-            <PolarRadiusAxis />
-            <Radar dot dataKey={dataKey()} isAnimationActive />
-          </RadarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      await registry.current().completeAnimation();
-      flush();
-      const initial = getPolygonPath(container);
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-      const reanimated = await expectAnimatedRadarPolygons(container, registry.current());
-      const settled = reanimated[reanimated.length - 1];
-
-      expect(reanimated).toHaveLength(5);
-      // The new dataKey (pv) settles to different geometry than the initial (amt) frame.
-      expect(settled).not.toBe(initial);
-      // A mid-animation frame differs from the settled state (the animation re-ran).
-      expect(reanimated[0]).not.toBe(settled);
-    });
-
-    it("should animate the radar dots", async () => {
-      const { container, registry } = await renderAndPrime();
-      // Tier-B: the dots re-animate on the dataKey swap and settle byte-identically
-      // to the "pv" series positions.
-      const dots = await expectAnimatedRadarDots(container, registry.current());
-      expect(dots).toHaveLength(5);
-      expect(dots[dots.length - 1]).toEqual([
-        { cx: "50", cy: "34" },
-        { cx: "76.36758679389021", cy: "65.22333333333333" },
-        { cx: "41.92864323672903", cy: "54.66" },
-      ]);
-    });
-
-    it("should animate the radar radii", async () => {
-      const { container, registry } = await renderAndPrime();
-      const radii = await expectAnimatedDotRadii(container, registry.current());
-      expect(radii).toHaveLength(5);
-      const settledRadii = radii[radii.length - 1];
-      assertNotNull(settledRadii);
-      expect(settledRadii.map((r) => Number(r.toFixed(2)))).toEqual([16, 30.45, 9.32]);
-    });
-  });
-
-  describe("tests that change data array", () => {
-    // Renders the chart with a signal-swapped data array and primes it (completes the
-    // entrance animation, then swaps 3→2 points to arm the re-animation).
-    async function renderAndPrime(): Promise<{
-      container: HTMLElement;
-      registry: ReturnType<typeof createManagerRegistry>;
-    }> {
-      const registry = createManagerRegistry();
-      const [data, setData] = createSignal<ReadonlyArray<(typeof PageData)[number]>>(smallerData);
-      const { container } = render(() => (
-        <AnimationControllerProvider value={registry.factory}>
-          <button
-            type="button"
-            data-testid="swap"
-            onClick={() => setData((prev) => (prev === smallerData ? biggerData : smallerData))}
-          />
-          <RadarChart
-            cx={CX}
-            cy={CY}
-            outerRadius={RADAR_RADIUS}
-            width={100}
-            height={100}
-            data={data()}
-          >
-            <PolarGrid />
-            <PolarAngleAxis dataKey="name" />
-            <PolarRadiusAxis />
-            <Radar dot dataKey="pv" isAnimationActive />
-          </RadarChart>
-        </AnimationControllerProvider>
-      ));
-      flush();
-      await registry.current().completeAnimation();
-      flush();
-
-      const button = container.querySelector<HTMLButtonElement>('[data-testid="swap"]');
-      assertNotNull(button);
-      fireEvent.click(button);
-      flush();
-      return { container, registry };
-    }
-
-    it("should re-run the radar polygon animation from 3 to 2 points", async () => {
-      const { container, registry } = await renderAndPrime();
-      const armed = getPolygonPath(container);
-      const reanimated = await expectAnimatedRadarPolygons(container, registry.current());
-      const settled = reanimated[reanimated.length - 1];
-
-      expect(reanimated).toHaveLength(5);
-      // Fewer points → different settled polygon than the just-armed frame.
-      expect(settled).not.toBe(armed);
-      expect(reanimated[0]).not.toBe(settled);
-    });
-
-    it("should animate dots from 3 to 2 points", async () => {
-      const { container, registry } = await renderAndPrime();
-      // The removed 3rd point drops immediately (defaultRadarAnimateItems), so only the
-      // 2 surviving dots animate. Tier-B: assert they move and land on 2 settled dots.
-      const dots = await expectAnimatedRadarDots(container, registry.current());
-      expect(dots).toHaveLength(5);
-      expect(dots[dots.length - 1]).toHaveLength(2);
-      // A mid frame differs from the settled frame (the animation re-ran).
-      expect(dots[0]).not.toEqual(dots[dots.length - 1]);
-    });
-
-    it("should animate radii from 3 to 2 points", async () => {
-      const { container, registry } = await renderAndPrime();
-      const radii = await expectAnimatedDotRadii(container, registry.current());
-      expect(radii).toHaveLength(5);
-      expect(radii[radii.length - 1]).toHaveLength(2);
-    });
-  });
-});

package/test/polar/Radar.render.spec.tsx

@@ -1,71 +0,0 @@
-// Subset port of recharts 3.8.1 test/polar/Radar.spec.tsx (commit 7a23854) — the
-// payoff of the Radar vertical: a <Radar> in a RadarChart registers as a polar item
-// (giving the angle axis its data-driven domain) and draws the radar polygon with
-// byte-identical geometry. The golden `d` is recharts' `expectRadarPolygons` value.
-// `flush()` because Radar registers via an effect and points compute from the store.
-//
-// Tier-A: the polygon `d` is byte-identical to recharts (proves the angle band scale
-// + radius scale + polarToCartesian wiring). dots/activeDot/animation/label/shape/
-// tooltip/legend deferred.
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { RadarChart, Radar, PolarAngleAxis } from "../../src";
-
-const exampleRadarData = [
-  { name: "iPhone 3GS", value: 420, half: 210 },
-  { name: "iPhone 4", value: 460, half: 230 },
-  { name: "iPhone 4s", value: 999, half: 500 },
-  { name: "iPhone 5", value: 500, half: 250 },
-  { name: "iPhone 5s", value: 864, half: 432 },
-  { name: "iPhone 6", value: 650, half: 325 },
-  { name: "iPhone 6s", value: 765, half: 383 },
-  { name: "iPhone 5se", value: 365, half: 183 },
-];
-
-const GOLDEN_RADAR_PATH =
-  "M250,167.68L313.7527,186.2473L445.804,250L319.2965,319.2965L250,419.344L159.9146,340.0854L100.06,250L199.4136,199.4136L250,167.68Z";
-
-describe("<Radar /> in RadarChart", () => {
-  it("renders the radar polygon with byte-identical geometry", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} />
-      </RadarChart>
-    ));
-    flush();
-
-    const polygon = container.querySelector(".recharts-radar-polygon path");
-    expect(polygon).not.toBeNull();
-    expect(polygon?.getAttribute("d")).toBe(GOLDEN_RADAR_PATH);
-    // recharts default: no fill default → no fill attribute (the closing Z path
-    // would otherwise use props.fill).
-    expect(polygon?.getAttribute("fill")).toBeNull();
-  });
-
-  it("gives the angle axis a data-driven domain (one tick per data point)", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} />
-        <PolarAngleAxis dataKey="value" />
-      </RadarChart>
-    ));
-    flush();
-
-    // 8 data points → 8 angle-axis ticks (the Radar item supplies the domain).
-    expect(container.querySelectorAll(".recharts-polar-angle-axis-tick")).toHaveLength(
-      exampleRadarData.length,
-    );
-  });
-
-  it("renders nothing when hide is set", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" hide />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-radar-polygon")).toHaveLength(0);
-  });
-});