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.
112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import HoverPrefetchLink from "./HoverPrefetchLink";
|
|
|
|
/**
|
|
* Testes de caminhos-base de HoverPrefetchLink (complemento de HoverPrefetchLink.test.tsx):
|
|
* o aviso do toque ao dono do link, o pré-carregamento que liga uma vez só e não desliga,
|
|
* e as demais propriedades do link, que passam inalteradas.
|
|
*/
|
|
|
|
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" });
|
|
|
|
describe("HoverPrefetchLink", () => {
|
|
it("path: touch with the caller's handler -> the handler runs once, with the event, and prefetching starts", () => {
|
|
const onTouchStart = jest.fn();
|
|
render(
|
|
<HoverPrefetchLink href="/cases" onTouchStart={onTouchStart}>
|
|
Cases
|
|
</HoverPrefetchLink>,
|
|
);
|
|
|
|
fireEvent.touchStart(link());
|
|
|
|
expect(onTouchStart).toHaveBeenCalledTimes(1);
|
|
expect(onTouchStart.mock.calls[0][0]).toMatchObject({ type: "touchstart" });
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
});
|
|
|
|
it("path: hover, then focus, then touch -> prefetching stays on and each handler runs every time", () => {
|
|
const onMouseEnter = jest.fn();
|
|
const onFocus = jest.fn();
|
|
const onTouchStart = jest.fn();
|
|
render(
|
|
<HoverPrefetchLink
|
|
href="/cases"
|
|
onMouseEnter={onMouseEnter}
|
|
onFocus={onFocus}
|
|
onTouchStart={onTouchStart}
|
|
>
|
|
Cases
|
|
</HoverPrefetchLink>,
|
|
);
|
|
|
|
fireEvent.mouseEnter(link());
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
fireEvent.mouseEnter(link());
|
|
fireEvent.focus(link());
|
|
fireEvent.touchStart(link());
|
|
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
expect(onMouseEnter).toHaveBeenCalledTimes(2);
|
|
expect(onFocus).toHaveBeenCalledTimes(1);
|
|
expect(onTouchStart).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("path: leaving the link after reaching it -> prefetching is not switched off again", () => {
|
|
render(<HoverPrefetchLink href="/cases">Cases</HoverPrefetchLink>);
|
|
|
|
fireEvent.mouseEnter(link());
|
|
fireEvent.mouseLeave(link());
|
|
fireEvent.blur(link());
|
|
|
|
expect(link()).toHaveAttribute("data-prefetch", "null");
|
|
});
|
|
|
|
it("path: events the link does not watch (click, key press) -> prefetching stays off", () => {
|
|
const onClick = jest.fn();
|
|
render(
|
|
<HoverPrefetchLink href="/cases" onClick={onClick}>
|
|
Cases
|
|
</HoverPrefetchLink>,
|
|
);
|
|
|
|
fireEvent.click(link());
|
|
fireEvent.keyDown(link(), { key: "Enter" });
|
|
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
expect(link()).toHaveAttribute("data-prefetch", "false");
|
|
});
|
|
|
|
it("path: other props -> reach the link as they were given", () => {
|
|
render(
|
|
<HoverPrefetchLink
|
|
href="/#home"
|
|
aria-label="Evandro.dev.br — início"
|
|
className="flex min-h-11"
|
|
>
|
|
Cases
|
|
</HoverPrefetchLink>,
|
|
);
|
|
|
|
const home = screen.getByRole("link", { name: "Evandro.dev.br — início" });
|
|
expect(home).toHaveAttribute("href", "/#home");
|
|
expect(home).toHaveClass("flex", "min-h-11");
|
|
});
|
|
});
|