portifolio-evandrodevbr/app/components/animations/TextDiffuseReveal.reducedMotion.test.tsx

import { render } from "@testing-library/react";
import type { ReactNode } from "react";

import { TextDiffuseReveal } from "./TextDiffuseReveal";

let mockReducedMotion = false;
let mockInView = true;
let mockAnimations: Array<{ animate?: Record<string, unknown> }> = [];
jest.mock("motion/react", () => {
  const React = require("react");

  return {
    motion: {
      span: ({
        children,
        initial: _initial,
        animate,
        transition: _transition,
        onAnimationComplete: _onAnimationComplete,
        ...props
      }: {
        children?: ReactNode;
        initial?: unknown;
        animate?: Record<string, unknown>;
        transition?: unknown;
        onAnimationComplete?: () => void;
      } & Record<string, unknown>) => {
        mockAnimations.push({ animate });
        return React.createElement("span", props, children);
      },
    },
    useInView: () => mockInView,
    useReducedMotion: () => mockReducedMotion,
  };
});

describe("TextDiffuseReveal reduced motion", () => {
  beforeEach(() => {
    mockReducedMotion = false;
    mockInView = true;
    mockAnimations = [];
  });

  it("clears blur and scale when reduced motion resolves after mount", () => {
    const { rerender } = render(<TextDiffuseReveal text="Reveal" />);

    mockAnimations = [];
    mockReducedMotion = true;
    rerender(<TextDiffuseReveal text="Reveal" />);

    expect(mockAnimations).toHaveLength(6);
    expect(mockAnimations).toEqual(
      expect.arrayContaining(
        Array.from({ length: 6 }, () =>
          expect.objectContaining({
            animate: {
              opacity: 1,
              filter: "blur(0px)",
              scale: 1,
            },
          }),
        ),
      ),
    );
  });

  it("keeps the first render independent of the reduced-motion preference", () => {
    mockReducedMotion = true;
    mockInView = false;

    render(<TextDiffuseReveal text="Reveal" />);

    expect(mockAnimations[0]).toEqual({
      animate: {
        filter: "blur(12px)",
        opacity: 0,
        scale: 0.9,
      },
    });
  });
});