feat(servicos): ofertas no topo de /servicos, capa por assunto e diagramas
/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.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
e63f3c2ebd
commit
fc44a69fb3
41 files changed
+2486
-550
No files matched your search
@@ -0,0 +1,162 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { getCaseMedia } from "@/app/cases/_components/case-media";
|
||||
import { type Device, getShowcaseAssets } from "@/lib/project-showcase";
|
||||
import { getServicePage } from "@/lib/site-content";
|
||||
import ServicePage from "./page";
|
||||
|
||||
/**
|
||||
* Testes de caminhos-base da escolha da capa do topo em ServicePage (complemento de page.test.tsx), com as capturas
|
||||
* gravadas controladas pelo teste (getCaseMedia trocado por um dublê que só "tem" o que o teste diz).
|
||||
*
|
||||
* A capa vale quando o serviço tem `heroCase` E existe captura gravada do aparelho pedido (heroCase.device); senão
|
||||
* entra o `diagram` do serviço, se tiver; sem os dois, o topo vira uma coluna só e mais baixa.
|
||||
* Caminhos: capa de computador | capa de celular | sem captura do computador | só captura do outro aparelho |
|
||||
* case da capa que não existe | serviço de esquema, com ou sem captura de qualquer case.
|
||||
* Quando a capa vale, a legenda dela cita o case e o case não ganha cartão em "Trabalhos parecidos".
|
||||
*/
|
||||
|
||||
jest.mock("next/navigation", () => ({
|
||||
notFound: jest.fn(() => {
|
||||
throw new Error("NEXT_NOT_FOUND");
|
||||
}),
|
||||
usePathname: () => "/servicos",
|
||||
}));
|
||||
jest.mock("@/app/cases/_components/case-media", () => ({
|
||||
...jest.requireActual("@/app/cases/_components/case-media"),
|
||||
getCaseMedia: jest.fn(),
|
||||
}));
|
||||
|
||||
type Capture = readonly [id: string, device: Device];
|
||||
|
||||
/** Só as capturas listadas existem no disco. */
|
||||
function capturesOnDisk(captures: readonly Capture[]) {
|
||||
jest
|
||||
.mocked(getCaseMedia)
|
||||
.mockImplementation((id, device) =>
|
||||
captures.some(
|
||||
([knownId, knownDevice]) => knownId === id && knownDevice === device,
|
||||
)
|
||||
? getShowcaseAssets(id, device)
|
||||
: undefined,
|
||||
);
|
||||
}
|
||||
|
||||
async function renderService(slug: string) {
|
||||
const ui = await ServicePage({ params: Promise.resolve({ slug }) });
|
||||
const view = render(ui);
|
||||
const hero = view.container.querySelector("section") as HTMLElement;
|
||||
return {
|
||||
...view,
|
||||
hero,
|
||||
twoColumns: hero
|
||||
.querySelector(".ds-section-shell")
|
||||
?.classList.contains("grid"),
|
||||
compact: hero.className.includes("md:!pb-sp-12"),
|
||||
caption: hero.querySelector("figure figcaption"),
|
||||
cards: Array.from(
|
||||
view.container.querySelectorAll("#casos-relacionados article"),
|
||||
).map((card) => card.querySelector(".ds-kicker")?.textContent),
|
||||
};
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
jest.mocked(getCaseMedia).mockReset();
|
||||
});
|
||||
|
||||
describe("ServicePage: escolha da capa do topo", () => {
|
||||
it("path: desktop cover with its capture on disk -> browser frame in the hero, the caption cites the case and the case gets no card", async () => {
|
||||
capturesOnDisk([["lavacao-047", "desktop"]]);
|
||||
|
||||
const view = await renderService("criacao-de-sites");
|
||||
|
||||
expect(view.hero.querySelector(".ds-bframe")).not.toBeNull();
|
||||
expect(view.twoColumns).toBe(true);
|
||||
expect(view.compact).toBe(false);
|
||||
expect(view.caption).toHaveTextContent("Lavação 047");
|
||||
expect(view.cards).not.toContain("Lavação 047");
|
||||
expect(view.cards).toEqual(["SC Plus Aquicultura", "AS Serviços"]);
|
||||
});
|
||||
|
||||
it("path: mobile cover with its capture on disk -> phone frame in the hero, no browser frame", async () => {
|
||||
capturesOnDisk([["sev-modaintima", "mobile"]]);
|
||||
|
||||
const view = await renderService("engenharia-de-software");
|
||||
|
||||
expect(view.hero.querySelector(".ds-phone-screen")).not.toBeNull();
|
||||
expect(view.hero.querySelector(".ds-bframe")).toBeNull();
|
||||
expect(view.twoColumns).toBe(true);
|
||||
expect(view.caption).toHaveTextContent("SEV Moda Íntima");
|
||||
expect(view.cards).toEqual(["Lavação 047"]);
|
||||
});
|
||||
|
||||
it("path: no capture on disk -> no cover, a lower one-column hero, and the case that would be the cover gets its card back", async () => {
|
||||
capturesOnDisk([]);
|
||||
|
||||
const view = await renderService("criacao-de-sites");
|
||||
|
||||
expect(view.hero.querySelector("figure")).toBeNull();
|
||||
expect(view.twoColumns).toBe(false);
|
||||
expect(view.compact).toBe(true);
|
||||
expect(screen.queryByRole("img")).toBeNull();
|
||||
expect(view.cards).toEqual([
|
||||
"Lavação 047",
|
||||
"SC Plus Aquicultura",
|
||||
"AS Serviços",
|
||||
]);
|
||||
});
|
||||
|
||||
it("path: only the OTHER device was captured (mobile cover, desktop capture) -> no cover, the check follows the device the service asks for", async () => {
|
||||
capturesOnDisk([["sev-modaintima", "desktop"]]);
|
||||
|
||||
const view = await renderService("engenharia-de-software");
|
||||
|
||||
expect(view.hero.querySelector("figure")).toBeNull();
|
||||
expect(view.compact).toBe(true);
|
||||
expect(view.cards).toEqual(["SEV Moda Íntima", "Lavação 047"]);
|
||||
expect(getCaseMedia).toHaveBeenCalledWith("sev-modaintima", "mobile");
|
||||
});
|
||||
|
||||
it("path: the cover case does not exist -> same as no capture, no crash", async () => {
|
||||
capturesOnDisk([["nao-existe", "desktop"]]);
|
||||
const service = getServicePage("consultoria-nextjs");
|
||||
if (!service?.heroCase) throw new Error("Missing hero case");
|
||||
const original = service.heroCase;
|
||||
service.heroCase = { id: "nao-existe", device: "desktop" };
|
||||
try {
|
||||
const view = await renderService("consultoria-nextjs");
|
||||
|
||||
expect(view.hero.querySelector("figure")).toBeNull();
|
||||
expect(view.compact).toBe(true);
|
||||
} finally {
|
||||
service.heroCase = original;
|
||||
}
|
||||
});
|
||||
|
||||
it("path: diagram service -> the diagram, never a cover, even with every capture on disk", async () => {
|
||||
capturesOnDisk([
|
||||
["twins-lab", "desktop"],
|
||||
["twins-lab", "mobile"],
|
||||
["lavacao-047", "desktop"],
|
||||
]);
|
||||
|
||||
const view = await renderService("integracao-hardware-software-iot");
|
||||
|
||||
expect(
|
||||
screen.getByRole("img", { name: /dispositivo envia as leituras/ }),
|
||||
).toBeVisible();
|
||||
expect(view.hero.querySelector(".ds-bframe")).toBeNull();
|
||||
expect(view.twoColumns).toBe(true);
|
||||
expect(view.compact).toBe(false);
|
||||
});
|
||||
|
||||
it("path: a service with a cover AND the capture missing never falls back to a diagram it does not have", async () => {
|
||||
capturesOnDisk([]);
|
||||
const service = getServicePage("consultoria-nextjs");
|
||||
|
||||
const view = await renderService("consultoria-nextjs");
|
||||
|
||||
expect(service?.diagram).toBeUndefined();
|
||||
expect(screen.queryByRole("img", { name: /Esquema|esquema/ })).toBeNull();
|
||||
expect(view.compact).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -8,10 +8,12 @@ import ServicePage, { generateMetadata } from "./page";
|
||||
* Cobrem só o que o arquivo principal não exercita: slug desconhecido e perguntas frequentes ausentes ou vazias.
|
||||
*/
|
||||
|
||||
// usePathname: o HoverPrefetchLink (trilha, cartões) lê o caminho para saber se está na home
|
||||
jest.mock("next/navigation", () => ({
|
||||
notFound: jest.fn(() => {
|
||||
throw new Error("NEXT_NOT_FOUND");
|
||||
}),
|
||||
usePathname: () => "/servicos",
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -33,20 +35,27 @@ describe("ServicePage: caminhos que o teste principal não cobre", () => {
|
||||
expect(notFound).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("path: service with a FAQ (main path) -> shows every question", async () => {
|
||||
it("path: service with a FAQ (main path) -> shows every question as a closed accordion item, the same pattern as the home", async () => {
|
||||
const service = getServicePage("criacao-de-sites");
|
||||
if (!service?.faq?.length) throw new Error("Missing service FAQ");
|
||||
|
||||
await renderService(service.slug);
|
||||
const { container } = await renderService(service.slug);
|
||||
|
||||
expect(
|
||||
screen.getByRole("heading", { level: 2, name: FAQ_HEADING }),
|
||||
).toBeVisible();
|
||||
const summaries = Array.from(
|
||||
container.querySelectorAll("#faq summary"),
|
||||
).map((summary) => summary.textContent?.replace("+", "").trim());
|
||||
expect(summaries).toEqual(service.faq.map(({ question }) => question));
|
||||
for (const item of service.faq) {
|
||||
expect(
|
||||
screen.getByRole("heading", { level: 3, name: item.question }),
|
||||
).toBeVisible();
|
||||
const details = screen.getByText(item.question).closest("details");
|
||||
expect(details).not.toBeNull();
|
||||
expect(details?.open).toBe(false);
|
||||
expect(details).toHaveTextContent(item.answer);
|
||||
}
|
||||
// um formato só: nenhum cartão de pergunta e resposta
|
||||
expect(container.querySelector("#faq article")).toBeNull();
|
||||
});
|
||||
|
||||
it("path: service without the faq field -> no FAQ section, the rest of the page stays", async () => {
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
import { render, screen, within } from "@testing-library/react";
|
||||
import { SEO_IDS } from "@/lib/seo";
|
||||
import {
|
||||
buttonLabels,
|
||||
caseStudies,
|
||||
clientCases,
|
||||
clientCasesForListing,
|
||||
getRelatedCases,
|
||||
getServicePage,
|
||||
isClientCase,
|
||||
serviceOffers,
|
||||
servicePages,
|
||||
siteUrl,
|
||||
} from "@/lib/site-content";
|
||||
import ServicesIndexPage from "../page";
|
||||
import ServicePage, { generateMetadata, generateStaticParams } from "./page";
|
||||
|
||||
jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
|
||||
// usePathname: o HoverPrefetchLink (trilha, cartões) lê o caminho para saber se está na home
|
||||
jest.mock("next/navigation", () => ({
|
||||
notFound: jest.fn(),
|
||||
usePathname: () => "/servicos",
|
||||
}));
|
||||
|
||||
async function renderService(slug: string) {
|
||||
const ui = await ServicePage({ params: Promise.resolve({ slug }) });
|
||||
@@ -25,6 +31,13 @@ function isBefore(first: Element, second: Element) {
|
||||
);
|
||||
}
|
||||
|
||||
/** Links "Ver case" dos cartões de "Onde já apliquei isso"; a capa do topo, que também abre o case, fica de fora. */
|
||||
function caseCardLinks(container: HTMLElement) {
|
||||
const block = container.querySelector<HTMLElement>("#casos-relacionados");
|
||||
if (!block) throw new Error("Missing related cases block");
|
||||
return within(block).getAllByRole("link", { name: /^Ver case / });
|
||||
}
|
||||
|
||||
const service = getServicePage("consultoria-nextjs");
|
||||
if (!service) throw new Error("Missing representative service");
|
||||
|
||||
@@ -97,7 +110,10 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
|
||||
expect(screen.getByText(detail)).not.toBeVisible();
|
||||
}
|
||||
|
||||
const primaryCtas = screen.getAllByRole("link", { name: /WhatsApp/i });
|
||||
const primaryCtas = screen.getAllByRole("link", {
|
||||
name: buttonLabels.contact,
|
||||
});
|
||||
expect(primaryCtas).toHaveLength(2);
|
||||
for (const cta of primaryCtas) {
|
||||
const destination = new URL(cta.getAttribute("href") ?? "");
|
||||
expect(destination.origin).toBe("https://wa.me");
|
||||
@@ -106,19 +122,24 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
|
||||
expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
|
||||
}
|
||||
|
||||
// o case da capa (SC Plus) é citado pela legenda dela, e não ganha cartão: os cartões são os demais cases relacionados
|
||||
const heroId = service.heroCase?.id;
|
||||
expect(heroId).toBe("sc-plus");
|
||||
expect(
|
||||
container.querySelector("section figcaption a[href='/cases/sc-plus']"),
|
||||
).not.toBeNull();
|
||||
const expectedCaseLinks = service.relatedCaseIds
|
||||
.filter((id) => id !== heroId)
|
||||
.map((id) => {
|
||||
const caseStudy = caseStudies.find((item) => item.id === id);
|
||||
if (!caseStudy) throw new Error(`Missing related case ${id}`);
|
||||
return {
|
||||
name: `Ler case: ${caseStudy.title}`,
|
||||
name: `Ver case ${caseStudy.title}`,
|
||||
href: `/cases/${id}`,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.href.localeCompare(b.href));
|
||||
const internalCaseLinks = screen.getAllByRole("link", {
|
||||
name: /^Ler case:/,
|
||||
});
|
||||
const internalCaseLinks = caseCardLinks(container);
|
||||
expect(
|
||||
internalCaseLinks
|
||||
.map((link) => ({
|
||||
@@ -208,7 +229,7 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
|
||||
]);
|
||||
});
|
||||
|
||||
it("fills the hub hero with a mosaic of three client posters and states the location in one line", () => {
|
||||
it("fills the hub hero with a mosaic of three client posters, never opening with the SEV, and states the location in one line", () => {
|
||||
const { container } = render(<ServicesIndexPage />);
|
||||
|
||||
const hero = container.querySelector("section");
|
||||
@@ -217,10 +238,18 @@ it("fills the hub hero with a mosaic of three client posters and states the loca
|
||||
expect(posters).toHaveLength(3);
|
||||
for (const [index, poster] of posters.entries()) {
|
||||
expect(decodeURIComponent(poster.getAttribute("src") ?? "")).toContain(
|
||||
`/videos/${clientCases[index].id}/desktop.webp`,
|
||||
`/videos/${clientCasesForListing[index].id}/desktop.webp`,
|
||||
);
|
||||
expect(poster).toHaveAttribute("alt", "");
|
||||
}
|
||||
const posterSources = posters.map((poster) =>
|
||||
decodeURIComponent(poster.getAttribute("src") ?? ""),
|
||||
);
|
||||
expect(posterSources[0]).toContain("/videos/lavacao-047/");
|
||||
expect(posterSources.some((src) => src.includes("sev-modaintima"))).toBe(
|
||||
false,
|
||||
);
|
||||
expect(new Set(posterSources).size).toBe(3);
|
||||
// só o primeiro, o maior, carrega na hora e com prioridade alta
|
||||
expect(posters[0]).toHaveAttribute("fetchpriority", "high");
|
||||
expect(posters[1]).toHaveAttribute("loading", "lazy");
|
||||
@@ -229,10 +258,9 @@ it("fills the hub hero with a mosaic of three client posters and states the loca
|
||||
);
|
||||
expect(container.textContent).not.toMatch(/perto de Garuva/);
|
||||
|
||||
// as capas dos projetos, mais abaixo, têm a largura da coluna e carregam preguiçosas
|
||||
const cover = container.querySelector("#projetos .ds-bframe img");
|
||||
expect(cover?.getAttribute("sizes")).toMatch(/calc\(100vw - 40px\)$/);
|
||||
expect(cover).toHaveAttribute("loading", "lazy");
|
||||
// nenhum cliente do mosaico se repete mais abaixo: as ofertas citam os cases só por link, sem capa
|
||||
expect(container.querySelectorAll(".ds-bframe")).toHaveLength(0);
|
||||
expect(container.querySelectorAll("img")).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("keeps hub cards and structured items aligned", () => {
|
||||
@@ -256,10 +284,25 @@ it("keeps hub cards and structured items aligned", () => {
|
||||
expect([...structuredUrls].sort()).toEqual(
|
||||
publicServiceHrefs.map((href) => `${siteUrl}${href}`).sort(),
|
||||
);
|
||||
const visibleCards = itemList.itemListElement.map(({ name }) =>
|
||||
screen.getByRole("link", { name }),
|
||||
);
|
||||
const visibleHrefs = visibleCards.map((link) => link.getAttribute("href"));
|
||||
// as duas ofertas que são serviços abrem pelo cartão da oferta; os outros quatro estão em "Outros serviços"
|
||||
const offerLinks = serviceOffers
|
||||
.filter(({ href }) => publicServiceHrefs.includes(href))
|
||||
.map(({ name, href }) => ({
|
||||
href,
|
||||
link: screen.getByRole("link", { name: `Ver o serviço ${name}` }),
|
||||
}));
|
||||
expect(offerLinks).toHaveLength(2);
|
||||
for (const { href, link } of offerLinks) {
|
||||
expect(link).toHaveAttribute("href", href);
|
||||
}
|
||||
const otherLinks = itemList.itemListElement
|
||||
.filter(({ url }) => !offerLinks.some(({ href }) => url.endsWith(href)))
|
||||
.map(({ name }) => screen.getByRole("link", { name }));
|
||||
expect(otherLinks).toHaveLength(4);
|
||||
const visibleHrefs = [
|
||||
...offerLinks.map(({ link }) => link.getAttribute("href")),
|
||||
...otherLinks.map((link) => link.getAttribute("href")),
|
||||
];
|
||||
expect(visibleHrefs).toHaveLength(6);
|
||||
expect(new Set(visibleHrefs).size).toBe(6);
|
||||
expect([...visibleHrefs].sort()).toEqual([...publicServiceHrefs].sort());
|
||||
@@ -272,20 +315,68 @@ it("keeps hub cards and structured items aligned", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("shows the client projects with covers on the hub, without disclaimers", () => {
|
||||
it("puts the three offers right after the hero, each with its name, deliverables, proof and the right page, and 'Outros serviços' below", () => {
|
||||
const { container } = render(<ServicesIndexPage />);
|
||||
|
||||
for (const id of [
|
||||
"sev-modaintima",
|
||||
"lavacao-047",
|
||||
"sc-plus",
|
||||
"as-servicos",
|
||||
]) {
|
||||
const link = container.querySelector(`a[href="/cases/${id}"]`);
|
||||
const offersHeading = screen.getByRole("heading", {
|
||||
level: 2,
|
||||
name: "Três jeitos de começar.",
|
||||
});
|
||||
const othersHeading = screen.getByRole("heading", {
|
||||
level: 2,
|
||||
name: "Outros serviços",
|
||||
});
|
||||
expect(
|
||||
isBefore(screen.getByRole("heading", { level: 1 }), offersHeading),
|
||||
).toBe(true);
|
||||
expect(isBefore(offersHeading, othersHeading)).toBe(true);
|
||||
|
||||
const cards = Array.from(
|
||||
container.querySelectorAll<HTMLElement>("section article"),
|
||||
).slice(0, 3);
|
||||
expect(cards).toHaveLength(3);
|
||||
for (const [index, offer] of serviceOffers.entries()) {
|
||||
const card = cards[index];
|
||||
expect(
|
||||
link?.closest("article")?.querySelector(".ds-bframe img"),
|
||||
).not.toBeNull();
|
||||
within(card).getByRole("heading", { level: 3, name: offer.name }),
|
||||
).toBeVisible();
|
||||
for (const item of offer.deliverables) {
|
||||
expect(within(card).getByText(item)).toBeVisible();
|
||||
}
|
||||
expect(
|
||||
within(card).getByRole("link", { name: `Ver o serviço ${offer.name}` }),
|
||||
).toHaveAttribute("href", offer.href);
|
||||
expect(within(card).getByText(offer.proof.label)).toBeVisible();
|
||||
}
|
||||
// a prova: Lavação 047 e SEV na oferta do site, a SEV e a Apolo na do sistema, a página /ia na da revisão
|
||||
expect(
|
||||
within(cards[0]).getByRole("link", { name: "Ver case Lavação 047" }),
|
||||
).toHaveAttribute("href", "/cases/lavacao-047");
|
||||
expect(
|
||||
within(cards[0]).getByRole("link", { name: "Ver case SEV Moda Íntima" }),
|
||||
).toHaveAttribute("href", "/cases/sev-modaintima");
|
||||
expect(
|
||||
within(cards[1]).getByRole("link", { name: "Ver case SEV Moda Íntima" }),
|
||||
).toHaveAttribute("href", "/cases/sev-modaintima");
|
||||
expect(within(cards[1]).getByText(/Apolo Energia/)).toBeVisible();
|
||||
expect(within(cards[2]).queryAllByRole("link")).toHaveLength(1);
|
||||
expect(
|
||||
within(cards[2]).getByRole("link", { name: /^Ver o serviço/ }),
|
||||
).toHaveAttribute("href", "/ia");
|
||||
});
|
||||
|
||||
it("keeps the hub free of case covers, with the SEV only as a proof link in two offers, and without disclaimers", () => {
|
||||
const { container } = render(<ServicesIndexPage />);
|
||||
|
||||
// a SEV aparece só como link de prova nas duas ofertas, nunca como capa ou no mosaico
|
||||
const sevLinks = container.querySelectorAll(
|
||||
`a[href="/cases/sev-modaintima"]`,
|
||||
);
|
||||
expect(sevLinks).toHaveLength(2);
|
||||
for (const link of sevLinks) {
|
||||
expect(link.querySelector("img")).toBeNull();
|
||||
}
|
||||
expect(container.querySelectorAll(".ds-bframe")).toHaveLength(0);
|
||||
expect(container.textContent).not.toMatch(
|
||||
/sem promessas|Demonstração publicada|limites|indispon/i,
|
||||
);
|
||||
@@ -315,72 +406,198 @@ it("shows the client cases first, right after the hero, with the first cover in
|
||||
),
|
||||
).toBe(true);
|
||||
|
||||
const caseLinks = screen.getAllByRole("link", { name: /^Ler case:/ });
|
||||
// o case da capa (Lavação 047) é citado pela legenda dela; os cartões trazem os demais, com os de cliente à frente
|
||||
const caseLinks = caseCardLinks(container);
|
||||
expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual(
|
||||
getRelatedCases(siteService.relatedCaseIds).map(({ id }) => `/cases/${id}`),
|
||||
getRelatedCases(siteService.relatedCaseIds)
|
||||
.filter(({ id }) => id !== siteService.heroCase?.id)
|
||||
.map(({ id }) => `/cases/${id}`),
|
||||
);
|
||||
expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual([
|
||||
"/cases/sev-modaintima",
|
||||
"/cases/lavacao-047",
|
||||
"/cases/sc-plus",
|
||||
"/cases/as-servicos",
|
||||
]);
|
||||
|
||||
// pôster do primeiro case numa moldura no topo, no lugar do fundo verde
|
||||
// pôster do case de destaque (Lavação 047) numa moldura no topo, no lugar do fundo verde, e não a SEV
|
||||
const hero = container.querySelector("section");
|
||||
const heroFrame = hero?.querySelector(".ds-bframe");
|
||||
expect(heroFrame).not.toBeNull();
|
||||
expect(heroFrame?.querySelector("img")).toHaveAttribute(
|
||||
"alt",
|
||||
"Captura de tela do site SEV Moda Íntima",
|
||||
"Captura de tela do site Lavação 047",
|
||||
);
|
||||
expect(hero?.querySelector("a[href='/cases/sev-modaintima']")).not.toBeNull();
|
||||
expect(hero?.querySelector("a[href='/cases/lavacao-047']")).not.toBeNull();
|
||||
expect(container.textContent).not.toMatch(/SEV Moda Íntima/);
|
||||
// a legenda da capa cita o case com a frase de relação e o botão "Ver case"
|
||||
const caption = hero?.querySelector("figcaption");
|
||||
expect(caption).toHaveTextContent("Lavação 047");
|
||||
expect(caption).toHaveTextContent(siteService.caseRelevance["lavacao-047"]);
|
||||
expect(
|
||||
within(caption as HTMLElement).getByRole("link", {
|
||||
name: "Ver case Lavação 047",
|
||||
}),
|
||||
).toHaveAttribute("href", "/cases/lavacao-047");
|
||||
// a mesma capa não aparece duas vezes: o case de destaque não ganha cartão, e os outros mantêm a capa deles
|
||||
expect(
|
||||
container.querySelectorAll(
|
||||
"img[alt='Captura de tela do site Lavação 047']",
|
||||
),
|
||||
).toHaveLength(1);
|
||||
expect(
|
||||
container.querySelectorAll(
|
||||
"img[alt='Captura de tela do site SC Plus Aquicultura']",
|
||||
),
|
||||
).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("shows no case, no frame and no 'similar projects' button on the diagnosis service, only the Apolo note", async () => {
|
||||
it("opens the two offer services with the offer name as the h1, and leaves the search title alone", async () => {
|
||||
for (const [slug, offer] of [
|
||||
["criacao-de-sites", serviceOffers[0]],
|
||||
["engenharia-de-software", serviceOffers[1]],
|
||||
] as const) {
|
||||
const { unmount } = await renderService(slug);
|
||||
expect(
|
||||
screen.getByRole("heading", { level: 1, name: offer.name }),
|
||||
).toBeVisible();
|
||||
const metadata = await generateMetadata({
|
||||
params: Promise.resolve({ slug }),
|
||||
});
|
||||
expect(metadata.title).toBe(getServicePage(slug)?.metaTitle);
|
||||
expect(metadata.title).not.toBe(offer.name);
|
||||
unmount();
|
||||
}
|
||||
});
|
||||
|
||||
it("covers the systems service with the SEV on the phone, in a phone frame, once", async () => {
|
||||
const { container } = await renderService("engenharia-de-software");
|
||||
|
||||
const hero = container.querySelector("section");
|
||||
expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
|
||||
expect(hero?.querySelector(".ds-phone")).not.toBeNull();
|
||||
expect(hero?.querySelector(".ds-bframe")).toBeNull();
|
||||
expect(
|
||||
hero
|
||||
?.querySelector("a[href='/cases/sev-modaintima']")
|
||||
?.querySelector(".ds-phone-screen"),
|
||||
).not.toBeNull();
|
||||
// a SEV não vira imagem de navegador nem ganha cartão: a legenda do celular a cita, com a frase de relação e "Ver case"
|
||||
expect(container.querySelector("img[alt*='SEV']")).toBeNull();
|
||||
const caption = hero?.querySelector("figcaption");
|
||||
expect(caption).toHaveTextContent("SEV Moda Íntima");
|
||||
expect(caption).toHaveTextContent(
|
||||
getServicePage("engenharia-de-software")?.caseRelevance["sev-modaintima"] ??
|
||||
"",
|
||||
);
|
||||
expect(
|
||||
within(caption as HTMLElement).getByRole("link", {
|
||||
name: "Ver case SEV Moda Íntima",
|
||||
}),
|
||||
).toHaveAttribute("href", "/cases/sev-modaintima");
|
||||
// só o cartão da Lavação 047 traz capa de navegador
|
||||
expect(
|
||||
Array.from(container.querySelectorAll(".ds-bframe img")).map((image) =>
|
||||
image.getAttribute("alt"),
|
||||
),
|
||||
).toEqual(["Captura de tela do site Lavação 047"]);
|
||||
const links = caseCardLinks(container).map((link) =>
|
||||
link.getAttribute("href"),
|
||||
);
|
||||
expect(links).toEqual(["/cases/lavacao-047"]);
|
||||
});
|
||||
|
||||
it("covers the Next.js service with SC Plus, not the SEV", async () => {
|
||||
const { container } = await renderService("consultoria-nextjs");
|
||||
|
||||
const heroFrame = container.querySelector("section .ds-bframe");
|
||||
expect(heroFrame?.querySelector("img")).toHaveAttribute(
|
||||
"alt",
|
||||
"Captura de tela do site SC Plus Aquicultura",
|
||||
);
|
||||
expect(container.textContent).not.toMatch(/SEV Moda Íntima/);
|
||||
});
|
||||
|
||||
it("shows no case, no frame and no 'similar projects' button on the diagnosis service, only the Apolo note and a flow diagram", async () => {
|
||||
const { container } = await renderService("arquitetura-de-software");
|
||||
|
||||
// nenhum case de cliente é um diagnóstico: só a experiência na Apolo, em texto
|
||||
expect(
|
||||
screen.getByRole("heading", { name: "Onde já apliquei isso" }),
|
||||
screen.getByRole("heading", { level: 2, name: "Como eu trabalho nisso" }),
|
||||
).toBeVisible();
|
||||
expect(
|
||||
screen.queryByRole("heading", { name: "Onde já apliquei isso" }),
|
||||
).toBeNull();
|
||||
expect(screen.getByText(/Apolo Energia/)).toBeVisible();
|
||||
expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
|
||||
expect(screen.queryByRole("link", { name: /^Ver case / })).toBeNull();
|
||||
expect(
|
||||
screen.queryByRole("link", { name: "Ver projetos parecidos" }),
|
||||
).toBeNull();
|
||||
expect(screen.queryByText(/SEV Moda Íntima/)).toBeNull();
|
||||
expect(container.querySelector(".ds-bframe")).toBeNull();
|
||||
// no lugar da metade vazia do topo: o esquema de fluxo, como imagem com texto alternativo
|
||||
const diagram = screen.getByRole("img", { name: /interface chama a API/ });
|
||||
expect(diagram.closest("section")).toBe(container.querySelector("section"));
|
||||
});
|
||||
|
||||
it("lists the Windows app as a 'Projeto próprio' on the desktop service, saying it is made in Python", async () => {
|
||||
it("lists the Windows app as a 'Projeto próprio' on the desktop service, as a personal Windows app project", async () => {
|
||||
const { container } = await renderService("tauri-rust");
|
||||
|
||||
expect(
|
||||
screen.getByRole("link", { name: "Ler case: MinGW GCC Installer" }),
|
||||
screen.getByRole("link", { name: "Ver case MinGW GCC Installer" }),
|
||||
).toHaveAttribute("href", "/cases/gcc-installer");
|
||||
expect(
|
||||
screen.getByText("MinGW GCC Installer · Projeto próprio"),
|
||||
).toBeVisible();
|
||||
expect(screen.getByText(/em Python e não em Tauri/)).toBeVisible();
|
||||
expect(
|
||||
screen.getByText(/projeto próprio de aplicativo para Windows/),
|
||||
).toBeVisible();
|
||||
expect(container.textContent).not.toMatch(/em Python e não em Tauri/);
|
||||
expect(
|
||||
screen.getByRole("link", { name: "Ver projetos parecidos" }),
|
||||
).toHaveAttribute("href", "#casos-relacionados");
|
||||
// sem captura gravada, não há moldura nem imagem
|
||||
// sem captura gravada, não há moldura nem imagem: o topo mostra o esquema do aplicativo no computador
|
||||
expect(container.querySelector(".ds-bframe")).toBeNull();
|
||||
expect(
|
||||
screen.getByRole("img", {
|
||||
name: /aplicativo no computador troca informações/,
|
||||
}),
|
||||
).toBeVisible();
|
||||
// só projeto próprio, sem cliente: o título não fala de "onde já apliquei"
|
||||
expect(
|
||||
screen.getByRole("heading", { level: 2, name: "Como eu trabalho nisso" }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
it("keeps the hero in one lower column when there is no media, and in two columns when there is", async () => {
|
||||
for (const slug of [
|
||||
"tauri-rust",
|
||||
"integracao-hardware-software-iot",
|
||||
"arquitetura-de-software",
|
||||
]) {
|
||||
it("keeps the hero in two columns with a cover or a diagram, and in one lower column only when it has neither", async () => {
|
||||
const diagrams = {
|
||||
"tauri-rust": /aplicativo no computador/,
|
||||
"integracao-hardware-software-iot": /dispositivo envia as leituras/,
|
||||
"arquitetura-de-software": /interface chama a API/,
|
||||
} as const;
|
||||
for (const [slug, label] of Object.entries(diagrams)) {
|
||||
const { container, unmount } = await renderService(slug);
|
||||
const hero = container.querySelector("section");
|
||||
expect(hero?.className).not.toContain("md:!pb-sp-12");
|
||||
expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
|
||||
expect(
|
||||
within(hero as HTMLElement).getByRole("img", { name: label }),
|
||||
).toBeVisible();
|
||||
unmount();
|
||||
}
|
||||
|
||||
// sem capa e sem esquema, o topo volta a ser uma coluna só e mais baixa
|
||||
const bare = getServicePage("arquitetura-de-software");
|
||||
if (!bare?.diagram) throw new Error("Missing diagram");
|
||||
const originalDiagram = bare.diagram;
|
||||
delete bare.diagram;
|
||||
try {
|
||||
const { container, unmount } = await renderService(bare.slug);
|
||||
const hero = container.querySelector("section");
|
||||
expect(hero?.className).toContain("md:!pb-sp-12");
|
||||
expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
|
||||
expect(screen.queryByRole("img")).toBeNull();
|
||||
unmount();
|
||||
} finally {
|
||||
bare.diagram = originalDiagram;
|
||||
}
|
||||
|
||||
const withMedia = await renderService("criacao-de-sites");
|
||||
@@ -411,7 +628,7 @@ it("puts the location in one line, 'Garuva e Joinville (SC)', and spaces the lis
|
||||
it("labels the Twins Lab prototype as a laboratory project on the IoT service", async () => {
|
||||
const { container } = await renderService("integracao-hardware-software-iot");
|
||||
|
||||
const caseLinks = screen.getAllByRole("link", { name: /^Ler case:/ });
|
||||
const caseLinks = caseCardLinks(container);
|
||||
expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual([
|
||||
"/cases/twins-lab",
|
||||
]);
|
||||
@@ -433,19 +650,33 @@ it("labels only the laboratory projects as 'Projeto próprio'", async () => {
|
||||
});
|
||||
|
||||
it("says in one sentence, per case, why it matters to the service", async () => {
|
||||
for (const { slug, relatedCaseIds, caseRelevance } of servicePages) {
|
||||
for (const {
|
||||
slug,
|
||||
relatedCaseIds,
|
||||
caseRelevance,
|
||||
heroCase,
|
||||
} of servicePages) {
|
||||
if (relatedCaseIds.length === 0) continue;
|
||||
const { unmount } = await renderService(slug);
|
||||
const { container, unmount } = await renderService(slug);
|
||||
|
||||
for (const id of relatedCaseIds) {
|
||||
const sentence = caseRelevance[id];
|
||||
expect(sentence).toBeTruthy();
|
||||
const card = screen.getByText(sentence).closest("article");
|
||||
expect(card).toContainElement(
|
||||
screen.getByRole("link", {
|
||||
name: `Ler case: ${caseStudies.find((c) => c.id === id)?.title}`,
|
||||
}),
|
||||
);
|
||||
const link = screen.getByRole("link", {
|
||||
name: `Ver case ${caseStudies.find((c) => c.id === id)?.title}`,
|
||||
});
|
||||
if (id === heroCase?.id) {
|
||||
// o case da capa: a frase está na legenda dela, junto do botão, e não num cartão
|
||||
const caption = link.closest("figcaption");
|
||||
expect(caption).not.toBeNull();
|
||||
expect(caption).toHaveTextContent(sentence);
|
||||
expect(
|
||||
container.querySelectorAll(`article a[href="/cases/${id}"]`),
|
||||
).toHaveLength(0);
|
||||
} else {
|
||||
const card = screen.getByText(sentence).closest("article");
|
||||
expect(card).toContainElement(link);
|
||||
}
|
||||
}
|
||||
unmount();
|
||||
}
|
||||
@@ -465,9 +696,9 @@ it("cites the Apolo Energia experience in text on the IoT and architecture pages
|
||||
expect(paragraph.textContent).toMatch(/Desde 2022/);
|
||||
expect(paragraph.closest("a")).toBeNull();
|
||||
expect(paragraph.querySelector("a")).toBeNull();
|
||||
// dentro do bloco "Onde já apliquei isso", antes dos cards
|
||||
// dentro do bloco de prova ("Como eu trabalho nisso": sem case de cliente), antes dos cards
|
||||
const block = screen.getByRole("heading", {
|
||||
name: "Onde já apliquei isso",
|
||||
name: "Como eu trabalho nisso",
|
||||
});
|
||||
expect(isBefore(block, paragraph)).toBe(true);
|
||||
expect(
|
||||
@@ -497,8 +728,8 @@ it("does not mention Apolo Energia on the other service pages", async () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("puts the FAQ before the next step and ends every service page with a contact button", async () => {
|
||||
for (const { slug, faq, ctaLabel } of servicePages) {
|
||||
it("puts the FAQ before the next step and ends every service page with the same contact button", async () => {
|
||||
for (const { slug, faq } of servicePages) {
|
||||
const { container, unmount } = await renderService(slug);
|
||||
|
||||
const nextStep = screen.getByRole("heading", {
|
||||
@@ -517,16 +748,22 @@ it("puts the FAQ before the next step and ends every service page with a contact
|
||||
const last = container.querySelector("main")?.lastElementChild;
|
||||
expect(last).toContainElement(nextStep);
|
||||
const cta = within(last as HTMLElement).getByRole("link", {
|
||||
name: `${ctaLabel} no WhatsApp`,
|
||||
name: buttonLabels.contact,
|
||||
});
|
||||
expect(new URL(cta.getAttribute("href") ?? "").origin).toBe(
|
||||
"https://wa.me",
|
||||
);
|
||||
// as perguntas são as linhas do acordeão (o mesmo desenho da home), todas antes do botão
|
||||
for (const question of faq ?? []) {
|
||||
expect(
|
||||
isBefore(screen.getByRole("heading", { name: question.question }), cta),
|
||||
).toBe(true);
|
||||
expect(isBefore(screen.getByText(question.question), cta)).toBe(true);
|
||||
}
|
||||
// um rótulo só para o contato: sem "no WhatsApp" colado nem texto por serviço
|
||||
expect(
|
||||
screen
|
||||
.getAllByRole("link", { name: buttonLabels.contact })
|
||||
.every((link) => link.textContent === buttonLabels.contact),
|
||||
).toBe(true);
|
||||
expect(container.textContent).not.toMatch(/diretamente/i);
|
||||
unmount();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
primaryButton,
|
||||
secondaryButtonDark,
|
||||
} from "@/app/components/button-styles";
|
||||
import { Faq } from "@/app/components/Faq";
|
||||
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
|
||||
import WhatsAppLink from "@/app/components/WhatsAppLink";
|
||||
import { safeJsonLd } from "@/lib/jsonld";
|
||||
@@ -20,12 +21,14 @@ import {
|
||||
buildServiceJsonLd,
|
||||
} from "@/lib/seo";
|
||||
import {
|
||||
buttonLabels,
|
||||
caseStudies,
|
||||
getRelatedCases,
|
||||
getServicePage,
|
||||
servicePages,
|
||||
siteUrl,
|
||||
} from "@/lib/site-content";
|
||||
import { ServiceFaq } from "../_components/ServiceFaq";
|
||||
import { ServiceDiagram } from "../_components/ServiceDiagram";
|
||||
import { ServiceHeroCover } from "../_components/ServiceHeroCover";
|
||||
import { ServiceOffer } from "../_components/ServiceOffer";
|
||||
import { ServiceRelatedCases } from "../_components/ServiceRelatedCases";
|
||||
@@ -75,9 +78,16 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
}
|
||||
|
||||
const relatedCases = getRelatedCases(service.relatedCaseIds);
|
||||
const heroCase = relatedCases.find((caseStudy) =>
|
||||
getCaseMedia(caseStudy.id, "desktop"),
|
||||
// capa do topo: o case escolhido para o serviço, se tiver captura gravada do aparelho pedido; senão, o esquema de fluxo
|
||||
const heroDevice = service.heroCase?.device ?? "desktop";
|
||||
const heroCase = caseStudies.find(
|
||||
({ id }) =>
|
||||
id === service.heroCase?.id && Boolean(getCaseMedia(id, heroDevice)),
|
||||
);
|
||||
const diagram = heroCase ? undefined : service.diagram;
|
||||
const hasHeroSide = Boolean(heroCase || diagram);
|
||||
// o case da capa é citado pela legenda dela, e não ganha cartão em "Onde já apliquei isso"
|
||||
const hasCaseCards = relatedCases.some(({ id }) => id !== heroCase?.id);
|
||||
const pageUrl = `${siteUrl}/servicos/${service.slug}`;
|
||||
|
||||
const jsonLd = {
|
||||
@@ -98,11 +108,11 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
|
||||
<section
|
||||
className={`ds-section ds-section-dark ${pageTop} ${
|
||||
heroCase ? "" : compactHero
|
||||
hasHeroSide ? "" : compactHero
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`ds-section-shell ${heroCase ? heroWithMediaGrid : ""}`}
|
||||
className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
|
||||
>
|
||||
<div className="max-w-[860px]">
|
||||
<Breadcrumb
|
||||
@@ -113,7 +123,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
]}
|
||||
/>
|
||||
<p className="ds-eyebrow">{service.eyebrow}</p>
|
||||
<h1 className="ds-section-title max-w-[14ch] text-balance text-white">
|
||||
<h1 className="ds-section-title max-w-[22ch] text-balance text-white">
|
||||
{service.headline}
|
||||
</h1>
|
||||
<p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
|
||||
@@ -125,21 +135,30 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
placement="service_detail_hero"
|
||||
className={primaryButton}
|
||||
>
|
||||
{service.ctaLabel} no WhatsApp
|
||||
{buttonLabels.contact}
|
||||
</WhatsAppLink>
|
||||
{relatedCases.length > 0 ? (
|
||||
{hasCaseCards ? (
|
||||
<a href="#casos-relacionados" className={secondaryButtonDark}>
|
||||
Ver projetos parecidos
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="mt-sp-4 text-[15px] leading-6 text-white/70">
|
||||
Fale diretamente com Evandro. Abre uma conversa, sem precisar
|
||||
preencher um formulário. Garuva e Joinville (SC) · atendimento
|
||||
remoto em todo o Brasil.
|
||||
O botão abre uma conversa no WhatsApp, sem formulário. Garuva e
|
||||
Joinville (SC) · atendimento remoto em todo o Brasil.
|
||||
</p>
|
||||
</div>
|
||||
<ServiceHeroCover caseStudy={heroCase} />
|
||||
{diagram ? (
|
||||
<ServiceDiagram kind={diagram} />
|
||||
) : (
|
||||
<ServiceHeroCover
|
||||
caseStudy={heroCase}
|
||||
device={heroDevice}
|
||||
relevance={
|
||||
heroCase ? service.caseRelevance[heroCase.id] : undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -147,6 +166,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
cases={relatedCases}
|
||||
relevance={service.caseRelevance}
|
||||
experienceNote={service.experienceNote}
|
||||
heroCaseId={heroCase?.id}
|
||||
/>
|
||||
|
||||
<section className="ds-section">
|
||||
@@ -232,7 +252,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
|
||||
<ServiceOffer service={service} />
|
||||
|
||||
<ServiceFaq faq={service.faq} />
|
||||
<Faq items={service.faq} />
|
||||
|
||||
<section className="ds-section ds-section-dark">
|
||||
<div className="ds-section-shell">
|
||||
@@ -252,13 +272,13 @@ export default async function ServicePage({ params }: ServicePageProps) {
|
||||
placement="service_detail_footer"
|
||||
className={primaryButton}
|
||||
>
|
||||
{service.ctaLabel} no WhatsApp
|
||||
{buttonLabels.contact}
|
||||
</WhatsAppLink>
|
||||
<HoverPrefetchLink
|
||||
href="/servicos"
|
||||
className={secondaryButtonDark}
|
||||
>
|
||||
Ver todos os serviços
|
||||
{buttonLabels.allServices}
|
||||
</HoverPrefetchLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user