solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/cartesian/YAxis/YAxis.interval-zero.spec.tsx

@@ -0,0 +1,88 @@
+// Ported from recharts 3.8.1 test/cartesian/YAxis/YAxis.interval-zero.spec.tsx (commit 7a23854).
+import { flush } from "solid-js";
+import { describe, expect, it } from "vitest";
+import { Line, LineChart, XAxis, YAxis } from "../../../src";
+import { render } from "@solidjs/testing-library";
+
+describe("YAxis interval={0} with custom ticks - comprehensive tests", () => {
+  const data = [
+    { name: "A", value: -30 },
+    { name: "B", value: -10 },
+    { name: "C", value: 0 },
+    { name: "D", value: 10 },
+    { name: "E", value: 30 },
+  ];
+
+  const customTicks = [-35, -25, -15, -5, 0, 5, 15, 25, 35];
+
+  const yAxisTickTexts = (container: Element): ReadonlyArray<string | null> =>
+    Array.from(
+      container.querySelectorAll(".recharts-yAxis .recharts-cartesian-axis-tick-value"),
+    ).map((tick) => tick.textContent);
+
+  it("should display all 9 ticks with interval={0} - standard size", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis domain={[-35, 35]} interval={0} ticks={customTicks} />
+        <Line dataKey="value" />
+      </LineChart>
+    ));
+    flush();
+
+    expect(yAxisTickTexts(container)).toEqual([
+      "-35",
+      "-25",
+      "-15",
+      "-5",
+      "0",
+      "5",
+      "15",
+      "25",
+      "35",
+    ]);
+  });
+
+  it("should display all 9 ticks with interval={0} - small height", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={200} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis domain={[-35, 35]} interval={0} ticks={customTicks} />
+        <Line dataKey="value" />
+      </LineChart>
+    ));
+    flush();
+
+    const tickTexts = yAxisTickTexts(container);
+    expect(tickTexts.length).toBe(9);
+    expect(tickTexts).toContain("0");
+  });
+
+  it("should display all 9 ticks with interval={0} and large minTickGap", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis domain={[-35, 35]} interval={0} ticks={customTicks} minTickGap={20} />
+        <Line dataKey="value" />
+      </LineChart>
+    ));
+    flush();
+
+    const tickTexts = yAxisTickTexts(container);
+    expect(tickTexts.length).toBe(9);
+    expect(tickTexts).toContain("0");
+  });
+
+  it("should respect interval={1} and skip every other tick", () => {
+    const { container } = render(() => (
+      <LineChart width={500} height={300} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis domain={[-35, 35]} interval={1} ticks={customTicks} />
+        <Line dataKey="value" />
+      </LineChart>
+    ));
+    flush();
+
+    expect(yAxisTickTexts(container)).toEqual(["-35", "-15", "0", "15", "35"]);
+  });
+});

package/test/cartesian/YAxis/YAxis.label.spec.tsx

@@ -0,0 +1,219 @@
+import { describe, it, expect } from "vitest";
+import { YAxis, Label, AreaChart, Area } from "../../../src";
+import { render, screen } from "@solidjs/testing-library";
+import { PageData } from "../../_data";
+import { assertNotNull } from "../../helper/assertNotNull";
+
+type ExpectedLabel = {
+  textContent: string | null;
+  transform: string | null;
+  x: string | null;
+  y: string | null;
+};
+
+function expectYAxisLabel(
+  container: Element,
+  expectedLabels: ReadonlyArray<ExpectedLabel>,
+): ReadonlyArray<Element> {
+  assertNotNull(container);
+
+  const labelElements = Array.from(container.querySelectorAll(".recharts-label"));
+
+  const actualLabels: ReadonlyArray<ExpectedLabel> = labelElements.map((label) => ({
+    textContent: label.textContent,
+    transform: label.getAttribute("transform"),
+    x: label.getAttribute("x"),
+    y: label.getAttribute("y"),
+  }));
+
+  expect(actualLabels).toEqual(expectedLabels);
+
+  return labelElements;
+}
+
+describe("<YAxis /> Label", () => {
+  describe("label prop", () => {
+    it("should not render any label with default props", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis />
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, []);
+    });
+    it("should render label if label prop is a string", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label="Test Label" />
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "Test Label",
+          transform: null,
+          x: "35",
+          y: "250",
+        },
+      ]);
+    });
+    it("should render label if label prop is a number", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label={123} />
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "123",
+          transform: null,
+          x: "35",
+          y: "250",
+        },
+      ]);
+    });
+    it("should render label if label prop is a function", () => {
+      render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label={() => "Test Label from Function"} />
+        </AreaChart>
+      ));
+      const customLabel = screen.getByText("Test Label from Function");
+      expect(customLabel).toBeInTheDocument();
+    });
+    it("should render label if label prop is a React component", () => {
+      const Component = () => <span>Test Label</span>;
+      render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label={Component} />
+        </AreaChart>
+      ));
+      const customLabel = screen.getByText("Test Label");
+      expect(customLabel).toBeInTheDocument();
+    });
+    // SKIP: element-form label — Solid elements are DOM nodes, not introspectable
+    // ({ props }), so parseLabel can't read a passed JSX element (recharts uses
+    // React.isValidElement/cloneElement). Documented deferral.
+    it.skip("should render label if label prop is a React element", () => {
+      render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          {/* @ts-expect-error element-form label: a JSX element is not ImplicitLabelType (element-introspection deferral) */}
+          <YAxis label={<span>Test Label</span>} />
+        </AreaChart>
+      ));
+      const customLabel = screen.getByText("Test Label");
+      expect(customLabel).toBeInTheDocument();
+    });
+    it("should render label if label props is an object, and it should pass the object as props to the label component", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label={{ value: "Test Label", angle: -90, position: "insideLeft" }} />
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "Test Label",
+          transform: "rotate(-90, 10, 250)",
+          x: "10",
+          y: "250",
+        },
+      ]);
+    });
+  });
+
+  describe("<Label /> as a child", () => {
+    it("should render label if <Label /> is used as a child of <YAxis>", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis>
+            <Label value="Test Label" angle={-90} position="insideLeft" />
+          </YAxis>
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "Test Label",
+          transform: "rotate(-90, 10, 250)",
+          x: "10",
+          y: "250",
+        },
+      ]);
+    });
+    // SKIP: same element-introspection limitation — <Label> with element children.
+    it.skip("renders nonsense if <Label /> itself has element children", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis>
+            <Label value="Test Label" angle={-80} position="insideEnd">
+              {/* @ts-expect-error the type here says it doesn't accept span, and it is correct! the Label doesn't render it properly */}
+              <span>Additional Content</span>
+            </Label>
+          </YAxis>
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "[object Object]",
+          transform: "rotate(-80, 35, 250)",
+          x: "35",
+          y: "250",
+        },
+      ]);
+    });
+    it("should render child content if <Label /> itself has string children - and ignore the value prop", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis>
+            <Label value="Test Label" angle={-90} position="insideLeft">
+              Additional Content
+            </Label>
+          </YAxis>
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "Additional Content",
+          transform: "rotate(-90, 10, 250)",
+          x: "10",
+          y: "250",
+        },
+      ]);
+    });
+  });
+
+  describe("mix of label prop and <Label /> as a child", () => {
+    it("should render both labels!", () => {
+      const { container } = render(() => (
+        <AreaChart width={500} height={500} data={PageData}>
+          <Area dataKey="uv" />
+          <YAxis label="Ignored Label">
+            <Label value="Child Label" />
+          </YAxis>
+        </AreaChart>
+      ));
+      expectYAxisLabel(container, [
+        {
+          textContent: "Ignored Label",
+          transform: null,
+          x: "35",
+          y: "250",
+        },
+        {
+          textContent: "Child Label",
+          transform: null,
+          x: "35",
+          y: "250",
+        },
+      ]);
+    });
+  });
+});