Evandro Fonseca Junior
c9a0b80656
Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { render } from "@testing-library/react";
|
|
import { renderToString } from "react-dom/server";
|
|
import { isLowPowerDevice } from "@/lib/device";
|
|
import HeroBackground from "./HeroBackground";
|
|
|
|
/**
|
|
* Testes de caminhos-base de HeroBackground: movimento reduzido (nada), aparelho fraco (só as camadas escuras,
|
|
* sem baixar a cena 3D), aparelho capaz (cena montada depois do efeito) e o HTML do servidor (sem cena).
|
|
*/
|
|
|
|
let reducedMotion = false;
|
|
jest.mock("@/app/hooks/useReducedMotion", () => ({
|
|
useReducedMotion: () => reducedMotion,
|
|
}));
|
|
jest.mock("@/lib/device", () => ({ isLowPowerDevice: jest.fn() }));
|
|
jest.mock("next/dynamic", () => ({
|
|
__esModule: true,
|
|
default: () =>
|
|
function MockScene() {
|
|
return require("react").createElement("canvas", {
|
|
"data-testid": "hero-scene",
|
|
});
|
|
},
|
|
}));
|
|
|
|
const lowPower = jest.mocked(isLowPowerDevice);
|
|
|
|
beforeEach(() => {
|
|
reducedMotion = false;
|
|
lowPower.mockReset();
|
|
lowPower.mockReturnValue(false);
|
|
});
|
|
|
|
describe("HeroBackground", () => {
|
|
it("path: reduced motion -> renders nothing, even on a capable device", () => {
|
|
reducedMotion = true;
|
|
|
|
const { container } = render(<HeroBackground />);
|
|
|
|
expect(container).toBeEmptyDOMElement();
|
|
});
|
|
|
|
it("path: capable device -> the 3D scene plus the three dark layers", () => {
|
|
const { container, getByTestId } = render(<HeroBackground />);
|
|
|
|
expect(getByTestId("hero-scene")).toBeInTheDocument();
|
|
expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
|
|
});
|
|
|
|
it("path: low-power device -> only the dark layers, the 3D scene is never mounted", () => {
|
|
lowPower.mockReturnValue(true);
|
|
|
|
const { container, queryByTestId } = render(<HeroBackground />);
|
|
|
|
expect(queryByTestId("hero-scene")).toBeNull();
|
|
expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
|
|
expect(lowPower).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("path: server HTML -> layers without the scene (capability is only known in the browser)", () => {
|
|
const html = renderToString(<HeroBackground />);
|
|
|
|
expect(html).not.toContain("canvas");
|
|
expect(html).toContain("pointer-events-none");
|
|
expect(lowPower).not.toHaveBeenCalled();
|
|
});
|
|
});
|