solid-recharts 0.1.0

package/test/helper/expectAnimatedPieAngles.ts

@@ -0,0 +1,100 @@
+// Ported from recharts 3.9.2 test/helper/expectAnimatedPieAngles.tsx.
+//
+// Solid deviation: React auto-renders after each animation tick; here we call
+// `flush()` after each `setAnimationProgress` so the interpolated frame lands in
+// the DOM before it is read. Otherwise a faithful port — same 0.1 start, same
+// `(1 - 0.1) / steps` step size, same per-frame change assertions.
+import { expect } from "vitest";
+import { flush } from "solid-js";
+import type { MockAnimationManager } from "../animation/mockControllerAnimationManager";
+import { assertNotNull } from "./assertNotNull";
+import { getPieSectorAngles, selectPieSectors } from "./expectPieSectors";
+
+export async function expectAnimatedPieAngles(
+  container: Element,
+  animationManager: MockAnimationManager,
+  steps: number = 5,
+): Promise<ReadonlyArray<ReadonlyArray<{ startAngle: number; endAngle: number }>>> {
+  assertNotNull(container);
+  /*
+   * Pie sectors at 0% progress do not render at all, so we
+   * start from 0.1 so that the sectors have rendered a little bit.
+   */
+  let animationProgress = 0.1;
+  await animationManager.setAnimationProgress(animationProgress);
+  flush();
+  const stepSize = (1 - animationProgress) / steps;
+  const initialPieSectors = selectPieSectors(container);
+  const initialAngles = getPieSectorAngles(initialPieSectors);
+  const initialAttributes = Array.from(initialPieSectors).map((sector) => ({
+    fill: sector.getAttribute("fill"),
+    stroke: sector.getAttribute("stroke"),
+  }));
+
+  const anglesDuringAnimation: ReadonlyArray<{ startAngle: number; endAngle: number }>[] = [];
+  for (animationProgress += stepSize; animationProgress < 1; animationProgress += stepSize) {
+    // eslint-disable-next-line no-await-in-loop
+    await animationManager.setAnimationProgress(animationProgress);
+    flush();
+    const currentPieSectors = selectPieSectors(container);
+    const currentAngles = getPieSectorAngles(currentPieSectors);
+    anglesDuringAnimation.push(currentAngles);
+
+    // Assert that all angles change
+    initialAngles.forEach((initial, index) => {
+      const current = currentAngles[index]!;
+      const currentSector = currentPieSectors[index]!;
+      expect(currentSector.getAttribute("fill")).toBe(initialAttributes[index]!.fill);
+      expect(currentSector.getAttribute("stroke")).toBe(initialAttributes[index]!.stroke);
+      if (index === 0) {
+        // Because the pie grows from the same position, the start angle should remain the same for the first sector
+        expect(current.startAngle).toBe(initial.startAngle);
+      } else {
+        // For all other sectors, the start angle should change
+        expect(current.startAngle).not.toBe(initial.startAngle);
+      }
+      if (index !== currentAngles.length - 1) {
+        /*
+         * This is true for all sectors except the last one because the Pie is always a full circle.
+         * During the initial animation the Pie "grows" from the center, so the end angle of the last sector
+         * will indeed be different from the initial end angle,
+         * but during the "rearrange angles" animation the end angle of the last sector
+         * will always be 360 degrees, same as the initial end angle.
+         */
+        expect(current.endAngle).not.toBe(initial.endAngle);
+      }
+    });
+  }
+
+  await animationManager.completeAnimation();
+  flush();
+  // Final check to ensure the animation completed
+  const finalPieSectors = selectPieSectors(container);
+  expect(finalPieSectors).toHaveLength(initialPieSectors.length);
+  const finalAngles = getPieSectorAngles(finalPieSectors);
+  finalAngles.forEach((final, index) => {
+    const initial = initialAngles[index]!;
+    const finalSector = finalPieSectors[index]!;
+    expect(finalSector.getAttribute("fill")).toBe(initialAttributes[index]!.fill);
+    expect(finalSector.getAttribute("stroke")).toBe(initialAttributes[index]!.stroke);
+    if (index === 0) {
+      expect(final.startAngle).toBe(initial.startAngle);
+    } else {
+      expect(final.startAngle).not.toBe(initial.startAngle);
+    }
+    if (index !== finalAngles.length - 1) {
+      expect(final.endAngle).not.toBe(initial.endAngle);
+    }
+  });
+
+  // Also, because the Pie is always a full circle, the end angle of the last sector should be 360 degrees
+  expect(finalAngles[finalAngles.length - 1]!.endAngle).toBe(0);
+
+  // collect the angles one last time, at the end of the animation
+  anglesDuringAnimation.push(finalAngles);
+
+  // Return the collected angles
+  expect(anglesDuringAnimation).toHaveLength(steps);
+
+  return anglesDuringAnimation;
+}

package/test/helper/expectAnimatedPiePaths.ts

@@ -0,0 +1,78 @@
+// Ported from recharts 3.9.2 test/helper/expectAnimatedPiePaths.ts.
+//
+// Solid deviation: `flush()` after each `setAnimationProgress` (React auto-renders;
+// Solid needs the flush to land the interpolated frame in the DOM). Otherwise a
+// faithful port — same 0.1 start, same `(1 - 0.1) / steps` step size, same per-frame
+// change assertions.
+import { expect } from "vitest";
+import { flush } from "solid-js";
+import type { MockAnimationManager } from "../animation/mockControllerAnimationManager";
+import { assertNotNull } from "./assertNotNull";
+import { selectPieSectors } from "./expectPieSectors";
+import { trim } from "./trim";
+
+export async function expectAnimatedPiePaths(
+  container: Element,
+  animationManager: MockAnimationManager,
+  steps: number = 5,
+): Promise<ReadonlyArray<ReadonlyArray<string>>> {
+  assertNotNull(container);
+  /*
+   * Pie sectors at 0% progress do not render at all, so we
+   * start from 0.1 so that the sectors have rendered a little bit.
+   */
+  let animationProgress = 0.1;
+  await animationManager.setAnimationProgress(animationProgress);
+  flush();
+  const stepSize = (1 - animationProgress) / steps;
+  const initialPieSectors = selectPieSectors(container);
+  expect(initialPieSectors.length).toBeGreaterThan(0);
+  const getD = (sector: Element): string => {
+    const trimmed = trim(sector.getAttribute("d"));
+    assertNotNull(trimmed);
+    return trimmed;
+  };
+  const initialPathDs = Array.from(initialPieSectors).map(getD);
+  const initialAttributes = Array.from(initialPieSectors).map((sector) => ({
+    fill: sector.getAttribute("fill"),
+    stroke: sector.getAttribute("stroke"),
+  }));
+
+  const pathDsDuringAnimation: string[][] = [];
+  for (animationProgress += stepSize; animationProgress < 1; animationProgress += stepSize) {
+    // eslint-disable-next-line no-await-in-loop
+    await animationManager.setAnimationProgress(animationProgress);
+    flush();
+    const currentPieSectors = selectPieSectors(container);
+    const currentPathDs = Array.from(currentPieSectors).map(getD);
+    pathDsDuringAnimation.push(currentPathDs);
+
+    // Assert that all d attributes change
+    initialPathDs.forEach((initial, index) => {
+      const currentSector = currentPieSectors[index]!;
+      expect(trim(currentSector.getAttribute("d"))).not.toBe(initial);
+      expect(currentSector.getAttribute("fill")).toBe(initialAttributes[index]!.fill);
+      expect(currentSector.getAttribute("stroke")).toBe(initialAttributes[index]!.stroke);
+    });
+  }
+
+  await animationManager.completeAnimation();
+  flush();
+  // Final check to ensure the animation completed
+  const finalPieSectors = selectPieSectors(container);
+  expect(finalPieSectors).toHaveLength(initialPieSectors.length);
+  finalPieSectors.forEach((sector, index) => {
+    expect(trim(sector.getAttribute("d"))).not.toBe(initialPathDs[index]);
+    expect(sector.getAttribute("fill")).toBe(initialAttributes[index]!.fill);
+    expect(sector.getAttribute("stroke")).toBe(initialAttributes[index]!.stroke);
+  });
+
+  // collect the path.d-s one last time, at the end of the animation
+  const finalPathDs = Array.from(finalPieSectors).map(getD);
+  pathDsDuringAnimation.push(finalPathDs);
+
+  // Return the collected path.d-s
+  expect(pathDsDuringAnimation).toHaveLength(steps);
+
+  return pathDsDuringAnimation;
+}

package/test/helper/expectAreaCurve.ts

@@ -0,0 +1,15 @@
+// Port of recharts 3.8.1 test/helper/expectAreaCurve.ts (commit 7a23854).
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+export type ExpectedArea = {
+  d: string;
+};
+
+export function expectAreaCurve(container: Element, expectedAreas: ReadonlyArray<ExpectedArea>) {
+  assertNotNull(container);
+  const areaCurves = container.querySelectorAll(".recharts-area-curve");
+  assertNotNull(areaCurves);
+  const actualAreas = Array.from(areaCurves).map((area) => ({ d: area.getAttribute("d") ?? "" }));
+  expect(actualAreas).toEqual(expectedAreas);
+}

package/test/helper/expectAxisTicks.ts

@@ -0,0 +1,48 @@
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+/*
+ * Ported from recharts 3.8.1 test/helper/expectAxisTicks.ts (the DOM-query part).
+ * Class-name adaptation: recharts queries `.recharts-xAxis-tick-labels`, but this
+ * port's CartesianAxis renders the ticks group as `recharts-{axisType}-ticks` under
+ * an axis Layer classed `recharts-cartesian-axis recharts-{axisType}`. We therefore
+ * scope by the axis Layer class (`.recharts-xAxis` / `.recharts-yAxis`) + the
+ * (identical) `.recharts-cartesian-axis-tick-value` label class.
+ */
+
+export type ExpectedTick = {
+  textContent: string | null;
+  x: string | null;
+  y: string | null;
+};
+
+function normalizeDateString(str: string | null): string | null {
+  if (!str) return str;
+  return str.replace(/\(.*?\)/, "(Coordinated Universal Time)");
+}
+
+function readTicks(container: Element, axisSelector: string): ReadonlyArray<ExpectedTick> {
+  const allTicks = container.querySelectorAll(
+    `${axisSelector} .recharts-cartesian-axis-tick-value`,
+  );
+  assertNotNull(allTicks);
+  return Array.from(allTicks).map((tick) => ({
+    textContent: normalizeDateString(tick.textContent),
+    x: tick.getAttribute("x"),
+    y: tick.getAttribute("y"),
+  }));
+}
+
+export function expectXAxisTicks(
+  container: Element,
+  expectedTicks: ReadonlyArray<ExpectedTick>,
+): void {
+  expect(readTicks(container, ".recharts-xAxis")).toEqual(expectedTicks);
+}
+
+export function expectYAxisTicks(
+  container: Element,
+  expectedTicks: ReadonlyArray<ExpectedTick>,
+): void {
+  expect(readTicks(container, ".recharts-yAxis")).toEqual(expectedTicks);
+}

package/test/helper/expectBars.ts

@@ -0,0 +1,54 @@
+// Ported from recharts 3.8.1 test/helper/expectBars.ts (commit 7a23854).
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+export type ExpectedBar = {
+  x: string;
+  y: string;
+  width: string;
+  height: string;
+  radius: string;
+  d: string;
+};
+
+export function getAllBars(container: Element) {
+  return container.querySelectorAll(".recharts-bar-rectangle");
+}
+
+export function getAllBarPaths(container: Element) {
+  return container.querySelectorAll(
+    ".recharts-bar .recharts-bar-rectangle path.recharts-rectangle",
+  );
+}
+
+export function expectBars(container: Element, expectedBars: ReadonlyArray<ExpectedBar>) {
+  assertNotNull(container);
+  const allBarPaths = getAllBarPaths(container);
+  const actualBars = Array.from(allBarPaths).map((bar) => ({
+    x: bar.getAttribute("x"),
+    y: bar.getAttribute("y"),
+    width: bar.getAttribute("width"),
+    height: bar.getAttribute("height"),
+    radius: bar.getAttribute("radius"),
+    d: bar.getAttribute("d"),
+  }));
+  expect(actualBars).toEqual(expectedBars);
+}
+
+export function getActiveBars(container: Element) {
+  return container.querySelectorAll(".recharts-active-bar path.recharts-rectangle");
+}
+
+export function expectActiveBars(container: Element, expectedBars: ReadonlyArray<ExpectedBar>) {
+  assertNotNull(container);
+  const activeBars = getActiveBars(container);
+  const actualBars = Array.from(activeBars).map((bar) => ({
+    x: bar.getAttribute("x"),
+    y: bar.getAttribute("y"),
+    width: bar.getAttribute("width"),
+    height: bar.getAttribute("height"),
+    radius: bar.getAttribute("radius"),
+    d: bar.getAttribute("d"),
+  }));
+  expect(actualBars).toEqual(expectedBars);
+}

package/test/helper/expectFunctionReturning.ts

@@ -0,0 +1,58 @@
+// Ported from recharts 3.8.1 test/helper/expectFunctionReturning.ts (commit 7a23854).
+import { expect } from "vitest";
+
+interface SyncExpectationResult {
+  pass: boolean;
+  message: () => string;
+  actual?: unknown;
+  expected?: unknown;
+}
+
+/**
+ * Vitest matcher: expect a function to return specific values for given argument
+ * tuples. Used for `getPosition` callbacks in tooltip payload configuration tests.
+ */
+export function expectFunctionReturning<TArgs extends ReadonlyArray<unknown>, TReturn>(
+  actual: unknown,
+  cases: ReadonlyArray<readonly [...TArgs, TReturn]>,
+): SyncExpectationResult {
+  if (typeof actual !== "function") {
+    return {
+      pass: false,
+      message: () => `Expected a function, but received ${typeof actual}`,
+      actual,
+      expected: "function",
+    };
+  }
+
+  const fn = actual as (...args: TArgs) => TReturn;
+
+  for (const testCase of cases) {
+    const args = testCase.slice(0, -1) as unknown as TArgs;
+    const expectedReturnValue = testCase[testCase.length - 1] as TReturn;
+    const actualReturnValue = fn(...args);
+    expect(actualReturnValue, `when called with args [${String(args)}] it should return`).toEqual(
+      expectedReturnValue,
+    );
+  }
+
+  return {
+    pass: true,
+    message: () => "Expected function to not return the expected values for all cases",
+  };
+}
+
+expect.extend({
+  functionReturning: expectFunctionReturning,
+});
+
+interface CustomMatchers {
+  functionReturning: <TArgs extends ReadonlyArray<unknown>, TReturn>(
+    cases: ReadonlyArray<readonly [...TArgs, TReturn]>,
+  ) => (...args: TArgs) => TReturn;
+}
+
+declare module "vitest" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+}

package/test/helper/expectLabel.ts

@@ -0,0 +1,32 @@
+// Ported from recharts 3.8.1 test/helper/expectLabel.ts (commit 7a23854).
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+export type ExpectedLabel = {
+  textContent: string;
+  x: string | null;
+  y: string | null;
+  width: string | null;
+  height: string | null;
+  offset: string | null;
+};
+
+export function expectLabels(
+  container: Element,
+  expectedLabels: ReadonlyArray<ExpectedLabel>,
+  cssSelector: string = ".recharts-text.recharts-label",
+) {
+  assertNotNull(container);
+  const labels = container.querySelectorAll(cssSelector);
+
+  const actualLabels: ReadonlyArray<ExpectedLabel> = Array.from(labels).map((label) => ({
+    textContent: label.textContent ?? "",
+    x: label.getAttribute("x"),
+    y: label.getAttribute("y"),
+    width: label.getAttribute("width"),
+    height: label.getAttribute("height"),
+    offset: label.getAttribute("offset"),
+  }));
+
+  expect(actualLabels).toEqual(expectedLabels);
+}

package/test/helper/expectLastCalledWith.ts

@@ -0,0 +1,48 @@
+import { expect } from "vitest";
+import type { Mock } from "vitest";
+
+// Ported from recharts 3.8.1 test/helper/expectLastCalledWith.ts.
+
+/**
+ * Same as `expect(spy).toHaveBeenLastCalledWith(expected)` but with correct
+ * TypeScript types: the expected arguments are checked against the spy's argument
+ * types.
+ */
+export function expectLastCalledWith<T1, T2, T3, T4>(
+  spy: Mock<(arg1: T1, arg2: T2, arg3: T3, arg4: T4) => unknown>,
+  expected1: T1,
+  expected2?: T2,
+  expected3?: T3,
+  expected4?: T4,
+): void {
+  if (expected4 !== undefined) {
+    expect(spy).toHaveBeenLastCalledWith(expected1, expected2, expected3, expected4);
+    return;
+  }
+  if (expected3 !== undefined) {
+    expect(spy).toHaveBeenLastCalledWith(expected1, expected2, expected3);
+    return;
+  }
+  if (expected2 !== undefined) {
+    expect(spy).toHaveBeenLastCalledWith(expected1, expected2);
+    return;
+  }
+  expect(spy).toHaveBeenLastCalledWith(expected1);
+}
+
+/**
+ * Same as `expect(spy).toHaveBeenNthCalledWith(n, expected)` but with correct
+ * TypeScript types.
+ */
+export function expectNthCalledWith<T1, T2>(
+  spy: Mock<(arg1: T1, arg2: T2) => unknown>,
+  n: number,
+  expected1: T1,
+  expected2?: T2,
+): void {
+  if (expected2 !== undefined) {
+    expect(spy).toHaveBeenNthCalledWith(n, expected1, expected2);
+    return;
+  }
+  expect(spy).toHaveBeenNthCalledWith(n, expected1);
+}

package/test/helper/expectLine.ts

@@ -0,0 +1,20 @@
+// Port of recharts 3.8.1 test/helper/expectLine.ts (commit 7a23854).
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+export function getAllLines(container: Element) {
+  return container.querySelectorAll(".recharts-curve.recharts-line-curve");
+}
+
+type ExpectedLine = {
+  readonly d: string | null;
+};
+
+export function expectLines(container: Element, expectedLines: ReadonlyArray<ExpectedLine>) {
+  assertNotNull(container);
+  const allLinePaths = getAllLines(container);
+  const actualLines: ReadonlyArray<ExpectedLine> = Array.from(allLinePaths).map((line) => ({
+    d: line.getAttribute("d"),
+  }));
+  expect(actualLines).toEqual(expectedLines);
+}

package/test/helper/expectPieSectors.ts

@@ -0,0 +1,80 @@
+import { expect } from "vitest";
+import { trim } from "./trim";
+import { assertNotNull } from "./assertNotNull";
+import { round } from "../../src/util/round";
+
+// Ported from recharts 3.8.1 test/helper/expectPieSectors.ts.
+
+export function selectPieSectors(container: Element): ReadonlyArray<Element> {
+  return Array.from(container.querySelectorAll(".recharts-pie-sector path.recharts-sector"));
+}
+
+export type ExpectedSector = {
+  d: string;
+};
+
+export function expectPieSectors(
+  container: Element,
+  expectedSectors: ReadonlyArray<ExpectedSector>,
+): void {
+  const sectors = selectPieSectors(container);
+  const actualSectors = sectors.map((sector) => ({
+    d: trim(sector.getAttribute("d") ?? ""),
+  }));
+  expect(actualSectors).toEqual(expectedSectors);
+}
+
+/**
+ * The angle in degrees of a point on a circle relative to its center, measured
+ * counter-clockwise from the positive x-axis (SVG y-axis points down, so negated).
+ */
+function calculateAngle(cx: number, cy: number, x: number, y: number): number {
+  const radians = Math.atan2(-(y - cy), x - cx);
+  let degrees = radians * (180 / Math.PI);
+  if (degrees < 0) {
+    degrees += 360;
+  }
+  return round(degrees);
+}
+
+function calculateAnglesFromPath(
+  cx: number,
+  cy: number,
+  path: string,
+): { startAngle: number; endAngle: number } | null {
+  const match = path.match(
+    /M\s*([-\d.]+)[,\s]+([-\d.]+)\s*A(?:[\s\d,.]*?)\s*([-\d.]+)[,\s]+([-\d.]+)\s*L/,
+  );
+  if (!match) {
+    return null;
+  }
+  const [, x1, y1, x2, y2] = match.map(parseFloat);
+  const startAngle = calculateAngle(cx, cy, x1!, y1!);
+  const endAngle = calculateAngle(cx, cy, x2!, y2!);
+  return { startAngle, endAngle };
+}
+
+export function getPieSectorAngles(
+  sectors: ReadonlyArray<Element>,
+): ReadonlyArray<{ startAngle: number; endAngle: number }> {
+  return sectors.map((sector) => {
+    const d = sector.getAttribute("d");
+    if (!d) {
+      throw new Error('Sector path "d" attribute is missing');
+    }
+    const cx = parseFloat(sector.getAttribute("cx") ?? "0");
+    const cy = parseFloat(sector.getAttribute("cy") ?? "0");
+    const anglesFromPath = calculateAnglesFromPath(cx, cy, d);
+    assertNotNull(anglesFromPath);
+    return anglesFromPath;
+  });
+}
+
+export function expectPieSectorAngles(
+  container: Element,
+  expectedAngles: ReadonlyArray<{ startAngle: number; endAngle: number }>,
+): void {
+  const sectors = selectPieSectors(container);
+  const actualAngles = getPieSectorAngles(sectors);
+  expect(actualAngles).toEqual(expectedAngles);
+}

package/test/helper/expectScale.ts

@@ -0,0 +1,37 @@
+import { expect } from "vitest";
+import type { Mock } from "vitest";
+import type { AxisDomain } from "../../src/util/types";
+import type { RechartsScale } from "../../src/util/scale/RechartsScale";
+import { assertNotNull } from "./assertNotNull";
+
+// Ported from recharts 3.8.1 test/helper/expectScale.ts.
+
+export type ExpectedScale = { domain: AxisDomain; range: [number, number]; bandwidth?: number };
+
+/**
+ * Asserts a RechartsScale's domain/range (and optional bandwidth) against an
+ * expected description. `actual` is the scale object (with `domain`/`range`
+ * functions); `expected` carries the already-called results.
+ */
+export function expectScale(actual: unknown, expected: ExpectedScale): void {
+  assertNotNull(actual);
+  const scale = actual as RechartsScale;
+  expect(typeof scale.map).toBe("function");
+  expect(scale.domain(), "domain error").toEqual(expected.domain);
+  expect(scale.range(), "range error").toEqual(expected.range);
+  if ("bandwidth" in expected && typeof scale.bandwidth === "function") {
+    expect(scale.bandwidth(), "bandwidth error").toEqual(expected.bandwidth);
+  }
+}
+
+/**
+ * Verifies the spy's last call was with a scale matching `expected`.
+ */
+export function expectLastCalledWithScale(
+  spy: Mock<(scale: RechartsScale) => unknown>,
+  expected: ExpectedScale,
+): void {
+  expect(spy).toHaveBeenCalled();
+  const lastKnownScale = spy.mock.calls[spy.mock.calls.length - 1]?.[0];
+  expectScale(lastKnownScale, expected);
+}

package/test/helper/expectScatterPoints.ts

@@ -0,0 +1,52 @@
+// Ported from recharts 3.8.1 test/helper/expectScatterPoints.ts (commit 7a23854).
+import { expect } from "vitest";
+import { assertNotNull } from "./assertNotNull";
+
+export type ExpectedPoint = {
+  cx: string;
+  cy: string;
+  transform: string;
+  d: string;
+  width: string;
+  height: string;
+};
+
+export function getAllScatterPoints(container: Element): ReadonlyArray<SVGPathElement> {
+  return Array.from(container.querySelectorAll(".recharts-scatter-symbol .recharts-symbols"));
+}
+
+function mapScatterPoints(container: Element): ReadonlyArray<ExpectedPoint> {
+  assertNotNull(container);
+  return getAllScatterPoints(container).map((point) => ({
+    cx: point.getAttribute("cx") ?? "",
+    cy: point.getAttribute("cy") ?? "",
+    transform: point.getAttribute("transform") ?? "",
+    d: point.getAttribute("d") ?? "",
+    width: point.getAttribute("width") ?? "",
+    height: point.getAttribute("height") ?? "",
+  }));
+}
+
+export function expectScatterPoints(
+  container: Element,
+  expectedPoints: ReadonlyArray<ExpectedPoint>,
+) {
+  expect(mapScatterPoints(container)).toEqual(expectedPoints);
+}
+
+const byCxCy = (a: ExpectedPoint, b: ExpectedPoint): number =>
+  a.cx === b.cx ? a.cy.localeCompare(b.cy) : a.cx.localeCompare(b.cx);
+
+/**
+ * Order-independent variant: asserts the rendered point SET equals the expected
+ * set, ignoring DOM order. Used for the Brush-panorama case, where the panorama
+ * renders into a separate nested surface (after the z-index-portaled main scatter),
+ * so the main/panorama symbol order differs from recharts' shared-surface DOM —
+ * the coordinates themselves are byte-identical.
+ */
+export function expectScatterPointsUnordered(
+  container: Element,
+  expectedPoints: ReadonlyArray<ExpectedPoint>,
+) {
+  expect([...mapScatterPoints(container)].sort(byCxCy)).toEqual([...expectedPoints].sort(byCxCy));
+}