solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/setup.ts

@@ -0,0 +1,84 @@
+// Test setup. Runs once before any test file.
+//
+// Dev mode must be on for Solid 2.0 diagnostics to fire. The vite.config.ts
+// `define` block already forces _SOLID_DEV_ / __DEV__ true, but we set them on
+// globalThis here as belt-and-suspenders in case something is imported before
+// vite's define plugin runs.
+
+// @ts-expect-error — global injection for solid-js dev guards
+globalThis._SOLID_DEV_ = true;
+// @ts-expect-error — global injection for solid-js dev guards
+globalThis.__DEV__ = true;
+
+// Ported from vendor/recharts-reference/test/vitest.setup.ts — fake rAF/cAF so
+// mouseEventsMiddleware throttleDelay:'raf' settles synchronously in tests. We ALSO
+// fake `performance` so `performance.now()` shares the faked clock with the faked
+// rAF timestamp: RequestAnimationFrameTimeoutController compares the rAF `now`
+// against a `performance.now()` start time, and a real-vs-faked clock mismatch made
+// CSS-transition animations reschedule rAF forever under `vi.runAllTimers()` (the
+// 10000-timer infinite-loop guard). Aligning the clocks lets animated charts settle.
+vi.useFakeTimers({
+  toFake: ["requestAnimationFrame", "cancelAnimationFrame", "performance"],
+});
+
+// @ts-expect-error — testing-library user-event checks the `jest` global
+globalThis.jest = {
+  advanceTimersByTime: vi.advanceTimersByTime,
+};
+
+import "@testing-library/jest-dom/vitest";
+import "./helper/expectFunctionReturning";
+import { afterEach, beforeEach, vi } from "vitest";
+import { DEV } from "solid-js";
+import { cleanup } from "@solidjs/testing-library";
+import {
+  type DiagnosticEvent,
+  describeDiagnosticEvents,
+  isAllowedDiagnostic,
+} from "./utils/diagnostics";
+
+// GLOBAL DIAGNOSTICS GUARD — always on, every test, no opt-out.
+//
+// The diagnostics discipline (see test/utils/diagnostics.ts) is zero-tolerance:
+// any non-allowlisted Solid 2.0 diagnostic is a bug — a STRICT_READ_UNTRACKED
+// warning means a future state change silently won't propagate. Error-severity
+// diagnostics already throw; warning-severity ones (STRICT_READ_UNTRACKED,
+// NO_OWNER_EFFECT, …) only LOG, so without this guard they slip through every
+// test silently.
+//
+// This subscribes for the duration of EACH test and fails the test in afterEach
+// if any non-allowlisted diagnostic fired. The only escape hatch is the
+// allowlist in test/utils/diagnostics-allowlist.ts.
+let collected: DiagnosticEvent[] = [];
+let unsubscribe: (() => void) | undefined;
+
+beforeEach(() => {
+  collected = [];
+  if (DEV === undefined) {
+    return;
+  }
+  unsubscribe = DEV.diagnostics.subscribe((event: DiagnosticEvent) => {
+    if (!isAllowedDiagnostic(event.code)) {
+      collected.push(event);
+    }
+  });
+});
+
+afterEach(() => {
+  // Unmount first so cleanup-time diagnostics (e.g. onCleanup misuse) are caught.
+  cleanup();
+  vi.clearAllTimers();
+  unsubscribe?.();
+  unsubscribe = undefined;
+
+  const events = collected;
+  collected = [];
+
+  if (events.length > 0) {
+    throw new Error(
+      `Test emitted ${events.length} unexpected Solid diagnostic(s). ` +
+        `Fix the reactive-graph misuse (move untracked reads into a memo/JSX), ` +
+        `or add the code to the allowlist with justification:\n${describeDiagnosticEvents(events)}`,
+    );
+  }
+});

package/test/shape/ActiveShape.spec.tsx

@@ -0,0 +1,181 @@
+// Ported from recharts 3.9.2 test/shape/ActiveShape.spec.tsx.
+//
+// Harness adaptations: React render(element) -> Solid render(() => <…/>) (each
+// `element` is a render thunk); @testing-library/react -> the repo's local
+// testing-library; React `className` -> Solid `class` (object-form shape options
+// too); the activeShape block is activated via the port's `showTooltip` helper
+// (Solid's `onMouseEnter` is a native mouseenter listener, so a bare
+// `fireEvent.mouseOver` on the trapezoid Layer would not set the active index —
+// showTooltip drives the tooltip mouse-move at the default coordinate, which is
+// what sets the active item index that `activeShape` keys off).
+//
+// The `<Funnel>` shape now renders through the shared `<Shape>` wrapper (via
+// `<FunnelTrapezoid>`), so an active shape is wrapped in a
+// `<Layer class="recharts-active-shape">` exactly like upstream.
+//
+// Scope: the React-element option forms are PERMANENT-N/A (Solid has no
+// cloneElement — ActiveShape drops the ReactElement constituent), so those two
+// upstream cases are omitted. The function, object, and boolean forms are ported
+// verbatim (modulo className->class).
+import { describe, expect, test } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { Funnel, FunnelChart, Trapezoid, Tooltip } from "../../src";
+import { showTooltip } from "../component/Tooltip/tooltipTestHelpers";
+import { funnelChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
+import type { JSX } from "@solidjs/web";
+import type { FunnelTrapezoidItem } from "../../src/cartesian/Funnel";
+
+const funnelData = [
+  { value: 100, name: "展现" },
+  { value: 80, name: "点击" },
+  { value: 50, name: "访问" },
+  { value: 40, name: "咨询" },
+  { value: 26, name: "订单" },
+];
+
+type ActiveShapeTestParams = {
+  element: () => JSX.Element;
+  activeClass: string;
+  expectedLength: number;
+  name: string;
+  shapeClass?: string;
+};
+
+const funnelShapes: ActiveShapeTestParams[] = [
+  {
+    name: "Funnel renders customized shape when shape is set to be a function",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          shape={(props: FunnelTrapezoidItem) => <Trapezoid {...props} class="custom-trap-shape" />}
+        />
+      </FunnelChart>
+    ),
+    activeClass: ".custom-trap-shape",
+    expectedLength: 5,
+  },
+  {
+    name: "Funnel renders customized shape when shape is set to be an object",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          shape={{ class: "custom-trap-shape" }}
+        />
+      </FunnelChart>
+    ),
+    activeClass: ".custom-trap-shape",
+    expectedLength: 5,
+  },
+];
+
+const funnelActiveShapes: ActiveShapeTestParams[] = [
+  {
+    name: "Funnel renders customized active shape when activeShape is set to be a function",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          activeShape={(props: FunnelTrapezoidItem) => <Trapezoid {...props} />}
+        />
+        <Tooltip />
+      </FunnelChart>
+    ),
+    shapeClass: ".recharts-funnel-trapezoid",
+    activeClass: ".recharts-active-shape",
+    expectedLength: 1,
+  },
+  {
+    name: "Funnel renders customized active shape when activeShape is set to be an object",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          activeShape={{ fill: "red", strokeWidth: 2 }}
+        />
+        <Tooltip />
+      </FunnelChart>
+    ),
+    shapeClass: ".recharts-funnel-trapezoid",
+    activeClass: ".recharts-active-shape",
+    expectedLength: 1,
+  },
+  {
+    name: "Funnel renders customized active shape when activeShape is set to be a boolean",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          activeShape
+        />
+        <Tooltip />
+      </FunnelChart>
+    ),
+    shapeClass: ".recharts-funnel-trapezoid",
+    activeClass: ".recharts-active-shape",
+    expectedLength: 1,
+  },
+  {
+    name: "Funnel does not render customized active shape when activeShape is set to be a falsy boolean",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel
+          width={400}
+          data={funnelData}
+          dataKey="value"
+          isAnimationActive={false}
+          activeShape={false}
+        />
+        <Tooltip />
+      </FunnelChart>
+    ),
+    shapeClass: ".recharts-funnel-trapezoid",
+    activeClass: ".recharts-active-shape",
+    expectedLength: 0,
+  },
+  {
+    name: "Funnel does not render customized active shape when activeShape is not set",
+    element: () => (
+      <FunnelChart width={700} height={200}>
+        <Funnel width={400} data={funnelData} dataKey="value" isAnimationActive={false} />
+        <Tooltip />
+      </FunnelChart>
+    ),
+    shapeClass: ".recharts-funnel-trapezoid",
+    activeClass: ".recharts-active-shape",
+    expectedLength: 0,
+  },
+];
+
+describe("Active Shape", () => {
+  // testing that the shape prop is rendered
+  test.each(funnelShapes)("$name", ({ element, activeClass, expectedLength }) => {
+    const { container } = render(element);
+    const customShapes = container.querySelectorAll(activeClass);
+    expect(customShapes).toHaveLength(expectedLength);
+  });
+
+  // testing that the activeShape prop is rendered via tooltip
+  test.each(funnelActiveShapes)("$name", ({ element, activeClass, expectedLength, shapeClass }) => {
+    const { container } = render(element);
+    showTooltip(container, shapeClass ?? funnelChartMouseHoverTooltipSelector);
+    const activeShape = container.querySelectorAll(activeClass);
+    expect(activeShape).toHaveLength(expectedLength);
+  });
+});

package/test/shape/Cross.spec.tsx

@@ -0,0 +1,60 @@
+// Ported from recharts 3.8.1 test/shape/Cross.spec.tsx.
+// Harness changes only: render from the local Solid shim (thunk), no React
+// import; the invalid-input cast uses `unknown` instead of `any`. Assertions
+// are byte-identical (snapshots self-record our output; the `.recharts-cross`
+// counts are the parity signal).
+import { render } from "@solidjs/testing-library";
+
+import { Surface, Cross } from "../../src";
+
+describe("<Cross />", () => {
+  it("Render 1 path in Cross", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Cross
+          top={50}
+          left={50}
+          x={150}
+          y={180}
+          width={200}
+          height={200}
+          stroke="#000"
+          fill="none"
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cross")).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Don't render any path when props is invalid", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Cross
+          top={50}
+          left={50}
+          x={"x" as unknown as number}
+          y={180}
+          width={200}
+          height={200}
+          stroke="#000"
+          fill="none"
+        />
+      </Surface>
+    ));
+
+    expect(container.querySelectorAll(".recharts-cross")).toHaveLength(0);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Renders path with default values when no props are provided", () => {
+    const { container } = render(() => (
+      <Surface width={400} height={400}>
+        <Cross />
+      </Surface>
+    ));
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/test/shape/Cross.typed.spec.tsx

@@ -0,0 +1,26 @@
+import { describe, it } from "vitest";
+import { Cross, getRelativeCoordinate } from "../../src";
+
+// Ported from recharts 3.8.1 test/shape/Cross.typed.spec.tsx.
+
+describe("Cross types", () => {
+  it("should allow calling getRelativeCoordinate with the type provided by Recharts event handler", () => {
+    return (
+      <Cross
+        x={10}
+        y={10}
+        onClick={(e) => getRelativeCoordinate(e)}
+        onMouseDown={(e) => getRelativeCoordinate(e)}
+        onMouseUp={(e) => getRelativeCoordinate(e)}
+        onMouseMove={(e) => getRelativeCoordinate(e)}
+        onMouseLeave={(e) => getRelativeCoordinate(e)}
+        onMouseOver={(e) => getRelativeCoordinate(e)}
+        onMouseOut={(e) => getRelativeCoordinate(e)}
+        onMouseEnter={(e) => getRelativeCoordinate(e)}
+        onTouchStart={(e) => getRelativeCoordinate(e)}
+        onTouchMove={(e) => getRelativeCoordinate(e)}
+        onTouchEnd={(e) => getRelativeCoordinate(e)}
+      />
+    );
+  });
+});