solid-recharts 0.2.0 → 1.0.0

package/test/state/throttling.spec.ts

@@ -1,200 +0,0 @@
-// Ported from recharts 3.8.1 test/state/throttling.spec.ts (commit 7a23854).
-// Adapted: Redux dispatch → store.actions + dispatchMouseMove / dispatchKeyDown /
-// dispatchExternalEvent; React act() → Solid flush().
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { flush } from "solid-js";
-import type { HTMLMousePointer } from "../../src/util/types";
-import { createRechartsStore } from "../../src/state/store";
-import { dispatchMouseMove } from "../../src/state/mouseEventsMiddleware";
-import { dispatchKeyDown } from "../../src/state/keyboardEventsMiddleware";
-import { dispatchExternalEvent } from "../../src/state/externalEventsMiddleware";
-import { getMockDomRect } from "../helper/mockGetBoundingClientRect";
-
-function createMockMousePointer(x: number, y: number): HTMLMousePointer {
-  return {
-    clientX: x,
-    clientY: y,
-    currentTarget: {
-      getBoundingClientRect: () => getMockDomRect({ width: 500, height: 300 }),
-      offsetWidth: 500,
-      offsetHeight: 300,
-    },
-  };
-}
-
-describe("Throttling Middleware", () => {
-  let store: ReturnType<typeof createRechartsStore>;
-
-  beforeEach(() => {
-    store = createRechartsStore();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-    vi.useFakeTimers({
-      toFake: ["requestAnimationFrame", "cancelAnimationFrame"],
-    });
-  });
-
-  describe("mouseMoveMiddleware", () => {
-    it("should use RAF by default", () => {
-      store.actions.eventSettings.setEventSettings({
-        throttleDelay: "raf",
-        throttledEvents: "all",
-      });
-      flush();
-      const move1 = createMockMousePointer(50, 50);
-
-      dispatchMouseMove(store, move1);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.runAllTimers();
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should use setTimeout when throttleDelay is a number", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
-      flush();
-      const move1 = createMockMousePointer(50, 50);
-
-      dispatchMouseMove(store, move1);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(50);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(50);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should run synchronously when throttledEvents does not include mousemove", () => {
-      store.actions.eventSettings.setEventSettings({
-        throttleDelay: "raf",
-        throttledEvents: ["click"],
-      });
-      flush();
-      const move1 = createMockMousePointer(50, 50);
-
-      dispatchMouseMove(store, move1);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should run synchronously when throttledEvents is empty", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: "raf", throttledEvents: [] });
-      flush();
-      const move1 = createMockMousePointer(50, 50);
-
-      dispatchMouseMove(store, move1);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should throttle mousemove events (not debounce) when throttleDelay is a number", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
-      flush();
-      const move1 = createMockMousePointer(50, 50);
-      const move2 = createMockMousePointer(60, 60);
-
-      dispatchMouseMove(store, move1);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(50);
-      dispatchMouseMove(store, move2);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(60);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-  });
-
-  describe("keyboardEventsMiddleware", () => {
-    it("should throttle keydown events (not debounce) when throttleDelay is a number", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
-      flush();
-
-      dispatchKeyDown(store, "ArrowRight");
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(50);
-      dispatchKeyDown(store, "ArrowRight");
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.advanceTimersByTime(60);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-  });
-
-  describe("externalEventsMiddleware", () => {
-    const mockHandler = vi.fn();
-    const mockEvent = {
-      type: "click",
-      currentTarget: document.createElement("div"),
-    };
-
-    beforeEach(() => {
-      mockHandler.mockClear();
-    });
-
-    it("should execute first event immediately (leading edge) when throttleDelay is a number", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
-      flush();
-
-      dispatchExternalEvent(store, {
-        reactEvent: mockEvent,
-        handler: mockHandler,
-      });
-
-      expect(mockHandler).toHaveBeenCalledTimes(1);
-      expect(vi.getTimerCount()).toBe(1);
-
-      flush();
-      vi.runAllTimers();
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should throttle click event (leading + trailing) when configured", () => {
-      store.actions.eventSettings.setEventSettings({ throttleDelay: 100, throttledEvents: "all" });
-      flush();
-
-      dispatchExternalEvent(store, {
-        reactEvent: mockEvent,
-        handler: mockHandler,
-      });
-      expect(mockHandler).toHaveBeenCalledTimes(1);
-
-      dispatchExternalEvent(store, {
-        reactEvent: mockEvent,
-        handler: mockHandler,
-      });
-      expect(mockHandler).toHaveBeenCalledTimes(1);
-
-      flush();
-      vi.advanceTimersByTime(110);
-      expect(mockHandler).toHaveBeenCalledTimes(2);
-      expect(vi.getTimerCount()).toBe(0);
-    });
-
-    it("should NOT throttle click event when not in allowlist", () => {
-      store.actions.eventSettings.setEventSettings({
-        throttleDelay: 100,
-        throttledEvents: ["mousemove"],
-      });
-      flush();
-
-      dispatchExternalEvent(store, {
-        reactEvent: mockEvent,
-        handler: mockHandler,
-      });
-
-      expect(vi.getTimerCount()).toBe(0);
-      expect(mockHandler).toHaveBeenCalled();
-    });
-  });
-});

package/test/state/zIndexSlice.spec.ts

@@ -1,85 +0,0 @@
-// Solid-recharts spec (no recharts counterpart): regression tests for the
-// zIndex slice's per-store isolation. The slice once shallow-copied
-// `initialZIndexState.zIndexMap`, so every chart store wrapped the SAME
-// module-level ZIndexEntry objects — one chart registering its portal <g>
-// overwrote every other chart's portal element and graphical items portal'd
-// into a different chart's svg (bars rendered inside a sibling pie chart).
-import { describe, expect, it } from "vitest";
-import { flush } from "solid-js";
-import { createRechartsStore } from "../../src/state/store";
-import { initialZIndexState } from "../../src/state/zIndexSlice";
-import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
-import { selectZIndexPortalElement } from "../../src/zIndex/zIndexSelectors";
-import { assertNotNull } from "../helper/assertNotNull";
-
-describe("zIndexSlice", () => {
-  it("keeps portal element registrations isolated between two stores", () => {
-    const storeA = createRechartsStore();
-    const storeB = createRechartsStore();
-    const elementA = document.createElement("g");
-    const elementB = document.createElement("g");
-
-    storeA.actions.zIndex.registerZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      element: elementA,
-      isPanorama: false,
-    });
-    flush();
-    storeB.actions.zIndex.registerZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      element: elementB,
-      isPanorama: false,
-    });
-    flush();
-
-    // Pre-fix, B's registration overwrote the shared default entry, so A
-    // resolved B's element here.
-    expect(selectZIndexPortalElement(storeA.state, DefaultZIndexes.bar, false)).toBe(elementA);
-    expect(selectZIndexPortalElement(storeB.state, DefaultZIndexes.bar, false)).toBe(elementB);
-  });
-
-  it("does not mutate the module-level initial state when registering", () => {
-    const store = createRechartsStore();
-    const element = document.createElement("g");
-
-    store.actions.zIndex.registerZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      element,
-      isPanorama: false,
-    });
-    flush();
-
-    const initialEntry = initialZIndexState.zIndexMap[DefaultZIndexes.bar];
-    assertNotNull(initialEntry);
-    expect(initialEntry.element).toBeUndefined();
-    expect(initialEntry.consumers).toBe(0);
-  });
-
-  it("unregistering an element in one store leaves the other store's element intact", () => {
-    const storeA = createRechartsStore();
-    const storeB = createRechartsStore();
-    const elementA = document.createElement("g");
-    const elementB = document.createElement("g");
-
-    storeA.actions.zIndex.registerZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      element: elementA,
-      isPanorama: false,
-    });
-    storeB.actions.zIndex.registerZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      element: elementB,
-      isPanorama: false,
-    });
-    flush();
-
-    storeB.actions.zIndex.unregisterZIndexPortalElement({
-      zIndex: DefaultZIndexes.bar,
-      isPanorama: false,
-    });
-    flush();
-
-    expect(selectZIndexPortalElement(storeA.state, DefaultZIndexes.bar, false)).toBe(elementA);
-    expect(selectZIndexPortalElement(storeB.state, DefaultZIndexes.bar, false)).toBeUndefined();
-  });
-});

package/test/synchronisation/useChartSynchronisation.spec.tsx

@@ -1,225 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
-
-import { BarChart, Bar, Tooltip, XAxis } from "../../src";
-import { PageData } from "../_data";
-import { selectSyncId } from "../../src/state/selectors/rootPropsSelectors";
-import {
-  TOOLTIP_SYNC_EVENT,
-  syncEventCenter,
-  type TooltipSyncListener,
-} from "../../src/synchronisation/syncRegistry";
-import { createSelectorTestCase } from "../helper/createSelectorTestCase";
-import { hideTooltip, showTooltip } from "../component/Tooltip/tooltipTestHelpers";
-import { barChartMouseHoverTooltipSelector } from "../component/Tooltip/tooltipMouseHoverSelectors";
-import { mockGetBoundingClientRect } from "../helper/mockGetBoundingClientRect";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-
-/*
- * Ported from recharts 3.8.1 test/synchronisation/useChartSynchronisation.spec.tsx.
- *
- * Solid adaptations:
- *  - recharts emits over the mitt `eventCenter`; the Solid port emits over
- *    `syncEventCenter` (src/synchronisation/syncRegistry.ts), which mirrors mitt's
- *    `on`/`off`/`emit` surface. The spy subscribes there.
- *  - recharts' payload is a Redux `setSyncInteraction(payload)` action object;
- *    in the Solid port `setSyncInteraction` is a void store mutator, so the
- *    registry carries the *plain* TooltipSyncState payload — the spy asserts that
- *    object directly (it's identical to recharts' `action.payload`).
- *  - State settles with Solid `flush()` (inside the test helpers) rather than
- *    fake timers / Redux autobatch.
- */
-
-describe("useTooltipChartSynchronisation", () => {
-  let eventSpy: Mock;
-  let listener: TooltipSyncListener;
-
-  beforeEach(() => {
-    eventSpy = vi.fn();
-    listener = (syncId, payload, emitter) => eventSpy(syncId, payload, emitter);
-    syncEventCenter.on(TOOLTIP_SYNC_EVENT, listener);
-    mockGetBoundingClientRect({ width: 100, height: 100 });
-  });
-
-  afterEach(() => {
-    syncEventCenter.off(TOOLTIP_SYNC_EVENT, listener);
-  });
-
-  describe("when syncId is set and Tooltip is present", () => {
-    const viewBox = {
-      height: 390,
-      width: 790,
-      x: 5,
-      y: 5,
-    };
-
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
-        <Bar dataKey="uv" />
-        <Tooltip />
-        {props.children}
-      </BarChart>
-    ));
-
-    it("should select syncId from the state", () => {
-      const { spy } = renderTestCase(selectSyncId);
-      expectLastCalledWith(spy, "my-sync-id");
-    });
-
-    it("should send one sync event on the initial render", () => {
-      renderTestCase();
-      expect(eventSpy).toHaveBeenCalledTimes(1);
-      expect(eventSpy).toHaveBeenLastCalledWith(
-        "my-sync-id",
-        {
-          active: false,
-          coordinate: undefined,
-          dataKey: undefined,
-          index: null,
-          label: undefined,
-          sourceViewBox: viewBox,
-          graphicalItemId: undefined,
-        },
-        expect.any(Symbol),
-      );
-    });
-
-    it("should send a sync event after mouse move, and another after mouse leave", () => {
-      const { container } = renderTestCase();
-      eventSpy.mockClear();
-      showTooltip(container, barChartMouseHoverTooltipSelector);
-      expect(eventSpy).toHaveBeenCalledTimes(1);
-      expect(eventSpy).toHaveBeenLastCalledWith(
-        "my-sync-id",
-        {
-          active: true,
-          coordinate: {
-            x: 202.5,
-            y: 200,
-          },
-          dataKey: undefined,
-          index: "1",
-          label: "1",
-          sourceViewBox: viewBox,
-          graphicalItemId: undefined,
-        },
-        expect.any(Symbol),
-      );
-
-      hideTooltip(container, barChartMouseHoverTooltipSelector);
-      expect(eventSpy).toHaveBeenCalledTimes(2);
-      expect(eventSpy).toHaveBeenLastCalledWith(
-        "my-sync-id",
-        {
-          active: false,
-          coordinate: {
-            x: 202.5,
-            y: 200,
-          },
-          dataKey: undefined,
-          index: null,
-          label: undefined,
-          sourceViewBox: viewBox,
-          graphicalItemId: undefined,
-        },
-        expect.any(Symbol),
-      );
-    });
-  });
-
-  describe("with XAxis and dataKey", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
-        <Bar dataKey="uv" />
-        <XAxis dataKey="name" />
-        <Tooltip />
-        {props.children}
-      </BarChart>
-    ));
-
-    it("should send the XAxis label as activeLabel", () => {
-      const { container } = renderTestCase();
-      eventSpy.mockClear();
-      showTooltip(container, barChartMouseHoverTooltipSelector);
-      expect(eventSpy).toHaveBeenCalledTimes(1);
-      expect(eventSpy).toHaveBeenLastCalledWith(
-        "my-sync-id",
-        {
-          active: true,
-          coordinate: {
-            x: 202.5,
-            y: 200,
-          },
-          dataKey: undefined,
-          index: "1",
-          label: "Page B",
-          sourceViewBox: {
-            height: 360,
-            width: 790,
-            x: 5,
-            y: 5,
-          },
-          graphicalItemId: undefined,
-        },
-        expect.any(Symbol),
-      );
-    });
-  });
-
-  describe("when syncId is set but Tooltip is not present", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={PageData} syncId="my-sync-id">
-        <Bar dataKey="uv" />
-        {props.children}
-      </BarChart>
-    ));
-
-    it("should select syncId from the state", () => {
-      const { spy } = renderTestCase(selectSyncId);
-      expectLastCalledWith(spy, "my-sync-id");
-    });
-
-    it("should not send any sync events", () => {
-      renderTestCase();
-      expect(eventSpy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("when syncId is not set and Tooltip is not present", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={PageData}>
-        <Bar dataKey="uv" />
-        {props.children}
-      </BarChart>
-    ));
-
-    it("should select syncId from the state", () => {
-      const { spy } = renderTestCase(selectSyncId);
-      expectLastCalledWith(spy, undefined);
-    });
-
-    it("should not send any sync events", () => {
-      renderTestCase();
-      expect(eventSpy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("when syncId is not set but Tooltip is present", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={800} height={400} data={PageData}>
-        <Bar dataKey="uv" />
-        <Tooltip />
-        {props.children}
-      </BarChart>
-    ));
-
-    it("should select syncId from the state", () => {
-      const { spy } = renderTestCase(selectSyncId);
-      expectLastCalledWith(spy, undefined);
-    });
-
-    it("should not send any sync events", () => {
-      renderTestCase();
-      expect(eventSpy).not.toHaveBeenCalled();
-    });
-  });
-});

package/test/util/BarUtils.spec.ts

@@ -1,39 +0,0 @@
-import { describe, test, expect, vi } from "vitest";
-import { minPointSizeCallback } from "../../src/util/BarUtils";
-
-// Ported from recharts 3.8.1 test/util/BarUtils.spec.tsx.
-
-describe("BarUtils", () => {
-  describe("minPointSizeCallback", () => {
-    test("should return a number if number is passed", () => {
-      const minPointSize = minPointSizeCallback(5)(1, 0);
-      expect(minPointSize).toEqual(5);
-    });
-
-    test("should return a number if a function is passed that returns a number", () => {
-      const spy = vi.fn().mockReturnValue(10);
-      const minPointSize = minPointSizeCallback(spy)(200, 0);
-      expect(spy).toHaveBeenCalledWith(200, 0);
-      expect(minPointSize).toEqual(10);
-    });
-
-    test("should return a number if a function is passed that takes null and returns a number", () => {
-      const spy = vi.fn().mockReturnValue(10);
-      const minPointSize = minPointSizeCallback(spy)(null, 0);
-      expect(spy).toHaveBeenCalledWith(null, 0);
-      expect(minPointSize).toEqual(10);
-    });
-
-    test("should return a number if a function is passed that takes undefined and returns a number", () => {
-      const spy = vi.fn().mockReturnValue(10);
-      const minPointSize = minPointSizeCallback(spy)(undefined, 0);
-      expect(spy).toHaveBeenCalledWith(undefined, 0);
-      expect(minPointSize).toEqual(10);
-    });
-
-    test("should throw an invariant when any other datatype is passed as value", () => {
-      const spy = vi.fn().mockReturnValue(10);
-      expect(() => minPointSizeCallback(spy, 1)("100", 0)).toThrow();
-    });
-  });
-});