solid-recharts 0.1.0

package/test/context/chartLayoutContext.spec.tsx

@@ -0,0 +1,378 @@
+// Ported from recharts 3.8.1 test/context/chartLayoutContext.spec.tsx (commit 7a23854).
+//
+// Solid deviations:
+// - chart hooks return Accessors (useOffsetInternal, useChartLayout, …); spied via
+//   createSelectorTestCase (effect on accessor value) or read directly.
+// - `<Customized component={Comp} />` is NOT ported (deprecated React element-cloning
+//   shim); the consumer is rendered directly as a chart child, matching the Solid
+//   useOffset.spec.tsx convention. The exact offset VALUES are golden-anchored to
+//   recharts.
+// - `toHaveBeenCalledTimes(n)` assertions are React-render-count specific and do not
+//   translate to Solid's effect-based spy; dropped (see useOffset.spec.tsx).
+// - layout hooks + useOffsetInternal are imported from the source path (not re-exported
+//   from index, same as the reference imports useOffsetInternal from the source).
+import { createEffect, flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import {
+  useCartesianChartLayout,
+  useChartLayout,
+  usePolarChartLayout,
+  useOffsetInternal,
+} from "../../src/context/chartLayoutContext";
+import { Brush, ComposedChart, Legend, PieChart, XAxis, YAxis } from "../../src";
+import { useClipPathId } from "../../src/container/ClipPathProvider";
+import { createSelectorTestCase } from "../helper/createSelectorTestCase";
+import { render } from "../helper/render";
+import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
+import { emptyOffset } from "../helper/offsetHelpers";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+describe("ClipPathIdContext", () => {
+  it("should generate unique clipPathId", () => {
+    expect.assertions(1);
+    const MockConsumer = (): null => {
+      const clipPathId = useClipPathId();
+      expect(clipPathId).toMatch(/^recharts\d+-clip$/);
+      return null;
+    };
+    render(() => (
+      <ComposedChart width={100} height={200}>
+        <MockConsumer />
+      </ComposedChart>
+    ));
+  });
+
+  it("should return undefined when using the hook outside of chart", () => {
+    expect.assertions(1);
+    const MockComponent = (): null => {
+      const clipPathId = useClipPathId();
+      expect(clipPathId).toBe(undefined);
+      return null;
+    };
+    render(() => <MockComponent />);
+  });
+});
+
+describe("useOffsetInternal", () => {
+  it("should return offset with all zeroes when used outside of chart", () => {
+    const offsetSpy = vi.fn();
+    const Comp = (): null => {
+      const offset = useOffsetInternal();
+      offsetSpy(offset());
+      return null;
+    };
+    render(() => <Comp />);
+    expectLastCalledWith(offsetSpy, emptyOffset);
+  });
+
+  it("should return default offset in an empty chart", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5,
+      brushBottom: 5,
+      height: 190,
+      width: 90,
+    });
+  });
+
+  it("should add chart margin", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 30,
+      left: 40,
+      brushBottom: 30,
+      height: 160,
+      width: 40,
+    });
+  });
+
+  it("should include default Brush height (40) in bottom property", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Brush />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 70,
+      left: 40,
+      brushBottom: 30,
+      height: 120,
+      width: 40,
+    });
+  });
+
+  it("should include explicit brush height in bottom property", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Brush height={13} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      top: 10,
+      right: 20,
+      bottom: 43,
+      left: 40,
+      brushBottom: 30,
+      height: 147,
+      width: 240,
+    });
+  });
+
+  it("should include default width of YAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" />
+        <YAxis orientation="right" yAxisId="right" />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      brushBottom: 30,
+      height: 160,
+      left: 100,
+      right: 80,
+      top: 10,
+      width: 120,
+    });
+  });
+
+  it("should include explicit width of YAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" width={23} />
+        <YAxis orientation="right" yAxisId="right" width={39} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      brushBottom: 30,
+      height: 160,
+      left: 63,
+      right: 59,
+      top: 10,
+      width: 178,
+    });
+  });
+
+  it("should exclude hidden YAxis dimensions", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={300} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <YAxis orientation="left" yAxisId="left" width={23} hide />
+        <YAxis orientation="right" yAxisId="right" width={37} hide />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      brushBottom: 30,
+      height: 160,
+      left: 40,
+      right: 20,
+      top: 10,
+      width: 240,
+    });
+  });
+
+  it("should include default height of XAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" />
+        <XAxis orientation="bottom" xAxisId="bottom" />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 60,
+      brushBottom: 60,
+      height: 100,
+      left: 40,
+      right: 20,
+      top: 40,
+      width: 40,
+    });
+  });
+
+  it("should include explicit height of XAxis", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" height={23} />
+        <XAxis orientation="bottom" xAxisId="bottom" height={39} />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 69,
+      brushBottom: 69,
+      height: 98,
+      left: 40,
+      right: 20,
+      top: 33,
+      width: 40,
+    });
+  });
+
+  it("should exclude hidden XAxis height", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <XAxis orientation="top" xAxisId="top" height={23} hide />
+        <XAxis orientation="bottom" xAxisId="bottom" height={37} hide />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 30,
+      brushBottom: 30,
+      height: 160,
+      left: 40,
+      right: 20,
+      top: 10,
+      width: 40,
+    });
+  });
+
+  /*
+   * The test for Legend can be simple and test only one case;
+   * all the various Legend positioning and cases are covered by appendOffsetOfLegend tests
+   * so no need to duplicate.
+   */
+  it("should include computed width and height on Legend - see appendOffsetOfLegend for detailed behaviour", () => {
+    mockGetBoundingClientRect({ height: 29, width: 43 });
+    const renderTestCase = createSelectorTestCase((props) => (
+      <ComposedChart width={100} height={200} margin={{ top: 10, right: 20, bottom: 30, left: 40 }}>
+        <Legend />
+        {props.children}
+      </ComposedChart>
+    ));
+    const { spy } = renderTestCase(useOffsetInternal);
+
+    expectLastCalledWith(spy, {
+      bottom: 59,
+      brushBottom: 30,
+      height: 131,
+      left: 40,
+      right: 20,
+      top: 10,
+      width: 40,
+    });
+  });
+});
+
+describe("layout hooks", () => {
+  it("should return undefined for all layout hooks outside of chart", () => {
+    expect.assertions(3);
+    const Comp = (): null => {
+      expect(useChartLayout()()).toBe(undefined);
+      expect(useCartesianChartLayout()()).toBe(undefined);
+      expect(usePolarChartLayout()()).toBe(undefined);
+      return null;
+    };
+    render(() => <Comp />);
+  });
+
+  it("should return cartesian layout and no polar layout in cartesian chart", () => {
+    const chartSpy = vi.fn();
+    const cartesianSpy = vi.fn();
+    const polarSpy = vi.fn();
+    const Comp = (): null => {
+      const chart = useChartLayout();
+      const cartesian = useCartesianChartLayout();
+      const polar = usePolarChartLayout();
+      createEffect(
+        () => chart(),
+        (v) => chartSpy(v),
+      );
+      createEffect(
+        () => cartesian(),
+        (v) => cartesianSpy(v),
+      );
+      createEffect(
+        () => polar(),
+        (v) => polarSpy(v),
+      );
+      return null;
+    };
+    render(() => (
+      <ComposedChart width={100} height={200}>
+        <Comp />
+      </ComposedChart>
+    ));
+    flush();
+
+    expect(chartSpy).toHaveBeenLastCalledWith("horizontal");
+    expect(cartesianSpy).toHaveBeenLastCalledWith("horizontal");
+    expect(polarSpy).toHaveBeenLastCalledWith(undefined);
+  });
+
+  it("should return polar layout and no cartesian layout in polar chart", () => {
+    const chartSpy = vi.fn();
+    const cartesianSpy = vi.fn();
+    const polarSpy = vi.fn();
+    const Comp = (): null => {
+      const chart = useChartLayout();
+      const cartesian = useCartesianChartLayout();
+      const polar = usePolarChartLayout();
+      createEffect(
+        () => chart(),
+        (v) => chartSpy(v),
+      );
+      createEffect(
+        () => cartesian(),
+        (v) => cartesianSpy(v),
+      );
+      createEffect(
+        () => polar(),
+        (v) => polarSpy(v),
+      );
+      return null;
+    };
+    render(() => (
+      <PieChart width={100} height={200}>
+        <Comp />
+      </PieChart>
+    ));
+    flush();
+
+    expect(chartSpy).toHaveBeenLastCalledWith("centric");
+    expect(cartesianSpy).toHaveBeenLastCalledWith(undefined);
+    expect(polarSpy).toHaveBeenLastCalledWith("centric");
+  });
+});

package/test/helper/ExpectAxisDomain.tsx

@@ -0,0 +1,27 @@
+// Solid port of recharts 3.8.1 test/helper/expectAxisTicks.ts `ExpectAxisDomain`.
+//
+// recharts mounts this inside the chart via `<Customized component={<ExpectAxisDomain .../>} />`
+// to read the axis scale from the store and assert its domain. There is no `Customized`
+// in this Solid port, and a plain child of the chart already has the store context, so
+// callers render `<ExpectAxisDomain ... />` directly as a chart child. The selector returns
+// an Accessor; we spy its `.domain()` via an effect so the assert fires per settle (the
+// caller checks the LAST call, mirroring recharts' per-render assert).
+import { createEffect } from "solid-js";
+import { useAppSelector } from "../../src/state/hooks";
+import { selectAxisScale } from "../../src/state/selectors/axisSelectors";
+import type { AxisId } from "../../src/state/cartesianAxisSlice";
+
+export function ExpectAxisDomain(props: {
+  axisType: "xAxis" | "yAxis";
+  axisId?: AxisId;
+  assert: (domainFromStore: ReadonlyArray<unknown> | undefined) => void;
+}): null {
+  const scale = useAppSelector((state) =>
+    selectAxisScale(state, props.axisType, props.axisId ?? 0, false),
+  );
+  createEffect(
+    () => scale()?.domain(),
+    (domain) => props.assert(domain),
+  );
+  return null;
+}

package/test/helper/assertNotNull.ts

@@ -0,0 +1,6 @@
+// Assertion function (runtime-checked narrowing — a guard, not an `as` cast).
+export function assertNotNull<T>(value: T | null | undefined): asserts value is T {
+  if (value == null) {
+    throw new Error("Expected value to not be null or undefined");
+  }
+}

package/test/helper/assertZIndexLayerOrder.ts

@@ -0,0 +1,19 @@
+// Ported from recharts 3.8.1 test/helper/assertZIndexLayerOrder.ts (commit 7a23854).
+import { assertNotNull } from "./assertNotNull";
+
+/**
+ * Checks that the `front` element is rendered later in the DOM than `back` element.
+ * Because SVG does not support z-index directly we need to rely on the sibling order
+ * to determine visual stacking.
+ */
+export function assertZIndexLayerOrder({ front, back }: { front: Element; back: Element }): void {
+  assertNotNull(front);
+  assertNotNull(back);
+  const position = back.compareDocumentPosition(front);
+  const isFrontOnTop =
+    position === Node.DOCUMENT_POSITION_FOLLOWING ||
+    position === (Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY);
+  if (!isFrontOnTop) {
+    throw new Error("Expected front element to be rendered on top of back element");
+  }
+}

package/test/helper/createSelectorTestCase.tsx

@@ -0,0 +1,176 @@
+// Solid-native, reduced port of recharts 3.8.1 test/helper/createSelectorTestCase.tsx.
+//
+// recharts renders a chart + a Spy component that calls a hook/selector and spies
+// its RETURN per React render, plus wires AnimationManager mocks and runs fake
+// timers. Our chart hooks/selectors return Accessors, and there's no Redux
+// autobatch, so this is simpler: render the chart with a Spy child that spies the
+// VALUE — via an effect for accessor results, directly for plain-value results.
+// (No animation-manager wiring; the empty chart doesn't need it.)
+import { createEffect, createSignal, flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { vi, type Mock } from "vitest";
+import { render } from "./render";
+import { useAppSelector, useAppStore } from "../../src/state/hooks";
+import type { RechartsRootState } from "../../src/state/store";
+
+// The wrapper MUST read `props.children` inside its JSX (never destructure) so
+// the Spy child getter stays lazy and runs inside the chart's store context.
+// See the test-wrapper-no-destructure-children memory.
+type Wrapper = (props: { children: JSX.Element }) => JSX.Element;
+type HookOrSelector<T> = (() => T) | ((state: RechartsRootState) => T);
+
+function isHook(fn: { name: string }): boolean {
+  return /^use[A-Z]/.test(fn.name);
+}
+
+/** Zero-arg arrow wrappers like `() => useStackId(...)` invoke hooks inside Spy. */
+function isHookWrapper(fn: HookOrSelector<unknown>): fn is () => unknown {
+  return fn.length === 0;
+}
+
+export function createSelectorTestCase(Component: Wrapper) {
+  return function renderTestCase<T>(selectorOrHook?: HookOrSelector<T>): {
+    container: HTMLElement;
+    spy: Mock;
+    rerenderSameComponent: () => void;
+    unmount: () => void;
+  } {
+    const spy: Mock = vi.fn();
+    const [version, setVersion] = createSignal(0);
+
+    const StoreCapture = (): null => {
+      useAppStore();
+      return null;
+    };
+
+    const Spy = (): JSX.Element => {
+      if (selectorOrHook == null) {
+        return null;
+      }
+      // A hook (name `use…`) returns its own (often accessor) value; a plain
+      // selector is read through useAppSelector (→ accessor).
+      const result: unknown =
+        isHook(selectorOrHook) || isHookWrapper(selectorOrHook)
+          ? (selectorOrHook as () => unknown)()
+          : useAppSelector(selectorOrHook as (state: RechartsRootState) => unknown);
+
+      if (typeof result === "function") {
+        // Accessor: spy its value, re-running as it settles.
+        const accessor = result as () => unknown;
+        createEffect(
+          () => {
+            version();
+            return accessor();
+          },
+          (value) => spy(value),
+        );
+      } else {
+        spy(result);
+      }
+      return null;
+    };
+
+    // `<Spy />` compiles to a lazy `get children()` getter; the wrapper must read
+    // `props.children` inside its JSX so the Spy mounts INSIDE the chart store.
+    const { container, unmount } = render(() => (
+      <Component>
+        <StoreCapture />
+        <Spy />
+      </Component>
+    ));
+    // Store writes are microtask-batched, and registration effects (axes/ticks/
+    // items) dispatch during flush. Drain a few times so everything settles.
+    flush();
+    flush();
+    flush();
+    const rerenderSameComponent = (): void => {
+      setVersion((v) => v + 1);
+      flush();
+      flush();
+      flush();
+    };
+
+    return { container, spy, rerenderSameComponent, unmount };
+  };
+}
+
+/**
+ * Solid-native, reduced port of recharts' `createSynchronisedSelectorTestCase`.
+ * Renders TWO (or three) chart wrappers side by side, each with its own store and
+ * a Spy reading `selector` against that store — used to assert cross-chart sync
+ * receipt (one chart hovers, the other's state updates via the sync registry).
+ *
+ * Each wrapper MUST read `props.children` inside its JSX (never destructure) so
+ * the Spy mounts inside that chart's store (test-wrapper-no-destructure-children).
+ */
+export function createSynchronisedSelectorTestCase(
+  ComponentA: Wrapper,
+  ComponentB: Wrapper,
+  ComponentC?: Wrapper,
+) {
+  return function renderTestCase<T>(selector?: (state: RechartsRootState) => T): {
+    container: HTMLElement;
+    wrapperA: Element;
+    wrapperB: Element;
+    wrapperC: Element | null;
+    spyA: Mock;
+    spyB: Mock;
+    spyC: Mock;
+    unmount: () => void;
+  } {
+    const spyA: Mock = vi.fn();
+    const spyB: Mock = vi.fn();
+    const spyC: Mock = vi.fn();
+
+    const makeSpy =
+      (spy: Mock): (() => null) =>
+      (): null => {
+        if (selector == null) {
+          return null;
+        }
+        const accessor = useAppSelector(selector);
+        createEffect(
+          () => accessor(),
+          (value) => spy(value),
+        );
+        return null;
+      };
+    const SpyA = makeSpy(spyA);
+    const SpyB = makeSpy(spyB);
+    const SpyC = makeSpy(spyC);
+
+    const { container, unmount } = render(() => (
+      <>
+        <div id="wrapperA">
+          <ComponentA>
+            <SpyA />
+          </ComponentA>
+        </div>
+        <div id="wrapperB">
+          <ComponentB>
+            <SpyB />
+          </ComponentB>
+        </div>
+        {ComponentC != null ? (
+          <div id="wrapperC">
+            <ComponentC>
+              <SpyC />
+            </ComponentC>
+          </div>
+        ) : null}
+      </>
+    ));
+    flush();
+    flush();
+    flush();
+
+    const wrapperA = container.querySelector("#wrapperA");
+    const wrapperB = container.querySelector("#wrapperB");
+    const wrapperC = container.querySelector("#wrapperC");
+    if (wrapperA == null || wrapperB == null) {
+      throw new Error("synchronised test case wrappers failed to render");
+    }
+
+    return { container, spyA, spyB, spyC, wrapperA, wrapperB, wrapperC, unmount };
+  };
+}