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.
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { getShowcaseAssets } from "@/lib/project-showcase";
|
|
import { CaseMedia } from "./CaseMedia";
|
|
import { getCaseMedia } from "./case-media";
|
|
|
|
/**
|
|
* Testes de caminhos-base de CaseMedia: com computador e celular, só um dos dois, ou nenhum.
|
|
* A existência dos arquivos em disco é simulada em getCaseMedia, para o teste não depender de public/.
|
|
*/
|
|
|
|
jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
|
|
|
|
const mockedGetCaseMedia = jest.mocked(getCaseMedia);
|
|
|
|
function withCaptures(devices: ReadonlyArray<"desktop" | "mobile">) {
|
|
mockedGetCaseMedia.mockImplementation((id, device) =>
|
|
devices.includes(device) ? getShowcaseAssets(id, device) : undefined,
|
|
);
|
|
}
|
|
|
|
const props = {
|
|
id: "sev-modaintima",
|
|
title: "SEV Moda Íntima",
|
|
demoUrl: "https://sevmodaintima.com.br",
|
|
};
|
|
const desktopLabel = `Vídeo do site ${props.title} no computador`;
|
|
const mobileLabel = `Vídeo do site ${props.title} no celular`;
|
|
|
|
afterEach(() => {
|
|
mockedGetCaseMedia.mockReset();
|
|
});
|
|
|
|
describe("CaseMedia", () => {
|
|
it("path: desktop and mobile captures -> both frames, the browser bar shows the real domain", () => {
|
|
withCaptures(["desktop", "mobile"]);
|
|
const { container } = render(<CaseMedia {...props} />);
|
|
|
|
expect(container.querySelector(".ds-bframe")).toContainElement(
|
|
screen.getByLabelText(desktopLabel),
|
|
);
|
|
expect(container.querySelector(".ds-phone")).toContainElement(
|
|
screen.getByLabelText(mobileLabel),
|
|
);
|
|
expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
|
|
"sevmodaintima.com.br",
|
|
);
|
|
expect(
|
|
screen.getByText(`O site ${props.title} no computador.`),
|
|
).toBeVisible();
|
|
expect(screen.getByText("No celular.")).toBeVisible();
|
|
expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
|
|
expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "mobile");
|
|
});
|
|
|
|
it("path: no capture at all -> renders nothing", () => {
|
|
withCaptures([]);
|
|
const { container } = render(<CaseMedia {...props} />);
|
|
|
|
expect(container).toBeEmptyDOMElement();
|
|
});
|
|
|
|
it("path: only the mobile capture -> phone frame without the browser frame", () => {
|
|
withCaptures(["mobile"]);
|
|
const { container } = render(<CaseMedia {...props} />);
|
|
|
|
expect(screen.getByLabelText(mobileLabel)).toBeInTheDocument();
|
|
expect(screen.queryByLabelText(desktopLabel)).toBeNull();
|
|
expect(container.querySelector(".ds-bframe")).toBeNull();
|
|
expect(container.querySelector(".ds-phone")).not.toBeNull();
|
|
expect(screen.queryByText(/no computador\./)).toBeNull();
|
|
});
|
|
|
|
it("path: only the desktop capture -> browser frame without the phone frame", () => {
|
|
withCaptures(["desktop"]);
|
|
const { container } = render(<CaseMedia {...props} />);
|
|
|
|
expect(screen.getByLabelText(desktopLabel)).toBeInTheDocument();
|
|
expect(screen.queryByLabelText(mobileLabel)).toBeNull();
|
|
expect(container.querySelector(".ds-phone")).toBeNull();
|
|
expect(container.querySelector(".ds-bframe")).not.toBeNull();
|
|
expect(screen.queryByText("No celular.")).toBeNull();
|
|
});
|
|
|
|
it("path: no demo address -> the browser bar falls back to the project title", () => {
|
|
withCaptures(["desktop"]);
|
|
const { container } = render(
|
|
<CaseMedia id={props.id} title={props.title} demoUrl={null} />,
|
|
);
|
|
|
|
expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
|
|
props.title,
|
|
);
|
|
});
|
|
});
|