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.
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { render } from "@testing-library/react";
|
|
import ScrollProgress from "./ScrollProgress";
|
|
|
|
describe("ScrollProgress", () => {
|
|
it("is decorative: hidden from assistive technology, with no text", () => {
|
|
const { container } = render(<ScrollProgress />);
|
|
|
|
for (const piece of container.querySelectorAll(".ds-scroll-progress"))
|
|
expect(piece).toHaveAttribute("aria-hidden", "true");
|
|
expect(container).toHaveTextContent("");
|
|
});
|
|
|
|
it("has the top bar and the side rail with its fill and dot, ready for the CSS scroll timeline", () => {
|
|
const { container } = render(<ScrollProgress />);
|
|
|
|
expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
|
|
expect(
|
|
container.querySelector(".ds-scroll-rail .ds-scroll-fill"),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
container.querySelector(".ds-scroll-rail .ds-scroll-dot"),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("drives nothing from JavaScript: no inline transform or opacity, no scroll listener", () => {
|
|
const listen = jest.spyOn(window, "addEventListener");
|
|
const { container } = render(<ScrollProgress />);
|
|
|
|
for (const element of container.querySelectorAll<HTMLElement>("*")) {
|
|
expect(element.style.transform).toBe("");
|
|
expect(element.style.opacity).toBe("");
|
|
}
|
|
expect(listen.mock.calls.map(([type]) => type)).not.toContain("scroll");
|
|
listen.mockRestore();
|
|
});
|
|
|
|
it("does not need the animation library", () => {
|
|
jest.isolateModules(() => {
|
|
// o pacote "motion" saiu do projeto: virtual, para o dublê valer mesmo sem ele no node_modules
|
|
jest.doMock(
|
|
"motion/react",
|
|
() => {
|
|
throw new Error(
|
|
"motion não pode ser carregado pela barra de rolagem",
|
|
);
|
|
},
|
|
{ virtual: true },
|
|
);
|
|
expect(() => require("./ScrollProgress")).not.toThrow();
|
|
});
|
|
});
|
|
});
|