Evandro Fonseca Junior
6e1022b58c
Cases da SEV Moda Íntima e da Lavação 047; case no formato cliente, problema, entrega, mídia e contato, com detalhes técnicos recolhidos; sem GitHub, ressalvas e fontes de commit. /cases separa clientes e Laboratório. Serviços mostram o case de cliente certo e o bloco de investimento e prazo só aparece preenchido. Metadata social própria por página, not-found com noindex, sitemap com /ia.
452 lines
15 KiB
TypeScript
452 lines
15 KiB
TypeScript
import { render, screen, within } from "@testing-library/react";
|
|
import { caseStudies, getRelatedServices, siteUrl } from "@/lib/site-content";
|
|
import CasesPage from "../page";
|
|
import CasePage, { generateMetadata, generateStaticParams } from "./page";
|
|
|
|
jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
|
|
|
|
const clientCaseIds = [
|
|
"sev-modaintima",
|
|
"lavacao-047",
|
|
"sc-plus",
|
|
"as-servicos",
|
|
];
|
|
const labCaseIds = [
|
|
"nutriscan",
|
|
"twins-lab",
|
|
"reddit-explorer",
|
|
"gcc-installer",
|
|
];
|
|
const publicCaseIds = [...clientCaseIds, ...labCaseIds];
|
|
|
|
function getCase(id: string) {
|
|
const caseStudy = caseStudies.find((item) => item.id === id);
|
|
if (!caseStudy) throw new Error(`Missing case ${id}`);
|
|
return caseStudy;
|
|
}
|
|
|
|
async function renderCase(id: string) {
|
|
const ui = await CasePage({ params: Promise.resolve({ slug: id }) });
|
|
return render(ui);
|
|
}
|
|
|
|
function isBefore(first: Element, second: Element) {
|
|
return Boolean(
|
|
first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING,
|
|
);
|
|
}
|
|
|
|
function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
|
|
const scripts = container.querySelectorAll<HTMLScriptElement>(
|
|
'script[type="application/ld+json"]',
|
|
);
|
|
if (scripts.length === 0) throw new Error("Missing JSON-LD");
|
|
|
|
return Array.from(scripts).flatMap((script) => {
|
|
if (!script.textContent) throw new Error("Empty JSON-LD");
|
|
const value = JSON.parse(script.textContent) as Record<string, unknown>;
|
|
return Array.isArray(value["@graph"]) ? value["@graph"] : [value];
|
|
});
|
|
}
|
|
|
|
/** Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case. */
|
|
function expectContactAndNoDeadLinks(caseStudy: { title: string }) {
|
|
const hrefs = screen
|
|
.getAllByRole("link")
|
|
.map((link) => link.getAttribute("href") ?? "");
|
|
expect(hrefs).not.toContain("/#contact");
|
|
expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
|
|
|
|
const cta = screen.getByRole("link", {
|
|
name: "Conversar sobre um projeto parecido",
|
|
});
|
|
const destination = new URL(cta.getAttribute("href") ?? "");
|
|
expect(destination.origin).toBe("https://wa.me");
|
|
expect(destination.searchParams.get("text")).toContain(
|
|
`um projeto parecido com o da ${caseStudy.title}`,
|
|
);
|
|
expect(cta).toHaveAttribute("target", "_blank");
|
|
expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
|
|
}
|
|
|
|
it("exposes the eight public cases, the two new client cases among them", async () => {
|
|
const staticSlugs = generateStaticParams().map(({ slug }) => slug);
|
|
expect(staticSlugs).toHaveLength(8);
|
|
expect(new Set(staticSlugs).size).toBe(8);
|
|
expect([...staticSlugs].sort()).toEqual([...publicCaseIds].sort());
|
|
expect(staticSlugs).toContain("sev-modaintima");
|
|
expect(staticSlugs).toContain("lavacao-047");
|
|
|
|
for (const id of ["sev-modaintima", "lavacao-047", "as-servicos"]) {
|
|
const caseStudy = getCase(id);
|
|
const url = `${siteUrl}/cases/${caseStudy.id}`;
|
|
const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
|
|
const metadata = await generateMetadata({
|
|
params: Promise.resolve({ slug: caseStudy.id }),
|
|
});
|
|
expect(metadata).toMatchObject({
|
|
title,
|
|
description: caseStudy.summary,
|
|
alternates: { canonical: url },
|
|
openGraph: { title, description: caseStudy.summary, url },
|
|
twitter: { title, description: caseStudy.summary },
|
|
});
|
|
expect(metadata).not.toHaveProperty("keywords");
|
|
}
|
|
});
|
|
|
|
it("renders a client case in the sales order, with media, contact and collapsed technical details", async () => {
|
|
const caseStudy = getCase("sev-modaintima");
|
|
const { container } = await renderCase(caseStudy.id);
|
|
|
|
const heading = screen.getByRole("heading", { level: 1 });
|
|
expect(heading).toHaveTextContent(caseStudy.headline);
|
|
expect(heading.nextElementSibling).toHaveTextContent(caseStudy.summary);
|
|
expect(screen.getByText(/Case de cliente/)).toBeVisible();
|
|
|
|
const sectionNames = [
|
|
"O cliente e o contexto",
|
|
"O problema",
|
|
"O que foi feito",
|
|
"Como ficou",
|
|
"Quer um projeto parecido com este?",
|
|
];
|
|
const sectionHeadings = sectionNames.map((name) =>
|
|
screen.getByRole("heading", { level: 2, name }),
|
|
);
|
|
for (let index = 1; index < sectionHeadings.length; index += 1) {
|
|
expect(isBefore(sectionHeadings[index - 1], sectionHeadings[index])).toBe(
|
|
true,
|
|
);
|
|
}
|
|
expect(isBefore(heading, sectionHeadings[0])).toBe(true);
|
|
|
|
expect(screen.getByText(caseStudy.context)).toBeVisible();
|
|
expect(screen.getByText(caseStudy.problem)).toBeVisible();
|
|
for (const delivery of caseStudy.deliveries) {
|
|
expect(screen.getByText(delivery)).toBeVisible();
|
|
}
|
|
|
|
// sem dado real, não há seção de resultado
|
|
expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
|
|
|
|
// mídia: pôster e vídeo do computador e do celular
|
|
const desktopVideo = screen.getByLabelText(
|
|
`Vídeo do site ${caseStudy.title} no computador`,
|
|
);
|
|
const mobileVideo = screen.getByLabelText(
|
|
`Vídeo do site ${caseStudy.title} no celular`,
|
|
);
|
|
expect(desktopVideo).toHaveAttribute(
|
|
"poster",
|
|
`/videos/${caseStudy.id}/desktop.webp`,
|
|
);
|
|
expect(mobileVideo).toHaveAttribute(
|
|
"poster",
|
|
`/videos/${caseStudy.id}/mobile.webp`,
|
|
);
|
|
expect(
|
|
desktopVideo.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
|
|
).toHaveLength(2);
|
|
expect(container.querySelector(".ds-bframe")).toContainElement(desktopVideo);
|
|
expect(container.querySelector(".ds-phone")).toContainElement(mobileVideo);
|
|
expect(
|
|
screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
|
|
).toHaveAttribute("href", caseStudy.demoUrl);
|
|
|
|
expectContactAndNoDeadLinks(caseStudy);
|
|
|
|
// detalhes técnicos: recolhidos, no fim da página
|
|
const details = container.querySelector("details");
|
|
if (!details) throw new Error("Missing technical details");
|
|
expect(details).not.toHaveAttribute("open");
|
|
expect(within(details).getByText("Detalhes técnicos")).toBeVisible();
|
|
for (const technology of caseStudy.stack) {
|
|
expect(within(details).getByText(technology)).not.toBeVisible();
|
|
}
|
|
for (const decision of caseStudy.decisions) {
|
|
expect(within(details).getByText(decision)).not.toBeVisible();
|
|
}
|
|
const contactHeading = sectionHeadings[sectionHeadings.length - 1];
|
|
expect(isBefore(contactHeading, details)).toBe(true);
|
|
expect(container.querySelectorAll("details")).toHaveLength(1);
|
|
const lastSection = container.querySelector("article")?.lastElementChild;
|
|
expect(lastSection).toContainElement(details);
|
|
|
|
// o que saiu: desafio verificável, limites da evidência, fontes e commits
|
|
for (const name of [
|
|
"Desafio verificável",
|
|
"Decisões de implementação",
|
|
"Limites desta evidência",
|
|
"Fontes",
|
|
]) {
|
|
expect(screen.queryByRole("heading", { name })).toBeNull();
|
|
}
|
|
expect(screen.queryByRole("link", { name: /^Fonte:/ })).toBeNull();
|
|
expect(container.textContent).not.toMatch(/Commit:|[0-9a-f]{40}/);
|
|
|
|
const graph = readJsonLdEntities(container);
|
|
expect(graph.map((node) => node["@type"])).toEqual(["BreadcrumbList"]);
|
|
expect(JSON.stringify(graph)).not.toMatch(
|
|
/Article|FAQPage|ProfessionalService|LocalBusiness/,
|
|
);
|
|
const breadcrumb = graph[0] as {
|
|
itemListElement: Array<{
|
|
"@type": string;
|
|
position: number;
|
|
name: string;
|
|
item: string;
|
|
}>;
|
|
};
|
|
const canonicalUrl = `${siteUrl}/cases/${caseStudy.id}`;
|
|
expect(breadcrumb.itemListElement).toEqual([
|
|
{ "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
|
|
{
|
|
"@type": "ListItem",
|
|
position: 2,
|
|
name: "Cases",
|
|
item: `${siteUrl}/cases`,
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
position: 3,
|
|
name: caseStudy.title,
|
|
item: canonicalUrl,
|
|
},
|
|
]);
|
|
|
|
const visibleBreadcrumb = screen.getByRole("navigation", {
|
|
name: "Breadcrumb",
|
|
});
|
|
expect(
|
|
within(visibleBreadcrumb)
|
|
.getAllByRole("link")
|
|
.map((link) => ({
|
|
name: link.textContent,
|
|
href: link.getAttribute("href"),
|
|
current: link.getAttribute("aria-current"),
|
|
})),
|
|
).toEqual([
|
|
{ name: "Início", href: "/", current: null },
|
|
{ name: "Cases", href: "/cases", current: null },
|
|
{
|
|
name: caseStudy.title,
|
|
href: `/cases/${caseStudy.id}`,
|
|
current: "page",
|
|
},
|
|
]);
|
|
});
|
|
|
|
it("renders the two new client cases from the portfolio data", async () => {
|
|
for (const id of ["sev-modaintima", "lavacao-047"]) {
|
|
const caseStudy = getCase(id);
|
|
const { unmount } = await renderCase(id);
|
|
|
|
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
|
|
caseStudy.headline,
|
|
);
|
|
expect(
|
|
screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
|
|
).toHaveAttribute("href", caseStudy.demoUrl);
|
|
expectContactAndNoDeadLinks(caseStudy);
|
|
unmount();
|
|
}
|
|
});
|
|
|
|
it("labels a laboratory case, skips the media block and links its service", async () => {
|
|
const caseStudy = getCase("twins-lab");
|
|
const { container } = await renderCase(caseStudy.id);
|
|
|
|
expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
|
|
expect(
|
|
screen.getByRole("heading", { level: 2, name: "O contexto do projeto" }),
|
|
).toBeVisible();
|
|
expect(screen.queryByRole("heading", { name: "Como ficou" })).toBeNull();
|
|
expect(container.querySelector("video")).toBeNull();
|
|
expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
|
|
expect(screen.queryByText(/indispon/i)).toBeNull();
|
|
|
|
const relatedLinks = screen.getAllByRole("link", {
|
|
name: /^Ver serviço relacionado:/,
|
|
});
|
|
expect(relatedLinks.map((link) => link.getAttribute("href"))).toEqual(
|
|
getRelatedServices(caseStudy.id).map(({ slug }) => `/servicos/${slug}`),
|
|
);
|
|
expect(relatedLinks).toHaveLength(1);
|
|
expectContactAndNoDeadLinks(caseStudy);
|
|
});
|
|
|
|
it("shows the author's role and no site button for a client project without a public site", async () => {
|
|
const caseStudy = getCase("as-servicos");
|
|
expect(caseStudy.demoUrl).toBeNull();
|
|
await renderCase(caseStudy.id);
|
|
|
|
expect(screen.getByText("Minha participação:")).toBeVisible();
|
|
expect(
|
|
screen.getByText(caseStudy.role ?? "", { exact: false }),
|
|
).toBeVisible();
|
|
expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
|
|
expect(screen.queryByText(/indispon/i)).toBeNull();
|
|
// a capa continua nas molduras
|
|
expect(
|
|
screen.getByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows the result section only when the case has real data", async () => {
|
|
const caseStudy = getCase("lavacao-047");
|
|
const { unmount } = await renderCase(caseStudy.id);
|
|
expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
|
|
unmount();
|
|
|
|
caseStudy.result = ["Dado real informado pelo cliente."];
|
|
try {
|
|
await renderCase(caseStudy.id);
|
|
const heading = screen.getByRole("heading", {
|
|
level: 2,
|
|
name: "Resultado",
|
|
});
|
|
expect(screen.getByText("Dado real informado pelo cliente.")).toBeVisible();
|
|
expect(
|
|
isBefore(
|
|
screen.getByRole("heading", { level: 2, name: "Como ficou" }),
|
|
heading,
|
|
),
|
|
).toBe(true);
|
|
expect(
|
|
isBefore(
|
|
heading,
|
|
screen.getByRole("heading", {
|
|
level: 2,
|
|
name: "Quer um projeto parecido com este?",
|
|
}),
|
|
),
|
|
).toBe(true);
|
|
} finally {
|
|
delete caseStudy.result;
|
|
}
|
|
});
|
|
|
|
it("links every service related to a client case", async () => {
|
|
const caseStudy = getCase("sc-plus");
|
|
const { container } = await renderCase(caseStudy.id);
|
|
|
|
const relatedLinks = screen.getAllByRole("link", {
|
|
name: /^Ver serviço relacionado:/,
|
|
});
|
|
expect(
|
|
relatedLinks
|
|
.map((link) => link.getAttribute("href"))
|
|
.sort((a, b) => (a ?? "").localeCompare(b ?? "")),
|
|
).toEqual(
|
|
getRelatedServices(caseStudy.id)
|
|
.map(({ slug }) => `/servicos/${slug}`)
|
|
.sort(),
|
|
);
|
|
expectContactAndNoDeadLinks(caseStudy);
|
|
expect(readJsonLdEntities(container).map((node) => node["@type"])).toEqual([
|
|
"BreadcrumbList",
|
|
]);
|
|
});
|
|
|
|
it("lists client cases with a cover first, then the laboratory, and keeps the schema aligned", () => {
|
|
const { container } = render(<CasesPage />);
|
|
const heading = screen.getByRole("heading", { level: 1 });
|
|
expect(heading.nextElementSibling).toHaveTextContent(
|
|
/foi feito para empresas/i,
|
|
);
|
|
expect(container.textContent).not.toMatch(/Selected work/i);
|
|
|
|
const clientHeading = screen.getByRole("heading", {
|
|
level: 2,
|
|
name: "Projetos de clientes",
|
|
});
|
|
const labHeading = screen.getByRole("heading", {
|
|
level: 2,
|
|
name: "Laboratório",
|
|
});
|
|
expect(isBefore(heading, clientHeading)).toBe(true);
|
|
expect(isBefore(clientHeading, labHeading)).toBe(true);
|
|
expect(screen.getByText(/Projetos pessoais e de estudo/)).toBeVisible();
|
|
|
|
// cases de cliente: capa (pôster) em moldura de navegador e botão do case em contorno
|
|
const clientLinks = clientCaseIds.map((id) => {
|
|
const card = container
|
|
.querySelector(`a[href="/cases/${id}"]`)
|
|
?.closest("article");
|
|
if (!card) throw new Error(`Missing client card ${id}`);
|
|
expect(isBefore(clientHeading, card)).toBe(true);
|
|
expect(isBefore(card, labHeading)).toBe(true);
|
|
expect(card.querySelector(".ds-bframe img")).toHaveAttribute(
|
|
"alt",
|
|
`Captura de tela do site ${getCase(id).title}`,
|
|
);
|
|
return within(card).getByRole("link", { name: "Ver o case" });
|
|
});
|
|
expect(clientLinks.map((link) => link.getAttribute("href"))).toEqual(
|
|
clientCaseIds.map((id) => `/cases/${id}`),
|
|
);
|
|
|
|
// laboratório: sem capa
|
|
const labLinks = screen.getAllByRole("link", { name: "Ver o projeto" });
|
|
expect(labLinks.map((link) => link.getAttribute("href"))).toEqual(
|
|
labCaseIds.map((id) => `/cases/${id}`),
|
|
);
|
|
for (const link of labLinks) {
|
|
const card = link.closest("article");
|
|
expect(isBefore(labHeading, link)).toBe(true);
|
|
expect(card?.querySelector(".ds-bframe")).toBeNull();
|
|
}
|
|
|
|
// contato pelo WhatsApp, sem /#contact nem GitHub
|
|
const hrefs = screen
|
|
.getAllByRole("link")
|
|
.map((link) => link.getAttribute("href") ?? "");
|
|
expect(hrefs).not.toContain("/#contact");
|
|
expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
|
|
expect(hrefs).toContain("/servicos");
|
|
const cta = screen.getByRole("link", { name: "Conversar sobre meu projeto" });
|
|
expect(new URL(cta.getAttribute("href") ?? "").origin).toBe("https://wa.me");
|
|
|
|
const visibleBreadcrumb = screen.getByRole("navigation", {
|
|
name: "Breadcrumb",
|
|
});
|
|
expect(
|
|
within(visibleBreadcrumb)
|
|
.getAllByRole("link")
|
|
.map((link) => [link.textContent, link.getAttribute("href")]),
|
|
).toEqual([
|
|
["Início", "/"],
|
|
["Cases", "/cases"],
|
|
]);
|
|
|
|
const graph = readJsonLdEntities(container);
|
|
expect(graph.map((node) => node["@type"])).toEqual([
|
|
"CollectionPage",
|
|
"ItemList",
|
|
"BreadcrumbList",
|
|
]);
|
|
const itemList = graph[1] as {
|
|
itemListElement: Array<{
|
|
"@type": string;
|
|
position: number;
|
|
name: string;
|
|
url: string;
|
|
}>;
|
|
};
|
|
const visibleItems = [...clientLinks, ...labLinks].map((link, index) => {
|
|
const href = link.getAttribute("href");
|
|
const card = link.closest("article");
|
|
if (!card) throw new Error(`Missing visible card for ${href}`);
|
|
const expected = getCase((href ?? "").replace("/cases/", ""));
|
|
expect(card.querySelector(".ds-kicker")).toHaveTextContent(expected.title);
|
|
return {
|
|
"@type": "ListItem",
|
|
position: index + 1,
|
|
name: expected.title,
|
|
url: `${siteUrl}${href}`,
|
|
};
|
|
});
|
|
expect(itemList.itemListElement).toEqual(visibleItems);
|
|
});
|