solid-recharts 0.2.0 → 1.0.0

package/test/setup.ts

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

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

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

@@ -1,26 +0,0 @@
-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)}
-      />
-    );
-  });
-});