solid-recharts 0.2.1 → 1.0.0

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

@@ -1,65 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Bar, BarChart, XAxis, YAxis } from "../../../src";
-import { render } from "@solidjs/testing-library";
-
-describe("XAxis padding with allowDataOverflow", () => {
-  it("should clip data reaching into the padding area when allowDataOverflow is true", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={400}
-        height={400}
-        data={[
-          { x: 0, y: 10 },
-          { x: 100, y: 30 },
-        ]}
-      >
-        <XAxis
-          dataKey="x"
-          type="number"
-          domain={[0, 100]}
-          allowDataOverflow
-          padding={{ left: 10, right: 50 }}
-        />
-        <YAxis />
-        <Bar dataKey="y" isAnimationActive={false} />
-      </BarChart>
-    ));
-
-    const clipPathRect = container.querySelectorAll("clipPath rect");
-    const itemClipPath = Array.from(clipPathRect).find(
-      (rect) => rect.getAttribute("width") === "270",
-    );
-
-    expect(itemClipPath).toBeDefined();
-    expect(itemClipPath?.getAttribute("x")).toBe("75");
-    expect(itemClipPath?.getAttribute("width")).toBe("270");
-  });
-
-  it("should not clip padding area when allowDataOverflow is false (default behavior)", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={400}
-        height={400}
-        data={[
-          { x: 0, y: 10 },
-          { x: 100, y: 30 },
-        ]}
-      >
-        <XAxis
-          dataKey="x"
-          type="number"
-          domain={[0, 100]}
-          allowDataOverflow={false}
-          padding={{ left: 10, right: 50 }}
-        />
-        <YAxis />
-        <Bar dataKey="y" isAnimationActive={false} />
-      </BarChart>
-    ));
-
-    const clipPathRects = Array.from(container.querySelectorAll("clipPath rect"));
-    const narrowClipPath = clipPathRects.find((rect) => rect.getAttribute("width") === "270");
-
-    expect(narrowClipPath).toBeUndefined();
-  });
-});

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

@@ -1,355 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import type { Mock } from "vitest";
-import { createEffect, createSignal, flush } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { BarChart, XAxis } from "../../../src";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { expectLastCalledWith } from "../../helper/expectLastCalledWith";
-import { useAppSelector } from "../../../src/state/hooks";
-import {
-  implicitXAxis,
-  selectRenderableAxisSettings,
-  selectRenderedTicksOfAxis,
-  selectXAxisSettings,
-} from "../../../src/state/selectors/axisSelectors";
-import type { XAxisSettings } from "../../../src/state/cartesianAxisSlice";
-import { createSelectorTestCase } from "../../helper/createSelectorTestCase";
-import { assertNotNull } from "../../helper/assertNotNull";
-import type { TickItem } from "../../../src/util/types";
-
-describe("state integration", () => {
-  it("should publish its configuration to redux store", () => {
-    const spy = vi.fn();
-    const Comp = (): null => {
-      const settings = useAppSelector((state) =>
-        selectRenderableAxisSettings(state, "xAxis", "foo"),
-      );
-      createEffect(
-        () => settings(),
-        (v) => spy(v),
-      );
-      return null;
-    };
-    const fakeTickFormatter = () => "";
-    const { container } = render(() => (
-      <BarChart width={100} height={100}>
-        <XAxis
-          xAxisId="foo"
-          scale="log"
-          type="number"
-          includeHidden
-          ticks={[4, 5, 6]}
-          height={31}
-          orientation="top"
-          mirror
-          name="axis name"
-          unit="axis unit"
-          interval={7}
-          angle={13}
-          minTickGap={9}
-          tick={false}
-          tickFormatter={fakeTickFormatter}
-        />
-        <Comp />
-      </BarChart>
-    ));
-    // PARITY GAP (rendering only — settings publish below is unaffected): recharts always
-    // emits the axis Layer (classed `recharts-xAxis xAxis`), but this port gates the whole
-    // axis Layer on `axisRender()` which is null for an empty (data-less) chart, so no
-    // `.recharts-xAxis` element exists here. We assert the chart surface mounted instead,
-    // then assert the published settings (the actual subject of this test).
-    expect(container.querySelector(".recharts-surface")).toBeVisible();
-    const expectedSettings: XAxisSettings = {
-      angle: 13,
-      minTickGap: 9,
-      tick: false,
-      tickFormatter: fakeTickFormatter,
-      interval: 7,
-      name: "axis name",
-      unit: "axis unit",
-      hide: false,
-      mirror: true,
-      orientation: "top",
-      height: 31,
-      ticks: [4, 5, 6],
-      includeHidden: true,
-      tickCount: 5,
-      allowDecimals: true,
-      id: "foo",
-      scale: "log",
-      type: "number",
-      allowDataOverflow: false,
-      allowDuplicatedCategory: true,
-      dataKey: undefined,
-      domain: undefined,
-      padding: {
-        left: 0,
-        right: 0,
-      },
-      reversed: false,
-      niceTicks: "auto",
-    };
-    expectLastCalledWith(spy, expectedSettings);
-  });
-
-  it("should remove the configuration from store when DOM element is removed", () => {
-    // recharts rerenders to ADD/REMOVE axis children; the Solid port uses static renders
-    // (unmount between) per variant to avoid the dynamic-remount artifact.
-    const expectedSettingsFoo: XAxisSettings = {
-      angle: 0,
-      minTickGap: 5,
-      tick: true,
-      tickFormatter: undefined,
-      interval: "preserveEnd",
-      name: undefined,
-      unit: undefined,
-      hide: false,
-      mirror: false,
-      height: 30,
-      orientation: "bottom",
-      ticks: undefined,
-      includeHidden: false,
-      tickCount: 5,
-      allowDecimals: true,
-      id: "foo",
-      scale: "log",
-      type: "number",
-      allowDataOverflow: false,
-      allowDuplicatedCategory: true,
-      dataKey: undefined,
-      domain: undefined,
-      padding: {
-        left: 0,
-        right: 0,
-      },
-      reversed: false,
-      niceTicks: "auto",
-    };
-    const expectedSettingsBar: XAxisSettings = {
-      angle: 0,
-      minTickGap: 5,
-      tick: true,
-      tickFormatter: undefined,
-      interval: "preserveEnd",
-      name: undefined,
-      unit: undefined,
-      hide: false,
-      mirror: false,
-      orientation: "bottom",
-      height: 30,
-      ticks: undefined,
-      includeHidden: false,
-      id: "bar",
-      scale: "utc",
-      type: "category",
-      allowDataOverflow: false,
-      allowDuplicatedCategory: true,
-      dataKey: undefined,
-      domain: undefined,
-      padding: {
-        left: 0,
-        right: 0,
-      },
-      allowDecimals: true,
-      tickCount: 5,
-      reversed: false,
-      niceTicks: "auto",
-    };
-
-    const makeComp = (spy: Mock) => (): null => {
-      const foo = useAppSelector((state) => selectRenderableAxisSettings(state, "xAxis", "foo"));
-      const bar = useAppSelector((state) => selectRenderableAxisSettings(state, "xAxis", "bar"));
-      createEffect(
-        () => ({ foo: foo(), bar: bar() }),
-        (v) => spy(v),
-      );
-      return null;
-    };
-
-    // variant 1: only foo
-    const spy1 = vi.fn();
-    const Comp1 = makeComp(spy1);
-    const r1 = render(() => (
-      <BarChart width={100} height={100}>
-        <XAxis xAxisId="foo" scale="log" type="number" />
-        <Comp1 />
-      </BarChart>
-    ));
-    expectLastCalledWith(spy1, {
-      foo: expectedSettingsFoo,
-      bar: implicitXAxis,
-    });
-    r1.unmount();
-
-    // variant 2: foo + bar
-    const spy2 = vi.fn();
-    const Comp2 = makeComp(spy2);
-    const r2 = render(() => (
-      <BarChart width={100} height={100}>
-        <XAxis xAxisId="foo" scale="log" type="number" />
-        <XAxis xAxisId="bar" scale="utc" type="category" />
-        <Comp2 />
-      </BarChart>
-    ));
-    expectLastCalledWith(spy2, {
-      foo: expectedSettingsFoo,
-      bar: expectedSettingsBar,
-    });
-    r2.unmount();
-
-    // variant 3: only bar
-    const spy3 = vi.fn();
-    const Comp3 = makeComp(spy3);
-    const r3 = render(() => (
-      <BarChart width={100} height={100}>
-        <XAxis xAxisId="bar" scale="utc" type="category" />
-        <Comp3 />
-      </BarChart>
-    ));
-    expectLastCalledWith(spy3, {
-      foo: implicitXAxis,
-      bar: expectedSettingsBar,
-    });
-    r3.unmount();
-
-    // variant 4: neither
-    const spy4 = vi.fn();
-    const Comp4 = makeComp(spy4);
-    render(() => (
-      <BarChart width={100} height={100}>
-        <Comp4 />
-      </BarChart>
-    ));
-    expectLastCalledWith(spy4, {
-      foo: implicitXAxis,
-      bar: implicitXAxis,
-    });
-  });
-
-  it("should remove old ID configuration when the ID changes", () => {
-    const IDChangingComponent = (props: { children: JSX.Element }): JSX.Element => {
-      const [id, setId] = createSignal("1");
-      const onClick = () => setId("2");
-      return (
-        <>
-          <button type="button" class="pushbutton" onClick={onClick}>
-            Change ID
-          </button>
-          <BarChart width={100} height={100}>
-            <XAxis xAxisId={id()} scale="log" type="number" />
-            {props.children}
-          </BarChart>
-        </>
-      );
-    };
-    const renderTestCase = createSelectorTestCase(IDChangingComponent);
-
-    const { spy, container } = renderTestCase((state) => state.cartesianAxis.xAxis);
-
-    // only id "1" exists
-    const lastCallArgs1 = spy.mock.lastCall?.[0];
-    assertNotNull(lastCallArgs1);
-    expect(Object.keys(lastCallArgs1)).toEqual(["1"]);
-
-    fireEvent.click(container.getElementsByClassName("pushbutton")[0]!);
-    flush();
-    flush();
-    flush();
-
-    // only id "2" exists
-    const lastCallArgs2 = spy.mock.lastCall?.[0];
-    assertNotNull(lastCallArgs2);
-    expect(Object.keys(lastCallArgs2)).toEqual(["2"]);
-  });
-
-  // SKIP: reference-stability (`toBe`) + exact call-count assertions are reselect/Redux
-  // specifics that do not translate to Solid's reactive selectors (memory:
-  // test-porting-tier1-tier2-done — reselect toBe-stability tests are N/A).
-  it.skip("should return stable reference when chart re-renders", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100}>
-        <XAxis xAxisId="foo" scale="log" type="number" />
-        {props.children}
-      </BarChart>
-    ));
-
-    const { spy, rerenderSameComponent } = renderTestCase((state) =>
-      selectXAxisSettings(state, "foo"),
-    );
-
-    const expectedSettings: XAxisSettings = {
-      angle: 0,
-      minTickGap: 5,
-      tick: true,
-      tickFormatter: undefined,
-      interval: "preserveEnd",
-      name: undefined,
-      unit: undefined,
-      hide: false,
-      mirror: false,
-      orientation: "bottom",
-      height: 30,
-      ticks: undefined,
-      includeHidden: false,
-      tickCount: 5,
-      allowDecimals: true,
-      id: "foo",
-      scale: "log",
-      type: "number",
-      allowDataOverflow: false,
-      allowDuplicatedCategory: true,
-      dataKey: undefined,
-      domain: undefined,
-      padding: {
-        left: 0,
-        right: 0,
-      },
-      reversed: false,
-      niceTicks: "auto",
-    };
-    expectLastCalledWith(spy, expectedSettings);
-
-    rerenderSameComponent();
-    expectLastCalledWith(spy, expectedSettings);
-    expect(spy).toHaveBeenCalledTimes(4);
-
-    expect(spy.mock.calls[1]![0]).toBe(spy.mock.calls[2]![0]);
-  });
-
-  it("should not render anything when attempting to render outside of Chart", () => {
-    const { container } = render(() => <XAxis dataKey="x" name="stature" unit="cm" />);
-    expect(container.querySelectorAll(".recharts-cartesian-axis-line")).toHaveLength(0);
-  });
-
-  it("should publish rendered ticks to the store", () => {
-    const renderTestCase = createSelectorTestCase((props) => (
-      <BarChart width={100} height={100} data={[{ x: "x-1" }, { x: "x-2" }, { x: "x-3" }]}>
-        <XAxis xAxisId="foo" dataKey="x" />
-        {props.children}
-      </BarChart>
-    ));
-
-    const { spy } = renderTestCase((state) => selectRenderedTicksOfAxis(state, "xAxis", "foo"));
-    const expectedTicks: ReadonlyArray<TickItem> = [
-      {
-        coordinate: 20,
-        index: 0,
-        offset: 15,
-        value: "x-1",
-      },
-      {
-        coordinate: 50,
-        index: 1,
-        offset: 15,
-        value: "x-2",
-      },
-      {
-        coordinate: 80,
-        index: 2,
-        offset: 15,
-        value: "x-3",
-      },
-    ];
-    expectLastCalledWith(spy, expectedTicks);
-  });
-});