portifolio-evandrodevbr/app/providers/AnimationProvider.test.tsx

import { render, screen } from "@testing-library/react";
import { AnimationProvider, useAnimationConfig } from "./AnimationProvider";

// Mock do useReducedMotion
jest.mock("@/app/hooks/useReducedMotion", () => ({
  useReducedMotion: jest.fn(),
}));

// Test component that uses the hook
function TestComponent() {
  const config = useAnimationConfig();

  return (
    <div>
      <div data-testid="reduced-motion">{String(config.reducedMotion)}</div>
      <div data-testid="ease-out">{config.easings.easeOut}</div>
      <div data-testid="duration-normal">{config.durations.normal}</div>
      <div data-testid="spring-default-stiffness">
        {config.easings.spring.default.stiffness}
      </div>
    </div>
  );
}

describe("AnimationProvider", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("provides animation config with reducedMotion false", () => {
    const { useReducedMotion } = jest.requireMock(
      "@/app/hooks/useReducedMotion",
    );
    useReducedMotion.mockReturnValue(false);

    render(
      <AnimationProvider>
        <TestComponent />
      </AnimationProvider>,
    );

    expect(screen.getByTestId("reduced-motion")).toHaveTextContent("false");
    expect(screen.getByTestId("ease-out")).toHaveTextContent(
      "cubic-bezier(0.16, 1, 0.3, 1)",
    );
    expect(screen.getByTestId("duration-normal")).toHaveTextContent("0.6");
    expect(screen.getByTestId("spring-default-stiffness")).toHaveTextContent(
      "200",
    );
  });

  it("provides animation config with reducedMotion true", () => {
    const { useReducedMotion } = jest.requireMock(
      "@/app/hooks/useReducedMotion",
    );
    useReducedMotion.mockReturnValue(true);

    render(
      <AnimationProvider>
        <TestComponent />
      </AnimationProvider>,
    );

    expect(screen.getByTestId("reduced-motion")).toHaveTextContent("true");
  });

  it("provides all easing configurations", () => {
    const { useReducedMotion } = jest.requireMock(
      "@/app/hooks/useReducedMotion",
    );
    useReducedMotion.mockReturnValue(false);

    render(
      <AnimationProvider>
        <TestComponent />
      </AnimationProvider>,
    );

    const config = screen.getByTestId("ease-out").textContent;
    expect(config).toBe("cubic-bezier(0.16, 1, 0.3, 1)");
  });

  it("provides all duration configurations", () => {
    const { useReducedMotion } = jest.requireMock(
      "@/app/hooks/useReducedMotion",
    );
    useReducedMotion.mockReturnValue(false);

    render(
      <AnimationProvider>
        <TestComponent />
      </AnimationProvider>,
    );

    const duration = screen.getByTestId("duration-normal").textContent;
    expect(duration).toBe("0.6");
  });

  it("throws error when useAnimationConfig is used outside provider", () => {
    // Suppress console.error for this test
    const consoleError = jest
      .spyOn(console, "error")
      .mockImplementation(() => {});

    expect(() => {
      render(<TestComponent />);
    }).toThrow("useAnimationConfig must be used within AnimationProvider");

    consoleError.mockRestore();
  });
});

describe("useAnimationConfig", () => {
  it("returns config object with correct structure", () => {
    const { useReducedMotion } = jest.requireMock(
      "@/app/hooks/useReducedMotion",
    );
    useReducedMotion.mockReturnValue(false);

    function ConfigStructureTest() {
      const config = useAnimationConfig();

      return (
        <div>
          <div data-testid="has-reduced-motion">
            {String("reducedMotion" in config)}
          </div>
          <div data-testid="has-easings">{String("easings" in config)}</div>
          <div data-testid="has-durations">{String("durations" in config)}</div>
          <div data-testid="has-spring">
            {String("spring" in config.easings)}
          </div>
        </div>
      );
    }

    render(
      <AnimationProvider>
        <ConfigStructureTest />
      </AnimationProvider>,
    );

    expect(screen.getByTestId("has-reduced-motion")).toHaveTextContent("true");
    expect(screen.getByTestId("has-easings")).toHaveTextContent("true");
    expect(screen.getByTestId("has-durations")).toHaveTextContent("true");
    expect(screen.getByTestId("has-spring")).toHaveTextContent("true");
  });
});