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.
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
|
|
import { TextDiffuseReveal } from "./TextDiffuseReveal";
|
|
|
|
let mockInView = false;
|
|
jest.mock("@/app/hooks/useInView", () => ({ useInView: () => mockInView }));
|
|
|
|
describe("TextDiffuseReveal", () => {
|
|
beforeEach(() => {
|
|
mockInView = false;
|
|
});
|
|
|
|
it("keeps the whole sentence readable once for assistive technology", () => {
|
|
const { container } = render(
|
|
<TextDiffuseReveal text="Software feito a partir do seu negócio" />,
|
|
);
|
|
|
|
expect(
|
|
screen.getByText("Software feito a partir do seu negócio"),
|
|
).toHaveClass("sr-only");
|
|
const words = container.querySelectorAll(".text-reveal-word");
|
|
expect(words).toHaveLength(7);
|
|
expect(words[0].closest("[aria-hidden='true']")).not.toBeNull();
|
|
});
|
|
|
|
it("marks the title as shown only after it enters the viewport", () => {
|
|
const { container, rerender } = render(
|
|
<TextDiffuseReveal text="Reveal me" />,
|
|
);
|
|
expect(container.querySelector(".text-reveal")).not.toHaveAttribute(
|
|
"data-shown",
|
|
);
|
|
|
|
mockInView = true;
|
|
rerender(<TextDiffuseReveal text="Reveal me" />);
|
|
expect(container.querySelector(".text-reveal")).toHaveAttribute(
|
|
"data-shown",
|
|
);
|
|
});
|
|
});
|