solid-recharts 0.2.0 → 1.0.0

package/test/polar/Radar.spec.tsx

@@ -1,265 +0,0 @@
-// Ported from recharts 3.8.1 test/polar/Radar.spec.tsx (commit 7a23854).
-//
-// Only the triage-approved impl-ready cases are ported here. The polygon
-// geometry tests inline the golden `d` (recharts' `expectRadarPolygons` value)
-// because the port has no `expectRadarPolygons` helper. `flush()` because Radar
-// registers via an effect and points compute from the store.
-import { createEffect, createSignal, flush } from "solid-js";
-import { Show } from "@solidjs/web";
-import type { JSX } from "@solidjs/web";
-import { describe, expect, it, vi } from "vitest";
-import { Radar, RadarChart } from "../../src";
-import type { RadarProps } from "../../src";
-import type { RadarShapeProps } from "../../src/polar/Radar";
-import { fireEvent, render, screen } from "@solidjs/testing-library";
-import { useAppSelector } from "../../src/state/hooks";
-import { selectPolarItemsSettings } from "../../src/state/selectors/polarSelectors";
-import { exampleRadarData } from "../_data";
-import type { RadarSettings } from "../../src/state/types/RadarSettings";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-import { selectRadiusAxis } from "../../src/state/selectors/polarAxisSelectors";
-import { defaultAxisId } from "../../src/state/cartesianAxisSlice";
-
-const GOLDEN_RADAR_PATH =
-  "M250,167.68L313.7527,186.2473L445.804,250L319.2965,319.2965L250,419.344L159.9146,340.0854L100.06,250L199.4136,199.4136L250,167.68Z";
-
-describe("<Radar />", () => {
-  describe("in simple chart with implicit axes", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} />
-        {props.children}
-      </RadarChart>
-    ));
-
-    it("should select radial axis settings", () => {
-      const { spy } = renderTestCase((state) => selectRadiusAxis(state, defaultAxisId));
-      expectLastCalledWith(spy, {
-        allowDataOverflow: false,
-        allowDecimals: false,
-        allowDuplicatedCategory: true,
-        dataKey: undefined,
-        domain: undefined,
-        id: 0,
-        includeHidden: false,
-        name: undefined,
-        reversed: false,
-        niceTicks: "auto",
-        scale: "auto",
-        tick: true,
-        tickCount: 5,
-        ticks: undefined,
-        type: "number",
-        unit: undefined,
-      });
-    });
-
-    it("should render a polygon", () => {
-      const { container } = render(() => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" isAnimationActive={false} />
-        </RadarChart>
-      ));
-      flush();
-
-      const polygon = container.querySelector(".recharts-radar-polygon path");
-      expect(polygon?.getAttribute("d")).toBe(GOLDEN_RADAR_PATH);
-      expect(polygon?.getAttribute("fill")).toBeNull();
-      expect(polygon?.getAttribute("fill-opacity")).toBeNull();
-    });
-  });
-
-  // Element/object-form shape/label/dot need React.cloneElement and are
-  // PERMANENT-N/A; the FUNCTION form is portable and ported below.
-  it("Render customized shape when shape is set to be a function", () => {
-    const CustomizedShape = (props: RadarShapeProps): JSX.Element => {
-      const d = props.points.reduce(
-        (result, entry, index) =>
-          result + (index ? `L${entry.x},${entry.y}` : `M${entry.x},${entry.y}`),
-        "",
-      );
-      return <path d={d} data-testid="customized-shape" />;
-    };
-
-    render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} shape={CustomizedShape} />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(screen.getAllByTestId("customized-shape")).toHaveLength(1);
-  });
-
-  it("Render customized label when label is set to be a function", () => {
-    const CustomizedLabel = (): JSX.Element => <text data-testid="customized-label">test</text>;
-
-    render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} label={CustomizedLabel} />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(screen.getAllByTestId("customized-label")).toHaveLength(exampleRadarData.length);
-  });
-
-  it("Render customized dot when dot is set to be a function", () => {
-    const CustomizedDot = (props: { cx?: number; cy?: number }): JSX.Element => (
-      <circle cx={props.cx} cy={props.cy} r={10} data-testid="customized-dot" />
-    );
-
-    render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar dataKey="value" isAnimationActive={false} dot={CustomizedDot} />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(screen.getAllByTestId("customized-dot")).toHaveLength(exampleRadarData.length);
-  });
-
-  // The reference titles this "react element" but the value is the FUNCTION form
-  // (`dot={props => <.../>}`), which is portable; the true react-element form
-  // (`dot={<Comp />}`) needs React.cloneElement and stays PERMANENT-N/A.
-  it("Render customized dot when dot is set via an inline render function", () => {
-    const CustomizedDot = (props: { cx?: number; cy?: number }): JSX.Element => (
-      <circle cx={props.cx} cy={props.cy} r={10} data-testid="customized-dot" />
-    );
-
-    render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <Radar
-          dataKey="value"
-          isAnimationActive={false}
-          dot={(props) => <CustomizedDot {...props} />}
-        />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(screen.getAllByTestId("customized-dot")).toHaveLength(exampleRadarData.length);
-  });
-
-  it("should render Radar in a custom component", () => {
-    const CustomRadar = (props: RadarProps) => {
-      return <Radar {...props} />;
-    };
-
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={exampleRadarData}>
-        <CustomRadar dataKey="value" isAnimationActive={false} />
-      </RadarChart>
-    ));
-    flush();
-
-    const polygon = container.querySelector(".recharts-radar-polygon path");
-    expect(polygon).not.toBeNull();
-    expect(polygon?.getAttribute("d")).toBe(GOLDEN_RADAR_PATH);
-    expect(polygon?.getAttribute("fill")).toBeNull();
-  });
-
-  it("Don't render polygon when data is empty", () => {
-    const { container } = render(() => (
-      <RadarChart width={500} height={500} data={[]}>
-        <Radar dataKey="value" isAnimationActive={false} />
-      </RadarChart>
-    ));
-    flush();
-
-    expect(container.querySelectorAll(".recharts-radar-polygon")).toHaveLength(0);
-  });
-
-  describe("events", () => {
-    // PERMANENT-N/A: the onMouseEnter/onMouseLeave cases assert the full
-    // InternalRadarProps payload via recharts' 2-arg props-first handler signature
-    // (the port forwards single-arg event-only handlers onto the polygon path), and
-    // every reference case is render-count coupled. The single-arg event-only
-    // assertions below ARE portable.
-    it("should fire onClick event when clicking on the radar polygon", () => {
-      const handleClick = vi.fn();
-      const { container } = render(() => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar dataKey="value" isAnimationActive={false} onClick={handleClick} />
-        </RadarChart>
-      ));
-      flush();
-
-      const polygon = container.querySelector(".recharts-polygon");
-      expect(polygon).not.toBeNull();
-      fireEvent.click(polygon!);
-      expect(handleClick).toHaveBeenCalled();
-      expectLastCalledWith(handleClick, expect.objectContaining({ type: "click" }));
-    });
-
-    it("should fire onTouchMove and onTouchEnd events when touching the radar polygon", () => {
-      const handleTouchMove = vi.fn();
-      const handleTouchEnd = vi.fn();
-      const { container } = render(() => (
-        <RadarChart width={500} height={500} data={exampleRadarData}>
-          <Radar
-            dataKey="value"
-            isAnimationActive={false}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-          />
-        </RadarChart>
-      ));
-      flush();
-
-      const polygon = container.querySelector(".recharts-polygon");
-      expect(polygon).not.toBeNull();
-      fireEvent.touchMove(polygon!, { touches: [{ clientX: 200, clientY: 200 }] });
-      expect(handleTouchMove).toHaveBeenCalled();
-      expectLastCalledWith(handleTouchMove, expect.objectContaining({ type: "touchmove" }));
-
-      fireEvent.touchEnd(polygon!);
-      expect(handleTouchEnd).toHaveBeenCalled();
-      expectLastCalledWith(handleTouchEnd, expect.objectContaining({ type: "touchend" }));
-    });
-  });
-
-  describe("state integration", () => {
-    it("should report its settings to Redux state, and remove it when removed from DOM", () => {
-      const polarItemsSpy = vi.fn();
-      const [showRadar, setShowRadar] = createSignal(true);
-      const Comp = (): null => {
-        const items = useAppSelector((state) => selectPolarItemsSettings(state, "angleAxis", 0));
-        createEffect(
-          () => items(),
-          (v) => polarItemsSpy(v),
-        );
-        return null;
-      };
-      render(() => (
-        <RadarChart width={100} height={100} data={exampleRadarData}>
-          <Show when={showRadar()}>
-            <Radar dataKey="value" />
-          </Show>
-          <Comp />
-        </RadarChart>
-      ));
-      flush();
-
-      const expectedPolarItemsSettings: RadarSettings = {
-        // `id` is a documented Solid deviation: recharts matches reference
-        // elements by object identity, but the port mints a stable id for
-        // proxy-safe removal. recharts' expected `radar-` substring still matches.
-        id: expect.stringMatching("radar-") as unknown as string,
-        type: "radar",
-        angleAxisId: 0,
-        data: undefined,
-        dataKey: "value",
-        hide: false,
-        radiusAxisId: 0,
-      };
-      expect(polarItemsSpy).toHaveBeenLastCalledWith([expectedPolarItemsSettings]);
-
-      setShowRadar(false);
-      flush();
-
-      expect(polarItemsSpy).toHaveBeenLastCalledWith([]);
-    });
-  });
-});

package/test/polar/Radar.typed.spec.tsx

@@ -1,119 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Radar, RadarChart, getRelativeCoordinate } from "../../src";
-import { render } from "@solidjs/testing-library";
-
-type ExampleDataPoint = {
-  value: number;
-  name: string;
-};
-
-const data: ReadonlyArray<ExampleDataPoint> = [
-  { value: 100, name: "a" },
-  { value: 80, name: "b" },
-  { value: 60, name: "c" },
-  { value: 40, name: "d" },
-  { value: 20, name: "e" },
-];
-
-describe("Radar with strong typing", () => {
-  describe("with all implicit types", () => {
-    it("should render Radar with correct data and correct dataKey", () => {
-      const { container } = render(() => (
-        <RadarChart data={data} width={400} height={400}>
-          <Radar dataKey="value" isAnimationActive={false} />
-        </RadarChart>
-      ));
-      expect(container.querySelectorAll(".recharts-radar-polygon")).toHaveLength(1);
-    });
-
-    it("should allow incorrect or non-existent dataKeys in implicit mode", () => {
-      render(() => (
-        <RadarChart data={data} width={400} height={400}>
-          <Radar dataKey="name" isAnimationActive={false} />
-          <Radar dataKey="foo" isAnimationActive={false} />
-        </RadarChart>
-      ));
-    });
-  });
-
-  describe("with explicit Radar type parameters", () => {
-    it("should allow correct dataKey when typed explicitly", () => {
-      render(() => (
-        <RadarChart data={data} width={400} height={400}>
-          <Radar<ExampleDataPoint> dataKey="value" isAnimationActive={false} />
-          <Radar<ExampleDataPoint>
-            dataKey={(entry: ExampleDataPoint) => entry.value}
-            isAnimationActive={false}
-          />
-        </RadarChart>
-      ));
-    });
-
-    it("should show errors when dataKey does not match explicit typing", () => {
-      render(() => (
-        <RadarChart data={data} width={400} height={400}>
-          {/* @ts-expect-error TypeScript is correct here - the dataKey does not match and this should be an error */}
-          <Radar<ExampleDataPoint, number> dataKey="name" isAnimationActive={false} />
-          <Radar<ExampleDataPoint, number>
-            /* @ts-expect-error TypeScript is correct here - the dataKey return type does not match and this should be an error */
-            dataKey={(entry: ExampleDataPoint) => entry.name}
-            isAnimationActive={false}
-          />
-        </RadarChart>
-      ));
-    });
-  });
-});
-
-describe("Radar event handlers", () => {
-  it("should allow calling getRelativeCoordinate with the type provided by the Solid event handler", () => {
-    /*
-     * SOLID DEVIATION: handlers are single-arg DOM handlers `(e) => ...`, not the
-     * reference's props-first `(data: InternalRadarProps, e) => ...` 2-arg form (there
-     * is no `InternalRadarProps` type and no props-first handler arity in the port).
-     * The (SVG) event arg is accepted by getRelativeCoordinate.
-     */
-    render(() => (
-      <RadarChart width={100} height={100}>
-        <Radar
-          dataKey="foo"
-          isAnimationActive={false}
-          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);
-          }}
-        />
-      </RadarChart>
-    ));
-    expect(true).toBe(true);
-  });
-});