solid-recharts 0.2.0 → 1.0.0

package/test/util/svgPropertiesAndEvents.spec.tsx

@@ -1,206 +0,0 @@
-// Ported from recharts 3.8.1 test/util/svgPropertiesAndEvents.spec.ts.
-//
-// Harness changes: no React import. The reference spec only tests
-// `svgPropertiesAndEvents` (plain-object filter); all test cases port
-// directly with no React-element cases to defer.
-import { describe, expect, it, vi } from "vitest";
-import {
-  svgPropertiesAndEvents,
-  svgPropertiesAndEventsKeepCase,
-} from "../../src/util/svgPropertiesAndEvents";
-
-const noop = () => {};
-
-describe("svgPropertiesAndEvents", () => {
-  it("should return an empty object when called with an empty object", () => {
-    expect(svgPropertiesAndEvents({})).toEqual({});
-  });
-
-  it("should include SVG attributes", () => {
-    const input = {
-      cx: "50%",
-      cy: "50%",
-      fill: "#808080",
-      stroke: "#fff",
-      nonSvgProp: "value",
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      cx: "50%",
-      cy: "50%",
-      fill: "#808080",
-      stroke: "#fff",
-    });
-  });
-
-  it("should include data-* attributes", () => {
-    const input = {
-      "data-test": "test-value",
-      "data-id": "123",
-      nonDataProp: "value",
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      "data-test": "test-value",
-      "data-id": "123",
-    });
-  });
-
-  it("should include event handlers", () => {
-    const onClick = vi.fn();
-    const onMouseEnter = vi.fn();
-    const input = {
-      onClick,
-      onMouseEnter,
-      nonEventProp: "value",
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      onClick,
-      onMouseEnter,
-    });
-  });
-
-  it("should include a mix of SVG attributes, data-* attributes, and event handlers", () => {
-    const onClick = vi.fn();
-    const input = {
-      cx: "50%",
-      "data-test": "test-value",
-      onClick,
-      nonRelevantProp: "value",
-      width: 100,
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      cx: "50%",
-      "data-test": "test-value",
-      onClick,
-      width: 100,
-    });
-  });
-
-  it("should refine the type of the returned object", () => {
-    const onClick = vi.fn();
-    type InputType = {
-      cx: string;
-      "data-test": string;
-      onClick: () => void;
-      nonRelevantProp: string;
-      width: number;
-    };
-    const input: InputType = {
-      cx: "50%",
-      "data-test": "test-value",
-      onClick,
-      nonRelevantProp: "value",
-      width: 100,
-    };
-    // Type-test adapted to the project's strict no-`as` policy: the Solid port
-    // returns `Partial<T>` (every key optional) rather than recharts' precise
-    // `Pick<T, …>` (which would need a return assertion). So the required-field
-    // annotations and the type-level `@ts-expect-error` on `nonRelevantProp` are
-    // dropped; the RUNTIME assertions (which prove the filtering) are unchanged.
-    const result = svgPropertiesAndEvents(input);
-    const myCx = result.cx;
-    expect(myCx).toBe("50%");
-    const dataTest = result["data-test"];
-    const clickHandler = result.onClick;
-    const myWidth = result.width;
-    const nr = result.nonRelevantProp;
-    expect(nr).toBeUndefined();
-    expect(myCx).toBe("50%");
-    expect(dataTest).toBe("test-value");
-    expect(clickHandler).toBe(onClick);
-    expect(myWidth).toBe(100);
-  });
-
-  it("should filter out function properties that are not event handlers", () => {
-    const onClick = vi.fn();
-    const customFunction = () => "hello";
-    const input = {
-      cx: "50%",
-      onClick,
-      customFunction,
-      width: 100,
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      cx: "50%",
-      onClick,
-      width: 100,
-    });
-  });
-
-  it("should exclude symbols and numbers as keys", () => {
-    const sym = Symbol("test");
-    const input: { [key: PropertyKey]: unknown } = {
-      [sym]: "symbol-value",
-      6: "number-value",
-      cx: 10,
-      onClick: vi.fn(),
-    };
-    const result = svgPropertiesAndEvents(input);
-    expect(result).toEqual({
-      cx: 10,
-      onClick: input.onClick,
-    });
-  });
-
-  // The crux of the allowlist fix: Solid spreads keys verbatim (no camelCase→kebab
-  // conversion), so the filter must emit real SVG attribute names.
-  it("renames camelCase presentation keys to their kebab SVG attribute names", () => {
-    expect(
-      svgPropertiesAndEvents({
-        strokeWidth: 2,
-        strokeDasharray: "5 5",
-        fillOpacity: 0.5,
-        clipPath: "url(#x)",
-        textAnchor: "middle",
-        className: "c",
-      }),
-    ).toEqual({
-      "stroke-width": 2,
-      "stroke-dasharray": "5 5",
-      "fill-opacity": 0.5,
-      "clip-path": "url(#x)",
-      "text-anchor": "middle",
-      class: "c",
-    });
-  });
-
-  it("rejects kebab input keys (single convention: camelCase in, DOM names out)", () => {
-    // recharts `filterProps` parity: input vocabulary is the camelCase prop
-    // names only; the kebab spellings exist solely on the rendered DOM output.
-    expect(
-      svgPropertiesAndEvents({ "stroke-width": 3, "fill-opacity": 0.2, "stroke-dasharray": "1 1" }),
-    ).toEqual({});
-  });
-
-  it("KeepCase variant filters identically but keeps the camelCase keys", () => {
-    expect(
-      svgPropertiesAndEventsKeepCase({
-        strokeWidth: 3,
-        clipPath: "url(#c)",
-        dataKey: "x",
-        onClick: noop,
-      }),
-    ).toEqual({ strokeWidth: 3, clipPath: "url(#c)", onClick: noop });
-  });
-
-  it("preserves genuinely-camelCase SVG attributes (no false conversion)", () => {
-    // viewBox isn't allowlisted; the rest are real camelCase SVG attribute names.
-    expect(
-      svgPropertiesAndEvents({
-        gradientTransform: "rotate(45)",
-        attributeName: "x",
-        clipPathUnits: "userSpaceOnUse",
-        preserveAspectRatio: "xMidYMid",
-      }),
-    ).toEqual({
-      gradientTransform: "rotate(45)",
-      attributeName: "x",
-      clipPathUnits: "userSpaceOnUse",
-      preserveAspectRatio: "xMidYMid",
-    });
-  });
-});

package/test/util/svgPropertiesNoEvents.spec.tsx

@@ -1,228 +0,0 @@
-// Ported from recharts 3.8.1 test/util/svgPropertiesNoEvents.spec.tsx.
-//
-// Harness changes: no React import; `CSSProperties` (react) → `JSX.CSSProperties`
-// (@solidjs/web). The `svgPropertiesNoEvents` (plain-object) tests are Tier A,
-// byte-identical. For `svgPropertiesNoEventsFromUnknown`, the object/primitive/
-// null cases port directly; the THREE React-element cases (passing `<svg .../>`
-// / `<circle .../>` and expecting prop extraction) are DEFERRED — a Solid
-// element is a DOM node, not an introspectable `{ props }` structure, so that
-// branch lands with the Tier-2 element-or-props pattern (ActiveShapeUtils).
-import { describe, expect, it } from "vitest";
-import type { JSX } from "@solidjs/web";
-import {
-  svgPropertiesNoEvents,
-  svgPropertiesNoEventsFromUnknown,
-} from "../../src/util/svgPropertiesNoEvents";
-
-describe("svgPropertiesNoEvents", () => {
-  it("should return an empty object when called with an empty object", () => {
-    expect(svgPropertiesNoEvents({})).toEqual({});
-  });
-
-  it("should allow only SVG properties and exclude event handlers", () => {
-    const input = {
-      "aria-label": "test",
-      className: "svg-class",
-      color: "red",
-      height: "100px",
-      id: "svg-id",
-      lang: "en",
-      max: 10,
-      media: "all",
-      method: "get",
-      min: 0,
-      name: "svg-name",
-      style: { fill: "blue" },
-      // event handlers are valid SVG properties, but this function should exclude them too
-      onClick: () => {},
-      onMouseOver: () => {},
-      // Non-SVG properties
-      custom: "not-a-svg-prop",
-    };
-
-    const output = svgPropertiesNoEvents(input);
-
-    // `className` is renamed to the Solid/DOM `class` attribute.
-    expect(output).toEqual({
-      "aria-label": "test",
-      class: "svg-class",
-      color: "red",
-      height: "100px",
-      id: "svg-id",
-      lang: "en",
-      max: 10,
-      media: "all",
-      method: "get",
-      min: 0,
-      name: "svg-name",
-      style: { fill: "blue" },
-    });
-  });
-
-  it("should return an empty object when no SVG properties are present", () => {
-    const input = {
-      onClick: () => {},
-      onMouseOver: () => {},
-      custom: "not-a-svg-prop",
-    };
-
-    const output = svgPropertiesNoEvents(input);
-
-    expect(output).toEqual({});
-  });
-
-  it("should handle an empty object", () => {
-    const input = {};
-    const output = svgPropertiesNoEvents(input);
-    expect(output).toEqual({});
-  });
-
-  it("should filter to SVG properties and rename camelCase keys", () => {
-    type InputType = {
-      "aria-label"?: string;
-      className?: string;
-      color?: string;
-      height?: string;
-      id?: string;
-      lang?: string;
-      max: number;
-      media?: string;
-      method?: string;
-      min?: number;
-      name?: string;
-      style?: JSX.CSSProperties;
-      // Non-SVG properties
-      onClick?: () => void;
-      onMouseOver?: () => void;
-      custom?: string;
-    };
-    const input: InputType = {
-      "aria-label": "test",
-      className: "svg-class",
-      color: "red",
-      height: "100px",
-      id: "svg-id",
-      lang: "en",
-      max: 10,
-      media: "all",
-      method: "get",
-      min: 0,
-      name: "svg-name",
-      style: { fill: "blue" },
-      // Non-SVG properties
-      onClick: () => {},
-      onMouseOver: () => {},
-      custom: "not-a-svg-prop",
-    };
-
-    const output = svgPropertiesNoEvents(input);
-
-    // The result is a DOM-ready record (Record<string, unknown>); `width` wasn't in
-    // the input, so it's absent at runtime.
-    expect(output.width).toBeUndefined();
-
-    expect(output).toEqual({
-      "aria-label": "test",
-      class: "svg-class",
-      color: "red",
-      height: "100px",
-      id: "svg-id",
-      lang: "en",
-      max: 10,
-      media: "all",
-      method: "get",
-      min: 0,
-      name: "svg-name",
-      style: { fill: "blue" },
-    });
-  });
-
-  it("should include data-* attributes", () => {
-    const input = {
-      "data-test": "test-value",
-      "data-id": "123",
-      nonDataProp: "value",
-    };
-    const result = svgPropertiesNoEvents(input);
-    expect(result).toEqual({
-      "data-test": "test-value",
-      "data-id": "123",
-    });
-  });
-
-  it("should exclude symbols and numbers as keys", () => {
-    const sym = Symbol("test");
-    const input: Record<string, unknown> = {
-      [sym]: "symbol-value",
-      6: "number-value",
-      cx: 10,
-    };
-    const result = svgPropertiesNoEvents(input);
-    expect(result).toEqual({ cx: 10 });
-  });
-});
-
-describe("svgPropertiesNoEventsFromUnknown", () => {
-  // DEFERRED: 'should filter element props if given a ReactElement' — needs
-  // React-element introspection; see the file header note.
-
-  it.each([null, undefined, true, false, [], "string", 1, Symbol.for("key")] as const)(
-    "should return null when passed %s",
-    (input) => {
-      const result: Record<string, unknown> | null = svgPropertiesNoEventsFromUnknown(input);
-      expect(result).toBeNull();
-    },
-  );
-
-  describe("type matching ActiveDotType", () => {
-    it("should return null type when passed a boolean", () => {
-      const input = true;
-      const result: Record<string, unknown> | null = svgPropertiesNoEventsFromUnknown(input);
-      expect(result).toBeNull();
-    });
-
-    it("should return null type when passed a function", () => {
-      const input = () => {};
-      const result: Record<string, unknown> | null = svgPropertiesNoEventsFromUnknown(input);
-      expect(result).toBeNull();
-    });
-
-    // DEFERRED: two 'should return SVGProps type when passed a non-specific
-    // ReactElement' cases (<circle .../>) — React-element introspection.
-
-    it("should return SVGProps type when passed an object", () => {
-      type InputType = {
-        cx: number;
-        cy: number;
-        r?: number;
-        onClick?: () => void;
-        custom?: string;
-      };
-      const input: InputType = { cx: 10, cy: 10, r: 5 };
-      const result: Record<string, unknown> | null = svgPropertiesNoEventsFromUnknown(input);
-      expect(result).toEqual({ cx: 10, cy: 10, r: 5 });
-    });
-
-    it("should accept union types and return only SVG properties", () => {
-      type InputType =
-        | {
-            cx: number;
-            cy: number;
-            r?: number;
-            onClick?: () => void;
-            custom?: string;
-          }
-        | boolean;
-      function noInfer(i: InputType) {
-        return svgPropertiesNoEventsFromUnknown(i);
-      }
-      const input1: InputType = { cx: 10, cy: 10, r: 5 };
-      const result1: Record<string, unknown> | null = noInfer(input1);
-      expect(result1).toEqual({ cx: 10, cy: 10, r: 5 });
-
-      const input2: InputType = true;
-      const result2: Record<string, unknown> | null = noInfer(input2);
-      expect(result2).toBeNull();
-    });
-  });
-});