solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/component/Legend.itemSorter.spec.tsx

@@ -0,0 +1,704 @@
+// Ported from recharts 3.8.1 test/component/Legend.itemSorter.spec.tsx (commit
+// 7a23854). The "with default content" sorter cases are covered in
+// Legend.render.spec.tsx; here we port the "when Legend content is a function"
+// cases, which assert the exact props object passed to a function-form `content`.
+//
+// Tier-A adaptation: recharts calls the content as a React component
+// (`React.createElement(content, props)`) so the spy sees `(props, {})` — the
+// trailing `{}` is React's legacy context arg. The Solid port calls the function
+// directly with a single argument, so the assertion drops the trailing `{}`; the
+// props object itself is byte-identical. `render(() => <…/>)` + `flush()` replace
+// React's synchronous render.
+import { beforeEach, describe, expect, it, test, vi } from "vitest";
+import { createSignal, flush, For } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { render } from "@solidjs/testing-library";
+import {
+  Area,
+  AreaChart,
+  DefaultZIndexes,
+  Legend,
+  Line,
+  LineChart,
+  LineDrawShape,
+} from "../../src";
+import type { LegendPayload } from "../../src";
+import type { Props as DefaultLegendContentProps } from "../../src/component/DefaultLegendContent";
+import { numericalData } from "../_data";
+import { assertNotNull } from "../helper/assertNotNull";
+import { expectLastCalledWith } from "../helper/expectLastCalledWith";
+
+// ---- inlined helper (reference: test/helper/expectLegendLabels.tsx) ----
+function assertHasLegend(container: Element): ReadonlyArray<Element> {
+  expect(container.querySelectorAll(".recharts-default-legend")).toHaveLength(1);
+  return Array.from(container.querySelectorAll(".recharts-default-legend .recharts-legend-item"));
+}
+
+function expectLegendLabels(
+  container: Element,
+  expectedLabels: ReadonlyArray<{
+    textContent: string;
+    fill: string | null | undefined;
+    stroke?: string;
+  }>,
+): void {
+  const expectsStroke = expectedLabels.some((label) => label.stroke != null);
+  const actualLabels = assertHasLegend(container).map((legend) => ({
+    textContent: legend.textContent,
+    fill: legend.querySelector(".recharts-legend-icon")?.getAttribute("fill"),
+    stroke: expectsStroke
+      ? legend.querySelector(".recharts-legend-icon")?.getAttribute("stroke")
+      : undefined,
+  }));
+  expect(actualLabels).toEqual(expectedLabels);
+}
+
+describe("Legend.itemSorter", () => {
+  describe("with default content", () => {
+    test("sorts legend items by label value by default", () => {
+      const { container } = render(() => (
+        <LineChart width={500} height={500} data={numericalData}>
+          <Legend />
+          <Line dataKey="percent" name="B" />
+          <Line dataKey="value" name="A" />
+        </LineChart>
+      ));
+      flush();
+
+      expectLegendLabels(container, [
+        { textContent: "A", stroke: "#3182bd", fill: "none" },
+        { textContent: "B", stroke: "#3182bd", fill: "none" },
+      ]);
+    });
+
+    test("sorts legend items when itemSorter=dataKey", () => {
+      const { container } = render(() => (
+        <LineChart width={500} height={500} data={numericalData}>
+          <Legend itemSorter="dataKey" />
+          <Line dataKey="percent" name="B" />
+          <Line dataKey="value" name="A" />
+        </LineChart>
+      ));
+      flush();
+
+      expectLegendLabels(container, [
+        { textContent: "B", stroke: "#3182bd", fill: "none" },
+        { textContent: "A", stroke: "#3182bd", fill: "none" },
+      ]);
+    });
+  });
+
+  describe("when Legend content is a function", () => {
+    it("should pass legend items sorted by label value by default", () => {
+      const customContent = vi.fn();
+
+      render(() => (
+        <LineChart width={500} height={500} data={numericalData}>
+          <Legend content={customContent} />
+          <Line dataKey="percent" name="B" />
+          <Line dataKey="value" name="A" />
+        </LineChart>
+      ));
+      flush();
+
+      expect(customContent).toHaveBeenLastCalledWith({
+        align: "center",
+        chartHeight: 500,
+        chartWidth: 500,
+        content: customContent,
+        iconSize: 14,
+        inactiveColor: "#ccc",
+        itemSorter: "value",
+        labelStyle: {},
+        layout: "horizontal",
+        margin: { bottom: 5, left: 5, right: 5, top: 5 },
+        payload: [
+          {
+            color: "#3182bd",
+            dataKey: "value",
+            inactive: false,
+            payload: {
+              activeDot: true,
+              animateNewValues: true,
+              animationBegin: 0,
+              animationDuration: 1500,
+              animationEasing: "ease",
+              connectNulls: false,
+              dataKey: "value",
+              dot: true,
+              fill: "#fff",
+              hide: false,
+              isAnimationActive: "auto",
+              label: false,
+              legendType: "line",
+              name: "A",
+              shape: LineDrawShape,
+              stroke: "#3182bd",
+              strokeWidth: 1,
+              type: "linear",
+              xAxisId: 0,
+              yAxisId: 0,
+              zIndex: DefaultZIndexes.line,
+            },
+            type: "line",
+            value: "A",
+          },
+          {
+            color: "#3182bd",
+            dataKey: "percent",
+            inactive: false,
+            payload: {
+              activeDot: true,
+              animateNewValues: true,
+              animationBegin: 0,
+              animationDuration: 1500,
+              animationEasing: "ease",
+              connectNulls: false,
+              dataKey: "percent",
+              dot: true,
+              fill: "#fff",
+              hide: false,
+              isAnimationActive: "auto",
+              label: false,
+              legendType: "line",
+              name: "B",
+              shape: LineDrawShape,
+              stroke: "#3182bd",
+              strokeWidth: 1,
+              type: "linear",
+              xAxisId: 0,
+              yAxisId: 0,
+              zIndex: DefaultZIndexes.line,
+            },
+            type: "line",
+            value: "B",
+          },
+        ],
+        verticalAlign: "bottom",
+        width: 490,
+      });
+    });
+
+    it("should pass legend items sorted by dataKey when itemSorter is set", () => {
+      const customContent = vi.fn();
+
+      render(() => (
+        <LineChart width={500} height={500} data={numericalData}>
+          <Legend content={customContent} itemSorter="dataKey" />
+          <Line dataKey="percent" name="B" />
+          <Line dataKey="value" name="A" />
+        </LineChart>
+      ));
+      flush();
+
+      expect(customContent).toHaveBeenLastCalledWith({
+        align: "center",
+        chartHeight: 500,
+        chartWidth: 500,
+        content: customContent,
+        iconSize: 14,
+        inactiveColor: "#ccc",
+        itemSorter: "dataKey",
+        labelStyle: {},
+        layout: "horizontal",
+        margin: { bottom: 5, left: 5, right: 5, top: 5 },
+        payload: [
+          {
+            color: "#3182bd",
+            dataKey: "percent",
+            inactive: false,
+            payload: {
+              activeDot: true,
+              animateNewValues: true,
+              animationBegin: 0,
+              animationDuration: 1500,
+              animationEasing: "ease",
+              connectNulls: false,
+              dataKey: "percent",
+              dot: true,
+              fill: "#fff",
+              hide: false,
+              isAnimationActive: "auto",
+              label: false,
+              legendType: "line",
+              name: "B",
+              shape: LineDrawShape,
+              stroke: "#3182bd",
+              strokeWidth: 1,
+              type: "linear",
+              xAxisId: 0,
+              yAxisId: 0,
+              zIndex: DefaultZIndexes.line,
+            },
+            type: "line",
+            value: "B",
+          },
+          {
+            color: "#3182bd",
+            dataKey: "value",
+            inactive: false,
+            payload: {
+              activeDot: true,
+              animateNewValues: true,
+              animationBegin: 0,
+              animationDuration: 1500,
+              animationEasing: "ease",
+              connectNulls: false,
+              dataKey: "value",
+              dot: true,
+              fill: "#fff",
+              hide: false,
+              isAnimationActive: "auto",
+              label: false,
+              legendType: "line",
+              name: "A",
+              shape: LineDrawShape,
+              stroke: "#3182bd",
+              strokeWidth: 1,
+              type: "linear",
+              xAxisId: 0,
+              yAxisId: 0,
+              zIndex: DefaultZIndexes.line,
+            },
+            type: "line",
+            value: "A",
+          },
+        ],
+        verticalAlign: "bottom",
+        width: 490,
+      });
+    });
+  });
+
+  // Click a legend item by its label text. The legend renders into a Portal in
+  // document.body, and Solid's <For> recreates the items each render, so we always
+  // re-query the live legend item before clicking, then flush so the signal write
+  // and the downstream payload recompute settle.
+  function clickLegendItemByText(label: string): void {
+    const item = [...document.querySelectorAll(".recharts-legend-item")].find(
+      (n) => n.textContent === label,
+    );
+    assertNotNull(item);
+    (item as HTMLElement).click();
+    flush();
+    flush();
+  }
+
+  describe("when Legend content hides and shows items on click", () => {
+    // The host (the user's chart) owns the hidden-state. Legend just forwards
+    // onClick; the user's handler flips `hide`/`stroke` on the series, which
+    // re-publishes the legend payload with the new `inactive`/`color`.
+    function MyLegendHidingComponent(): JSX.Element {
+      const [hiddenItems, setHiddenItems] = createSignal<ReadonlyArray<string>>([]);
+
+      const handleClick = ({ dataKey }: LegendPayload): void => {
+        if (typeof dataKey !== "string") {
+          return;
+        }
+        setHiddenItems((prev) =>
+          prev.includes(dataKey) ? prev.filter((key) => key !== dataKey) : [...prev, dataKey],
+        );
+      };
+
+      return (
+        <LineChart width={500} height={500} data={numericalData}>
+          <Legend itemSorter="dataKey" onClick={handleClick} />
+          <Line
+            dataKey="percent"
+            name="B"
+            stroke={hiddenItems().includes("percent") ? "gold" : "red"}
+            hide={hiddenItems().includes("percent")}
+          />
+          <Line
+            dataKey="value"
+            name="A"
+            stroke={hiddenItems().includes("value") ? "silver" : "blue"}
+            hide={hiddenItems().includes("value")}
+          />
+        </LineChart>
+      );
+    }
+
+    describe("on initial render", () => {
+      it("should render all items sorted by dataKey", () => {
+        const { container } = render(() => <MyLegendHidingComponent />);
+        flush();
+
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "red", fill: "none" },
+          { textContent: "A", stroke: "blue", fill: "none" },
+        ]);
+      });
+    });
+
+    describe("after clicking on legend items", () => {
+      it("should hide the clicked item and keep the order", () => {
+        const { container } = render(() => <MyLegendHidingComponent />);
+        flush();
+
+        clickLegendItemByText("A");
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "red", fill: "none" },
+          { textContent: "A", stroke: "#ccc", fill: "none" },
+        ]);
+
+        clickLegendItemByText("B");
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "#ccc", fill: "none" },
+          { textContent: "A", stroke: "#ccc", fill: "none" },
+        ]);
+      });
+
+      it("should show the clicked item again and keep the order", () => {
+        const { container } = render(() => <MyLegendHidingComponent />);
+        flush();
+
+        clickLegendItemByText("A");
+        clickLegendItemByText("B");
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "#ccc", fill: "none" },
+          { textContent: "A", stroke: "#ccc", fill: "none" },
+        ]);
+
+        clickLegendItemByText("B");
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "red", fill: "none" },
+          { textContent: "A", stroke: "#ccc", fill: "none" },
+        ]);
+
+        clickLegendItemByText("A");
+        expectLegendLabels(container, [
+          { textContent: "B", stroke: "red", fill: "none" },
+          { textContent: "A", stroke: "blue", fill: "none" },
+        ]);
+      });
+    });
+  });
+
+  describe("when Legend content hides and shows items on click and also it has a custom content", () => {
+    const spy = vi.fn();
+
+    beforeEach(() => {
+      spy.mockClear();
+    });
+
+    // Custom function-form content: renders one <button> per payload item that
+    // calls the click handler closed over from the host. (Reference threads the
+    // handler through a React context; Solid closes over it directly.) Clicking a
+    // button flips the series hide/stroke, which republishes the payload — and the
+    // content fn re-runs with the new `inactive`/`color`, captured by `spy`.
+    function makeCustomContent(handleClick: (entry: LegendPayload) => void) {
+      return (props: DefaultLegendContentProps): JSX.Element => {
+        spy(props);
+        assertNotNull(props.payload);
+        return (
+          <ul>
+            <For each={props.payload}>
+              {(entry) => (
+                <li style={{ color: entry.color }}>
+                  <button type="button" onClick={() => handleClick(entry)}>
+                    {entry.value}
+                  </button>
+                </li>
+              )}
+            </For>
+          </ul>
+        );
+      };
+    }
+
+    function clickButtonByText(label: string): void {
+      const button = [...document.querySelectorAll("button")].find((n) => n.textContent === label);
+      assertNotNull(button);
+      button.click();
+      flush();
+      flush();
+    }
+
+    function useItemHiding(): {
+      hiddenItems: () => ReadonlyArray<string>;
+      handleClick: (entry: LegendPayload) => void;
+    } {
+      const [hiddenItems, setHiddenItems] = createSignal<ReadonlyArray<string>>([]);
+      const handleClick = ({ dataKey }: LegendPayload): void => {
+        if (typeof dataKey !== "string") {
+          return;
+        }
+        setHiddenItems((prev) =>
+          prev.includes(dataKey) ? prev.filter((key) => key !== dataKey) : [...prev, dataKey],
+        );
+      };
+      return { hiddenItems, handleClick };
+    }
+
+    describe("in LineChart", () => {
+      // https://github.com/recharts/recharts/issues/5992
+      function MyLegendHidingLineChartTestCase(): JSX.Element {
+        const { hiddenItems, handleClick } = useItemHiding();
+        return (
+          <LineChart width={500} height={500} data={numericalData}>
+            <Legend itemSorter="dataKey" content={makeCustomContent(handleClick)} />
+            <Line
+              dataKey="percent"
+              name="B"
+              stroke={hiddenItems().includes("percent") ? "gold" : "red"}
+              hide={hiddenItems().includes("percent")}
+            />
+            <Line
+              dataKey="value"
+              name="A"
+              stroke={hiddenItems().includes("value") ? "silver" : "blue"}
+              hide={hiddenItems().includes("value")}
+            />
+          </LineChart>
+        );
+      }
+
+      describe("on initial render", () => {
+        it("should render all items sorted by dataKey", () => {
+          render(() => <MyLegendHidingLineChartTestCase />);
+          flush();
+
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "blue",
+                  inactive: false,
+                }),
+              ],
+            }),
+          );
+        });
+      });
+
+      describe("after clicking on legend items", () => {
+        it("should hide the clicked item and keep the order", () => {
+          render(() => <MyLegendHidingLineChartTestCase />);
+          flush();
+
+          clickButtonByText("A");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+
+          clickButtonByText("B");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "gold",
+                  inactive: true,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+        });
+      });
+    });
+
+    describe("in stacked AreaChart", () => {
+      function MyLegendHidingAreaChartTestCase(): JSX.Element {
+        const { hiddenItems, handleClick } = useItemHiding();
+        return (
+          <AreaChart width={500} height={500} data={numericalData}>
+            <Legend itemSorter="dataKey" content={makeCustomContent(handleClick)} />
+            <Area
+              dataKey="percent"
+              name="B"
+              stackId="1"
+              stroke={hiddenItems().includes("percent") ? "gold" : "red"}
+              hide={hiddenItems().includes("percent")}
+            />
+            <Area
+              dataKey="value"
+              name="A"
+              stackId="1"
+              stroke={hiddenItems().includes("value") ? "silver" : "blue"}
+              hide={hiddenItems().includes("value")}
+            />
+          </AreaChart>
+        );
+      }
+
+      describe("on initial render", () => {
+        it("should render all items sorted by dataKey", () => {
+          render(() => <MyLegendHidingAreaChartTestCase />);
+          flush();
+
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "blue",
+                  inactive: false,
+                }),
+              ],
+            }),
+          );
+        });
+      });
+
+      describe("after clicking on legend items", () => {
+        it("should hide the clicked item and keep the order", () => {
+          render(() => <MyLegendHidingAreaChartTestCase />);
+          flush();
+
+          clickButtonByText("A");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+
+          clickButtonByText("B");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "gold",
+                  inactive: true,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+        });
+
+        it("should show the clicked item again and keep the order", () => {
+          render(() => <MyLegendHidingAreaChartTestCase />);
+          flush();
+
+          clickButtonByText("A");
+          clickButtonByText("B");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "gold",
+                  inactive: true,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+
+          clickButtonByText("B");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "silver",
+                  inactive: true,
+                }),
+              ],
+            }),
+          );
+
+          clickButtonByText("A");
+          expectLastCalledWith(
+            spy,
+            expect.objectContaining({
+              payload: [
+                expect.objectContaining({
+                  value: "B",
+                  dataKey: "percent",
+                  color: "red",
+                  inactive: false,
+                }),
+                expect.objectContaining({
+                  value: "A",
+                  dataKey: "value",
+                  color: "blue",
+                  inactive: false,
+                }),
+              ],
+            }),
+          );
+        });
+      });
+    });
+  });
+});