solid-recharts 0.2.0 → 1.0.0

package/test/context/chartLayoutContext.spec.tsx

@@ -1,378 +0,0 @@
-// 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 "@solidjs/testing-library";
-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

@@ -1,27 +0,0 @@
-// 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

@@ -1,6 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,176 +0,0 @@
-// 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 "@solidjs/testing-library";
-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 };
-  };
-}