solid-recharts 1.0.0 → 2.0.0-beta.1

package/test/component/Label.spec.tsx

@@ -0,0 +1,686 @@
+// Ported from recharts 3.8.1 test/component/Label.spec.tsx (commit 7a23854).
+// React-element/cloneElement cases are intentionally left to Label.render.spec.tsx
+// deferrals because Solid has no cloneElement equivalent.
+import { flush } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import { Label, Line, LineChart, PieChart, ReferenceLine, Surface } from "../../src";
+import type { Props as LabelProps } from "../../src/component/Label";
+import { DefaultZIndexes } from "../../src/zIndex/DefaultZIndexes";
+import { assertNotNull } from "../helper/assertNotNull";
+import { render, screen } from "@solidjs/testing-library";
+import { AnimationControllerProvider } from "../../src/animation/useAnimationController";
+import { MockControllerAnimationManager as MockProgressAnimationManager } from "../animation/mockControllerAnimationManager";
+
+const data = [
+  { 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("<Label />", () => {
+  const polarViewBox = {
+    cx: 50,
+    cy: 50,
+    innerRadius: 20,
+    outerRadius: 80,
+    startAngle: 0,
+    endAngle: 90,
+    clockWise: false,
+  };
+
+  const cartesianViewBox = {
+    x: 50,
+    y: 50,
+    width: 200,
+    height: 200,
+  };
+
+  it('Render polar labels (position="center")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={polarViewBox} value="text" position="center" />
+      </Surface>
+    ));
+    flush();
+
+    const label = container.querySelectorAll(".recharts-label");
+
+    expect(label.length).toEqual(1);
+    expect(label[0]).toHaveAttribute("x", `${polarViewBox.cx}`);
+    expect(label[0]).toHaveAttribute("y", `${polarViewBox.cy}`);
+  });
+
+  it('Render polar labels (position="outside")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={polarViewBox} value="text" position="outside" />
+      </Surface>
+    ));
+    flush();
+
+    const label = container.querySelectorAll(".recharts-label");
+
+    expect(label.length).toEqual(1);
+    expect(label[0]).toHaveAttribute("x", "110.10407640085654");
+    expect(label[0]).toHaveAttribute("y", "-10.104076400856535");
+  });
+
+  it('Render radial labels (position="insideStart")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={polarViewBox} value="text" position="insideStart" />
+      </Surface>
+    ));
+    flush();
+
+    const label = container.querySelectorAll(".recharts-radial-bar-label");
+
+    expect(label.length).toEqual(1);
+  });
+
+  it('Render radial labels (position="insideEnd")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={polarViewBox} value="text" position="insideEnd" />
+      </Surface>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-radial-bar-label").length).toEqual(1);
+  });
+
+  it('Render radial labels (position="end")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={polarViewBox} value="text" position="end" />
+      </Surface>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-radial-bar-label").length).toEqual(1);
+  });
+
+  it('Render cartesian labels (position="center")', () => {
+    const { container } = render(() => (
+      <Surface height={0} width={0}>
+        <Label viewBox={cartesianViewBox} value="text" position="center" />
+      </Surface>
+    ));
+    flush();
+
+    const label = container.querySelectorAll(".recharts-label");
+
+    expect(label.length).toEqual(1);
+    expect(label[0]).toHaveAttribute("x", `${cartesianViewBox.x + cartesianViewBox.width / 2}`);
+    expect(label[0]).toHaveAttribute("y", `${cartesianViewBox.y + cartesianViewBox.height / 2}`);
+  });
+
+  describe("content/value/children variants", () => {
+    describe("when only one option is provided", () => {
+      function renderLabelWithChildren(children: LabelProps["children"]) {
+        return render(() => (
+          <Surface height={0} width={0}>
+            <Label viewBox={cartesianViewBox} position="center">
+              {children}
+            </Label>
+          </Surface>
+        ));
+      }
+
+      function renderLabelWithValue(value: LabelProps["value"]) {
+        return render(() => (
+          <Surface height={0} width={0}>
+            <Label viewBox={cartesianViewBox} position="center" value={value} />
+          </Surface>
+        ));
+      }
+
+      function renderLabelWithContent(content: LabelProps["content"]) {
+        return render(() => (
+          <Surface height={0} width={0}>
+            <Label viewBox={cartesianViewBox} position="center" content={content} />
+          </Surface>
+        ));
+      }
+
+      describe("string", () => {
+        it("should render label when given children prop", () => {
+          renderLabelWithChildren("label from children");
+          flush();
+
+          const label = screen.getAllByText("label from children");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should render label when given value prop", () => {
+          renderLabelWithValue("label from value");
+          flush();
+
+          const label = screen.getAllByText("label from value");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should not render label at all when given content prop", () => {
+          // @ts-expect-error Recharts verifies invalid content primitives render nothing.
+          const { container } = renderLabelWithContent("label from content");
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+          expect(container.textContent).toBe("");
+        });
+      });
+
+      describe("number", () => {
+        it("should render label when given children prop", () => {
+          renderLabelWithChildren(12345);
+          flush();
+
+          const label = screen.getAllByText("12345");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should render label when given value prop", () => {
+          renderLabelWithValue(67890);
+          flush();
+
+          const label = screen.getAllByText("67890");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should not render label at all when given content prop", () => {
+          // @ts-expect-error Recharts verifies invalid content primitives render nothing.
+          const { container } = renderLabelWithContent(54321);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+          expect(container.textContent).toBe("");
+        });
+      });
+
+      describe("boolean", () => {
+        it("should render label when given children prop", () => {
+          renderLabelWithChildren(true);
+          flush();
+
+          const label = screen.getAllByText("true");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should render label when given value prop", () => {
+          renderLabelWithValue(false);
+          flush();
+
+          const label = screen.getAllByText("false");
+          expect(label.length).toEqual(1);
+        });
+
+        it("should not render label at all when given content prop", () => {
+          // @ts-expect-error Recharts verifies invalid content primitives render nothing.
+          const { container } = renderLabelWithContent(true);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+          expect(container.textContent).toBe("");
+        });
+      });
+
+      describe("null", () => {
+        it("should not render label at all when given children prop", () => {
+          const { container } = renderLabelWithChildren(null);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+        });
+
+        it("should not render label at all when given value prop", () => {
+          const { container } = renderLabelWithValue(null);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+        });
+
+        it("should not render label at all when given content prop", () => {
+          const { container } = renderLabelWithContent(undefined);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+          expect(container.textContent).toBe("");
+        });
+      });
+
+      describe("undefined", () => {
+        it("should not render label at all when given children prop", () => {
+          const { container } = renderLabelWithChildren(undefined);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+        });
+
+        it("should not render label at all when given value prop", () => {
+          const { container } = renderLabelWithValue(undefined);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+        });
+
+        it("should not render label at all when given content prop", () => {
+          const { container } = renderLabelWithContent(undefined);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          expect(label).toBeNull();
+          expect(container.textContent).toBe("");
+        });
+      });
+
+      describe("function that returns a string", () => {
+        const fn = vi.fn(() => "label from function");
+
+        it("should render label when given children prop", () => {
+          // @ts-expect-error typescript is correct here, Label does not allow function as children, and renders gibberish
+          const { container } = renderLabelWithChildren(fn);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          assertNotNull(label);
+          expect(label).toBeInTheDocument();
+
+          expect(label.textContent).toMatch("function(...args) {");
+
+          expect(fn).toHaveBeenCalledTimes(0);
+        });
+
+        it("should render label when given value prop", () => {
+          // @ts-expect-error typescript is correct here, Label does not allow function as value, and renders gibberish
+          const { container } = renderLabelWithValue(fn);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          assertNotNull(label);
+          expect(label).toBeInTheDocument();
+
+          expect(label.textContent).toMatch("function(...args) {");
+
+          expect(fn).toHaveBeenCalledTimes(0);
+        });
+
+        it("should render label when given content prop", () => {
+          const fn = vi.fn(() => "label from function");
+          renderLabelWithContent(fn);
+          flush();
+
+          const label = screen.getAllByText("label from function");
+          expect(label.length).toEqual(1);
+
+          expect(fn).toHaveBeenCalledTimes(1);
+          expect(fn).toHaveBeenLastCalledWith({
+            angle: 0,
+            offset: 5,
+            position: "center",
+            textBreakAll: false,
+            zIndex: DefaultZIndexes.label,
+            viewBox: {
+              height: 200,
+              width: 200,
+              lowerWidth: 200,
+              upperWidth: 200,
+              x: 50,
+              y: 50,
+            },
+          });
+        });
+      });
+
+      describe("array of strings", () => {
+        const array = ["label", "from", "array"];
+
+        it("should render label when given children prop", () => {
+          // @ts-expect-error typescript is correct here, Label does not allow React element as value, and it renders gibberish
+          const { container } = renderLabelWithChildren(array);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          assertNotNull(label);
+          expect(label).toBeInTheDocument();
+
+          expect(label.textContent).toEqual("label,from,array");
+        });
+
+        it("should render label when given value prop", () => {
+          // @ts-expect-error typescript says that array of strings is not allowed as value, and indeed it calls the standard .toString() on it and renders that
+          const { container } = renderLabelWithValue(array);
+          flush();
+
+          const label = container.querySelector(".recharts-label");
+          assertNotNull(label);
+          expect(label).toBeInTheDocument();
+
+          expect(label.textContent).toEqual("label,from,array");
+        });
+
+        it("should render label when given content prop", () => {
+          // @ts-expect-error typescript says that array of strings is not allowed as content, and indeed it does not render anything
+          const { container } = renderLabelWithContent(array);
+          flush();
+
+          expect(container.textContent).toEqual("");
+        });
+      });
+
+      // recharts' "React function component" block: a component as content is
+      // invoked (and may run hooks). In the Solid port a function-form `content`
+      // is the function itself, so a "component" content reduces to the same path.
+      // PERMANENT-N/A: the children/value cases serialize the component source via
+      // React.Children semantics ("() => {"); the Solid renderer invokes a function
+      // child instead, so only the content case is portable.
+      describe("function component", () => {
+        const MyComp = () => <>label from component 1</>;
+
+        it("should render label when given content prop", () => {
+          const { container } = renderLabelWithContent(MyComp);
+          flush();
+
+          expect(container.textContent).toEqual("label from component 1");
+        });
+      });
+    });
+
+    describe("when both children + value are provided", () => {
+      it("should prefer children over value", () => {
+        const { container } = render(() => (
+          <Surface height={0} width={0}>
+            <Label viewBox={cartesianViewBox} position="center" value="label from value">
+              label from children
+            </Label>
+          </Surface>
+        ));
+        flush();
+
+        const label = container.querySelectorAll(".recharts-label");
+
+        expect(label.length).toEqual(1);
+        assertNotNull(label[0]);
+        expect(label[0].textContent).toEqual("label from children");
+      });
+    });
+
+    describe("when both children + content are provided", () => {
+      it("should should pass children as a prop to the content function, and render what content returned", () => {
+        const contentFn = vi.fn(() => "label from content");
+
+        const { container } = render(() => (
+          <Surface height={0} width={0}>
+            <Label viewBox={cartesianViewBox} position="center" content={contentFn}>
+              label from children
+            </Label>
+          </Surface>
+        ));
+        flush();
+
+        expect(container.textContent).toEqual("label from content");
+
+        expect(contentFn).toHaveBeenCalledTimes(1);
+        expect(contentFn).toHaveBeenLastCalledWith({
+          angle: 0,
+          children: "label from children",
+          offset: 5,
+          textBreakAll: false,
+          position: "center",
+          zIndex: DefaultZIndexes.label,
+          viewBox: {
+            height: 200,
+            width: 200,
+            lowerWidth: 200,
+            upperWidth: 200,
+            x: 50,
+            y: 50,
+          },
+        });
+      });
+    });
+
+    describe("when both value + content are provided", () => {
+      it("should should pass value as a prop to the content function, and render what content returned", () => {
+        const contentFn = vi.fn(() => "label from content");
+
+        const { container } = render(() => (
+          <Surface height={0} width={0}>
+            <Label
+              viewBox={cartesianViewBox}
+              position="center"
+              value="label from value"
+              content={contentFn}
+            />
+          </Surface>
+        ));
+        flush();
+
+        expect(container.textContent).toEqual("label from content");
+
+        expect(contentFn).toHaveBeenCalledTimes(1);
+        expect(contentFn).toHaveBeenLastCalledWith({
+          angle: 0,
+          value: "label from value",
+          offset: 5,
+          textBreakAll: false,
+          position: "center",
+          zIndex: DefaultZIndexes.label,
+          viewBox: {
+            height: 200,
+            width: 200,
+            lowerWidth: 200,
+            upperWidth: 200,
+            x: 50,
+            y: 50,
+          },
+        });
+      });
+    });
+
+    describe("when all three children + value + content are provided", () => {
+      it("should should pass children and value as props to the content function, and render what content returned", () => {
+        const contentFn = vi.fn(() => "label from content");
+
+        const { container } = render(() => (
+          <Surface height={0} width={0}>
+            <Label
+              viewBox={cartesianViewBox}
+              position="center"
+              value="label from value"
+              content={contentFn}
+            >
+              label from children
+            </Label>
+          </Surface>
+        ));
+        flush();
+
+        expect(container.textContent).toEqual("label from content");
+
+        expect(contentFn).toHaveBeenCalledTimes(1);
+        expect(contentFn).toHaveBeenLastCalledWith({
+          angle: 0,
+          children: "label from children",
+          value: "label from value",
+          textBreakAll: false,
+          offset: 5,
+          position: "center",
+          zIndex: DefaultZIndexes.label,
+          viewBox: {
+            height: 200,
+            width: 200,
+            lowerWidth: 200,
+            upperWidth: 200,
+            x: 50,
+            y: 50,
+          },
+        });
+      });
+    });
+  });
+
+  it("Render label by label = <Label />", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
+        {/* @ts-expect-error React element label form is kept as a vendor parity fixture. */}
+        <ReferenceLine y={200} stroke="red" label={<Label value="Max PV PAGE" />} />
+      </LineChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-line .recharts-line-curve").length).toEqual(1);
+  });
+
+  it("Renders label by label props with animation disabled", () => {
+    const { container } = render(() => (
+      <LineChart
+        width={400}
+        height={400}
+        data={data}
+        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      >
+        <Line
+          type="monotone"
+          dataKey="uv"
+          stroke="#ff7300"
+          label={{ position: "center" }}
+          isAnimationActive={false}
+        />
+      </LineChart>
+    ));
+    flush();
+
+    expect(container.querySelectorAll(".recharts-line .recharts-line-curve").length).toEqual(1);
+    expect(screen.getByText(/400/i)).toBeInTheDocument();
+  });
+
+  it("Renders label by label props with animation enabled", () => {
+    const manager = new MockProgressAnimationManager("label-anim");
+    const { container } = render(() => (
+      <AnimationControllerProvider value={manager.factory}>
+        <LineChart
+          width={400}
+          height={400}
+          data={data}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+        >
+          <Line type="monotone" dataKey="uv" stroke="#ff7300" label={{ position: "center" }} />
+        </LineChart>
+      </AnimationControllerProvider>
+    ));
+    flush();
+    // Labels are hidden during the entrance animation; drive it to completion so they show.
+    return manager.completeAnimation().then(() => {
+      flush();
+      expect(container.querySelectorAll(".recharts-line .recharts-line-curve").length).toEqual(1);
+      expect(screen.getByText(/400/i)).toBeInTheDocument();
+    });
+  });
+
+  describe("in PieChart", () => {
+    describe("with custom content function", () => {
+      it("should pass the correct props to the content function when position=center", () => {
+        const contentFn = vi.fn();
+        render(() => (
+          <PieChart height={100} width={200}>
+            <Label value="text" position="center" content={contentFn} />
+          </PieChart>
+        ));
+        flush();
+
+        expect(contentFn).toHaveBeenLastCalledWith({
+          viewBox: {
+            height: 90,
+            width: 190,
+            lowerWidth: 190,
+            upperWidth: 190,
+            x: 5,
+            y: 5,
+          },
+          angle: 0,
+          value: "text",
+          textBreakAll: false,
+          position: "center",
+          offset: 5,
+          zIndex: DefaultZIndexes.label,
+        });
+      });
+
+      it("should pass the correct props to the content function when position=insideEnd", () => {
+        const contentFn = vi.fn();
+        render(() => (
+          <PieChart height={100} width={200}>
+            <Label value="text" position="insideEnd" content={contentFn} />
+          </PieChart>
+        ));
+        flush();
+
+        expect(contentFn).toHaveBeenLastCalledWith({
+          viewBox: {
+            clockWise: false,
+            cx: 100,
+            cy: 50,
+            endAngle: 360,
+            innerRadius: 0,
+            outerRadius: 36,
+            startAngle: 0,
+          },
+          angle: 0,
+          value: "text",
+          textBreakAll: false,
+          position: "insideEnd",
+          offset: 5,
+          zIndex: DefaultZIndexes.label,
+        });
+      });
+    });
+  });
+
+  describe("in LineChart", () => {
+    describe("with custom content function", () => {
+      it("should pass the correct props to the content function", () => {
+        const contentFn = vi.fn();
+        render(() => (
+          <LineChart width={400} height={400} data={data}>
+            <Label value="text" position="center" content={contentFn} />
+          </LineChart>
+        ));
+        flush();
+
+        expect(contentFn).toHaveBeenLastCalledWith({
+          viewBox: {
+            height: 390,
+            width: 390,
+            lowerWidth: 390,
+            upperWidth: 390,
+            x: 5,
+            y: 5,
+          },
+          angle: 0,
+          value: "text",
+          textBreakAll: false,
+          position: "center",
+          offset: 5,
+          zIndex: DefaultZIndexes.label,
+        });
+      });
+    });
+  });
+});