portifolio-evandrodevbr/app/components/Hero.reducedMotion.test.tsx

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

import Hero from "./Hero";

jest.mock("next/dynamic", () => () => {
  const DynamicComponent = () => <div data-testid="hero-scene" />;
  DynamicComponent.displayName = "MockHeroScene";
  return DynamicComponent;
});

jest.mock("motion/react", () => {
  const React = require("react");
  const MotionStateContext = React.createContext({
    initial: undefined,
    animate: undefined,
  });

  const resolveOpacity = (
    value: unknown,
    variants: Record<string, { opacity?: number }> | undefined,
  ) => {
    const state: unknown =
      typeof value === "string" ? variants?.[value] : value;
    if (
      state &&
      typeof state === "object" &&
      "opacity" in state &&
      typeof state.opacity === "number"
    ) {
      return state.opacity;
    }
    return undefined;
  };

  const motion = new Proxy(
    {},
    {
      get: (_, tag: string) => {
        const Component = ({
          children,
          initial,
          animate,
          variants,
          transition: _transition,
          whileHover: _whileHover,
          whileTap: _whileTap,
          style,
          ...props
        }: {
          children?: ReactNode;
          initial?: unknown;
          animate?: unknown;
          variants?: Record<string, { opacity?: number }>;
          style?: Record<string, unknown>;
        } & Record<string, unknown>) => {
          const inherited = React.useContext(MotionStateContext);
          const effectiveInitial =
            initial === undefined ? inherited.initial : initial;
          const effectiveAnimate =
            animate === undefined ? inherited.animate : animate;
          const opacity = resolveOpacity(
            effectiveInitial === false ? effectiveAnimate : effectiveInitial,
            variants,
          );
          const element = React.createElement(
            tag,
            {
              ...props,
              style: opacity === undefined ? style : { ...style, opacity },
            },
            children,
          );

          return React.createElement(
            MotionStateContext.Provider,
            {
              value: {
                initial: effectiveInitial,
                animate: effectiveAnimate,
              },
            },
            element,
          );
        };
        Component.displayName = `motion.${tag}`;
        return Component;
      },
    },
  );

  return {
    AnimatePresence: ({ children }: { children: React.ReactNode }) => children,
    motion,
    useInView: () => true,
    useReducedMotion: () => true,
    useMotionValue: (initial: number) => ({
      get: () => initial,
      set: jest.fn(),
    }),
    useSpring: (
      value: { get: () => number; set: (v: number) => void },
      _config: unknown,
    ) => value,
    useTransform: (
      value: { get: () => number; set: (v: number) => void },
      _input: number[],
      _output: number[],
    ) => value,
  };
});

jest.mock("cobe", () => ({
  __esModule: true,
  default: jest.fn(() => ({
    destroy: jest.fn(),
  })),
}));

function mockMatchMedia(matches: boolean) {
  Object.defineProperty(window, "matchMedia", {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
      matches,
      media: query,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    })),
  });
}

describe("Hero reduced motion", () => {
  beforeEach(() => {
    mockMatchMedia(true);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it("shows active copy and actions immediately without animation timers", () => {
    render(<Hero />);

    const visibleContent = [
      screen.getByText(/Disponível para novas oportunidades/i),
      screen.getByRole("heading", {
        level: 1,
        name: /engenharia de software para sistemas/i,
      }),
      screen.getByRole("button", {
        name: /conversar sobre uma oportunidade/i,
      }),
      screen.getByRole("link", { name: /ver casos selecionados/i }),
      screen.getByRole("link", { name: /download cv/i }),
    ];

    for (const element of visibleContent) {
      expect(element).toBeVisible();
    }
    expect(screen.queryByTestId("hero-scene")).not.toBeInTheDocument();
  });
});