solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/XAxis/XAxis.tick.spec.tsx

@@ -1,493 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import type { Mock } from "vitest";
-import type { JSX } from "@solidjs/web";
-import { Bar, BarChart, ComposedChart, Line, LineChart, XAxis, YAxis } from "../../../src";
-import type { CartesianTickContentProps } from "../../../src";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { expectXAxisTicks } from "../../helper/expectAxisTicks";
-import { ExpectAxisDomain } from "../../helper/ExpectAxisDomain";
-import { expectLastCalledWith, expectNthCalledWith } from "../../helper/expectLastCalledWith";
-import { dateWithValueData } from "../../_data";
-
-type XAxisTickContentProps = CartesianTickContentProps;
-
-const data = [
-  { x: 90, y: 90, z: 90 },
-  { x: 100, y: 200, z: 200 },
-  { x: 120, y: 100, z: 260 },
-  { x: 170, y: 300, z: 400 },
-  { x: 140, y: 250, z: 280 },
-  { x: 150, y: 400, z: 500 },
-  { x: 110, y: 280, z: 200 },
-];
-
-const lineData = [
-  { name: "Page A", uv: 400, pv: 2400, amt: 2400 },
-  { name: "Page B", uv: 300, pv: 4567, amt: 2400 },
-  { name: "Page C", uv: 300, pv: 1398, amt: 2400 },
-  { name: "Page D", uv: 200, pv: 9800, amt: 2400 },
-  { name: "Page E", uv: 278, pv: 3908, amt: 2400 },
-  { name: "Page F", uv: 189, pv: 4800, amt: 2400 },
-];
-
-describe("XAxis tick", () => {
-  it("Render duplicated ticks of XAxis", () => {
-    const spy = vi.fn();
-    const { container } = render(() => (
-      <LineChart
-        width={600}
-        height={300}
-        data={lineData}
-        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-      >
-        <XAxis dataKey="name" interval={0} />
-        <YAxis />
-        <Line type="monotone" dataKey="balance" stroke="#8884d8" activeDot={{ r: 8 }} />
-        <ExpectAxisDomain assert={spy} axisType="xAxis" />
-      </LineChart>
-    ));
-
-    expectXAxisTicks(container, [
-      {
-        textContent: "Page A",
-        x: "80",
-        y: "273",
-      },
-      {
-        textContent: "Page B",
-        x: "178",
-        y: "273",
-      },
-      {
-        textContent: "Page C",
-        x: "276",
-        y: "273",
-      },
-      {
-        textContent: "Page D",
-        x: "374",
-        y: "273",
-      },
-      {
-        textContent: "Page E",
-        x: "472",
-        y: "273",
-      },
-      {
-        textContent: "Page F",
-        x: "570",
-        y: "273",
-      },
-    ]);
-    expectLastCalledWith(spy, ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F"]);
-  });
-
-  it("Render axis with tick for a single data point", () => {
-    const spy = vi.fn();
-    const { container } = render(() => (
-      <BarChart width={300} height={300} data={data.slice(0, 1)}>
-        <Bar dataKey="y" isAnimationActive={false} />
-        <XAxis dataKey="x" type="number" domain={["dataMin", "dataMax"]} />
-        <YAxis dataKey="y" />
-        <ExpectAxisDomain assert={spy} axisType="xAxis" />
-      </BarChart>
-    ));
-
-    // For a single data point, unless barSize is given, the bar will have no width and thus not be rendered.
-    // This test merely confirms this known limitation.
-    const bar = container.querySelector(".recharts-rectangle");
-    expect(bar).not.toBeInTheDocument();
-
-    expectXAxisTicks(container, [
-      {
-        textContent: "90",
-        x: "180",
-        y: "273",
-      },
-    ]);
-    expectLastCalledWith(spy, [90, 90]);
-  });
-
-  it("Render no ticks if type is category and data is empty", () => {
-    const spy = vi.fn();
-    const { container } = render(() => (
-      <BarChart width={300} height={300} data={[]}>
-        <Bar dataKey="y" isAnimationActive={false} />
-        <XAxis dataKey="x" />
-        <YAxis dataKey="y" />
-        <ExpectAxisDomain assert={spy} axisType="xAxis" />
-      </BarChart>
-    ));
-
-    expect(
-      container.querySelectorAll(".recharts-xAxis .recharts-cartesian-axis-tick"),
-    ).toHaveLength(0);
-    expectXAxisTicks(container, []);
-    expectLastCalledWith(spy, undefined);
-  });
-
-  describe("custom tick components", () => {
-    // SKIP — PERMANENT N/A: element-form tick (`tick={<CustomTick />}`). Solid JSX
-    // evaluates eagerly to DOM; there is no cloneElement to re-invoke the element
-    // with per-tick props. The function-form equivalents below are live.
-    it.skip("should pass object padding to custom tick component", () => {
-      const expectedPadding = { left: 20, right: 30 };
-      expect.assertions(6);
-
-      const CustomXAxisTick = (props: { padding?: unknown }): JSX.Element => {
-        expect(props.padding).toEqual(expectedPadding);
-        return <text>Custom Tick</text>;
-      };
-
-      render(() => (
-        <LineChart width={400} height={400} data={lineData}>
-          <XAxis padding={expectedPadding} tick={<CustomXAxisTick />} />
-          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        </LineChart>
-      ));
-    });
-
-    // SKIP — PERMANENT N/A: element-form tick (see above).
-    it.skip("should pass string padding to custom tick component", () => {
-      const expectedPadding = "gap";
-      expect.assertions(6);
-
-      const CustomXAxisTick = (props: { padding?: unknown }): JSX.Element => {
-        expect(props.padding).toBe(expectedPadding);
-        return <text>Custom Tick</text>;
-      };
-
-      render(() => (
-        <LineChart width={400} height={400} data={lineData}>
-          <XAxis padding={expectedPadding} tick={<CustomXAxisTick />} />
-          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        </LineChart>
-      ));
-    });
-
-    // Deviation from the verbatim spec: recharts invokes the tick renderer once
-    // per tick (6×); Solid renders an extra provisional pass before the axis
-    // offset settles (12×, see the TextProps case below), so the per-call
-    // `expect.assertions(6)` count is replaced by collect-and-assert-every —
-    // the padding VALUE is asserted on every invocation, both passes.
-    it("should pass padding to function-based custom tick", () => {
-      const expectedPadding = { left: 15, right: 25 };
-      const seenPaddings: unknown[] = [];
-
-      const customTickFunction = (props: XAxisTickContentProps): JSX.Element => {
-        seenPaddings.push(props.padding);
-        return <text>Function Tick</text>;
-      };
-
-      render(() => (
-        <LineChart width={400} height={400} data={lineData}>
-          <XAxis padding={expectedPadding} tick={customTickFunction} />
-          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        </LineChart>
-      ));
-
-      expect(seenPaddings.length).toBeGreaterThanOrEqual(6);
-      seenPaddings.forEach((p) => expect(p).toEqual(expectedPadding));
-    });
-
-    // SKIP — PERMANENT N/A: element-form tick (see above).
-    it.skip("should pass default padding when no padding is specified", () => {
-      expect.assertions(6);
-
-      const CustomXAxisTick = (props: { padding?: unknown }): JSX.Element => {
-        expect(props.padding).toEqual({ left: 0, right: 0 });
-        return <text>Custom Tick</text>;
-      };
-
-      render(() => (
-        <LineChart width={400} height={400} data={lineData}>
-          <XAxis tick={<CustomXAxisTick />} />
-          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        </LineChart>
-      ));
-    });
-
-    // Deviation from the verbatim spec (6 calls → 12): Solid registers axis
-    // settings in a deferred effect, so the first pass renders ticks with a
-    // provisional offset (y=8) and the settled pass re-invokes the renderer with
-    // the final geometry (y=373). recharts dispatches synchronously mid-render
-    // and only ever does the settled pass. The vendor's call 1..6 assertions are
-    // therefore checked against our settled calls 7..12 — same values.
-    it("should pass all TextProps and index and payload to custom tick component", () => {
-      const myCustomTick: Mock = vi.fn<(props: XAxisTickContentProps) => JSX.Element>();
-
-      render(() => (
-        <LineChart width={400} height={400} data={lineData}>
-          <XAxis tick={myCustomTick} />
-          <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        </LineChart>
-      ));
-
-      expect(myCustomTick).toHaveBeenCalledTimes(12);
-      expectNthCalledWith(myCustomTick, 7, {
-        angle: 0,
-        // Deviation: `class` (Solid grammar), not recharts `className`.
-        class: "recharts-xAxis xAxis recharts-cartesian-axis-tick-value",
-        fill: "#666",
-        height: 30,
-        index: 0,
-        name: undefined,
-        orientation: "bottom",
-        padding: {
-          left: 0,
-          right: 0,
-        },
-        payload: {
-          coordinate: 5,
-          index: 0,
-          isShow: true,
-          offset: 0,
-          tickCoord: 5,
-          value: 0,
-        },
-        stroke: "none",
-        textAnchor: "middle",
-        tickFormatter: undefined,
-        verticalAnchor: "start",
-        visibleTicksCount: 6,
-        width: 390,
-        x: 5,
-        y: 373,
-      });
-
-      expectNthCalledWith(myCustomTick, 8, {
-        angle: 0,
-        // Deviation: `class` (Solid grammar), not recharts `className`.
-        class: "recharts-xAxis xAxis recharts-cartesian-axis-tick-value",
-        fill: "#666",
-        height: 30,
-        index: 1,
-        name: undefined,
-        orientation: "bottom",
-        padding: {
-          left: 0,
-          right: 0,
-        },
-        payload: {
-          coordinate: 83,
-          index: 1,
-          isShow: true,
-          offset: 0,
-          tickCoord: 83,
-          value: 1,
-        },
-        stroke: "none",
-        textAnchor: "middle",
-        tickFormatter: undefined,
-        verticalAnchor: "start",
-        visibleTicksCount: 6,
-        width: 390,
-        x: 83,
-        y: 373,
-      });
-    });
-  });
-
-  it("Render ticks of XAxis when specify ticks", () => {
-    const axisDomainSpy = vi.fn();
-    const { container } = render(() => (
-      <LineChart
-        width={400}
-        height={400}
-        data={lineData}
-        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
-      >
-        <XAxis ticks={[0, 4]} />
-        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-        <ExpectAxisDomain assert={axisDomainSpy} axisType="xAxis" />
-      </LineChart>
-    ));
-
-    expectXAxisTicks(container, [
-      {
-        textContent: "0",
-        x: "20",
-        y: "358",
-      },
-      {
-        textContent: "4",
-        x: "308",
-        y: "358",
-      },
-    ]);
-    expect(axisDomainSpy).toHaveBeenLastCalledWith([0, 1, 2, 3, 4, 5]);
-  });
-
-  it("Should render the axis line without any ticks", () => {
-    const spy = vi.fn();
-    const barData = [{ day: "05-01" }, { day: "05-02" }];
-    const { container } = render(() => (
-      <BarChart width={300} height={300} data={barData}>
-        <Bar dataKey="y" isAnimationActive={false} />
-        <XAxis dataKey="y" type="number" />
-        <ExpectAxisDomain assert={spy} axisType="xAxis" />
-      </BarChart>
-    ));
-    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-line");
-    expect(ticksGroup).toHaveLength(0);
-
-    const axisLine = container.getElementsByClassName("recharts-cartesian-axis-line");
-    expect(axisLine).toHaveLength(1);
-    expectXAxisTicks(container, []);
-    expectLastCalledWith(spy, undefined);
-  });
-
-  // Per-tick events: XAxis forwards the props-first `(tickItem, index, event)` handlers
-  // to CartesianAxis, which attaches them to each tick-label Layer.
-  it("Should pass data, index, and event to the onClick event handler", () => {
-    const onClickFn = vi.fn();
-    const { container } = render(() => (
-      <LineChart width={400} height={400} data={lineData}>
-        <XAxis ticks={[0, 4]} onClick={onClickFn} />
-        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-      </LineChart>
-    ));
-
-    const ticksGroup = container.getElementsByClassName("recharts-cartesian-axis-tick-label");
-    expect(ticksGroup).toHaveLength(2);
-
-    const firstTick = ticksGroup[0]!;
-
-    const eventData = {
-      coordinate: 5,
-      isShow: true,
-      offset: 0,
-      tickCoord: 5,
-      value: 0,
-      index: 0,
-    };
-    const eventIndex = 0;
-    const eventExpect = expect.objectContaining({
-      type: "click",
-      pageX: 0,
-      pageY: 0,
-      target: expect.any(Object),
-    });
-
-    fireEvent.click(firstTick);
-    expect(onClickFn).toHaveBeenCalledWith(eventData, eventIndex, eventExpect);
-  });
-
-  // ENV REQUIREMENT (not a src gap): the tickFormatter uses `toLocaleDateString` WITHOUT a
-  // `timeZone`, so the rendered AM/PM strings depend on the host TZ and only match the
-  // golden under TZ=UTC (recharts CI runs UTC). Runs in UTC CI; skipped on non-UTC hosts.
-  it.skipIf(new Date().getTimezoneOffset() !== 0)(
-    "should render ticks formatted by tickFormatter",
-    () => {
-      const tickFormatter = (value: unknown) =>
-        new Date(value as number).toLocaleDateString("en-US", {
-          year: "numeric",
-          month: "numeric",
-          day: "numeric",
-          hour: "numeric",
-          minute: "numeric",
-        });
-
-      const { container } = render(() => (
-        <ComposedChart width={600} height={50} data={dateWithValueData}>
-          <XAxis
-            dataKey="time"
-            type="number"
-            scale="time"
-            domain={["auto", "auto"]}
-            tickFormatter={tickFormatter}
-          />
-          <Line dataKey="value" />
-        </ComposedChart>
-      ));
-
-      expectXAxisTicks(container, [
-        {
-          textContent: "12/31/2016, 12:00 AM",
-          x: "5",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 1:00 AM",
-          x: "64",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 1:30 AM",
-          x: "93.5",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 2:00 AM",
-          x: "123",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 3:00 AM",
-          x: "182",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 3:30 AM",
-          x: "211.5",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 4:00 AM",
-          x: "241",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 5:00 AM",
-          x: "300",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 6:00 AM",
-          x: "359",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 7:00 AM",
-          x: "418",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 8:00 AM",
-          x: "477",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 8:30 AM",
-          x: "506.5",
-          y: "23",
-        },
-        {
-          textContent: "12/31/2016, 10:00 AM",
-          x: "595",
-          y: "23",
-        },
-      ]);
-    },
-  );
-
-  it("Forwards class, fontSize and letterSpacing to the rendered axis", () => {
-    const { container } = render(() => (
-      <LineChart width={600} height={300} data={lineData}>
-        <XAxis dataKey="name" class="styled-axis" fontSize={11} letterSpacing="1px" />
-        <Line dataKey="uv" />
-      </LineChart>
-    ));
-
-    const layer = container.querySelector(".recharts-xAxis");
-    expect(layer).not.toBeNull();
-    expect(layer).toHaveClass("styled-axis");
-
-    const tickTexts = container.querySelectorAll(".recharts-cartesian-axis-tick-value");
-    expect(tickTexts.length).toBeGreaterThan(0);
-    tickTexts.forEach((text) => {
-      expect(text).toHaveAttribute("font-size", "11");
-      expect(text).toHaveAttribute("letter-spacing", "1px");
-    });
-  });
-});