solid-recharts 0.2.0 → 1.0.0

package/test/cartesian/ReferenceArea.spec.tsx

@@ -1,663 +0,0 @@
-// Ported from recharts 3.8.1 test/cartesian/ReferenceArea.spec.tsx (commit 7a23854)
-// — the impl-ready behavioral subset the Solid ReferenceArea implements:
-// XAxis/YAxis/Bar dependency checks, coordinate-presence gating, ifOverflow
-// discard/extendDomain/hidden, string/number/object/function/boolean labels,
-// default-Rectangle vs function-form shape (+ the shape-fn argument record),
-// clip-path wiring, event handlers, and the Redux settings report.
-//
-// Solid deviations (documented):
-//  - React render → Solid `render(() => ...)` thunk + `flush()`.
-//  - @testing-library/react userEvent → fireEvent (the port's convention).
-//  - The function-form `shape`/`label` render props are invoked with the Solid
-//    prop record (kebab SVG keys, no React `props.x`/`props.y` top-level), so the
-//    "shape function arguments" assertion is golden-anchored to that record and
-//    the function-label renders a static <text> (it cannot read top-level x/y).
-//  - The settings report carries a generated `id` (proxy-safe removal) and is
-//    asserted via a createEffect spy + a Show toggle (no React `rerender`); the
-//    render-cycle call-count assertions are React-specific and dropped.
-//  - Element-form shape/label cases are NOT in this file (deferred: Solid
-//    elements aren't introspectable).
-import { describe, expect, it, test, vi } from "vitest";
-import { createEffect, createSignal, flush, Show } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import { fireEvent, render, screen } from "@solidjs/testing-library";
-import { Bar, BarChart, IfOverflow, LineChart, ReferenceArea, XAxis, YAxis } from "../../src";
-import { useAppSelector } from "../../src/state/hooks";
-import { selectReferenceAreasByAxis } from "../../src/state/selectors/axisSelectors";
-import { assertNotNull } from "../helper/assertNotNull";
-
-describe("<ReferenceArea />", () => {
-  const data = [
-    { name: "201102", uv: -6.11, pv: 0 },
-    { name: "201103", uv: 0.39, pv: 0 },
-    { name: "201104", uv: -1.37, pv: 0 },
-    { name: "201105", uv: 1.16, pv: 0 },
-    { name: "201106", uv: 1.29, pv: 0 },
-    { name: "201107", uv: 0.09, pv: 0 },
-    { name: "201108", uv: 0.53, pv: 0 },
-    { name: "201109", uv: 2.52, pv: 0 },
-    { name: "201110", uv: 0.79, pv: 0 },
-    { name: "201111", uv: 2.94, pv: 0 },
-    { name: "201112", uv: 4.3, pv: 0 },
-  ];
-
-  test("Render 1 rect in ReferenceArea", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" orientation="top" />
-        <YAxis tickCount={7} orientation="right" />
-        <Bar dataKey="uv" />
-        <ReferenceArea x1="201106" x2="201110" fill="#666" label="201106" />
-        <ReferenceArea y1={0} y2={2} fill="#666" label="201106" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(2);
-    expect(container.querySelectorAll(".recharts-label")).toHaveLength(2);
-  });
-
-  it("should render nothing if neither XAxis not Bar are present", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <YAxis tickCount={7} orientation="right" />
-        <ReferenceArea x1="201106" x2="201110" fill="#666" />
-        <ReferenceArea y1={0} y2={2} fill="#999" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(0);
-  });
-
-  it("should render nothing if neither YAxis not Bar are present", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" orientation="top" />
-        <ReferenceArea x1="201106" x2="201110" fill="#666" />
-        <ReferenceArea y1={0} y2={2} fill="#999" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(0);
-  });
-
-  it("should hallucinate XAxis props from Bar", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <YAxis tickCount={7} orientation="right" />
-        <Bar dataKey="uv" />
-        <ReferenceArea y1={0} y2={2} fill="#999" />
-      </BarChart>
-    ));
-    flush();
-    const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-    expect(allAreas).toHaveLength(1);
-    const area = allAreas[0]!;
-    expect(area).toHaveAttribute("d", "M 20,109.4444 h 960 v 25.5556 h -960 Z");
-  });
-
-  test("Don't render any rect in ReferenceArea when no x1, x2, y1 or y2 is set", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" orientation="top" />
-        <YAxis tickCount={7} orientation="right" />
-        <Bar dataKey="uv" />
-        <ReferenceArea stroke="#666" label="0" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(0);
-    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
-  });
-
-  test("Render a rect in ReferenceArea when x1, x2, y1 or y2 is set", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" orientation="top" />
-        <YAxis tickCount={7} orientation="right" />
-        <Bar dataKey="uv" />
-        <ReferenceArea x1="201106" stroke="#666" label="0" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(1);
-    expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
-  });
-
-  test("Don't render any line or label when reference area is outside domain in ReferenceArea", () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" orientation="bottom" />
-        <YAxis tickCount={7} orientation="right" />
-        <Bar dataKey="uv" />
-        <ReferenceArea y1={200} y2={300} fill="#666" />
-        <ReferenceArea x1="20150201" x2="20150201" fill="#666" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(0);
-    expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
-  });
-
-  test('Render line and label when ifOverflow is "extendDomain" in ReferenceArea', () => {
-    const { container } = render(() => (
-      <BarChart
-        width={1100}
-        height={250}
-        barGap={2}
-        barSize={6}
-        data={data}
-        margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-      >
-        <XAxis dataKey="name" />
-        <YAxis tickCount={7} />
-        <Bar dataKey="uv" />
-        <ReferenceArea y1={200} y2={300} fill="#666" ifOverflow="extendDomain" />
-      </BarChart>
-    ));
-    flush();
-    expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(1);
-  });
-
-  describe("label", () => {
-    it("should render label defined as a string", () => {
-      const { container } = render(() => (
-        <BarChart
-          width={1100}
-          height={250}
-          barGap={2}
-          barSize={6}
-          data={data}
-          margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-        >
-          <XAxis dataKey="name" orientation="top" />
-          <YAxis tickCount={7} orientation="right" />
-          <Bar dataKey="uv" />
-          <ReferenceArea x1="201106" x2="201110" fill="#666" label="My label text" />
-        </BarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
-      expect(screen.getByText("My label text")).toBeVisible();
-    });
-
-    it("should render label defined as a number", () => {
-      const { container } = render(() => (
-        <BarChart
-          width={1100}
-          height={250}
-          barGap={2}
-          barSize={6}
-          data={data}
-          margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-        >
-          <XAxis dataKey="name" orientation="top" />
-          <YAxis tickCount={7} orientation="right" />
-          <Bar dataKey="uv" />
-          <ReferenceArea x1="201106" x2="201110" fill="#666" label={2024} />
-        </BarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
-      expect(screen.getByText("2024")).toBeVisible();
-    });
-
-    it("should render label defined as a Label props object", () => {
-      const { container } = render(() => (
-        <BarChart
-          width={1100}
-          height={250}
-          barGap={2}
-          barSize={6}
-          data={data}
-          margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-        >
-          <XAxis dataKey="name" orientation="top" />
-          <YAxis tickCount={7} orientation="right" />
-          <Bar dataKey="uv" />
-          <ReferenceArea
-            x1="201106"
-            x2="201110"
-            fill="#666"
-            label={{ value: "This is not documented by it works perfectly fine", offset: 8 }}
-          />
-        </BarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(".recharts-label")).toHaveLength(1);
-      expect(screen.getByText("This is not documented by it works perfectly fine")).toBeVisible();
-    });
-
-    test("Render 1 line and 1 label when label is a function", () => {
-      // Solid render-prop form: recharts reads top-level props.x/props.y, which
-      // the Solid Label content fn surfaces under `viewBox` instead. The original
-      // assertions never check x/y, so the label renders a static <text>.
-      const renderLabel = (): JSX.Element => (
-        <text class="customized-reference-area-label">My custom label text</text>
-      );
-      const { container } = render(() => (
-        <BarChart
-          width={1100}
-          height={250}
-          barGap={2}
-          barSize={6}
-          data={data}
-          margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-        >
-          <XAxis dataKey="name" />
-          <YAxis tickCount={7} />
-          <Bar dataKey="uv" />
-          <ReferenceArea x1="201106" x2="201110" fill="#666" label={renderLabel} />
-        </BarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(1);
-      expect(container.querySelectorAll(".customized-reference-area-label")).toHaveLength(1);
-      expect(screen.getByText("My custom label text")).toBeVisible();
-    });
-
-    test.each([true, false])("should not render label when label=%s", (label) => {
-      const { container } = render(() => (
-        <BarChart
-          width={1100}
-          height={250}
-          barGap={2}
-          barSize={6}
-          data={data}
-          margin={{ top: 20, right: 60, bottom: 0, left: 20 }}
-        >
-          <XAxis dataKey="name" />
-          <YAxis tickCount={7} />
-          <Bar dataKey="uv" />
-          <ReferenceArea x1="201106" x2="201110" fill="#666" label={label} />
-        </BarChart>
-      ));
-      flush();
-      expect(container.querySelectorAll(".recharts-label")).toHaveLength(0);
-    });
-  });
-
-  describe("shape", () => {
-    it("should render rectangle when shape is not defined", () => {
-      const { container } = render(() => (
-        <BarChart width={200} height={200} data={data}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Bar dataKey="uv" />
-          <ReferenceArea
-            x1="201106"
-            x2="201110"
-            fill="#666"
-            radius={20}
-            strokeWidth={3}
-            fillOpacity={0.7}
-            stroke="yellow"
-          />
-        </BarChart>
-      ));
-      flush();
-      const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-      expect(allAreas).toHaveLength(1);
-      const area = allAreas[0]!;
-      expect.soft(area).toHaveAttribute("x", "112.2727");
-      expect.soft(area).toHaveAttribute("y", "5");
-      expect.soft(area).toHaveAttribute("width", "59.0909");
-      expect.soft(area).toHaveAttribute("height", "160");
-      expect.soft(area).toHaveAttribute("radius", "20");
-      expect.soft(area).toHaveAttribute("x1", "201106");
-      expect.soft(area).toHaveAttribute("x2", "201110");
-      expect.soft(area).toHaveAttribute("fill", "#666");
-      expect.soft(area).toHaveAttribute("stroke-width", "3");
-      expect.soft(area).toHaveAttribute("fill-opacity", "0.7");
-      expect.soft(area).toHaveAttribute("stroke", "yellow");
-      expect.soft(area).toHaveAttribute("class", "recharts-rectangle recharts-reference-area-rect");
-    });
-
-    it("should render if shape is a function", () => {
-      render(() => (
-        <BarChart width={200} height={200} data={data}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Bar dataKey="uv" />
-          <ReferenceArea
-            x1="201106"
-            x2="201110"
-            fill="#666"
-            shape={() => <g data-testid="my-custom-shape" />}
-            radius={10}
-            strokeWidth={3}
-          />
-        </BarChart>
-      ));
-      flush();
-      const area = screen.getByTestId("my-custom-shape");
-      expect(area).toBeVisible();
-    });
-
-    it("should pass arguments to the shape function", () => {
-      const spy = vi.fn();
-      render(() => (
-        <BarChart width={200} height={200} data={data}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Bar dataKey="uv" />
-          <ReferenceArea
-            x1="201106"
-            x2="201110"
-            fill="#666"
-            shape={spy}
-            radius={10}
-            strokeWidth={3}
-          />
-        </BarChart>
-      ));
-      flush();
-      expect(spy).toHaveBeenLastCalledWith({
-        clipPath: undefined,
-        fill: "#666",
-        fillOpacity: 0.5,
-        height: 160,
-        radius: 10,
-        stroke: "none",
-        strokeWidth: 3,
-        width: 59.09090909090909,
-        x: 112.27272727272728,
-        x1: "201106",
-        x2: "201110",
-        y: 5,
-      });
-    });
-
-    it("should pass clip-path when ifOverflow=hidden", () => {
-      const { container } = render(() => (
-        <BarChart width={200} height={200} data={data}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Bar dataKey="uv" />
-          <ReferenceArea x1="201106" x2="201110" ifOverflow="hidden" />
-        </BarChart>
-      ));
-      flush();
-      const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-      expect(allAreas).toHaveLength(1);
-      const area = allAreas[0]!;
-      expect(area).toHaveAttribute("clip-path");
-      expect(area.getAttribute("clip-path")).toMatch(/url\(#recharts(\d+)-clip\)/);
-    });
-
-    test.each(["discard", "extendDomain", "visible"] satisfies ReadonlyArray<IfOverflow>)(
-      "should pass no clip-path when ifOverflow=%s",
-      (ifOverflow) => {
-        const { container } = render(() => (
-          <BarChart width={200} height={200} data={data}>
-            <XAxis dataKey="name" />
-            <YAxis />
-            <Bar dataKey="uv" />
-            <ReferenceArea x1="201106" x2="201110" ifOverflow={ifOverflow} />
-          </BarChart>
-        ));
-        flush();
-        const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-        expect(allAreas).toHaveLength(1);
-        const area = allAreas[0]!;
-        expect(area).not.toHaveAttribute("clip-path");
-      },
-    );
-
-    it("should discard rect shape if it does not fit on the domain and ifOverflow=discard", () => {
-      const { container } = render(() => (
-        <BarChart width={200} height={200} data={data}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Bar dataKey="uv" />
-          <ReferenceArea y1={100} y2={200} ifOverflow="discard" />
-        </BarChart>
-      ));
-      flush();
-      const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-      expect(allAreas).toHaveLength(0);
-    });
-
-    test.each(["extendDomain", "visible", "hidden"] satisfies ReadonlyArray<IfOverflow>)(
-      "should draw the shape if it does not fit on the domain and ifOverflow=%s",
-      (ifOverflow) => {
-        const { container } = render(() => (
-          <BarChart width={200} height={200} data={data}>
-            <XAxis dataKey="name" />
-            <YAxis />
-            <Bar dataKey="uv" />
-            <ReferenceArea y1={100} y2={200} ifOverflow={ifOverflow} />
-          </BarChart>
-        ));
-        flush();
-        const allAreas = container.querySelectorAll(".recharts-reference-area-rect");
-        expect(allAreas).toHaveLength(1);
-      },
-    );
-  });
-
-  describe("events", () => {
-    it("should fire event handlers when provided", () => {
-      const onClick = vi.fn();
-      const onMouseEnter = vi.fn();
-      const onMouseLeave = vi.fn();
-      const onMouseOver = vi.fn();
-      const onMouseOut = vi.fn();
-      const onMouseMove = vi.fn();
-      const onTouchStart = vi.fn();
-      const onTouchMove = vi.fn();
-      const onTouchEnd = vi.fn();
-
-      const { container } = render(() => (
-        <LineChart
-          width={100}
-          height={100}
-          data={[
-            { x: 0, y: 0 },
-            { x: 1, y: 1 },
-          ]}
-        >
-          <YAxis dataKey="y" />
-          <XAxis dataKey="x" />
-          <ReferenceArea
-            x1={0}
-            y1={0}
-            x2={1}
-            y2={1}
-            onClick={onClick}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            onMouseOver={onMouseOver}
-            onMouseOut={onMouseOut}
-            onMouseMove={onMouseMove}
-            onTouchStart={onTouchStart}
-            onTouchMove={onTouchMove}
-            onTouchEnd={onTouchEnd}
-          />
-        </LineChart>
-      ));
-      flush();
-
-      const dot = container.querySelector(".recharts-reference-area-rect");
-      assertNotNull(dot);
-
-      fireEvent.click(dot);
-      expect(onClick).toHaveBeenCalledTimes(1);
-      expect(onClick).toHaveBeenLastCalledWith(expect.objectContaining({ type: "click" }));
-
-      fireEvent.mouseEnter(dot);
-      expect(onMouseEnter).toHaveBeenCalledTimes(1);
-      expect(onMouseEnter).toHaveBeenLastCalledWith(
-        expect.objectContaining({ type: "mouseenter" }),
-      );
-
-      fireEvent.mouseOver(dot);
-      expect(onMouseOver).toHaveBeenCalledTimes(1);
-      expect(onMouseOver).toHaveBeenLastCalledWith(expect.objectContaining({ type: "mouseover" }));
-
-      fireEvent.mouseLeave(dot);
-      expect(onMouseLeave).toHaveBeenCalledTimes(1);
-      expect(onMouseLeave).toHaveBeenLastCalledWith(
-        expect.objectContaining({ type: "mouseleave" }),
-      );
-
-      fireEvent.mouseOut(dot);
-      expect(onMouseOut).toHaveBeenCalledTimes(1);
-      expect(onMouseOut).toHaveBeenLastCalledWith(expect.objectContaining({ type: "mouseout" }));
-
-      fireEvent.mouseMove(dot);
-      expect(onMouseMove).toHaveBeenCalledTimes(1);
-      expect(onMouseMove).toHaveBeenLastCalledWith(expect.objectContaining({ type: "mousemove" }));
-
-      fireEvent.touchStart(dot);
-      expect(onTouchStart).toHaveBeenCalledTimes(1);
-      expect(onTouchStart).toHaveBeenLastCalledWith(
-        expect.objectContaining({ type: "touchstart" }),
-      );
-
-      fireEvent.touchMove(dot);
-      expect(onTouchMove).toHaveBeenCalledTimes(1);
-      expect(onTouchMove).toHaveBeenLastCalledWith(expect.objectContaining({ type: "touchmove" }));
-
-      fireEvent.touchEnd(dot);
-      expect(onTouchEnd).toHaveBeenCalledTimes(1);
-      expect(onTouchEnd).toHaveBeenLastCalledWith(expect.objectContaining({ type: "touchend" }));
-    });
-  });
-
-  describe("state integration", () => {
-    it("should report its settings to Redux state, and remove it after removing from DOM", () => {
-      const areaSpy = vi.fn();
-      const [showArea, setShowArea] = createSignal(true);
-      const Comp = (): null => {
-        const areas = useAppSelector((state) => selectReferenceAreasByAxis(state, "yAxis", 0));
-        createEffect(
-          () => areas(),
-          (v) => areaSpy(v),
-        );
-        return null;
-      };
-      // The reference wraps this in a BarChart whose <Bar> only anchors the
-      // chart; the settings report (the actual assertion) is independent of any
-      // graphical item. We use the minimal LineChart shell (matching the
-      // ReferenceDot port) so the toggle-driven removal doesn't re-trigger Bar's
-      // animation manager — a Bar-internal effect that, under the store update
-      // from disposal, would create an owner-less effect (NO_OWNER_EFFECT).
-      render(() => (
-        <LineChart width={200} height={200}>
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Show when={showArea()}>
-            <ReferenceArea
-              y1={1}
-              y2={2}
-              x1="category 3"
-              x2="category 4"
-              ifOverflow="extendDomain"
-            />
-          </Show>
-          <Comp />
-        </LineChart>
-      ));
-      flush();
-
-      expect(areaSpy).toHaveBeenLastCalledWith([
-        {
-          // `id` is a documented Solid deviation: recharts matches reference
-          // elements by object identity; Solid store proxies break that, so the
-          // port mints a stable id for proxy-safe removal.
-          id: expect.stringMatching(/^recharts-reference-area-/) as unknown as string,
-          ifOverflow: "extendDomain",
-          x1: "category 3",
-          x2: "category 4",
-          xAxisId: 0,
-          y1: 1,
-          y2: 2,
-          yAxisId: 0,
-        },
-      ]);
-
-      setShowArea(false);
-      flush();
-
-      expect(areaSpy).toHaveBeenLastCalledWith([]);
-    });
-  });
-
-  describe("multiple axes", () => {
-    // The port resolves the x/y scales per-axis via selectAxisScale(state, axis,
-    // xAxisId/yAxisId, …). A reference area targeting a non-default axis id must map
-    // through THAT axis' scale: y1..y2 = 120..180 lives inside the "right" domain
-    // (0..200) but is out of range of the default "left" domain (0..20), so with
-    // ifOverflow="discard" (default) only the correctly-targeted area survives.
-    const multiAxisData = [
-      { name: "A", pv: 10, uv: 100 },
-      { name: "B", pv: 20, uv: 200 },
-    ];
-
-    it("should map the reference area through the targeted axis' scale", () => {
-      const { container } = render(() => (
-        <BarChart width={500} height={400} data={multiAxisData}>
-          <XAxis dataKey="name" />
-          <YAxis yAxisId="left" />
-          <YAxis yAxisId="right" orientation="right" />
-          <Bar dataKey="pv" yAxisId="left" />
-          <Bar dataKey="uv" yAxisId="right" />
-          <ReferenceArea y1={120} y2={180} yAxisId="right" fill="#666" />
-          <ReferenceArea y1={120} y2={180} yAxisId="left" fill="#f00" />
-        </BarChart>
-      ));
-      flush();
-      // Only the area targeting the "right" axis (domain 0..200) is in range.
-      expect(container.querySelectorAll(".recharts-reference-area-rect")).toHaveLength(1);
-    });
-  });
-});