Evandro Fonseca Junior
f8545cd442
Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import CinematicMain from "./CinematicMain";
|
|
import { useCinematicScroll } from "./useCinematicScroll";
|
|
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
|
|
|
|
/**
|
|
* A ilha de cliente da home: tem os hooks de rolagem e de chegada por fragmento e entrega as cenas (filhos) dentro
|
|
* de <main>. Os hooks são trocados por dublês que registram o que recebem.
|
|
*/
|
|
|
|
jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
|
|
jest.mock("./useHomeFragmentNavigation", () => ({
|
|
useHomeFragmentNavigation: jest.fn(),
|
|
}));
|
|
|
|
const onLayoutReady = jest.fn();
|
|
|
|
beforeEach(() => {
|
|
jest.clearAllMocks();
|
|
jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
|
|
});
|
|
|
|
describe("CinematicMain", () => {
|
|
it("renders the scenes as direct children of <main>, inside the clipping wrapper", () => {
|
|
render(
|
|
<CinematicMain>
|
|
<section data-testid="a" />
|
|
<section data-testid="b" />
|
|
</CinematicMain>,
|
|
);
|
|
|
|
const main = screen.getByRole("main");
|
|
expect(main).toHaveClass("ds-main", "relative", "z-0");
|
|
expect(
|
|
Array.from(main.children).map((child) =>
|
|
child.getAttribute("data-testid"),
|
|
),
|
|
).toEqual(["a", "b"]);
|
|
expect(main.parentElement).toHaveClass("overflow-x-clip");
|
|
});
|
|
|
|
it("gives the scroll hook the <main> ref and runs the layout-ready callback once on mount", () => {
|
|
render(
|
|
<CinematicMain>
|
|
<section />
|
|
</CinematicMain>,
|
|
);
|
|
|
|
const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
|
|
expect(ref.current).toBe(screen.getByRole("main"));
|
|
expect(onLayoutReady).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("does not run the layout-ready callback again on a re-render", () => {
|
|
const { rerender } = render(
|
|
<CinematicMain>
|
|
<section />
|
|
</CinematicMain>,
|
|
);
|
|
|
|
rerender(
|
|
<CinematicMain>
|
|
<section />
|
|
<section />
|
|
</CinematicMain>,
|
|
);
|
|
|
|
expect(onLayoutReady).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|