Evandro Fonseca Junior
10f170abf4
H1 'Sites e sistemas que trazem pedidos pelo WhatsApp e tiram sua operação da planilha.'; HeroWork maior com a SEV; menu Cases, Serviços, Como trabalho, Sobre e IA com next/link e pré-carregamento no hover; menu do celular em tela cheia; WhatsApp flutuante e no rodapé com a mensagem da rota; rodapé em todas as páginas; FAQ da home; /ia como oferta de revisão de app feito com IA; formulário com noscript, validação do mailto e plano B do pop-up; cartões sem foco indevido; sem a fonte Monument.
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import HoverPrefetchLink from "./HoverPrefetchLink";
|
|
|
|
jest.mock("next/link", () => ({
|
|
__esModule: true,
|
|
default: ({
|
|
children,
|
|
prefetch,
|
|
...props
|
|
}: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
|
|
string,
|
|
unknown
|
|
>) => (
|
|
<a data-prefetch={String(prefetch)} {...props}>
|
|
{children}
|
|
</a>
|
|
),
|
|
}));
|
|
|
|
const link = () => screen.getByRole("link", { name: "Cases" });
|
|
|
|
it("does not prefetch when the page opens", () => {
|
|
render(<HoverPrefetchLink href="/cases">Cases</HoverPrefetchLink>);
|
|
|
|
expect(link()).toHaveAttribute("data-prefetch", "false");
|
|
expect(link()).toHaveAttribute("href", "/cases");
|
|
});
|
|
|
|
it.each([
|
|
["mouse", (element: Element) => fireEvent.mouseEnter(element)],
|
|
["keyboard focus", (element: Element) => fireEvent.focus(element)],
|
|
["touch", (element: Element) => fireEvent.touchStart(element)],
|
|
])("starts prefetching when the visitor reaches it by %s", (_label, reach) => {
|
|
render(<HoverPrefetchLink href="/cases">Cases</HoverPrefetchLink>);
|
|
|
|
reach(link());
|
|
|
|
// null = o comportamento padrão do Link (pré-carrega a rota)
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
});
|
|
|
|
it("keeps the callers' own handlers", () => {
|
|
const onMouseEnter = jest.fn();
|
|
const onFocus = jest.fn();
|
|
const onClick = jest.fn();
|
|
render(
|
|
<HoverPrefetchLink
|
|
href="/cases"
|
|
onMouseEnter={onMouseEnter}
|
|
onFocus={onFocus}
|
|
onClick={onClick}
|
|
>
|
|
Cases
|
|
</HoverPrefetchLink>,
|
|
);
|
|
|
|
fireEvent.mouseEnter(link());
|
|
fireEvent.focus(link());
|
|
fireEvent.click(link());
|
|
|
|
expect(onMouseEnter).toHaveBeenCalledTimes(1);
|
|
expect(onFocus).toHaveBeenCalledTimes(1);
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("only prefetches the link that was reached, not its siblings", () => {
|
|
render(
|
|
<>
|
|
<HoverPrefetchLink href="/cases">Cases</HoverPrefetchLink>
|
|
<HoverPrefetchLink href="/servicos">Serviços</HoverPrefetchLink>
|
|
</>,
|
|
);
|
|
|
|
fireEvent.mouseEnter(link());
|
|
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
expect(screen.getByRole("link", { name: "Serviços" })).toHaveAttribute(
|
|
"data-prefetch",
|
|
"false",
|
|
);
|
|
});
|