Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import { act, render, screen } from "@testing-library/react";
|
|
import CinematicOverlays from "./CinematicOverlays";
|
|
|
|
/**
|
|
* Testes de caminhos-base de CinematicOverlays (complemento de CinematicOverlays.test.tsx): a troca de página
|
|
* com a página montada (de fora da home para a home e de volta) e as duas condições do grão juntas.
|
|
*/
|
|
|
|
let mockPathname = "/";
|
|
jest.mock("next/navigation", () => ({ usePathname: () => mockPathname }));
|
|
|
|
const mockLoaded = jest.fn();
|
|
jest.mock("./FilmGrain", () => {
|
|
mockLoaded();
|
|
return {
|
|
__esModule: true,
|
|
default: function MockGrain() {
|
|
return <div data-testid="grain" />;
|
|
},
|
|
};
|
|
});
|
|
|
|
/** O import dinâmico do grão resolve em microtarefas. */
|
|
const loaded = () =>
|
|
act(async () => {
|
|
for (let i = 0; i < 5; i++) await Promise.resolve();
|
|
});
|
|
|
|
const original = window.matchMedia;
|
|
|
|
function mockMedia(active: string[] = []) {
|
|
window.matchMedia = jest.fn().mockImplementation((query: string) => ({
|
|
matches: active.includes(query),
|
|
media: query,
|
|
addEventListener() {},
|
|
removeEventListener() {},
|
|
}));
|
|
}
|
|
|
|
beforeEach(() => {
|
|
mockPathname = "/";
|
|
mockLoaded.mockClear();
|
|
mockMedia();
|
|
});
|
|
|
|
afterEach(() => {
|
|
window.matchMedia = original;
|
|
});
|
|
|
|
describe("CinematicOverlays: troca de página", () => {
|
|
it("path: arriving on the home from another page with a mouse -> the grain and the progress bar appear", async () => {
|
|
mockPathname = "/cases";
|
|
const { container, rerender } = render(<CinematicOverlays />);
|
|
await loaded();
|
|
expect(container).toBeEmptyDOMElement();
|
|
|
|
mockPathname = "/";
|
|
rerender(<CinematicOverlays />);
|
|
await loaded();
|
|
|
|
expect(screen.getByTestId("grain")).toBeInTheDocument();
|
|
expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
|
|
});
|
|
|
|
it("path: leaving the home after the grain loaded -> everything goes away, and comes back on return", async () => {
|
|
const { container, rerender } = render(<CinematicOverlays />);
|
|
await loaded();
|
|
expect(screen.getByTestId("grain")).toBeInTheDocument();
|
|
|
|
mockPathname = "/servicos";
|
|
rerender(<CinematicOverlays />);
|
|
expect(screen.queryByTestId("grain")).toBeNull();
|
|
expect(container).toBeEmptyDOMElement();
|
|
|
|
mockPathname = "/";
|
|
rerender(<CinematicOverlays />);
|
|
await loaded();
|
|
expect(screen.getByTestId("grain")).toBeInTheDocument();
|
|
expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
|
|
});
|
|
|
|
it("path: a sub-route that merely starts like the home path -> not the home", async () => {
|
|
mockPathname = "/cases/sev-modaintima";
|
|
const { container } = render(<CinematicOverlays />);
|
|
await loaded();
|
|
|
|
expect(container).toBeEmptyDOMElement();
|
|
expect(screen.queryByTestId("grain")).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe("CinematicOverlays: condições do grão juntas", () => {
|
|
it("path: touch screen and reduced motion together -> no grain, the progress bar stays", async () => {
|
|
mockMedia(["(pointer: coarse)", "(prefers-reduced-motion: reduce)"]);
|
|
const { container } = render(<CinematicOverlays />);
|
|
await loaded();
|
|
|
|
expect(screen.queryByTestId("grain")).toBeNull();
|
|
expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
|
|
});
|
|
|
|
it("path: no matchMedia in the browser -> counts as mouse with motion allowed: the grain loads", async () => {
|
|
window.matchMedia = undefined as unknown as typeof window.matchMedia;
|
|
render(<CinematicOverlays />);
|
|
await loaded();
|
|
|
|
expect(screen.getByTestId("grain")).toBeInTheDocument();
|
|
});
|
|
});
|