solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/polar/PolarGrid.spec.tsx

@@ -0,0 +1,918 @@
+// Ported from recharts 3.8.1 test/polar/PolarGrid.spec.tsx (commit 7a23854).
+//
+// Tier-A DOM cases keep recharts' geometry assertions byte-identical, adapting
+// only the harness (React render -> Solid render thunk; @testing-library/react ->
+// the repo's local testing-library). Tier-B selector cases are golden-anchored to
+// recharts via createSelectorTestCase + the value-spy helpers.
+//
+// Harness adaptations:
+// - `ringsData` is defined inline (the reference imports it from test/_data; the
+//   port's _data.ts does not re-export it).
+// - `pageData` comes from the port's test/_data.ts (golden-identical to recharts'
+//   storybook/stories/data/Page.ts).
+// - `flush()` drains Solid's microtask-batched store writes before DOM assertions.
+import { describe, expect, it, test } from "vitest";
+import { flush } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { exampleRadarData, pageData } from "../_data";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  Surface,
+} from "../../src";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import {
+  selectPolarAxis,
+  selectPolarAxisScale,
+  selectPolarAxisTicks,
+  selectPolarCategoricalDomain,
+} from "../../src/state/selectors/polarScaleSelectors";
+import {
+  selectPolarGridAngles,
+  selectPolarGridRadii,
+} from "../../src/state/selectors/polarGridSelectors";
+import { expectLastCalledWithScale } from "../helper/expectScale";
+import { selectPolarNiceTicks } from "../../src/state/selectors/polarSelectors";
+import type { TickItem } from "../../src/util/types";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+const ringsData = [
+  { name: "Elves", rings: 3, fill: "green" },
+  { name: "Dwarves", rings: 7, fill: "blue" },
+  { name: "Humans", rings: 9, fill: "red" },
+  { name: "Sauron", rings: 1, fill: "black" },
+];
+
+type ExpectedLine = {
+  x1: string | null;
+  y1: string | null;
+  x2: string | null;
+  y2: string | null;
+};
+
+function expectPolarGridLines(
+  container: HTMLElement,
+  expectedLines: ReadonlyArray<ExpectedLine>,
+): void {
+  const lines = container.querySelectorAll<SVGLineElement>(".recharts-polar-grid-angle line");
+
+  const actualLines: ReadonlyArray<ExpectedLine> = Array.from(lines).map((line) => ({
+    x1: line.getAttribute("x1"),
+    y1: line.getAttribute("y1"),
+    x2: line.getAttribute("x2"),
+    y2: line.getAttribute("y2"),
+  }));
+
+  expect(actualLines).toEqual(expectedLines);
+}
+
+type ExpectedPolygon = {
+  cx: number;
+  cy: number;
+  d: string | null;
+  fill?: string | null;
+};
+
+function expectPolarGridPolygons(
+  container: HTMLElement,
+  expectedPolygon: ReadonlyArray<ExpectedPolygon>,
+): void {
+  const polygons = container.querySelectorAll<SVGPathElement>(
+    ".recharts-polar-grid-concentric-polygon",
+  );
+
+  const actualPolygons: ReadonlyArray<ExpectedPolygon> = Array.from(polygons).map(
+    (polygon): ExpectedPolygon => ({
+      cx: Number(polygon.getAttribute("cx")),
+      cy: Number(polygon.getAttribute("cy")),
+      d: polygon.getAttribute("d"),
+      fill: polygon.getAttribute("fill"),
+    }),
+  );
+
+  expect(actualPolygons).toEqual(expectedPolygon.map((it) => ({ ...it, fill: it.fill ?? "none" })));
+}
+
+type ExpectedCircle = {
+  cx: number;
+  cy: number;
+  r: number;
+};
+
+function expectPolarGridCircles(
+  container: HTMLElement,
+  expectedCircles: ReadonlyArray<ExpectedCircle>,
+): void {
+  const circles = container.querySelectorAll<SVGCircleElement>(
+    ".recharts-polar-grid-concentric-circle",
+  );
+
+  const actualCircles: ReadonlyArray<ExpectedCircle> = Array.from(circles).map(
+    (circle): ExpectedCircle => ({
+      cx: Number(circle.getAttribute("cx")),
+      cy: Number(circle.getAttribute("cy")),
+      r: Number(circle.getAttribute("r")),
+    }),
+  );
+
+  expect(actualCircles).toEqual(expectedCircles);
+}
+
+describe("<PolarGrid />", () => {
+  describe("when polarAngles and polarRadius are specified explicitly, outside of any charts", () => {
+    const polarAngles = [0, 30, 60, 90, 145, 180, 200, 270, 300];
+    const polarRadius = [10, 20, 40, 80];
+
+    test("Renders angle lines and polygons by default", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={200}
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+          />
+        </Surface>
+      ));
+      flush();
+
+      expectPolarGridLines(container, [
+        { x1: "250", x2: "450", y1: "250", y2: "250" },
+        { x1: "250", x2: "423.20508075688775", y1: "250", y2: "150" },
+        { x1: "250", x2: "350", y1: "250", y2: "76.79491924311228" },
+        { x1: "250", x2: "250", y1: "250", y2: "50" },
+        { x1: "250", x2: "86.16959114220163", y1: "250", y2: "135.2847127297908" },
+        { x1: "250", x2: "50", y1: "250", y2: "249.99999999999997" },
+        { x1: "250", x2: "62.06147584281831", y1: "250", y2: "318.40402866513375" },
+        { x1: "250", x2: "249.99999999999997", y1: "250", y2: "450" },
+        { x1: "250", x2: "350", y1: "250", y2: "423.2050807568877" },
+      ]);
+
+      expectPolarGridPolygons(container, [
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 260,250L 258.66025403784437,245L 255,241.3397459621556L 250,240L 241.80847955711008,244.26423563648953L 240,250L 240.60307379214092,253.4202014332567L 250,260L 255,258.66025403784437Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 270,250L 267.3205080756888,240L 260,232.67949192431124L 250,230L 233.61695911422015,238.5284712729791L 230,250L 231.20614758428184,256.8404028665134L 250,270L 260,267.3205080756888Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 290,250L 284.6410161513775,230L 270,215.35898384862247L 250,210L 217.23391822844033,227.05694254595815L 210,250L 212.41229516856367,263.6808057330268L 250,290L 270,284.6410161513775Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 330,250L 319.2820323027551,210L 290,180.71796769724492L 250,170L 184.46783645688066,204.11388509191633L 170,250L 174.82459033712732,277.3616114660535L 249.99999999999997,330L 290,319.28203230275506Z",
+        },
+      ]);
+
+      expectPolarGridCircles(container, []);
+    });
+
+    test("Renders angle lines, polygons and background if fill provided", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={200}
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+            fill="red"
+          />
+        </Surface>
+      ));
+      flush();
+
+      expectPolarGridLines(container, [
+        { x1: "250", x2: "450", y1: "250", y2: "250" },
+        { x1: "250", x2: "423.20508075688775", y1: "250", y2: "150" },
+        { x1: "250", x2: "350", y1: "250", y2: "76.79491924311228" },
+        { x1: "250", x2: "250", y1: "250", y2: "50" },
+        { x1: "250", x2: "86.16959114220163", y1: "250", y2: "135.2847127297908" },
+        { x1: "250", x2: "50", y1: "250", y2: "249.99999999999997" },
+        { x1: "250", x2: "62.06147584281831", y1: "250", y2: "318.40402866513375" },
+        { x1: "250", x2: "249.99999999999997", y1: "250", y2: "450" },
+        { x1: "250", x2: "350", y1: "250", y2: "423.2050807568877" },
+      ]);
+
+      // Background = the outermost ring (radius = max(polarRadius) = 80), drawn
+      // first with the provided fill, so it sits behind the concentric rings.
+      expectPolarGridPolygons(container, [
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 330,250L 319.2820323027551,210L 290,180.71796769724492L 250,170L 184.46783645688066,204.11388509191633L 170,250L 174.82459033712732,277.3616114660535L 249.99999999999997,330L 290,319.28203230275506Z",
+          fill: "red",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 260,250L 258.66025403784437,245L 255,241.3397459621556L 250,240L 241.80847955711008,244.26423563648953L 240,250L 240.60307379214092,253.4202014332567L 250,260L 255,258.66025403784437Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 270,250L 267.3205080756888,240L 260,232.67949192431124L 250,230L 233.61695911422015,238.5284712729791L 230,250L 231.20614758428184,256.8404028665134L 250,270L 260,267.3205080756888Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 290,250L 284.6410161513775,230L 270,215.35898384862247L 250,210L 217.23391822844033,227.05694254595815L 210,250L 212.41229516856367,263.6808057330268L 250,290L 270,284.6410161513775Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 330,250L 319.2820323027551,210L 290,180.71796769724492L 250,170L 184.46783645688066,204.11388509191633L 170,250L 174.82459033712732,277.3616114660535L 249.99999999999997,330L 290,319.28203230275506Z",
+        },
+      ]);
+
+      expectPolarGridCircles(container, []);
+    });
+
+    test("Don't render any lines or polygons when polarAngles and polarRadius are not specified", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid cx={250} cy={250} innerRadius={0} outerRadius={200} />
+        </Surface>
+      ));
+      flush();
+
+      expectPolarGridLines(container, []);
+      expectPolarGridPolygons(container, []);
+      expectPolarGridCircles(container, []);
+    });
+
+    test("Render circles when gridType is specified to be circle", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={200}
+            gridType="circle"
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+          />
+        </Surface>
+      ));
+      flush();
+
+      expect(container.querySelectorAll(".recharts-polar-grid-angle line")).toHaveLength(9);
+      expect(container.querySelectorAll(".recharts-polar-grid-concentric-circle")).toHaveLength(4);
+    });
+
+    test("Don't render any path when outerRadius is smaller than 0", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={0}
+            gridType="circle"
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+          />
+        </Surface>
+      ));
+      flush();
+
+      expect(container.querySelectorAll(".recharts-polar-grid-angle line")).toHaveLength(0);
+      expect(container.querySelectorAll(".recharts-polar-grid-concentric-circle")).toHaveLength(0);
+    });
+  });
+
+  describe("as a child of RadarChart", () => {
+    test("Renders polar radius axis with RadarChart", () => {
+      const { container } = render(() => (
+        <RadarChart width={500} height={500} data={exampleRadarData}>
+          <Radar dataKey="value" />
+          <PolarRadiusAxis dataKey="value" />
+          <PolarGrid />
+        </RadarChart>
+      ));
+      flush();
+
+      expectPolarGridLines(container, [
+        { x1: "250", x2: "250", y1: "250", y2: "54" },
+        { x1: "250", x2: "388.5929291125633", y1: "250", y2: "111.4070708874367" },
+        { x1: "250", x2: "446", y1: "250", y2: "250" },
+        { x1: "250", x2: "388.5929291125633", y1: "250", y2: "388.5929291125633" },
+        { x1: "250", x2: "250", y1: "250", y2: "446" },
+        { x1: "250", x2: "111.4070708874367", y1: "250", y2: "388.5929291125633" },
+        { x1: "250", x2: "54", y1: "250", y2: "250.00000000000003" },
+        { x1: "250", x2: "111.40707088743665", y1: "250", y2: "111.4070708874367" },
+      ]);
+
+      expectPolarGridPolygons(container, [
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 250,250L 250,250L 250,250L 250,250L 250,250L 250,250L 250,250L 250,250Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 250,201L 284.6482322781408,215.35176772185918L 299,250L 284.6482322781408,284.6482322781408L 250,299L 215.35176772185918,284.6482322781408L 201,250L 215.35176772185918,215.35176772185918Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 250,152L 319.29646455628165,180.70353544371835L 348,250L 319.29646455628165,319.29646455628165L 250,348L 180.70353544371835,319.29646455628165L 152,250L 180.70353544371832,180.70353544371835Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 250,103L 353.9446968344225,146.05530316557753L 397,250L 353.9446968344225,353.9446968344225L 250,397L 146.05530316557753,353.9446968344225L 103,250.00000000000003L 146.05530316557747,146.05530316557753Z",
+        },
+        {
+          cx: 250,
+          cy: 250,
+          d: "M 250,54L 388.5929291125633,111.4070708874367L 446,250L 388.5929291125633,388.5929291125633L 250,446L 111.4070708874367,388.5929291125633L 54,250.00000000000003L 111.40707088743665,111.4070708874367Z",
+        },
+      ]);
+
+      expectPolarGridCircles(container, []);
+    });
+  });
+
+  describe("as a child of RadialBarChart with explicit axes", () => {
+    it.each([
+      { gridType: "polygon", radialLines: true },
+      { gridType: undefined, radialLines: true },
+      { gridType: "polygon", radialLines: undefined },
+      { gridType: undefined, radialLines: undefined },
+    ] as const)(
+      "renders polygon and lines when gridType=$gridType and radialLines=$radialLines",
+      ({ gridType, radialLines }) => {
+        const { container } = render(() => (
+          <RadialBarChart width={500} height={500} data={pageData}>
+            <RadialBar dataKey="uv" />
+            <PolarAngleAxis type="number" dataKey="uv" />
+            <PolarRadiusAxis type="category" dataKey="name" />
+            <PolarGrid gridType={gridType} radialLines={radialLines} />
+          </RadialBarChart>
+        ));
+        flush();
+
+        expectPolarGridLines(container, [
+          { x1: "250", x2: "446", y1: "250", y2: "250" },
+          { x1: "250", x2: "382.7471880386453", y1: "250", y2: "105.79811350806622" },
+          { x1: "250", x2: "233.81444828742286", y1: "250", y2: "54.669439370692714" },
+          { x1: "250", x2: "95.32846015830688", y1: "250", y2: "129.61430831282507" },
+          { x1: "250", x2: "56.673184533066404", y1: "250", y2: "282.2605396950238" },
+          { x1: "250", x2: "142.79816100800434", y1: "250", y2: "414.08462973945564" },
+          { x1: "250", x2: "298.1151554795966", y1: "250", y2: "440.0024521241088" },
+          { x1: "250", x2: "422.3768552364718", y1: "250", y2: "343.28568903526656" },
+        ]);
+
+        expectPolarGridPolygons(container, [
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 264,250L 259.4819420027604,239.69986525057615L 248.84388916338736,236.04781709790663L 238.9520328684505,241.40102202234465L 236.19094175236188,252.30432426393028L 242.34272578628602,261.7203306956754L 253.4367968199712,263.57160372315064L 262.31263251689086,256.66326350251904Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 292,250L 278.44582600828113,219.0995957517285L 246.53166749016205,208.14345129371986L 216.85609860535146,224.20306606703394L 208.57282525708567,256.9129727917908L 227.02817735885807,285.1609920870262L 260.31039045991355,290.7148111694519L 286.9378975506725,269.98979050755713Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 320,250L 297.4097100138019,198.4993262528808L 244.21944581693674,180.23908548953312L 194.76016434225247,207.00511011172324L 180.95470876180943,261.5216213196514L 211.71362893143012,308.601653478377L 267.18398409985593,317.85801861575317L 311.56316258445423,283.3163175125952Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 348,250L 316.37359401932264,177.8990567540331L 241.90722414371143,152.33471968534636L 172.66423007915344,189.80715415641254L 153.33659226653322,266.1302698475119L 196.39908050400217,332.0423148697278L 274.05757773979826,345.0012260620544L 336.1884276182359,296.64284451763325Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 376,250L 335.3374780248434,157.2987872551854L 239.59500247048612,124.4303538811596L 150.56829581605444,172.60919820110183L 125.71847577125698,270.73891837537246L 181.0845320765742,355.4829762610786L 280.93117137974065,372.14443350835563L 360.8136926520176,309.96937152267134Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 404,250L 354.30136203036415,136.69851775633774L 237.28278079726084,96.52598807697285L 128.47236155295542,155.41124224579113L 98.10035927598074,275.347566903233L 165.76998364914624,378.9236376524294L 287.80476501968303,399.2876409546569L 385.43895768579927,323.2958985277094Z",
+          },
+          {
+            cx: 250,
+            cy: 250,
+            d: "M 432,250L 373.2652460358849,116.09824825749004L 234.97055912403553,68.62162227278608L 106.3764272898564,138.21328629048043L 70.48224278070452,279.95621543109354L 150.4554352217183,402.3642990437802L 294.67835865962536,426.43084840095815L 410.0642227195809,336.6224255327475Z",
+          },
+        ]);
+
+        expectPolarGridCircles(container, []);
+      },
+    );
+
+    it("renders circle instead of polygon when gridType=circle", () => {
+      const { container } = render(() => (
+        <RadialBarChart width={500} height={500} data={pageData}>
+          <RadialBar dataKey="uv" />
+          <PolarAngleAxis type="number" dataKey="uv" />
+          <PolarRadiusAxis type="category" dataKey="name" />
+          <PolarGrid gridType="circle" />
+        </RadialBarChart>
+      ));
+      flush();
+
+      expectPolarGridPolygons(container, []);
+      expectPolarGridCircles(container, [
+        { cx: 250, cy: 250, r: 14 },
+        { cx: 250, cy: 250, r: 42 },
+        { cx: 250, cy: 250, r: 70 },
+        { cx: 250, cy: 250, r: 98 },
+        { cx: 250, cy: 250, r: 126 },
+        { cx: 250, cy: 250, r: 154 },
+        { cx: 250, cy: 250, r: 182 },
+      ]);
+    });
+
+    it("does not render lines when radialLines=false", () => {
+      const { container } = render(() => (
+        <RadialBarChart width={500} height={500} data={pageData}>
+          <RadialBar dataKey="uv" />
+          <PolarAngleAxis type="number" dataKey="uv" />
+          <PolarRadiusAxis type="category" dataKey="name" />
+          <PolarGrid radialLines={false} />
+        </RadialBarChart>
+      ));
+      flush();
+
+      expectPolarGridLines(container, []);
+    });
+  });
+
+  describe("as a child of RadialBarChart with implicit axes", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <RadialBarChart width={300} height={300} data={ringsData}>
+        <RadialBar dataKey="rings" />
+        <PolarGrid gridType="circle" />
+        {props.children}
+      </RadialBarChart>
+    ));
+
+    it("should select radius axis settings", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxis(state, "radiusAxis", 0));
+      expectLastCalledWith(spy, {
+        allowDataOverflow: false,
+        allowDecimals: false,
+        allowDuplicatedCategory: true,
+        dataKey: undefined,
+        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 radius axis scale", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "radiusAxis", 0));
+      expectLastCalledWithScale(spy, {
+        domain: [0, 1, 2, 3],
+        range: [0, 116],
+        bandwidth: 29,
+      });
+    });
+
+    it("should select categorical domain", () => {
+      const { spy } = renderTestCase((state) =>
+        selectPolarCategoricalDomain(state, "radiusAxis", 0),
+      );
+      expectLastCalledWith(spy, undefined);
+    });
+
+    it("should select radius axis ticks", () => {
+      const { spy } = renderTestCase((state) =>
+        selectPolarAxisTicks(state, "radiusAxis", 0, false),
+      );
+      expectLastCalledWith(spy, [
+        { coordinate: 14.5, index: 0, offset: 14.5, value: 0 },
+        { coordinate: 43.5, index: 1, offset: 14.5, value: 1 },
+        { coordinate: 72.5, index: 2, offset: 14.5, value: 2 },
+        { coordinate: 101.5, index: 3, offset: 14.5, value: 3 },
+      ]);
+    });
+
+    it("should render concentric circles", () => {
+      const { container } = renderTestCase();
+
+      expectPolarGridCircles(container, [
+        { cx: 150, cy: 150, r: 14.5 },
+        { cx: 150, cy: 150, r: 43.5 },
+        { cx: 150, cy: 150, r: 72.5 },
+        { cx: 150, cy: 150, r: 101.5 },
+      ]);
+    });
+
+    it("should select scale", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxisScale(state, "angleAxis", 0));
+      expectLastCalledWithScale(spy, {
+        domain: [0, 9],
+        range: [0, 360],
+      });
+    });
+
+    it("should select angle axis settings", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxis(state, "angleAxis", 0));
+      expectLastCalledWith(spy, {
+        allowDataOverflow: false,
+        allowDecimals: false,
+        allowDuplicatedCategory: false,
+        dataKey: undefined,
+        domain: undefined,
+        id: 0,
+        includeHidden: false,
+        name: undefined,
+        reversed: false,
+        niceTicks: "auto",
+        scale: "auto",
+        tick: true,
+        tickCount: undefined,
+        ticks: undefined,
+        type: "number",
+        unit: undefined,
+      });
+    });
+
+    it("should select angle ticks", () => {
+      const { spy } = renderTestCase((state) => selectPolarAxisTicks(state, "angleAxis", 0, false));
+      expectLastCalledWith(spy, [
+        { index: 0, coordinate: 0, value: 0, offset: -0 },
+        { index: 1, coordinate: 40, value: 1, offset: -0 },
+        { index: 2, coordinate: 80, value: 2, offset: -0 },
+        { index: 3, coordinate: 120, value: 3, offset: -0 },
+        { index: 4, coordinate: 160, value: 4, offset: -0 },
+        { index: 5, coordinate: 200, value: 5, offset: -0 },
+        { index: 6, coordinate: 240, value: 6, offset: -0 },
+        { index: 7, coordinate: 280, value: 7, offset: -0 },
+        { index: 8, coordinate: 320, value: 8, offset: -0 },
+        { index: 9, coordinate: 360, value: 9, offset: -0 },
+      ]);
+    });
+
+    it("should select grid angles", () => {
+      const { spy } = renderTestCase((state) => selectPolarGridAngles(state, 0));
+      expectLastCalledWith(spy, [0, 40, 80, 120, 160, 200, 240, 280, 320, 360]);
+    });
+
+    it("should render lines", () => {
+      const { container } = renderTestCase();
+
+      expectPolarGridLines(container, [
+        { x1: "150", x2: "266", y1: "150", y2: "150" },
+        { x1: "150", x2: "238.86115540180145", y1: "150", y2: "75.43663727636145" },
+        { x1: "150", x2: "170.14318860936393", y1: "150", y2: "35.76230065058387" },
+        { x1: "150", x2: "92.00000000000003", y1: "150", y2: "49.54105316100511" },
+        { x1: "150", x2: "40.99565598883464", y1: "150", y2: "110.32566337422242" },
+        { x1: "150", x2: "40.99565598883463", y1: "150", y2: "189.67433662577756" },
+        { x1: "150", x2: "91.99999999999994", y1: "150", y2: "250.45894683899485" },
+        { x1: "150", x2: "170.14318860936388", y1: "150", y2: "264.2376993494162" },
+        { x1: "150", x2: "238.86115540180143", y1: "150", y2: "224.5633627236386" },
+        { x1: "150", x2: "266", y1: "150", y2: "150.00000000000003" },
+      ]);
+    });
+  });
+
+  describe("with multiple axes", () => {
+    function RadialBarChartWithMultipleAxesWrapper(props: {
+      children?: import("@solidjs/web").JSX.Element;
+    }) {
+      return (
+        <RadialBarChart width={300} height={300} data={pageData}>
+          <RadialBar angleAxisId="axis-pv" radiusAxisId="axis-name" dataKey="pv" />
+          <PolarAngleAxis
+            angleAxisId="axis-uv"
+            dataKey="uv"
+            tickFormatter={(value) => `uv${String(value)}`}
+            type="number"
+          />
+          <PolarAngleAxis
+            angleAxisId="axis-pv"
+            dataKey="pv"
+            tickFormatter={(value) => `pv: ${String(value)}`}
+            type="number"
+            tickCount={3}
+          />
+          <PolarRadiusAxis radiusAxisId="axis-name" dataKey="name" type="category" />
+          <PolarRadiusAxis radiusAxisId="axis-amt" dataKey="amt" type="number" angle={180} />
+          {props.children}
+        </RadialBarChart>
+      );
+    }
+
+    describe('when angleAxisId="axis-pv"', () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <RadialBarChartWithMultipleAxesWrapper>
+          <PolarGrid angleAxisId="axis-pv" />
+          {props.children}
+        </RadialBarChartWithMultipleAxesWrapper>
+      ));
+
+      it("should render lines pointing to labels of first angle axis", () => {
+        const { container } = renderTestCase();
+
+        expectPolarGridLines(container, [
+          { x1: "150", x2: "266", y1: "150", y2: "150" },
+          { x1: "150", x2: "34", y1: "150", y2: "150" },
+          { x1: "150", x2: "266", y1: "150", y2: "150.00000000000003" },
+        ]);
+      });
+
+      it("should select ticks", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarAxisTicks(state, "angleAxis", "axis-pv", false),
+        );
+        const expected: ReadonlyArray<TickItem> = [
+          { coordinate: 0, offset: -0, value: 0, index: 0 },
+          { coordinate: 180, offset: -0, value: 600, index: 1 },
+          { coordinate: 360, offset: -0, value: 1200, index: 2 },
+        ];
+        expectLastCalledWith(spy, expected);
+      });
+
+      it("should select angles", () => {
+        const { spy } = renderTestCase((state) => selectPolarGridAngles(state, "axis-pv"));
+        expectLastCalledWith(spy, [0, 180, 360]);
+      });
+    });
+
+    describe('when angleAxisId="axis-uv"', () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <RadialBarChartWithMultipleAxesWrapper>
+          <PolarGrid angleAxisId="axis-uv" />
+          {props.children}
+        </RadialBarChartWithMultipleAxesWrapper>
+      ));
+
+      it("should select axis settings", () => {
+        const { spy } = renderTestCase((state) => selectPolarAxis(state, "angleAxis", "axis-uv"));
+        expectLastCalledWith(spy, {
+          allowDataOverflow: false,
+          allowDecimals: false,
+          allowDuplicatedCategory: false,
+          dataKey: "uv",
+          domain: undefined,
+          id: "axis-uv",
+          includeHidden: false,
+          name: undefined,
+          reversed: false,
+          niceTicks: "auto",
+          scale: "auto",
+          tick: true,
+          tickCount: undefined,
+          ticks: undefined,
+          type: "number",
+          unit: undefined,
+        });
+      });
+
+      it("should select nice ticks", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarNiceTicks(state, "angleAxis", "axis-uv"),
+        );
+        expectLastCalledWith(spy, undefined);
+      });
+
+      it("should select scale", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarAxisScale(state, "angleAxis", "axis-uv"),
+        );
+        expectLastCalledWithScale(spy, {
+          domain: [0, 1520],
+          range: [0, 360],
+        });
+      });
+
+      it("should select ticks", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarAxisTicks(state, "angleAxis", "axis-uv", false),
+        );
+        expectLastCalledWith(spy, [
+          { index: 0, coordinate: 0, offset: -0, value: 0 },
+          { index: 1, coordinate: 47.368421052631575, offset: -0, value: 200 },
+          { index: 2, coordinate: 94.73684210526315, offset: -0, value: 400 },
+          { index: 3, coordinate: 142.10526315789474, offset: -0, value: 600 },
+          { index: 4, coordinate: 189.4736842105263, offset: -0, value: 800 },
+          { index: 5, coordinate: 236.84210526315792, offset: -0, value: 1000 },
+          { index: 6, coordinate: 284.2105263157895, offset: -0, value: 1200 },
+          { index: 7, coordinate: 331.57894736842104, offset: -0, value: 1400 },
+        ]);
+      });
+
+      it("should select angles", () => {
+        const { spy } = renderTestCase((state) => selectPolarGridAngles(state, "axis-uv"));
+        expectLastCalledWith(
+          spy,
+          [
+            0, 47.368421052631575, 94.73684210526315, 142.10526315789474, 189.4736842105263,
+            236.84210526315792, 284.2105263157895, 331.57894736842104,
+          ],
+        );
+      });
+
+      it("should render lines pointing to labels of second angle axis", () => {
+        const { container } = renderTestCase();
+
+        expectPolarGridLines(container, [
+          { x1: "150", x2: "266", y1: "150", y2: "150" },
+          { x1: "150", x2: "228.56466230858598", y1: "150", y2: "64.65602636191673" },
+          { x1: "150", x2: "140.42079592520946", y1: "150", y2: "34.3961988112263" },
+          { x1: "150", x2: "58.459700910018356", y1: "150", y2: "78.75132532799852" },
+          { x1: "150", x2: "35.5820888052842", y1: "150", y2: "169.09297247256512" },
+          { x1: "150", x2: "86.55401365779848", y1: "150", y2: "247.11131147845333" },
+          { x1: "150", x2: "178.47631650833267", y1: "150", y2: "262.45043084896236" },
+          { x1: "150", x2: "252.0189551399527", y1: "150", y2: "205.2098975923006" },
+        ]);
+      });
+    });
+
+    describe("when radiusAxisId=undefined", () => {
+      it("should render polygons", () => {
+        const { container } = render(() => (
+          <RadialBarChartWithMultipleAxesWrapper>
+            <PolarGrid angleAxisId="axis-pv" />
+          </RadialBarChartWithMultipleAxesWrapper>
+        ));
+        flush();
+
+        expectPolarGridPolygons(container, [
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 158.28571428571428,150L 141.71428571428572,150L 158.28571428571428,150Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 174.85714285714286,150L 125.14285714285714,150L 174.85714285714286,150Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 191.42857142857142,150L 108.57142857142858,150L 191.42857142857142,150Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 208,150L 92,150L 208,150Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 224.57142857142856,150L 75.42857142857143,150L 224.57142857142856,150.00000000000003Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 241.14285714285717,150L 58.85714285714285,150L 241.14285714285717,150.00000000000003Z",
+          },
+          {
+            cx: 150,
+            cy: 150,
+            d: "M 257.7142857142857,150L 42.28571428571426,150L 257.7142857142857,150.00000000000003Z",
+          },
+        ]);
+        expectPolarGridCircles(container, []);
+      });
+    });
+
+    describe("when radiusAxisId=axis-name", () => {
+      const renderTestCase = createSelectorTestCase((props) => (
+        <RadialBarChartWithMultipleAxesWrapper>
+          <PolarGrid angleAxisId="axis-pv" radiusAxisId="axis-name" />
+          {props.children}
+        </RadialBarChartWithMultipleAxesWrapper>
+      ));
+
+      it("should select nice ticks", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarNiceTicks(state, "radiusAxis", "axis-name"),
+        );
+        expectLastCalledWith(spy, undefined);
+      });
+
+      it("should select scale", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarAxisScale(state, "radiusAxis", "axis-name"),
+        );
+        expectLastCalledWithScale(spy, {
+          domain: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F", "Page G"],
+          range: [0, 116],
+        });
+      });
+
+      it("should select ticks", () => {
+        const { spy } = renderTestCase((state) =>
+          selectPolarAxisTicks(state, "radiusAxis", "axis-name", false),
+        );
+        expectLastCalledWith(spy, [
+          { coordinate: 8.28571428571428, value: "Page A", index: 0, offset: 8.285714285714286 },
+          { coordinate: 24.857142857142854, value: "Page B", index: 1, offset: 8.285714285714286 },
+          { coordinate: 41.42857142857142, value: "Page C", index: 2, offset: 8.285714285714286 },
+          { coordinate: 58, value: "Page D", index: 3, offset: 8.285714285714286 },
+          { coordinate: 74.57142857142857, value: "Page E", index: 4, offset: 8.285714285714286 },
+          { coordinate: 91.14285714285715, value: "Page F", index: 5, offset: 8.285714285714286 },
+          { coordinate: 107.71428571428574, value: "Page G", index: 6, offset: 8.285714285714286 },
+        ]);
+      });
+
+      it("should select array of radii", () => {
+        const { spy } = renderTestCase((state) => selectPolarGridRadii(state, "axis-name"));
+        expectLastCalledWith(
+          spy,
+          [
+            8.28571428571428, 24.857142857142854, 41.42857142857142, 58, 74.57142857142857,
+            91.14285714285715, 107.71428571428574,
+          ],
+        );
+      });
+    });
+  });
+
+  describe("with a user class (recharts: className)", () => {
+    const polarAngles = [0, 90, 180, 270];
+    const polarRadius = [10, 20, 40, 80];
+
+    test("merges the class onto every concentric ring and radial line", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            class="my-grid"
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={200}
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+          />
+        </Surface>
+      ));
+      flush();
+
+      const polygons = container.querySelectorAll(".recharts-polar-grid-concentric-polygon");
+      expect(polygons).toHaveLength(polarRadius.length);
+      polygons.forEach((polygon) => {
+        expect(polygon).toHaveClass("my-grid");
+      });
+
+      // The radial lines carry the user class as their only class (recharts
+      // spreads the svg props - incl. className - verbatim onto each line).
+      const lines = container.querySelectorAll(".recharts-polar-grid-angle line");
+      expect(lines).toHaveLength(polarAngles.length);
+      lines.forEach((line) => {
+        expect(line).toHaveClass("my-grid");
+      });
+    });
+
+    test("merges the class onto concentric circles when gridType is circle", () => {
+      const { container } = render(() => (
+        <Surface width={500} height={500}>
+          <PolarGrid
+            class="my-grid"
+            gridType="circle"
+            cx={250}
+            cy={250}
+            innerRadius={0}
+            outerRadius={200}
+            polarAngles={polarAngles}
+            polarRadius={polarRadius}
+          />
+        </Surface>
+      ));
+      flush();
+
+      const circles = container.querySelectorAll(".recharts-polar-grid-concentric-circle");
+      expect(circles).toHaveLength(polarRadius.length);
+      circles.forEach((circle) => {
+        expect(circle).toHaveClass("my-grid");
+      });
+    });
+  });
+});