Evandro Fonseca Junior
fc44a69fb3
/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { render } from "@testing-library/react";
|
|
import type { ComponentProps } from "react";
|
|
import { clientCasesForListing as clientCases } from "@/lib/site-content";
|
|
import CasesPage from "./page";
|
|
|
|
/**
|
|
* Carregamento da lista de cases: sem mosaico no topo, a capa do primeiro cartão (a maior imagem acima da dobra) carrega
|
|
* na hora e com prioridade alta, as outras capas são preguiçosas, e os links não pré-carregam as páginas dos cases sozinhos.
|
|
*/
|
|
|
|
type LinkProps = ComponentProps<typeof import("next/link").default>;
|
|
|
|
/** Propriedades de cada `Link` renderizado: o `prefetch` não aparece no HTML, então a rota é espiada aqui. */
|
|
const mockLinkProps: LinkProps[] = [];
|
|
|
|
jest.mock("next/link", () => ({
|
|
__esModule: true,
|
|
default: ({ children, href, prefetch, ...anchor }: LinkProps) => {
|
|
mockLinkProps.push({ children, href, prefetch, ...anchor });
|
|
return (
|
|
<a href={String(href)} {...(anchor as Record<string, unknown>)}>
|
|
{children}
|
|
</a>
|
|
);
|
|
},
|
|
}));
|
|
|
|
beforeEach(() => {
|
|
mockLinkProps.length = 0;
|
|
});
|
|
|
|
function coverImages(container: HTMLElement) {
|
|
return clientCases.map((caseStudy) => {
|
|
const image = container
|
|
.querySelector(`a[href="/cases/${caseStudy.id}"][aria-hidden="true"]`)
|
|
?.querySelector("img");
|
|
if (!image) throw new Error(`Missing cover of ${caseStudy.id}`);
|
|
return image;
|
|
});
|
|
}
|
|
|
|
describe("CasesPage: carregamento das capas", () => {
|
|
it("loads the first card cover at once with high priority, and every other image lazily", () => {
|
|
const { container } = render(<CasesPage />);
|
|
|
|
// sem mosaico: nenhuma imagem decorativa (alt vazio) no topo da página
|
|
const decorative = Array.from(
|
|
container.querySelectorAll<HTMLImageElement>("img"),
|
|
).filter((image) => image.getAttribute("alt") === "");
|
|
expect(decorative).toHaveLength(0);
|
|
|
|
const [first, ...others] = coverImages(container);
|
|
expect(first).toHaveAttribute("loading", "eager");
|
|
expect(first).toHaveAttribute("fetchpriority", "high");
|
|
expect(others.length).toBeGreaterThan(0);
|
|
for (const image of others) {
|
|
expect(image).toHaveAttribute("loading", "lazy");
|
|
expect(image).not.toHaveAttribute("fetchpriority");
|
|
}
|
|
});
|
|
|
|
it("does not prefetch the case pages from the cover links, nor from the card buttons", () => {
|
|
render(<CasesPage />);
|
|
|
|
const toCases = mockLinkProps.filter(({ href }) =>
|
|
String(href).startsWith("/cases/"),
|
|
);
|
|
// uma capa e um botão por case de cliente, e um botão por projeto do laboratório
|
|
expect(toCases.length).toBeGreaterThanOrEqual(clientCases.length * 2);
|
|
for (const props of toCases) {
|
|
expect(props.prefetch).toBe(false);
|
|
}
|
|
});
|
|
});
|