solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/CartesianGrid.spec.tsx

@@ -1,2103 +0,0 @@
-// Port of recharts 3.8.1 test/cartesian/CartesianGrid.spec.tsx (commit 7a23854).
-// Tier A (byte-identical DOM assertions): the grid-line count + coordinate cases.
-// Harness adaptation only: React render -> Solid `render(() => <.../>)` + flush();
-// dropped `import React`; @testing-library/react -> the repo's local testing-library.
-//
-// The "Biaxial storybook" case reads the yAxis scale from the store via an inline
-// probe component rendered as a chart child (the Solid-idiomatic equivalent of
-// recharts' <Customized> spy — there is no <Customized> in this port; a plain
-// chart child already has the store context).
-//
-// Now ported (previously deferred):
-//   - "renders 2 grid lines in an empty chart": self-generated edge coordinates.
-//   - "...to the background" cases: the `rect.recharts-cartesian-grid-bg` rect.
-//   - "uses offset.width and offset.height when width and height are NaN".
-import { describe, expect, it, type Mock, test, vi } from "vitest";
-import { createEffect, flush } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { render } from "@solidjs/testing-library";
-import {
-  CartesianGrid,
-  LineChart,
-  ComposedChart,
-  BarChart,
-  ScatterChart,
-  AreaChart,
-  Area,
-  YAxis,
-  XAxis,
-  Brush,
-  Legend,
-  Line,
-  Tooltip,
-} from "../../src";
-import type { ChartOffsetInternal, Margin } from "../../src/util/types";
-import type {
-  AxisPropsForCartesianGridTicksGeneration,
-  GridLineTypeFunctionProps,
-  HorizontalCoordinatesGenerator,
-  VerticalCoordinatesGenerator,
-} from "../../src/cartesian/CartesianGrid";
-import { assertNotNull } from "../helper/assertNotNull";
-import { pageData } from "../_data";
-import { selectAxisScale } from "../../src/state/selectors/axisSelectors";
-import { useAppSelector } from "../../src/state/hooks";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
-
-const allChartsThatSupportCartesianGrid = [
-  { ChartElement: AreaChart, testName: "AreaElement" },
-  { ChartElement: ComposedChart, testName: "ComposedChart" },
-  { ChartElement: BarChart, testName: "BarChart" },
-  { ChartElement: LineChart, testName: "LineChart" },
-  { ChartElement: ScatterChart, testName: "ScatterChart" },
-] as const;
-
-type ExpectedHorizontalLine = {
-  y: string | null;
-};
-
-function expectHorizontalGridLines(
-  container: Element,
-  expectedLines: ReadonlyArray<ExpectedHorizontalLine>,
-) {
-  const horizontalLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
-  assertNotNull(horizontalLines);
-  const horizontalLinesContexts = Array.from(horizontalLines).map((line) => ({
-    y: line.getAttribute("y1"),
-  }));
-  expect(horizontalLinesContexts).toEqual(expectedLines);
-  horizontalLines.forEach((line) => {
-    expect(line.getAttribute("y1")).toEqual(line.getAttribute("y2"));
-    expect.soft(line).toHaveAttribute("x1", expect.any(String));
-    expect.soft(line).toHaveAttribute("x2", expect.any(String));
-  });
-}
-
-type ExpectedVerticalLine = {
-  x: string | null;
-};
-
-function expectVerticalGridLines(
-  container: Element,
-  expectedLines: ReadonlyArray<ExpectedVerticalLine>,
-) {
-  const verticalLines = container.querySelectorAll(".recharts-cartesian-grid-vertical line");
-  assertNotNull(verticalLines);
-  const verticalLinesContexts = Array.from(verticalLines).map((line) => ({
-    x: line.getAttribute("x1"),
-  }));
-  expect(verticalLinesContexts).toEqual(expectedLines);
-  verticalLines.forEach((line) => {
-    expect(line.getAttribute("x1")).toEqual(line.getAttribute("x2"));
-    expect.soft(line).toHaveAttribute("y1", expect.any(String));
-    expect.soft(line).toHaveAttribute("y2", expect.any(String));
-  });
-}
-
-describe("CartesianGrid", () => {
-  test("renders 2 grid lines in an empty chart", () => {
-    const { container } = render(() => (
-      <AreaChart width={500} height={500}>
-        <CartesianGrid />
-      </AreaChart>
-    ));
-    flush();
-    expectHorizontalGridLines(container, [
-      {
-        y: "5",
-      },
-      {
-        y: "495",
-      },
-    ]);
-    expectVerticalGridLines(container, [
-      {
-        x: "5",
-      },
-      {
-        x: "495",
-      },
-    ]);
-  });
-
-  it("renders more grid lines when the chart has data", () => {
-    const { container } = render(() => (
-      <AreaChart width={500} height={500} data={pageData}>
-        <Area dataKey="pv" />
-        <CartesianGrid />
-      </AreaChart>
-    ));
-    flush();
-    expectHorizontalGridLines(container, [
-      {
-        y: "495",
-      },
-      {
-        y: "372.5",
-      },
-      {
-        y: "250",
-      },
-      {
-        y: "127.5",
-      },
-      {
-        y: "5",
-      },
-    ]);
-    expectVerticalGridLines(container, [
-      {
-        x: "5",
-      },
-      {
-        x: "86.66666666666667",
-      },
-      {
-        x: "168.33333333333334",
-      },
-      {
-        x: "250",
-      },
-      {
-        x: "331.6666666666667",
-      },
-      {
-        x: "413.33333333333337",
-      },
-      {
-        x: "495",
-      },
-    ]);
-  });
-
-  it("renders as many grid lines as the axis has ticks", () => {
-    const { container } = render(() => (
-      <AreaChart width={500} height={500} data={pageData}>
-        <Area dataKey="pv" />
-        <YAxis tickCount={6} />
-        <XAxis dataKey="uv" type="number" tickCount={3} />
-        <CartesianGrid />
-      </AreaChart>
-    ));
-    flush();
-    expectHorizontalGridLines(container, [
-      {
-        y: "465",
-      },
-      {
-        y: "373",
-      },
-      {
-        y: "281",
-      },
-      {
-        y: "189",
-      },
-      {
-        y: "96.99999999999999",
-      },
-      {
-        y: "5",
-      },
-    ]);
-    expectVerticalGridLines(container, [
-      {
-        x: "65",
-      },
-      {
-        x: "280",
-      },
-      {
-        x: "495",
-      },
-    ]);
-  });
-
-  it("should render fewer ticks when clipped by a Brush", () => {
-    const { container } = render(() => (
-      <AreaChart width={500} height={500} data={pageData}>
-        <Area dataKey="pv" />
-        <CartesianGrid />
-        <Brush startIndex={0} endIndex={2} />
-      </AreaChart>
-    ));
-    flush();
-    expectHorizontalGridLines(container, [
-      {
-        y: "455",
-      },
-      {
-        y: "342.5",
-      },
-      {
-        y: "230",
-      },
-      {
-        y: "117.5",
-      },
-      {
-        y: "5",
-      },
-    ]);
-    expectVerticalGridLines(container, [
-      {
-        x: "5",
-      },
-      {
-        x: "250",
-      },
-      {
-        x: "495",
-      },
-    ]);
-  });
-
-  it("should render all ticks from LineChart Biaxial storybook", () => {
-    const scaleSpy = vi.fn();
-    // Inline probe — the Solid-idiomatic equivalent of recharts' <Customized> spy.
-    const Comp = (): null => {
-      const scale = useAppSelector((state) => selectAxisScale(state, "yAxis", "left", false));
-      createEffect(
-        () => scale()?.domain(),
-        (domain) => scaleSpy(domain),
-      );
-      return null;
-    };
-    const { container } = render(() => (
-      <LineChart
-        width={500}
-        height={300}
-        data={pageData}
-        margin={{
-          top: 5,
-          right: 30,
-          left: 20,
-          bottom: 5,
-        }}
-      >
-        <CartesianGrid yAxisId="left" strokeDasharray="3 3" />
-        <XAxis dataKey="name" />
-        <YAxis yAxisId="left" />
-        <YAxis yAxisId="right" orientation="right" />
-        <Legend />
-        <Line yAxisId="left" type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
-        <Line yAxisId="right" type="monotone" dataKey="uv" stroke="#82ca9d" />
-        <Tooltip />
-        <Comp />
-      </LineChart>
-    ));
-    flush();
-
-    expect(scaleSpy).toHaveBeenLastCalledWith([0, 1200]);
-    expectHorizontalGridLines(container, [
-      {
-        y: "265",
-      },
-      {
-        y: "200",
-      },
-      {
-        y: "135",
-      },
-      {
-        y: "70",
-      },
-      {
-        y: "5",
-      },
-    ]);
-    expectVerticalGridLines(container, [
-      {
-        x: "80",
-      },
-      {
-        x: "135",
-      },
-      {
-        x: "190",
-      },
-      {
-        x: "245",
-      },
-      {
-        x: "300",
-      },
-      {
-        x: "355",
-      },
-      {
-        x: "410",
-      },
-    ]);
-  });
-});
-
-describe.each(allChartsThatSupportCartesianGrid)(
-  "<CartesianGrid /> when child of $testName",
-  ({ ChartElement }) => {
-    describe("when horizontalPoints and verticalPoints are set explicitly", () => {
-      const horizontalPoints = [10, 20, 30, 100, 400];
-      /**
-       * JavaScript produces numbers like this when multiplying floats, for example:
-       * 1.1 * 1.1 * 100
-       * 1.1 * 2.1 * 100
-       */
-      const floatingPointPrecisionExamples = [121.0000000000002, 231.0000000000005];
-      const verticalPoints = [100, 200, 300, 400];
-
-      const chartMargin: Margin = {
-        bottom: 11,
-        left: 12,
-        right: 13,
-        top: 14,
-      };
-
-      const expectedOffset: ChartOffsetInternal = {
-        bottom: 11,
-        brushBottom: 11,
-        height: 175,
-        left: 12,
-        right: 13,
-        top: 14,
-        width: 275,
-      };
-
-      const exampleCartesianGridDimensions = {
-        x: 1,
-        y: 2,
-        width: 300,
-        height: 200,
-      };
-
-      describe("layout and size when set explicitly in $testName", () => {
-        it("should put x, y, width and height as coordinates to the background", () => {
-          const { container } = render(() => (
-            <ChartElement width={500} height={500}>
-              <CartesianGrid
-                {...exampleCartesianGridDimensions}
-                fill="green"
-                ry={10}
-                verticalPoints={verticalPoints}
-                horizontalPoints={horizontalPoints}
-              />
-            </ChartElement>
-          ));
-          flush();
-          const background = container.querySelector("rect.recharts-cartesian-grid-bg");
-          expect.soft(background).toHaveAttribute("x", "1");
-          expect.soft(background).toHaveAttribute("y", "2");
-          expect.soft(background).toHaveAttribute("width", "300");
-          expect.soft(background).toHaveAttribute("height", "200");
-          expect.soft(background).toHaveAttribute("ry", "10");
-        });
-
-        it("should put x, y, width and height as coordinates to all lines", () => {
-          const { container } = render(() => (
-            <ChartElement width={500} height={500}>
-              <CartesianGrid
-                {...exampleCartesianGridDimensions}
-                verticalPoints={verticalPoints}
-                horizontalPoints={horizontalPoints}
-              />
-            </ChartElement>
-          ));
-          flush();
-          const horizontalLines = container.querySelectorAll(
-            ".recharts-cartesian-grid-horizontal line",
-          );
-          expect(horizontalLines).toHaveLength(horizontalPoints.length);
-          horizontalLines.forEach((line) => {
-            expect.soft(line).toHaveAttribute("x", "1");
-            expect.soft(line).toHaveAttribute("y", "2");
-            expect.soft(line).toHaveAttribute("x1", "1");
-            expect.soft(line).toHaveAttribute("x2", "301");
-            expect.soft(line).toHaveAttribute("y1", expect.any(String));
-            expect.soft(line).toHaveAttribute("y2", expect.any(String));
-            expect(line.getAttribute("y1")).toEqual(line.getAttribute("y2"));
-          });
-          expectHorizontalGridLines(container, [
-            {
-              y: "10",
-            },
-            {
-              y: "20",
-            },
-            {
-              y: "30",
-            },
-            {
-              y: "100",
-            },
-            {
-              y: "400",
-            },
-          ]);
-          const verticalLines = container.querySelectorAll(
-            ".recharts-cartesian-grid-vertical line",
-          );
-          expect(verticalLines).toHaveLength(verticalPoints.length);
-          verticalLines.forEach((line) => {
-            expect.soft(line).toHaveAttribute("x", "1");
-            expect.soft(line).toHaveAttribute("y", "2");
-            expect.soft(line).toHaveAttribute("x1", expect.any(String));
-            expect.soft(line).toHaveAttribute("x2", expect.any(String));
-            expect(line.getAttribute("x1")).toEqual(line.getAttribute("x2"));
-            expect.soft(line).toHaveAttribute("y1", "2");
-            expect.soft(line).toHaveAttribute("y2", "202");
-          });
-          expectVerticalGridLines(container, [
-            {
-              x: "100",
-            },
-            {
-              x: "200",
-            },
-            {
-              x: "300",
-            },
-            {
-              x: "400",
-            },
-          ]);
-        });
-      });
-
-      describe("layout and size when inherited from parent chart", () => {
-        it("should put x, y, width and height as coordinates to the background", () => {
-          const { container } = render(() => (
-            <ChartElement margin={chartMargin} width={500} height={400}>
-              <CartesianGrid
-                fill="green"
-                verticalPoints={verticalPoints}
-                horizontalPoints={horizontalPoints}
-              />
-            </ChartElement>
-          ));
-          flush();
-          const background = container.querySelector("rect.recharts-cartesian-grid-bg");
-          expect.soft(background).toHaveAttribute("x", "12");
-          expect.soft(background).toHaveAttribute("y", "14");
-          expect.soft(background).toHaveAttribute("width", "475");
-          expect.soft(background).toHaveAttribute("height", "375");
-        });
-
-        it("should put x, y, width and height as coordinates to all lines", () => {
-          const { container } = render(() => (
-            <ChartElement margin={chartMargin} width={500} height={400}>
-              <CartesianGrid verticalPoints={verticalPoints} horizontalPoints={horizontalPoints} />
-            </ChartElement>
-          ));
-          flush();
-          const horizontalLines = container.querySelectorAll(
-            ".recharts-cartesian-grid-horizontal line",
-          );
-          expect(horizontalLines).toHaveLength(5);
-          horizontalLines.forEach((line) => {
-            expect.soft(line).toHaveAttribute("x", "12");
-            expect.soft(line).toHaveAttribute("y", "14");
-            expect.soft(line).toHaveAttribute("x1", "12");
-            expect.soft(line).toHaveAttribute("x2", "487");
-          });
-          const verticalLines = container.querySelectorAll(
-            ".recharts-cartesian-grid-vertical line",
-          );
-          expect(verticalLines).toHaveLength(4);
-          verticalLines.forEach((line) => {
-            expect.soft(line).toHaveAttribute("x", "12");
-            expect.soft(line).toHaveAttribute("y", "14");
-            expect.soft(line).toHaveAttribute("y1", "14");
-            expect.soft(line).toHaveAttribute("y2", "389");
-          });
-        });
-      });
-
-      describe("grid", () => {
-        describe("basic features", () => {
-          it("should render on its own, outside of Recharts", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            const allLines = container.querySelectorAll("line");
-            expect.soft(allLines).toHaveLength(9);
-            for (let i = 0; i < allLines.length; i++) {
-              const line = allLines[i];
-              expect.soft(line).toHaveAttribute("stroke", "#ccc");
-              expect.soft(line).toHaveAttribute("fill", "none");
-            }
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          test("Render 5 horizontal lines and 4 vertical lines in simple CartesianGrid", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          test.each([0, -1, -Infinity])("Don't render any lines when width is %s", (w) => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  width={w}
-                  height={500}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect(container.querySelectorAll("line")).toHaveLength(0);
-          });
-
-          test("uses offset.width and offset.height when width and height are NaN", () => {
-            const { container } = render(() => (
-              <ChartElement margin={chartMargin} width={500} height={400}>
-                <CartesianGrid
-                  width={NaN}
-                  height={NaN}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          test.each([0, -1, -Infinity])("Don't render any lines when height is %s", (h) => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  width={500}
-                  height={h}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect(container.querySelectorAll("line")).toHaveLength(0);
-          });
-        });
-
-        describe("horizontalPoints without generator", () => {
-          it("should not render any lines if horizontal=false", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontal={false}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(verticalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(0);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          it("should render all lines if horizontal=true", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontal
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          it("should render all lines if horizontal is undefined", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-        });
-
-        describe("verticalPoints without generator", () => {
-          it("should not render any lines if vertical=false", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  vertical={false}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(0);
-          });
-
-          it("should render all lines if vertical=true", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  vertical
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-
-          it("should render all lines if vertical is undefined", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect.soft(container.querySelectorAll("line")).toHaveLength(9);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-horizontal line"))
-              .toHaveLength(horizontalPoints.length);
-            expect
-              .soft(container.querySelectorAll(".recharts-cartesian-grid-vertical line"))
-              .toHaveLength(verticalPoints.length);
-          });
-        });
-
-        describe("horizontalCoordinatesGenerator", () => {
-          it("should render lines that the generator returns", () => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([3, 4]);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
-            expect(allLines).toHaveLength(2);
-            expect.soft(allLines[0]).toHaveAttribute("x", "1");
-            expect.soft(allLines[0]).toHaveAttribute("x1", "1");
-            expect.soft(allLines[0]).toHaveAttribute("x2", "301");
-            expect.soft(allLines[0]).toHaveAttribute("y", "2");
-            expect.soft(allLines[0]).toHaveAttribute("y1", "3");
-            expect.soft(allLines[0]).toHaveAttribute("y2", "3");
-            expect.soft(allLines[1]).toHaveAttribute("x", "1");
-            expect.soft(allLines[1]).toHaveAttribute("x1", "1");
-            expect.soft(allLines[1]).toHaveAttribute("x2", "301");
-            expect.soft(allLines[1]).toHaveAttribute("y", "2");
-            expect.soft(allLines[1]).toHaveAttribute("y1", "4");
-            expect.soft(allLines[1]).toHaveAttribute("y2", "4");
-          });
-
-          it("if both horizontalCoordinatesGenerator and horizontalPoints are present then horizontalPoints win", () => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([1, 2]);
-            expect(horizontalPoints.length).not.toBe(2);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                  horizontalPoints={horizontalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).not.toHaveBeenCalled();
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
-            expect(allLines).toHaveLength(horizontalPoints.length);
-          });
-
-          it("should pass props to the generator", () => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([]);
-            render(() => (
-              <ChartElement width={300} height={200} margin={chartMargin}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-            const expectedYAxis: AxisPropsForCartesianGridTicksGeneration = {
-              angle: 0,
-              interval: "preserveEnd",
-              minTickGap: 5,
-              orientation: "left",
-              tick: true,
-              tickFormatter: undefined,
-              unit: undefined,
-              axisType: "yAxis",
-              categoricalDomain: undefined,
-              duplicateDomain: undefined,
-              isCategorical: false,
-              niceTicks: undefined,
-              range: [189, 14],
-              realScaleType: "linear",
-              scale: undefined,
-              tickCount: 5,
-              ticks: undefined,
-              type: "number",
-            };
-            expectLastCalledWith(
-              horizontalCoordinatesGenerator,
-              {
-                yAxis: expectedYAxis,
-                width: 300,
-                height: 200,
-                offset: expectedOffset,
-              },
-              false,
-            );
-          });
-
-          it(`should set syncWithTicks=true, and ticks=horizontalValues, when horizontalValues is provided, even if the explicit syncWithTicks is false`, () => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([]);
-            render(() => (
-              <ChartElement width={300} height={200} margin={chartMargin}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                  syncWithTicks={false}
-                  horizontalValues={["a", "b"]}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-            const expectedYAxis: AxisPropsForCartesianGridTicksGeneration = {
-              angle: 0,
-              interval: "preserveEnd",
-              minTickGap: 5,
-              orientation: "left",
-              tick: true,
-              tickFormatter: undefined,
-              unit: undefined,
-              axisType: "yAxis",
-              categoricalDomain: undefined,
-              duplicateDomain: undefined,
-              isCategorical: false,
-              niceTicks: undefined,
-              range: [189, 14],
-              realScaleType: "linear",
-              scale: undefined,
-              tickCount: 5,
-              ticks: ["a", "b"],
-              type: "number",
-            };
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledWith(
-              {
-                yAxis: expectedYAxis,
-                width: 300,
-                height: 200,
-                offset: expectedOffset,
-              },
-              true,
-            );
-          });
-
-          test.each([true, false, undefined])(
-            "should set syncWithTicks as %s when horizontalValues is provided but is empty",
-            (syncWithTicks) => {
-              const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-                .fn()
-                .mockReturnValue([]);
-              render(() => (
-                <ChartElement width={300} height={200} margin={chartMargin}>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                    syncWithTicks={syncWithTicks}
-                    horizontalValues={[]}
-                  />
-                </ChartElement>
-              ));
-              flush();
-
-              expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-              const expectedYAxis: AxisPropsForCartesianGridTicksGeneration = {
-                angle: 0,
-                interval: "preserveEnd",
-                minTickGap: 5,
-                orientation: "left",
-                tick: true,
-                tickFormatter: undefined,
-                unit: undefined,
-                axisType: "yAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                isCategorical: false,
-                niceTicks: undefined,
-                range: [189, 14],
-                realScaleType: "linear",
-                scale: undefined,
-                tickCount: 5,
-                ticks: undefined,
-                type: "number",
-              };
-              expectLastCalledWith(
-                horizontalCoordinatesGenerator,
-                {
-                  yAxis: expectedYAxis,
-                  width: 300,
-                  height: 200,
-                  offset: expectedOffset,
-                },
-                Boolean(syncWithTicks),
-              );
-            },
-          );
-
-          test.each([true, false, undefined])(
-            "should pass props to the generator when syncWithTicks is %s",
-            (syncWithTicks) => {
-              const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-                .fn()
-                .mockReturnValue([]);
-              render(() => (
-                <ChartElement width={300} height={200} margin={chartMargin}>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                    syncWithTicks={syncWithTicks}
-                  />
-                </ChartElement>
-              ));
-              flush();
-
-              expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-              const expectedYAxis: AxisPropsForCartesianGridTicksGeneration = {
-                angle: 0,
-                interval: "preserveEnd",
-                minTickGap: 5,
-                orientation: "left",
-                tick: true,
-                tickFormatter: undefined,
-                unit: undefined,
-                axisType: "yAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                isCategorical: false,
-                niceTicks: undefined,
-                range: [189, 14],
-                realScaleType: "linear",
-                scale: undefined,
-                tickCount: 5,
-                ticks: undefined,
-                type: "number",
-              };
-              expectLastCalledWith(
-                horizontalCoordinatesGenerator,
-                {
-                  yAxis: expectedYAxis,
-                  width: 300,
-                  height: 200,
-                  offset: expectedOffset,
-                },
-                Boolean(syncWithTicks),
-              );
-            },
-          );
-
-          test.each([
-            { gen: [] },
-            { gen: null },
-            { gen: undefined },
-            { gen: "some random string" },
-            { gen: NaN },
-          ])("should render nothing if the generator returns $gen", ({ gen }) => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue(gen);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
-            expect(allLines).toHaveLength(0);
-          });
-
-          it("should generate its own ticks if neither horizontalPoints nor horizontalCoordinatesGenerator are provided", () => {
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid x={0} y={0} width={500} height={500} />
-              </ChartElement>
-            ));
-            flush();
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-horizontal line");
-            expect(allLines).toHaveLength(2);
-            expect.soft(allLines[0]).toHaveAttribute("x", "0");
-            expect.soft(allLines[0]).toHaveAttribute("x1", "0");
-            expect.soft(allLines[0]).toHaveAttribute("x2", "500");
-            expect.soft(allLines[0]).toHaveAttribute("y", "0");
-            expect.soft(allLines[0]).toHaveAttribute("y1", "5");
-            expect.soft(allLines[0]).toHaveAttribute("y2", "5");
-            expect.soft(allLines[1]).toHaveAttribute("x", "0");
-            expect.soft(allLines[1]).toHaveAttribute("x1", "0");
-            expect.soft(allLines[1]).toHaveAttribute("x2", "500");
-            expect.soft(allLines[1]).toHaveAttribute("y", "0");
-            expect.soft(allLines[1]).toHaveAttribute("y1", "495");
-            expect.soft(allLines[1]).toHaveAttribute("y2", "495");
-          });
-        });
-
-        describe("verticalCoordinatesGenerator", () => {
-          it("should render lines that the generator returns", () => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([3, 4]);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-vertical line");
-            expect(allLines).toHaveLength(2);
-            expect.soft(allLines[0]).toHaveAttribute("x", "1");
-            expect.soft(allLines[0]).toHaveAttribute("x1", "3");
-            expect.soft(allLines[0]).toHaveAttribute("x2", "3");
-            expect.soft(allLines[0]).toHaveAttribute("y", "2");
-            expect.soft(allLines[0]).toHaveAttribute("y1", "2");
-            expect.soft(allLines[0]).toHaveAttribute("y2", "202");
-            expect.soft(allLines[1]).toHaveAttribute("x", "1");
-            expect.soft(allLines[1]).toHaveAttribute("x1", "4");
-            expect.soft(allLines[1]).toHaveAttribute("x2", "4");
-            expect.soft(allLines[1]).toHaveAttribute("y", "2");
-            expect.soft(allLines[1]).toHaveAttribute("y1", "2");
-            expect.soft(allLines[1]).toHaveAttribute("y2", "202");
-          });
-
-          it("if both verticalCoordinatesGenerator and verticalPoints are present then verticalPoints wins", () => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([1, 2]);
-            expect(verticalPoints.length).not.toBe(2);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                  verticalPoints={verticalPoints}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).not.toHaveBeenCalled();
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-vertical line");
-            expect(allLines).toHaveLength(verticalPoints.length);
-          });
-
-          it("should pass props to the generator", () => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([]);
-            render(() => (
-              <ChartElement width={300} height={200} margin={chartMargin}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-            const expectedXAxis: AxisPropsForCartesianGridTicksGeneration = {
-              angle: 0,
-              axisType: "xAxis",
-              categoricalDomain: undefined,
-              duplicateDomain: undefined,
-              interval: "preserveEnd",
-              isCategorical: true,
-              minTickGap: 5,
-              niceTicks: undefined,
-              orientation: "bottom",
-              range: [12, 287],
-              realScaleType: expect.any(String),
-              scale: undefined,
-              tick: true,
-              tickCount: 5,
-              tickFormatter: undefined,
-              ticks: undefined,
-              type: "category",
-              unit: undefined,
-            };
-            expectLastCalledWith(
-              verticalCoordinatesGenerator,
-              {
-                xAxis: expectedXAxis,
-                width: 300,
-                height: 200,
-                offset: expectedOffset,
-              },
-              false,
-            );
-          });
-
-          it(`should set syncWithTicks=true, and ticks=verticalValues, when verticalValues is provided, even if the explicit syncWithTicks is false`, () => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([]);
-            render(() => (
-              <ChartElement width={300} height={200} margin={chartMargin}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                  syncWithTicks={false}
-                  verticalValues={["a", "b"]}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-            const expectedXAxis: AxisPropsForCartesianGridTicksGeneration = {
-              angle: 0,
-              axisType: "xAxis",
-              categoricalDomain: undefined,
-              duplicateDomain: undefined,
-              interval: "preserveEnd",
-              isCategorical: true,
-              minTickGap: 5,
-              niceTicks: undefined,
-              orientation: "bottom",
-              range: [12, 287],
-              realScaleType: expect.any(String),
-              scale: undefined,
-              tick: true,
-              tickCount: 5,
-              tickFormatter: undefined,
-              ticks: ["a", "b"],
-              type: "category",
-              unit: undefined,
-            };
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledWith(
-              {
-                xAxis: expectedXAxis,
-                width: 300,
-                height: 200,
-                offset: expectedOffset,
-              },
-              true,
-            );
-          });
-
-          test.each([true, false, undefined])(
-            "should set syncWithTicks as %s when horizontalValues is provided but is empty",
-            (syncWithTicks) => {
-              const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-                .fn()
-                .mockReturnValue([]);
-              render(() => (
-                <ChartElement width={300} height={200} margin={chartMargin}>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                    syncWithTicks={syncWithTicks}
-                    horizontalValues={[]}
-                  />
-                </ChartElement>
-              ));
-              flush();
-
-              expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-              const expectedXAxis: AxisPropsForCartesianGridTicksGeneration = {
-                angle: 0,
-                axisType: "xAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: true,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "bottom",
-                range: [12, 287],
-                realScaleType: expect.any(String),
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "category",
-                unit: undefined,
-              };
-              expectLastCalledWith(
-                verticalCoordinatesGenerator,
-                {
-                  xAxis: expectedXAxis,
-                  width: 300,
-                  height: 200,
-                  offset: expectedOffset,
-                },
-                Boolean(syncWithTicks),
-              );
-            },
-          );
-
-          test.each([true, false, undefined])(
-            "should pass props to the generator when syncWithTicks is %s",
-            (syncWithTicks) => {
-              const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-                .fn()
-                .mockReturnValue([]);
-              render(() => (
-                <ChartElement width={300} height={200} margin={chartMargin}>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                    syncWithTicks={syncWithTicks}
-                  />
-                </ChartElement>
-              ));
-              flush();
-
-              expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-              const expectedXAxis: AxisPropsForCartesianGridTicksGeneration = {
-                angle: 0,
-                axisType: "xAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: true,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "bottom",
-                range: [12, 287],
-                realScaleType: expect.any(String),
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "category",
-                unit: undefined,
-              };
-              expectLastCalledWith(
-                verticalCoordinatesGenerator,
-                {
-                  xAxis: expectedXAxis,
-                  width: 300,
-                  height: 200,
-                  offset: expectedOffset,
-                },
-                Boolean(syncWithTicks),
-              );
-            },
-          );
-
-          test.each([
-            { gen: [] },
-            { gen: null },
-            { gen: undefined },
-            { gen: "some random string" },
-            { gen: NaN },
-          ])("should render nothing if the generator returns $gen", ({ gen }) => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue(gen);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-vertical line");
-            expect(allLines).toHaveLength(0);
-          });
-
-          it("should generate its own ticks if neither verticalPoints nor verticalCoordinatesGenerator are provided", () => {
-            const { container } = render(() => (
-              <LineChart width={500} height={500}>
-                <CartesianGrid {...exampleCartesianGridDimensions} />
-              </LineChart>
-            ));
-            flush();
-
-            const allLines = container.querySelectorAll(".recharts-cartesian-grid-vertical line");
-            expect(allLines).toHaveLength(2);
-            expect.soft(allLines[0]).toHaveAttribute("x", "1");
-            expect.soft(allLines[0]).toHaveAttribute("x1", "5");
-            expect.soft(allLines[0]).toHaveAttribute("x2", "5");
-            expect.soft(allLines[0]).toHaveAttribute("y", "2");
-            expect.soft(allLines[0]).toHaveAttribute("y1", "2");
-            expect.soft(allLines[0]).toHaveAttribute("y2", "202");
-            expect.soft(allLines[1]).toHaveAttribute("x", "1");
-            expect.soft(allLines[1]).toHaveAttribute("x1", "495");
-            expect.soft(allLines[1]).toHaveAttribute("x2", "495");
-            expect.soft(allLines[1]).toHaveAttribute("y", "2");
-            expect.soft(allLines[1]).toHaveAttribute("y1", "2");
-            expect.soft(allLines[1]).toHaveAttribute("y2", "202");
-          });
-        });
-
-        describe("horizontal as a function", () => {
-          it("should pass props, add default stroke, and then render result of the function", () => {
-            // Solid JSX in value position is a LIVE DOM node, so mockReturnValue would
-            // return the same node every call (DOM inserts it once). mockImplementation
-            // builds a fresh node per call — the Solid equivalent of React's element-as-data.
-            const horizontal = vi.fn(
-              (_p: GridLineTypeFunctionProps) =>
-                (<g data-testid="my_mock_line" />) as unknown as JSX.Element,
-            );
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontal={horizontal}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect(horizontal).toHaveBeenCalledTimes(horizontalPoints.length);
-
-            const expectedProps: GridLineTypeFunctionProps = {
-              stroke: "#ccc",
-              syncWithTicks: false,
-              fill: "none",
-              height: 200,
-              width: 300,
-              vertical: true,
-              horizontalFill: [],
-              horizontalPoints,
-              verticalFill: [],
-              verticalPoints,
-              horizontal,
-              key: expect.stringMatching(/line-[0-9]/),
-              x: 1,
-              y: 2,
-              x1: 1,
-              x2: 301,
-              y1: expect.any(Number),
-              y2: expect.any(Number),
-              index: expect.any(Number),
-              zIndex: DefaultZIndexes.grid,
-              offset: {
-                bottom: 5,
-                brushBottom: 5,
-                height: 490,
-                left: 5,
-                right: 5,
-                top: 5,
-                width: 490,
-              },
-              xAxis: {
-                angle: 0,
-                axisType: "xAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: true,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "bottom",
-                range: [5, 495],
-                realScaleType: expect.any(String),
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "category",
-                unit: undefined,
-              },
-              yAxis: {
-                angle: 0,
-                axisType: "yAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: false,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "left",
-                range: [495, 5],
-                realScaleType: "linear",
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "number",
-                unit: undefined,
-              },
-            };
-            expect(horizontal).toHaveBeenCalledWith(expectedProps);
-
-            expect(container.querySelectorAll("[data-testid=my_mock_line]")).toHaveLength(
-              horizontalPoints.length,
-            );
-          });
-        });
-
-        describe("vertical as a function", () => {
-          it("should pass props, add default stroke, and then render result of the function", () => {
-            // See note above: fresh node per call (Solid JSX is a live DOM node).
-            const vertical = vi.fn(
-              (_p: GridLineTypeFunctionProps) =>
-                (<g data-testid="my_mock_line" />) as unknown as JSX.Element,
-            );
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  vertical={vertical}
-                />
-              </ChartElement>
-            ));
-            flush();
-            expect(vertical).toHaveBeenCalledTimes(verticalPoints.length);
-
-            const expectedProps: GridLineTypeFunctionProps = {
-              stroke: "#ccc",
-              syncWithTicks: false,
-              fill: "none",
-              height: 200,
-              width: 300,
-              horizontal: true,
-              horizontalFill: [],
-              horizontalPoints,
-              verticalFill: [],
-              verticalPoints,
-              vertical,
-              key: expect.stringMatching(/line-[0-9]/),
-              x: 1,
-              y: 2,
-              x1: expect.any(Number),
-              x2: expect.any(Number),
-              y1: 2,
-              y2: 202,
-              index: expect.any(Number),
-              zIndex: DefaultZIndexes.grid,
-              offset: {
-                bottom: 5,
-                brushBottom: 5,
-                height: 490,
-                left: 5,
-                right: 5,
-                top: 5,
-                width: 490,
-              },
-              xAxis: {
-                angle: 0,
-                axisType: "xAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: true,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "bottom",
-                range: [5, 495],
-                realScaleType: expect.any(String),
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "category",
-                unit: undefined,
-              },
-              yAxis: {
-                angle: 0,
-                axisType: "yAxis",
-                categoricalDomain: undefined,
-                duplicateDomain: undefined,
-                interval: "preserveEnd",
-                isCategorical: false,
-                minTickGap: 5,
-                niceTicks: undefined,
-                orientation: "left",
-                range: [495, 5],
-                realScaleType: "linear",
-                scale: undefined,
-                tick: true,
-                tickCount: 5,
-                tickFormatter: undefined,
-                ticks: undefined,
-                type: "number",
-                unit: undefined,
-              },
-            };
-            expect(vertical).toHaveBeenCalledWith(expectedProps);
-
-            expect(container.querySelectorAll("[data-testid=my_mock_line]")).toHaveLength(
-              verticalPoints.length,
-            );
-          });
-        });
-      });
-
-      describe("stripes", () => {
-        const emptyFillCases: { fill: string[] | undefined }[] = [
-          { fill: [] },
-          { fill: undefined },
-        ];
-
-        describe("horizontal stripes", () => {
-          test.each([true, undefined])(
-            "should render horizontal stripes if horizontal prop = %s",
-            (horizontal) => {
-              const extraSpaceAtTheTopOfChart = 7;
-              const { container } = render(() => (
-                <svg>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    height={Math.max(...horizontalPoints) + extraSpaceAtTheTopOfChart}
-                    verticalPoints={verticalPoints}
-                    horizontalPoints={horizontalPoints}
-                    horizontalFill={["red", "green"]}
-                    fillOpacity="20%"
-                    horizontal={horizontal}
-                  />
-                </svg>
-              ));
-              flush();
-              const allStripes = container.querySelectorAll(
-                ".recharts-cartesian-gridstripes-horizontal rect",
-              );
-              expect(allStripes).toHaveLength(horizontalPoints.length + 1);
-
-              for (let i = 0; i < allStripes.length; i++) {
-                const element = allStripes[i];
-                expect.soft(element).toHaveAttribute("x", "1");
-                expect.soft(element).toHaveAttribute("stroke", "none");
-                expect.soft(element).toHaveAttribute("fill-opacity", "20%");
-                expect.soft(element).toHaveClass("recharts-cartesian-grid-bg");
-              }
-
-              expect(allStripes[0]).toHaveAttribute("fill", "red");
-              expect(allStripes[0]).toHaveAttribute("y", "0");
-              expect(allStripes[0]).toHaveAttribute("height", "10");
-
-              expect(allStripes[1]).toHaveAttribute("fill", "green");
-              expect(allStripes[1]).toHaveAttribute("y", "10");
-              expect(allStripes[1]).toHaveAttribute("height", "10");
-
-              expect(allStripes[2]).toHaveAttribute("fill", "red");
-              expect(allStripes[2]).toHaveAttribute("y", "20");
-              expect(allStripes[2]).toHaveAttribute("height", "10");
-
-              expect(allStripes[3]).toHaveAttribute("fill", "green");
-              expect(allStripes[3]).toHaveAttribute("y", "30");
-              expect(allStripes[3]).toHaveAttribute("height", "70");
-
-              expect(allStripes[4]).toHaveAttribute("fill", "red");
-              expect(allStripes[4]).toHaveAttribute("y", "100");
-              expect(allStripes[4]).toHaveAttribute("height", "300");
-
-              expect(allStripes[5]).toHaveAttribute("fill", "green");
-              expect(allStripes[5]).toHaveAttribute("y", "400");
-              expect(allStripes[5]).toHaveAttribute(
-                "height",
-                String(extraSpaceAtTheTopOfChart + exampleCartesianGridDimensions.y),
-              );
-            },
-          );
-
-          it("should render stripes defined by horizontalCoordinatesGenerator", () => {
-            const horizontalCoordinatesGenerator: Mock<HorizontalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([1, 2]);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  horizontalCoordinatesGenerator={horizontalCoordinatesGenerator}
-                  horizontalFill={["red", "green"]}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(horizontalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allLines).toHaveLength(3);
-          });
-
-          it("should not render anything if horizontal=false", () => {
-            const extraSpaceAtTheTopOfChart = 1;
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  height={Math.max(...horizontalPoints) + extraSpaceAtTheTopOfChart}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontalFill={["red", "green"]}
-                  fillOpacity="20%"
-                  horizontal={false}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(0);
-          });
-
-          test.each(emptyFillCases)(
-            "should render nothing if horizontalFill is $fill",
-            ({ fill }) => {
-              const { container } = render(() => (
-                <svg>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    height={Math.max(...horizontalPoints) + 1}
-                    verticalPoints={verticalPoints}
-                    horizontalPoints={horizontalPoints}
-                    horizontalFill={fill}
-                  />
-                </svg>
-              ));
-              flush();
-              const allStripes = container.querySelectorAll(
-                ".recharts-cartesian-gridstripes-horizontal rect",
-              );
-              expect(allStripes).toHaveLength(0);
-            },
-          );
-
-          it("should leave out the stripe at the beginning if the smallest horizontalPoints happens to be exactly at position y", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  y={Math.min(...horizontalPoints)}
-                  height={Math.max(...horizontalPoints) + 1}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(horizontalPoints.length);
-          });
-
-          it("render the stripe at the beginning if the smallest horizontalPoints is smaller than position y", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  y={Math.min(...horizontalPoints) - 1}
-                  height={Math.max(...horizontalPoints) + 1}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(horizontalPoints.length + 1);
-          });
-
-          it("removes the one stripe at the end if it would render outside of the Grid", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  y={0}
-                  height={Math.max(...horizontalPoints) - 1}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(horizontalPoints.length);
-          });
-
-          it("removes still only one stripe even if all of them render outside of the grid", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  height={1}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={horizontalPoints}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(horizontalPoints.length);
-          });
-
-          it("should round horizontalPoints [https://github.com/recharts/recharts/pull/3075]", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  x={0}
-                  y={0}
-                  width={500}
-                  height={500}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={floatingPointPrecisionExamples}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(floatingPointPrecisionExamples.length + 1);
-
-            expect.soft(allStripes[0]).toHaveAttribute("height", "121");
-            expect.soft(allStripes[1]).toHaveAttribute("height", "110");
-            expect.soft(allStripes[2]).toHaveAttribute("height", "269");
-          });
-
-          it("should ignore stripes that have computed height 0", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={verticalPoints}
-                  horizontalPoints={[10, 20, 10, 500]}
-                  horizontalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-horizontal rect",
-            );
-            expect(allStripes).toHaveLength(3);
-
-            expect.soft(allStripes[0]).toHaveAttribute("height", "10");
-            expect.soft(allStripes[0]).toHaveAttribute("y", "0");
-
-            expect.soft(allStripes[1]).toHaveAttribute("height", "10");
-            expect.soft(allStripes[1]).toHaveAttribute("y", "10");
-
-            expect.soft(allStripes[2]).toHaveAttribute("height", "480");
-            expect.soft(allStripes[2]).toHaveAttribute("y", "20");
-          });
-        });
-
-        describe("vertical stripes", () => {
-          test.each([true, undefined])(
-            "should render vertical stripes if vertical prop = %s",
-            (vertical) => {
-              const extraSpaceAtTheEndOfChart = 7;
-              const { container } = render(() => (
-                <svg>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    width={Math.max(...verticalPoints) + extraSpaceAtTheEndOfChart}
-                    verticalPoints={verticalPoints}
-                    verticalFill={["red", "green"]}
-                    fillOpacity="20%"
-                    vertical={vertical}
-                  />
-                </svg>
-              ));
-              flush();
-              const allStripes = container.querySelectorAll(
-                ".recharts-cartesian-gridstripes-vertical rect",
-              );
-              expect(allStripes).toHaveLength(verticalPoints.length + 1);
-
-              for (let i = 0; i < allStripes.length; i++) {
-                const element = allStripes[i];
-                expect.soft(element).toHaveAttribute("y", "2");
-                expect.soft(element).toHaveAttribute("height", "200");
-                expect.soft(element).toHaveAttribute("stroke", "none");
-                expect.soft(element).toHaveAttribute("fill-opacity", "20%");
-                expect.soft(element).toHaveClass("recharts-cartesian-grid-bg");
-              }
-
-              expect.soft(allStripes[0]).toHaveAttribute("fill", "red");
-              expect.soft(allStripes[0]).toHaveAttribute("x", "0");
-              expect.soft(allStripes[0]).toHaveAttribute("width", "100");
-
-              expect.soft(allStripes[1]).toHaveAttribute("fill", "green");
-              expect.soft(allStripes[1]).toHaveAttribute("x", "100");
-              expect.soft(allStripes[1]).toHaveAttribute("width", "100");
-
-              expect.soft(allStripes[2]).toHaveAttribute("fill", "red");
-              expect.soft(allStripes[2]).toHaveAttribute("x", "200");
-              expect.soft(allStripes[2]).toHaveAttribute("width", "100");
-
-              expect.soft(allStripes[3]).toHaveAttribute("fill", "green");
-              expect.soft(allStripes[3]).toHaveAttribute("x", "300");
-              expect.soft(allStripes[3]).toHaveAttribute("width", "100");
-
-              expect.soft(allStripes[4]).toHaveAttribute("fill", "red");
-              expect.soft(allStripes[4]).toHaveAttribute("x", "400");
-              expect
-                .soft(allStripes[4])
-                .toHaveAttribute(
-                  "width",
-                  String(extraSpaceAtTheEndOfChart + exampleCartesianGridDimensions.x),
-                );
-            },
-          );
-
-          it("should render stripes defined by verticalCoordinatesGenerator", () => {
-            const verticalCoordinatesGenerator: Mock<VerticalCoordinatesGenerator> = vi
-              .fn()
-              .mockReturnValue([1, 2]);
-            const { container } = render(() => (
-              <ChartElement width={500} height={500}>
-                <CartesianGrid
-                  x={0}
-                  y={0}
-                  width={500}
-                  height={500}
-                  verticalCoordinatesGenerator={verticalCoordinatesGenerator}
-                  verticalFill={["red", "green"]}
-                />
-              </ChartElement>
-            ));
-            flush();
-
-            expect(verticalCoordinatesGenerator).toHaveBeenCalledTimes(1);
-
-            const allLines = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allLines).toHaveLength(3);
-          });
-
-          it("should not render anything if vertical=false", () => {
-            const extraSpaceAtTheTopOfChart = 1;
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  width={Math.max(...verticalPoints) + extraSpaceAtTheTopOfChart}
-                  verticalPoints={verticalPoints}
-                  verticalFill={["red", "green"]}
-                  fillOpacity="20%"
-                  vertical={false}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(0);
-          });
-
-          test.each(emptyFillCases)(
-            "should render nothing if verticalFill is $fill",
-            ({ fill }) => {
-              const { container } = render(() => (
-                <svg>
-                  <CartesianGrid
-                    {...exampleCartesianGridDimensions}
-                    width={Math.max(...verticalPoints) + 1}
-                    verticalPoints={verticalPoints}
-                    verticalFill={fill}
-                  />
-                </svg>
-              ));
-              flush();
-              const allStripes = container.querySelectorAll(
-                ".recharts-cartesian-gridstripes-vertical rect",
-              );
-              expect(allStripes).toHaveLength(0);
-            },
-          );
-
-          it("should leave out the stripe at the beginning if the smallest verticalPoints happens to be exactly at position x", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  x={Math.min(...verticalPoints)}
-                  width={Math.max(...verticalPoints) + 1}
-                  verticalPoints={verticalPoints}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(verticalPoints.length);
-          });
-
-          it("render the stripe at the beginning if the smallest verticalPoints is smaller than position x", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  x={Math.min(...verticalPoints) - 1}
-                  width={Math.max(...verticalPoints) + 1}
-                  verticalPoints={verticalPoints}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(verticalPoints.length + 1);
-          });
-
-          it("removes the one stripe at the end if it would render outside of the Grid", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  width={Math.max(...verticalPoints) - 1}
-                  verticalPoints={verticalPoints}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(verticalPoints.length);
-          });
-
-          it("removes still only one stripe even if all of them render outside of the grid", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  width={1}
-                  verticalPoints={verticalPoints}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(verticalPoints.length);
-          });
-
-          it("should round verticalPoints [https://github.com/recharts/recharts/pull/3075]", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  x={0}
-                  y={0}
-                  width={500}
-                  height={500}
-                  verticalPoints={floatingPointPrecisionExamples}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(floatingPointPrecisionExamples.length + 1);
-            for (let i = 0; i < allStripes.length; i++) {
-              const stripe = allStripes[i];
-              expect(stripe).toHaveAttribute("height", "500");
-            }
-
-            expect.soft(allStripes[0]).toHaveAttribute("width", "121");
-            expect.soft(allStripes[1]).toHaveAttribute("width", "110");
-            expect.soft(allStripes[2]).toHaveAttribute("width", "269");
-          });
-
-          it("should ignore stripes that have computed width 0", () => {
-            const { container } = render(() => (
-              <svg>
-                <CartesianGrid
-                  {...exampleCartesianGridDimensions}
-                  verticalPoints={[10, 20, 10, 500]}
-                  verticalFill={["red", "green"]}
-                />
-              </svg>
-            ));
-            flush();
-            const allStripes = container.querySelectorAll(
-              ".recharts-cartesian-gridstripes-vertical rect",
-            );
-            expect(allStripes).toHaveLength(3);
-
-            expect.soft(allStripes[0]).toHaveAttribute("width", "10");
-            expect.soft(allStripes[0]).toHaveAttribute("height", "200");
-            expect.soft(allStripes[0]).toHaveAttribute("x", "0");
-            expect.soft(allStripes[0]).toHaveAttribute("y", "2");
-
-            expect.soft(allStripes[1]).toHaveAttribute("width", "10");
-            expect.soft(allStripes[1]).toHaveAttribute("height", "200");
-            expect.soft(allStripes[1]).toHaveAttribute("x", "10");
-            expect.soft(allStripes[1]).toHaveAttribute("y", "2");
-
-            expect.soft(allStripes[2]).toHaveAttribute("width", "480");
-            expect.soft(allStripes[2]).toHaveAttribute("height", "200");
-            expect.soft(allStripes[2]).toHaveAttribute("x", "20");
-            expect.soft(allStripes[2]).toHaveAttribute("y", "2");
-          });
-        });
-      });
-
-      describe("offset prop", () => {
-        it("should not pass the offset prop anywhere", () => {
-          const { container } = render(() => (
-            <ChartElement width={500} height={500}>
-              <CartesianGrid
-                {...exampleCartesianGridDimensions}
-                verticalPoints={verticalPoints}
-                horizontalPoints={horizontalPoints}
-              />
-            </ChartElement>
-          ));
-          flush();
-          const allElements = container.querySelectorAll("*");
-          expect(allElements.length).toBeGreaterThan(0);
-          for (let i = 0; i < allElements.length; i++) {
-            const element = allElements[0];
-            expect(element).not.toHaveAttribute("offset");
-          }
-        });
-      });
-    });
-  },
-);