evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
78 lines
2.9 KiB
TypeScript
78 lines
2.9 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: a única imagem decorativa (alt vazio) é a peça de blocos do topo, preguiçosa e sem prioridade
|
|
const decorative = Array.from(
|
|
container.querySelectorAll<HTMLImageElement>("img"),
|
|
).filter((image) => image.getAttribute("alt") === "");
|
|
expect(decorative).toHaveLength(1);
|
|
expect(decorative[0].getAttribute("src")).toContain("estado-tela.webp");
|
|
expect(decorative[0]).toHaveAttribute("loading", "lazy");
|
|
expect(decorative[0]).not.toHaveAttribute("fetchpriority");
|
|
|
|
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);
|
|
}
|
|
});
|
|
});
|