portifolio-evandrodevbr/app/components/cinematic/HeroField.test.tsx

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

type SceneProps = {
  visible: boolean;
  progressRef: { current: number };
  labelsRef?: unknown;
  onReady: () => void;
  onError: () => void;
};
const mockScenes: SceneProps[] = [];

jest.mock("next/dynamic", () => ({
  __esModule: true,
  default: () =>
    function MockScene(props: SceneProps) {
      mockScenes.push(props);
      return require("react").createElement("canvas", {
        "data-testid": "scene",
      });
    },
}));

const original = {
  matchMedia: window.matchMedia,
  webgl2: (window as unknown as Record<string, unknown>).WebGL2RenderingContext,
  getContext: HTMLCanvasElement.prototype.getContext,
};

function mockMedia(active: string[]) {
  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
    matches: active.includes(query),
    media: query,
    addEventListener() {},
    removeEventListener() {},
  }));
}

function mockNavigator(values: Record<string, unknown>) {
  for (const [key, value] of Object.entries(values))
    Object.defineProperty(navigator, key, { configurable: true, value });
}

function Hero() {
  return (
    <section className="hero">
      <HeroField />
    </section>
  );
}

/** O navegador ocioso: o Three.js só entra depois do tempo de espera. */
function idle() {
  act(() => {
    jest.advanceTimersByTime(3000);
  });
}

beforeEach(() => {
  jest.useFakeTimers();
  mockScenes.length = 0;
  mockMedia([]);
  mockNavigator({
    hardwareConcurrency: 8,
    deviceMemory: undefined,
    connection: undefined,
  });
  (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
    function WebGL2RenderingContext() {};
  HTMLCanvasElement.prototype.getContext = (() => ({
    getExtension: () => null,
  })) as unknown as typeof HTMLCanvasElement.prototype.getContext;
});

afterEach(() => {
  jest.useRealTimers();
  window.matchMedia = original.matchMedia;
  (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
    original.webgl2;
  HTMLCanvasElement.prototype.getContext = original.getContext;
});

describe("HeroField (ambient background)", () => {
  it("mounts the WebGL scene only after the page is idle, on a capable desktop", () => {
    render(<Hero />);
    expect(screen.queryByTestId("scene")).toBeNull();
    idle();
    expect(screen.getByTestId("scene")).toBeInTheDocument();
    // o IntersectionObserver do jest.setup avisa que o hero está à vista: o desenho está liberado
    expect(mockScenes.at(-1)?.visible).toBe(true);
  });

  it("is decorative: hidden from assistive technology and with no labels over the 3D", () => {
    const { container } = render(<Hero />);
    idle();
    const field = container.querySelector(".hero-field");
    expect(field).toHaveAttribute("aria-hidden", "true");
    expect(container.querySelector(".hero-tag")).toBeNull();
    for (const label of ["A tela", "As integrações", "Os dados"])
      expect(screen.queryByText(label, { exact: false })).toBeNull();
    expect(mockScenes.at(-1)?.labelsRef).toBeUndefined();
  });

  it.each([
    ["a touch pointer", () => mockMedia(["(pointer: coarse)"])],
    ["reduced motion", () => mockMedia(["(prefers-reduced-motion: reduce)"])],
    ["the data saver", () => mockNavigator({ connection: { saveData: true } })],
    ["four cores", () => mockNavigator({ hardwareConcurrency: 4 })],
    ["4 GB of memory", () => mockNavigator({ deviceMemory: 4 })],
    [
      "no WebGL2",
      () => {
        (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
          undefined;
      },
    ],
  ])(
    "keeps the light static background (no WebGL) with %s",
    (_label, arrange) => {
      arrange();
      const { container } = render(<Hero />);
      idle();
      expect(screen.queryByTestId("scene")).toBeNull();
      expect(mockScenes).toHaveLength(0);
      expect(container.querySelector(".hero-field")).not.toHaveAttribute(
        "data-ready",
      );
    },
  );

  it("follows the hero scroll with --hero-p and --hero-open, and stops drawing once the dive is over", () => {
    const { container } = render(<Hero />);
    idle();
    const section = container.querySelector(".hero") as HTMLElement;
    let top = 0;
    section.getBoundingClientRect = () =>
      ({ top, height: 2000, bottom: top + 2000 }) as DOMRect;
    Object.defineProperty(window, "innerHeight", {
      configurable: true,
      value: 800,
    });
    const scroll = (to: number) => {
      top = -to;
      act(() => {
        window.dispatchEvent(new Event("scroll"));
        jest.advanceTimersByTime(40);
      });
    };

    scroll(0);
    expect(mockScenes.at(-1)?.progressRef.current).toBe(0);

    scroll(600); // meio do mergulho (1200 px de trilho)
    expect(Number(section.style.getPropertyValue("--hero-p"))).toBeCloseTo(0.5);
    // a máscara já se abriu por completo: o fundo aparece inteiro
    expect(Number(section.style.getPropertyValue("--hero-open"))).toBe(1);

    scroll(1200);
    expect(Number(section.style.getPropertyValue("--hero-p"))).toBe(1);
    expect(mockScenes.at(-1)?.visible).toBe(false);
  });

  it("reveals the scene (data-ready) once it has drawn its first frames", () => {
    const { container } = render(<Hero />);
    idle();
    expect(container.querySelector(".hero-field")).not.toHaveAttribute(
      "data-ready",
    );
    act(() => mockScenes.at(-1)?.onReady());
    expect(container.querySelector(".hero-field")).toHaveAttribute(
      "data-ready",
    );
    act(() => mockScenes.at(-1)?.onError());
    expect(container.querySelector(".hero-field")).not.toHaveAttribute(
      "data-ready",
    );
    expect(screen.queryByTestId("scene")).toBeNull();
  });
});