solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/component/Tooltip/ActiveDot.spec.tsx

@@ -0,0 +1,370 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { fireEvent, render } from "@solidjs/testing-library";
+import {
+  Area,
+  AreaChart,
+  ComposedChart,
+  Line,
+  LineChart,
+  Radar,
+  RadarChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "../../../src";
+import { PageData } from "../../_data";
+import { expectTooltipNotVisible, showTooltip } from "./tooltipTestHelpers";
+import {
+  areaChartMouseHoverTooltipSelector,
+  composedChartMouseHoverTooltipSelector,
+  lineChartMouseHoverTooltipSelector,
+  radarChartMouseHoverTooltipSelector,
+} from "./tooltipMouseHoverSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { assertNotNull } from "../../helper/assertNotNull";
+
+/*
+ * Ported from recharts 3.8.1 test/component/Tooltip/ActiveDot.spec.tsx.
+ * Harness adaptations: React render -> Solid render(() => ...); userEvent/mouseOver
+ * trigger -> showTooltip helper (mouseMove); import React dropped.
+ *
+ * Cases NOT ported:
+ *  - "should clone custom Dot element and inject extra sneaky props" (all charts,
+ *    incl. RadarChart). src/component/ActivePoints.tsx renderActiveDot() returns a
+ *    custom JSX element as-is and does NOT clone it to inject the sneaky dot props
+ *    (no cloneElement equivalent), so the data-testid element has no injected attrs.
+ *
+ *  Radar activeDot IS now wired (src/polar/Radar.tsx); the default- and function-form
+ *  RadarChart cases are ported below.
+ */
+
+const commonChartProps = {
+  width: 400,
+  height: 400,
+  data: PageData,
+};
+
+describe("ActiveDot", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({ width: 100, height: 100 });
+  });
+
+  describe("as a child of AreaChart", () => {
+    it("should render default activeDot and give it props", () => {
+      const { container, debug } = render(() => (
+        <AreaChart {...commonChartProps}>
+          <Area dataKey="uv" />
+          <Tooltip />
+        </AreaChart>
+      ));
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, areaChartMouseHoverTooltipSelector, debug);
+      const activeDot = container.querySelector(".recharts-active-dot");
+      assertNotNull(activeDot);
+      expect(activeDot).toBeVisible();
+      expect(activeDot.getAttributeNames()).toEqual(["class"]);
+      expect(activeDot.getAttribute("class")).toEqual("recharts-layer recharts-active-dot");
+
+      const circle = activeDot.querySelector("circle");
+      assertNotNull(circle);
+      expect(circle).toBeVisible();
+      expect(circle.getAttribute("class")).toEqual("recharts-dot");
+      expect(circle.getAttribute("cx")).toEqual("161");
+      expect(circle.getAttribute("cy")).toEqual("102.5");
+      expect(circle.getAttribute("r")).toEqual("4");
+      expect(circle.getAttribute("fill")).toEqual("#3182bd");
+      expect(circle.getAttribute("stroke-width")).toEqual("2");
+      expect(circle.getAttribute("stroke")).toEqual("#fff");
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(activeDot).not.toBeVisible();
+    });
+
+    it("should render custom Dot component, give it props, and render what it returned", () => {
+      const spy = vi.fn();
+      const MyCustomDot = (props: unknown) => {
+        spy(props);
+        return <g data-testid="my-custom-dot" />;
+      };
+      const { container, debug } = render(() => (
+        <AreaChart {...commonChartProps}>
+          <Area dataKey="uv" activeDot={MyCustomDot} />
+          <Tooltip />
+        </AreaChart>
+      ));
+      expect(spy).toHaveBeenCalledTimes(0);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, areaChartMouseHoverTooltipSelector, debug);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(container.querySelector(".recharts-active-dot")).toBeVisible();
+      expect(spy).toHaveBeenCalledWith({
+        cx: 161,
+        cy: 102.5,
+        dataKey: "uv",
+        fill: "#3182bd",
+        index: 2,
+        payload: {
+          amt: 2400,
+          name: "Page C",
+          pv: 1398,
+          uv: 300,
+        },
+        r: 4,
+        stroke: "#fff",
+        strokeWidth: 2,
+        value: [0, 300],
+      });
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("as a child of LineChart", () => {
+    it("should render default activeDot and give it props", () => {
+      const { container, debug } = render(() => (
+        <LineChart {...commonChartProps}>
+          <Line dataKey="uv" />
+          <Tooltip />
+        </LineChart>
+      ));
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, lineChartMouseHoverTooltipSelector, debug);
+      const activeDot = container.querySelector(".recharts-active-dot");
+      assertNotNull(activeDot);
+      expect(activeDot).toBeVisible();
+      expect(activeDot.getAttributeNames()).toEqual(["class"]);
+      expect(activeDot.getAttribute("class")).toEqual("recharts-layer recharts-active-dot");
+
+      const circle = activeDot.querySelector("circle");
+      assertNotNull(circle);
+      expect(circle).toBeVisible();
+      expect(circle.getAttribute("class")).toEqual("recharts-dot");
+      expect(circle.getAttribute("cx")).toEqual("161");
+      expect(circle.getAttribute("cy")).toEqual("102.5");
+      expect(circle.getAttribute("r")).toEqual("4");
+      expect(circle.getAttribute("fill")).toEqual("#3182bd");
+      expect(circle.getAttribute("stroke-width")).toEqual("2");
+      expect(circle.getAttribute("stroke")).toEqual("#fff");
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(activeDot).not.toBeVisible();
+    });
+
+    it("should render custom Dot component, give it props, and render what it returned", () => {
+      const spy = vi.fn();
+      const MyCustomDot = (props: unknown) => {
+        spy(props);
+        return <g data-testid="my-custom-dot" />;
+      };
+      const { container, debug } = render(() => (
+        <LineChart {...commonChartProps}>
+          <Line dataKey="uv" activeDot={MyCustomDot} />
+          <Tooltip />
+        </LineChart>
+      ));
+      expect(spy).toHaveBeenCalledTimes(0);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, lineChartMouseHoverTooltipSelector, debug);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(container.querySelector(".recharts-active-dot")).toBeVisible();
+      expect(spy).toHaveBeenCalledWith({
+        cx: 161,
+        cy: 102.5,
+        dataKey: "uv",
+        fill: "#3182bd",
+        index: 2,
+        payload: {
+          amt: 2400,
+          name: "Page C",
+          pv: 1398,
+          uv: 300,
+        },
+        r: 4,
+        stroke: "#fff",
+        strokeWidth: 2,
+        value: 300,
+      });
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("LineChart domain visibility guard", () => {
+    const domainTestData = [
+      { x: 0.9, y: 10 },
+      { x: 1.3, y: 12 },
+    ];
+    const chartMargin = { top: 20, right: 20, bottom: 20, left: 20 };
+
+    it.each([true, false])(
+      "should suppress active dot and tooltip when all data is outside the visible domain (allowDataOverflow=%s)",
+      (allowDataOverflow) => {
+        const { container } = render(() => (
+          <LineChart width={400} height={240} data={domainTestData} margin={chartMargin}>
+            <XAxis
+              dataKey="x"
+              type="number"
+              domain={[1.01, 1.15]}
+              allowDataOverflow={allowDataOverflow}
+            />
+            <YAxis type="number" domain={[0, 20]} allowDataOverflow={allowDataOverflow} />
+            <Tooltip />
+            <Line dataKey="y" isAnimationActive={false} />
+          </LineChart>
+        ));
+
+        showTooltip(container, lineChartMouseHoverTooltipSelector);
+
+        expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+        expect(container.querySelector(".recharts-tooltip-cursor")).not.toBeInTheDocument();
+        expect(container.querySelector(".recharts-tooltip-wrapper")).toBeInTheDocument();
+        expectTooltipNotVisible(container);
+      },
+    );
+  });
+
+  describe("as a child of ComposedChart with Line", () => {
+    it("should render default activeDot and give it props", () => {
+      const { container, debug } = render(() => (
+        <ComposedChart {...commonChartProps}>
+          <Line dataKey="uv" />
+          <Tooltip />
+        </ComposedChart>
+      ));
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, composedChartMouseHoverTooltipSelector, debug);
+      const activeDot = container.querySelector(".recharts-active-dot");
+      assertNotNull(activeDot);
+      expect(activeDot).toBeVisible();
+      expect(activeDot.getAttributeNames()).toEqual(["class"]);
+      expect(activeDot.getAttribute("class")).toEqual("recharts-layer recharts-active-dot");
+
+      const circle = activeDot.querySelector("circle");
+      assertNotNull(circle);
+      expect(circle).toBeVisible();
+      expect(circle.getAttribute("class")).toEqual("recharts-dot");
+      expect(circle.getAttribute("cx")).toEqual("161");
+      expect(circle.getAttribute("cy")).toEqual("102.5");
+      expect(circle.getAttribute("r")).toEqual("4");
+      expect(circle.getAttribute("fill")).toEqual("#3182bd");
+      expect(circle.getAttribute("stroke-width")).toEqual("2");
+      expect(circle.getAttribute("stroke")).toEqual("#fff");
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(activeDot).not.toBeVisible();
+    });
+
+    it("should render custom Dot component, give it props, and render what it returned", () => {
+      const spy = vi.fn();
+      const MyCustomDot = (props: unknown) => {
+        spy(props);
+        return <g data-testid="my-custom-dot" />;
+      };
+      const { container, debug } = render(() => (
+        <ComposedChart {...commonChartProps}>
+          <Line dataKey="uv" activeDot={MyCustomDot} />
+          <Tooltip />
+        </ComposedChart>
+      ));
+      expect(spy).toHaveBeenCalledTimes(0);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, composedChartMouseHoverTooltipSelector, debug);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(container.querySelector(".recharts-active-dot")).toBeVisible();
+      expect(spy).toHaveBeenCalledWith({
+        cx: 161,
+        cy: 102.5,
+        dataKey: "uv",
+        fill: "#3182bd",
+        index: 2,
+        payload: {
+          amt: 2400,
+          name: "Page C",
+          pv: 1398,
+          uv: 300,
+        },
+        r: 4,
+        stroke: "#fff",
+        strokeWidth: 2,
+        value: 300,
+      });
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("as a child of RadarChart", () => {
+    it("should render default activeDot and give it props", () => {
+      const { container, debug } = render(() => (
+        <RadarChart height={600} width={600} data={PageData}>
+          <Radar dataKey="uv" stroke="blue" fill="red" />
+          <Tooltip />
+        </RadarChart>
+      ));
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, radarChartMouseHoverTooltipSelector, debug);
+      const activeDot = container.querySelector(".recharts-active-dot");
+      assertNotNull(activeDot);
+      expect(activeDot).toBeVisible();
+      expect(activeDot.getAttributeNames()).toEqual(["class"]);
+      expect(activeDot.getAttribute("class")).toEqual("recharts-layer recharts-active-dot");
+
+      const circle = activeDot.querySelector("circle");
+      assertNotNull(circle);
+      expect(circle).toBeVisible();
+      expect(circle.getAttribute("class")).toEqual("recharts-dot");
+      expect(circle.getAttribute("cx")).toEqual("203.42950722399726");
+      expect(circle.getAttribute("cy")).toEqual("244.245");
+      expect(circle.getAttribute("r")).toEqual("4");
+      // stroke ("blue", != "none") wins over fill as the dot color.
+      expect(circle.getAttribute("fill")).toEqual("blue");
+      expect(circle.getAttribute("stroke-width")).toEqual("2");
+      expect(circle.getAttribute("stroke")).toEqual("#fff");
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(activeDot).not.toBeVisible();
+    });
+
+    it("should render custom Dot component, give it props, and render what it returned", () => {
+      const spy = vi.fn();
+      const MyCustomDot = (props: unknown) => {
+        spy(props);
+        return <g data-testid="my-custom-dot" />;
+      };
+      const { container, debug } = render(() => (
+        <RadarChart height={600} width={600} data={PageData}>
+          <Radar dataKey="uv" activeDot={MyCustomDot} stroke="blue" fill="red" />
+          <Tooltip />
+        </RadarChart>
+      ));
+      expect(spy).toHaveBeenCalledTimes(0);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+      const tooltipTrigger = showTooltip(container, radarChartMouseHoverTooltipSelector, debug);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(container.querySelector(".recharts-active-dot")).toBeVisible();
+      expect(spy).toHaveBeenCalledWith({
+        cx: 203.42950722399726,
+        cy: 244.245,
+        dataKey: "uv",
+        index: 5,
+        payload: {
+          amt: 2400,
+          name: "Page F",
+          pv: 4800,
+          uv: 189,
+        },
+        r: 4,
+        stroke: "#fff",
+        strokeWidth: 2,
+        value: 189,
+        fill: "blue",
+      });
+
+      fireEvent.mouseOut(tooltipTrigger);
+      expect(container.querySelector(".recharts-active-dot")).not.toBeInTheDocument();
+    });
+  });
+});

package/test/component/Tooltip/Tooltip.animation.spec.tsx

@@ -0,0 +1,209 @@
+// Ported from recharts 3.8.1 test/component/Tooltip/Tooltip.animation.spec.tsx.
+//
+// The tooltip "animation" here is a CSS transition on the wrapper position
+// (`transition: transform 400ms ease`), produced by TooltipBoundingBox's
+// resolveTransitionProperty — NOT the JS/CSS render-prop animation drivers, so no
+// MockProgressAnimationManager is involved. Tier-A assertions are byte-identical;
+// the only harness adaptations are React→Solid render (via createSelectorTestCase),
+// the no-destructure `props.children` wrapper, and selectIsTooltipActive imported
+// from tooltipSelectors (there is no `selectors` barrel in the Solid port).
+import { describe, it, expect, beforeEach } from "vitest";
+import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
+import { Line, LineChart, Tooltip } from "../../../src";
+import {
+  expectTooltipCoordinate,
+  expectTooltipNotVisible,
+  getTooltip,
+  hideTooltip,
+  showTooltipOnCoordinate,
+} from "./tooltipTestHelpers";
+import { lineChartMouseHoverTooltipSelector } from "./tooltipMouseHoverSelectors";
+import { selectIsTooltipActive } from "../../../src/state/selectors/tooltipSelectors";
+import { mockGetBoundingClientRect } from "../../helper/mockGetBoundingClientRect";
+import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
+
+describe("Tooltip animation", () => {
+  beforeEach(() => {
+    mockGetBoundingClientRect({
+      width: 10,
+      height: 10,
+    });
+  });
+
+  describe("with default content", () => {
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart
+        width={100}
+        height={100}
+        data={[
+          { name: "A", value: 1 },
+          { name: "B", value: 2 },
+        ]}
+      >
+        <Line dataKey="value" />
+        {props.children}
+        <Tooltip />
+      </LineChart>
+    ));
+
+    describe("when tooltip is displayed first time", () => {
+      function prime(container: Element) {
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 20,
+          clientY: 20,
+        });
+      }
+
+      it("should select isActive: true", () => {
+        const { container, spy } = renderTestCase((state) =>
+          selectIsTooltipActive(state, "axis", "hover", undefined),
+        );
+        expectLastCalledWith(spy, { activeIndex: null, isActive: false });
+        prime(container);
+        expectLastCalledWith(spy, { activeIndex: "0", isActive: true });
+      });
+
+      it("should animate towards the final position", () => {
+        const { container } = renderTestCase();
+        prime(container);
+
+        expectTooltipCoordinate(container, {
+          x: 15,
+          y: 30,
+        });
+      });
+
+      it("should start at 0,0", () => {
+        const { container } = renderTestCase();
+        prime(container);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).toHaveStyle({
+          top: 0,
+          left: 0,
+          transform: "translate(15px, 30px)",
+          transition: "transform 400ms ease",
+        });
+      });
+    });
+
+    describe("when tooltip hides, and then shows again", () => {
+      function prime(container: Element) {
+        expectTooltipNotVisible(container);
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 20,
+          clientY: 20,
+        });
+        hideTooltip(container, lineChartMouseHoverTooltipSelector);
+        expectTooltipNotVisible(container);
+
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 80,
+          clientY: 80,
+        });
+        return getTooltip(container);
+      }
+
+      it("should animate towards the final position", () => {
+        const { container } = renderTestCase();
+        const tooltip = prime(container);
+
+        expect(tooltip).toHaveStyle({
+          top: 0,
+          left: 0,
+          transform: "translate(75px, 60px)",
+          transition: "transform 400ms ease",
+        });
+      });
+    });
+  });
+
+  describe("with custom content", () => {
+    const MyCustomContent = () => <p>My Custom Content</p>;
+    const renderTestCase = createSelectorTestCase((props) => (
+      <LineChart
+        width={100}
+        height={100}
+        data={[
+          { name: "A", value: 1 },
+          { name: "B", value: 2 },
+        ]}
+      >
+        <Line dataKey="value" />
+        {props.children}
+        <Tooltip content={MyCustomContent} />
+      </LineChart>
+    ));
+
+    describe("when tooltip is displayed first time", () => {
+      function prime(container: Element) {
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 20,
+          clientY: 20,
+        });
+      }
+
+      it("should select isActive: true", () => {
+        const { container, spy } = renderTestCase((state) =>
+          selectIsTooltipActive(state, "axis", "hover", undefined),
+        );
+        expectLastCalledWith(spy, { activeIndex: null, isActive: false });
+        prime(container);
+        expectLastCalledWith(spy, { activeIndex: "0", isActive: true });
+      });
+
+      it("should animate towards the final position", () => {
+        const { container } = renderTestCase();
+        prime(container);
+
+        expectTooltipCoordinate(container, {
+          x: 15,
+          y: 30,
+        });
+      });
+
+      it("should start at 0,0", () => {
+        const { container } = renderTestCase();
+        prime(container);
+
+        const tooltip = getTooltip(container);
+        expect(tooltip).toHaveStyle({
+          top: 0,
+          left: 0,
+          transform: "translate(15px, 30px)",
+          transition: "transform 400ms ease",
+        });
+      });
+    });
+
+    describe("when tooltip hides, and then shows again", () => {
+      function prime(container: Element) {
+        expectTooltipNotVisible(container);
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 20,
+          clientY: 20,
+        });
+        hideTooltip(container, lineChartMouseHoverTooltipSelector);
+        expectTooltipNotVisible(container);
+
+        showTooltipOnCoordinate(container, lineChartMouseHoverTooltipSelector, {
+          clientX: 80,
+          clientY: 80,
+        });
+        return getTooltip(container);
+      }
+
+      it("should animate towards the final position", () => {
+        const { container } = renderTestCase();
+        const tooltip = prime(container);
+
+        expect(tooltip).toHaveStyle({
+          top: 0,
+          left: 0,
+          transform: "translate(75px, 60px)",
+          transition: "transform 400ms ease",
+        });
+      });
+    });
+  });
+});