Evandro Fonseca JuniorandClaude Opus 5.5
def1e22302
Medido com trace do Chromium (rasterizacao no mesmo trecho de rolagem): IA->Qualidade 840->558 ms, dentro de Qualidade 34->18 ms, Qualidade->Sobre 819->643 ms. Recorte animado, escala de camadas grandes e o desenho do diagrama a cada quadro saem; o diagrama se desenha uma vez em CSS. TextDiffuseReveal deixa de animar cada letra com desfoque. Co-Authored-By: Claude Opus 5.5 <[email protected]>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
|
|
import { TextDiffuseReveal } from "./TextDiffuseReveal";
|
|
|
|
let mockInView = false;
|
|
jest.mock("motion/react", () => ({ 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");
|
|
});
|
|
});
|