portifolio-evandrodevbr/app/template.test.tsx

import { render, screen } from "@testing-library/react";
import { useEffect, useState } from "react";
import { setNavigation } from "@/__mocks__/next/navigation";
import { resetFocusOnNavigation } from "./hooks/useFocusOnNavigation";
import Template from "./template";

const mockMounts = jest.fn();
const mockProps: Array<Record<string, unknown>> = [];

// o React estável do Jest não exporta <ViewTransition> (só o canary do Next); este dublê conta as montagens
jest.mock("react", () => {
  const actual = jest.requireActual("react");
  function ViewTransition({
    children,
    ...props
  }: { children?: React.ReactNode } & Record<string, unknown>) {
    mockProps.push(props);
    actual.useEffect(() => {
      mockMounts();
    }, []);
    return actual.createElement("div", { "data-testid": "vt" }, children);
  }
  return { ...actual, ViewTransition };
});

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(1);
  }, []);
  return <p data-testid="state">{count}</p>;
}

beforeEach(() => {
  setNavigation({ pathname: "/cases" });
  mockMounts.mockClear();
  mockProps.length = 0;
  resetFocusOnNavigation();
});

/** O contêiner que o layout põe em volta da página: o destino do foco depois da troca. */
function Shell({ children }: { children: React.ReactNode }) {
  return (
    <div id="main-content" tabIndex={-1} data-testid="main">
      <Template>{children}</Template>
    </div>
  );
}

describe("app/template", () => {
  it("wraps the page in a ViewTransition named page that does not animate in-place updates", () => {
    render(
      <Template>
        <main>Conteúdo</main>
      </Template>,
    );

    expect(screen.getByTestId("vt")).toContainElement(screen.getByRole("main"));
    expect(mockProps[0]).toMatchObject({ name: "page", update: "none" });
  });

  it("makes the page leaving and the page entering a pair when only the second segment changes (/cases -> /cases/um-projeto)", () => {
    const { rerender } = render(
      <Template>
        <Counter />
      </Template>,
    );
    expect(mockMounts).toHaveBeenCalledTimes(1);
    expect(screen.getByTestId("state")).toHaveTextContent("1");

    setNavigation({ pathname: "/cases/sev-modaintima" });
    rerender(
      <Template>
        <Counter />
      </Template>,
    );

    // a chave é o caminho: a transição desmonta a página que sai e monta a que entra (e o estado dela recomeça)
    expect(mockMounts).toHaveBeenCalledTimes(2);
  });

  it("does not remount when the path stays the same (only a re-render, or a #fragment change)", () => {
    const { rerender } = render(
      <Template>
        <Counter />
      </Template>,
    );

    rerender(
      <Template>
        <Counter />
      </Template>,
    );

    expect(mockMounts).toHaveBeenCalledTimes(1);
  });

  it("leaves the focus alone on the first load and moves it to #main-content, without scrolling, when the path changes", () => {
    const scrollTo = jest.spyOn(window, "scrollTo");
    const focus = jest.spyOn(HTMLElement.prototype, "focus");
    const { rerender } = render(
      <Shell>
        <button type="button">Dentro da página</button>
      </Shell>,
    );
    expect(focus).not.toHaveBeenCalled();
    expect(screen.getByTestId("main")).not.toHaveFocus();

    setNavigation({ pathname: "/cases/sev-modaintima" });
    rerender(
      <Shell>
        <button type="button">Dentro da página</button>
      </Shell>,
    );

    expect(screen.getByTestId("main")).toHaveFocus();
    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
    expect(scrollTo).not.toHaveBeenCalled();
    focus.mockRestore();
    scrollTo.mockRestore();
  });

  it("does not take the focus on a re-render of the same path", () => {
    const { rerender } = render(
      <Shell>
        <p>Página</p>
      </Shell>,
    );
    rerender(
      <Shell>
        <p>Página de novo</p>
      </Shell>,
    );
    expect(screen.getByTestId("main")).not.toHaveFocus();
  });

  it("never starts a view transition by itself, on the first load or on the focus move", () => {
    const start = jest.fn();
    Object.defineProperty(document, "startViewTransition", {
      configurable: true,
      value: start,
    });
    const { rerender } = render(
      <Shell>
        <p>Página</p>
      </Shell>,
    );
    setNavigation({ pathname: "/servicos" });
    rerender(
      <Shell>
        <p>Página</p>
      </Shell>,
    );
    expect(start).not.toHaveBeenCalled();
    Reflect.deleteProperty(document, "startViewTransition");
  });
});