solid-recharts 0.2.1 → 1.0.0

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

@@ -1,88 +0,0 @@
-// 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

@@ -1,219 +0,0 @@
-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",
-        },
-      ]);
-    });
-  });
-});