solid-recharts 0.2.0 → 1.0.0

package/test/animation/CSSTransitionAnimate.timing.spec.tsx

@@ -1,473 +0,0 @@
-// Behavioral spec for CSSTransitionAnimate on the v3.9 engine.
-//
-// Harness adaptation (per project rules):
-//   - React render(<…/>) → Solid render(() => <…/>) + flush().
-//   - The reference's render-COUNT assertions (toHaveBeenCalledTimes) are coupled to
-//     React's render cycle; Solid components run once and the render-prop child
-//     re-invokes via a reactive JSX/memo binding on a different cadence. So the
-//     STYLE-VALUE assertions (toHaveBeenLastCalledWith) and the start/end callback
-//     assertions are kept (Tier-A); call-count anchors are golden-adapted.
-//   - The reference drives `rerender(...)` to mutate props; Solid components run once,
-//     so prop changes are driven by signals (createSignal) wired into the props.
-//   - The deterministic group injects the new-engine controller via
-//     `animationController={manager.factory}` (MockControllerAnimationManager) and drives
-//     it with `completeAnimation()` — the v3.9 replacement for the old queue-poll mocks.
-//   - `vi.useFakeTimers()` cases drive the REAL default controller (rAF-backed); we
-//     advance the faked timers then `flush()` Solid's reactive graph.
-//   - CADENCE DIVERGENCE (recurring): React runs the start effect AFTER first render and
-//     flips `initialized` via a ref; Solid flushes the effect eagerly and flips
-//     `initialized` (a signal) synchronously, AND the v3.9 engine fires onAnimationStart
-//     synchronously in the CSSTransitionAnimation constructor. So the transition key and
-//     the `onStart`-set `from` value appear one cadence earlier than the reference. The
-//     load-bearing contracts (fresh `from`, settled `to`, gating) are asserted.
-import { describe, expect, it, vi, beforeEach } from "vitest";
-import { createSignal, flush } from "solid-js";
-import { render, fireEvent } from "@solidjs/testing-library";
-import { CSSTransitionAnimate } from "../../src/animation/CSSTransitionAnimate";
-import { MockControllerAnimationManager } from "./mockControllerAnimationManager";
-import { expectLastCalledWith } from "../helper/expectLastCalledWith";
-
-function getNamedSpy(name: string): () => void {
-  return vi.fn().mockName(name);
-}
-
-describe("CSSTransitionAnimate timing", () => {
-  const handleAnimationStart = getNamedSpy("handleAnimationStart");
-  const handleAnimationEnd = getNamedSpy("handleAnimationEnd");
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("with animation steps as strings", () => {
-    describe("test using vi fake timers", () => {
-      it("should call children function with animated style", () => {
-        vi.useFakeTimers();
-        try {
-          const childFunction = vi.fn();
-          render(() => (
-            <CSSTransitionAnimate
-              animationId="1"
-              from="1"
-              to="0"
-              attributeName="opacity"
-              duration={500}
-            >
-              {childFunction}
-            </CSSTransitionAnimate>
-          ));
-          flush();
-
-          // NOTE (cadence divergence): the reference asserts the bare `{ opacity: '1' }`
-          // snapshot here because React runs the start effect AFTER first render. Solid
-          // flushes that effect eagerly, so by now the transition key is already present
-          // while the value is still the `from`. The golden final-state assertion below
-          // is kept byte-identical.
-          expect(childFunction).toHaveBeenLastCalledWith({
-            opacity: "1",
-            transition: "opacity 500ms ease",
-          });
-
-          vi.advanceTimersByTime(700);
-          flush();
-
-          expectLastCalledWith(childFunction, {
-            opacity: "0",
-            transition: "opacity 500ms ease",
-          });
-        } finally {
-          vi.useRealTimers();
-        }
-      });
-
-      it("should call onAnimationEnd at the end of the animation", () => {
-        vi.useFakeTimers();
-        try {
-          const spy = vi.fn();
-
-          render(() => (
-            <CSSTransitionAnimate
-              animationId="1"
-              from="1"
-              to="0"
-              attributeName="opacity"
-              duration={500}
-              onAnimationEnd={handleAnimationEnd}
-            >
-              {spy}
-            </CSSTransitionAnimate>
-          ));
-          flush();
-
-          expect(handleAnimationEnd).not.toHaveBeenCalled();
-
-          vi.advanceTimersByTime(700);
-          flush();
-
-          expect(handleAnimationEnd).toHaveBeenCalledTimes(1);
-        } finally {
-          vi.useRealTimers();
-        }
-      });
-    });
-
-    describe("test using injected controller", () => {
-      it("should call children function with animated style", async () => {
-        const manager = new MockControllerAnimationManager("1");
-        const childFunction = vi.fn();
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="scaleY(0)"
-            to="scaleY(1)"
-            attributeName="transform"
-            duration={500}
-            animationController={manager.factory}
-            canBegin
-          >
-            {childFunction}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(childFunction).toHaveBeenLastCalledWith({
-          transform: "scaleY(0)",
-          transition: "transform 500ms ease",
-        });
-
-        await manager.completeAnimation();
-        flush();
-
-        expect(childFunction).toHaveBeenLastCalledWith({
-          transform: "scaleY(1)",
-          transition: "transform 500ms ease",
-        });
-      });
-
-      it("should call onAnimationStart and onAnimationEnd", async () => {
-        const manager = new MockControllerAnimationManager("1");
-        const childFunction = vi.fn();
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="scaleY(0)"
-            to="scaleY(1)"
-            attributeName="transform"
-            duration={500}
-            onAnimationStart={handleAnimationStart}
-            onAnimationEnd={handleAnimationEnd}
-            animationController={manager.factory}
-          >
-            {childFunction}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        // v3.9 engine: onAnimationStart fires synchronously when the animation is created.
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        expect(handleAnimationEnd).not.toHaveBeenCalled();
-
-        await manager.completeAnimation();
-        flush();
-
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        expect(handleAnimationEnd).toHaveBeenCalledTimes(1);
-      });
-
-      it("should start animation on mount, and stop on unmount", () => {
-        const manager = new MockControllerAnimationManager("1");
-        const childFunction = vi.fn();
-
-        const { unmount } = render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="1"
-            to="0"
-            attributeName="opacity"
-            duration={500}
-            onAnimationStart={handleAnimationStart}
-            onAnimationEnd={handleAnimationEnd}
-            animationController={manager.factory}
-          >
-            {childFunction}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(manager.isAnimating()).toBe(true);
-
-        // Tier-B adaptation: the reference unmounts via `rerender(<></>)`; in Solid we
-        // dispose the render root, which runs the effect cleanup → controller cancel → stop.
-        unmount();
-
-        expect(manager.isAnimating(), "AnimationController should be stopped on unmount").toBe(
-          false,
-        );
-      });
-
-      it("should not start animation if canBegin is false, and render with starting state", () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="1"
-            to="0"
-            attributeName="opacity"
-            easing="ease-in-out"
-            duration={500}
-            canBegin={false}
-            onAnimationStart={handleAnimationStart}
-            animationController={manager.factory}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(manager.isAnimating()).toBe(false);
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expectLastCalledWith(child, { opacity: "1" });
-      });
-
-      it("should go straight to final state when isActive is false, and do not pass any transition", () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="1"
-            to="0"
-            attributeName="opacity"
-            duration={500}
-            isActive={false}
-            onAnimationStart={handleAnimationStart}
-            animationController={manager.factory}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(manager.isAnimating()).toBe(false);
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expectLastCalledWith(child, { opacity: "0" });
-      });
-
-      it("should restart animation when isActive changes to true via signal", async () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-        const [isActive, setIsActive] = createSignal(false);
-        const [duration, setDuration] = createSignal(500);
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from="1"
-            to="0"
-            attributeName="opacity"
-            duration={duration()}
-            isActive={isActive()}
-            onAnimationStart={handleAnimationStart}
-            animationController={manager.factory}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0" });
-
-        // Activate (and change the duration, mirroring the reference rerender).
-        setIsActive(true);
-        setDuration(300);
-        flush();
-
-        // v3.9 onStart fires synchronously, setting the style to the fresh `from`.
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        expect(child).toHaveBeenLastCalledWith({
-          opacity: "1",
-          transition: "opacity 300ms ease",
-        });
-
-        await manager.completeAnimation();
-        flush();
-        expect(child).toHaveBeenLastCalledWith({
-          opacity: "0",
-          transition: "opacity 300ms ease",
-        });
-      });
-
-      it("should restart animation when isActive changes to true via button click", async () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-        const MyTestComponent = () => {
-          const [isActive, setIsActive] = createSignal(false);
-          return (
-            <>
-              <CSSTransitionAnimate
-                animationId="1"
-                from="1"
-                to="0"
-                attributeName="opacity"
-                duration={500}
-                isActive={isActive()}
-                onAnimationStart={handleAnimationStart}
-                animationController={manager.factory}
-              >
-                {child}
-              </CSSTransitionAnimate>
-              <button type="button" onClick={() => setIsActive(true)}>
-                Start Animation
-              </button>
-            </>
-          );
-        };
-
-        const rendered = render(() => <MyTestComponent />);
-        flush();
-
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0" });
-        expect(manager.isAnimating()).toBe(false);
-
-        const button = rendered.getByText("Start Animation");
-        fireEvent.click(button);
-        flush();
-
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        expect(manager.isAnimating()).toBe(true);
-        expect(child).toHaveBeenLastCalledWith({ opacity: "1", transition: "opacity 500ms ease" });
-
-        await manager.completeAnimation();
-        flush();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0", transition: "opacity 500ms ease" });
-      });
-
-      it("should rerender with the final state when isActive is false", () => {
-        const child = vi.fn();
-        const [from, setFrom] = createSignal("1");
-        const [to, setTo] = createSignal("0");
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from={from()}
-            to={to()}
-            attributeName="opacity"
-            duration={500}
-            isActive={false}
-            onAnimationStart={handleAnimationStart}
-            onAnimationEnd={handleAnimationEnd}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(handleAnimationEnd).not.toHaveBeenCalled();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0" });
-
-        // Mirror the reference rerender with new from/to (still inactive).
-        setFrom("0.7");
-        setTo("0.3");
-        flush();
-
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0.3" });
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(handleAnimationEnd).not.toHaveBeenCalled();
-      });
-
-      it("should not start animation on rerender if canBegin is false", () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-        const [from, setFrom] = createSignal("1");
-        const [to, setTo] = createSignal("0");
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from={from()}
-            to={to()}
-            attributeName="opacity"
-            duration={500}
-            canBegin={false}
-            onAnimationStart={handleAnimationStart}
-            animationController={manager.factory}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(manager.isAnimating()).toBe(false);
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "1" });
-
-        setFrom("0.7");
-        setTo("0.3");
-        flush();
-
-        // rerendering should not start the animation
-        expect(manager.isAnimating()).toBe(false);
-        // the child should now be rerendered with the fresh "from" state
-        expect(child).toHaveBeenLastCalledWith({ opacity: "0.7" });
-      });
-
-      it("should start animation on rerender if canBegin changes from false to true", async () => {
-        const manager = new MockControllerAnimationManager("1");
-        const child = vi.fn();
-        const [from, setFrom] = createSignal("1");
-        const [to, setTo] = createSignal("0");
-        const [canBegin, setCanBegin] = createSignal(false);
-
-        render(() => (
-          <CSSTransitionAnimate
-            animationId="1"
-            from={from()}
-            to={to()}
-            attributeName="opacity"
-            duration={500}
-            canBegin={canBegin()}
-            onAnimationStart={handleAnimationStart}
-            animationController={manager.factory}
-          >
-            {child}
-          </CSSTransitionAnimate>
-        ));
-        flush();
-
-        expect(handleAnimationStart).not.toHaveBeenCalled();
-        expect(child).toHaveBeenLastCalledWith({ opacity: "1" });
-
-        setFrom("0.7");
-        setTo("0.3");
-        setCanBegin(true);
-        flush();
-
-        // v3.9 onStart fires synchronously, setting the style to the FRESH `from` ('0.7'),
-        // verifying the latest value is used — not the stale mount-time one.
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        expect(child).toHaveBeenLastCalledWith({
-          opacity: "0.7",
-          transition: "opacity 500ms ease",
-        });
-
-        await manager.completeAnimation();
-        flush();
-        expect(handleAnimationStart).toHaveBeenCalledTimes(1);
-        // After the animation completes, we should receive the `to` value with transition applied.
-        expect(child).toHaveBeenLastCalledWith({
-          opacity: "0.3",
-          transition: "opacity 500ms ease",
-        });
-      });
-    });
-  });
-});

package/test/animation/JavascriptAnimate.spec.tsx

@@ -1,62 +0,0 @@
-// Tier-B behavioral spec for JavascriptAnimate on the v3.9 engine.
-//
-// recharts' originals assert React render COUNTS via a mock-manager hierarchy +
-// `act`/`rerender` — coupled to React's render cycle, no Solid equivalent (Solid
-// components run once; the function child re-invokes via a reactive JSX binding).
-// So this validates the engine's behavioral contract instead, golden-anchored to
-// recharts: the child receives t=0 first and t=1 once the animation completes, and
-// an inactive animation jumps straight to t=1. It drives the REAL engine via the
-// injected MockControllerAnimationManager (deterministic, no requestAnimationFrame).
-import { describe, it, expect, vi } from "vitest";
-import { flush } from "solid-js";
-import { render } from "@solidjs/testing-library";
-import { JavascriptAnimate } from "../../src/animation/JavascriptAnimate";
-import { MockControllerAnimationManager } from "./mockControllerAnimationManager";
-
-describe("JavascriptAnimate", () => {
-  it("calls the child with t=0 initially and t=1 once the animation completes", async () => {
-    const manager = new MockControllerAnimationManager("1");
-    const child = vi.fn((_t: number): null => null);
-
-    render(() => (
-      <JavascriptAnimate
-        animationId="1"
-        easing="linear"
-        duration={500}
-        begin={0}
-        animationController={manager.factory}
-      >
-        {child}
-      </JavascriptAnimate>
-    ));
-    flush();
-
-    expect(child).toHaveBeenCalledWith(0);
-
-    await manager.completeAnimation();
-    flush();
-
-    expect(child).toHaveBeenLastCalledWith(1);
-  });
-
-  it("jumps straight to t=1 when isActive is false", () => {
-    const manager = new MockControllerAnimationManager("1");
-    const child = vi.fn((_t: number): null => null);
-
-    render(() => (
-      <JavascriptAnimate
-        animationId="1"
-        isActive={false}
-        duration={500}
-        animationController={manager.factory}
-      >
-        {child}
-      </JavascriptAnimate>
-    ));
-    flush();
-
-    expect(child).toHaveBeenLastCalledWith(1);
-    // Inactive → the controller is never invoked, so nothing is animating.
-    expect(manager.isAnimating()).toBe(false);
-  });
-});