Evandro Fonseca Junior
de6af74a0c
Diagnóstico sem case que não cabe; desktop com o GCC Installer como projeto próprio; IoT com o Twins Lab e a nota da Apolo. Mosaico de pôsteres em /servicos e /cases, faixa baixa em uma coluna no currículo, privacidade e laboratório; Laboratório como lista compacta; SEV começando por catálogo, pedido no WhatsApp e painel; Joinville e SC nos títulos; imagens do LCP com fetchPriority e sizes reais; pré-carregamento só no hover; 404 com Open Graph próprio.
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { render } from "@testing-library/react";
|
|
import type { ComponentProps } from "react";
|
|
import { clientCases } from "@/lib/site-content";
|
|
import CasesPage from "./page";
|
|
|
|
/**
|
|
* Carregamento da lista de cases: o primeiro pôster do mosaico do topo (a maior imagem acima da dobra) carrega na hora
|
|
* e com prioridade alta, as capas dos cartões 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 mosaic poster at once with high priority, and every other image lazily", () => {
|
|
const { container } = render(<CasesPage />);
|
|
|
|
const mosaic = Array.from(
|
|
container.querySelectorAll<HTMLImageElement>("section [aria-hidden] img"),
|
|
).filter((image) => image.getAttribute("alt") === "");
|
|
const [main, ...side] = mosaic;
|
|
expect(main).toHaveAttribute("loading", "eager");
|
|
expect(main).toHaveAttribute("fetchpriority", "high");
|
|
// a largura real do pôster, e não 100vw (que baixava 750 px para 330 px)
|
|
expect(main.getAttribute("sizes")).toMatch(/calc\(100vw - 40px\)$/);
|
|
expect(side.length).toBeGreaterThan(0);
|
|
for (const image of side) {
|
|
expect(image).toHaveAttribute("loading", "lazy");
|
|
expect(image).not.toHaveAttribute("fetchpriority");
|
|
}
|
|
|
|
const covers = coverImages(container);
|
|
expect(covers.length).toBeGreaterThan(0);
|
|
for (const image of covers) {
|
|
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);
|
|
}
|
|
});
|
|
});
|