feat(home): prova no topo, contato sem atrito e conversão medida
Home mais curta (hero, vitrine de clientes, sobre, serviços, IA resumida, depoimentos e contato), faixa de clientes e telas reais no hero, sem números do GitHub. Barra de cookies fina, WhatsApp fixo no celular, formulário com e-mail opcional e alternativa por e-mail, página /ia, eventos de e-mail, redes e currículo e conversão do Ads opcional por variável. Rodapé em 3 colunas. Remove componentes órfãos (LighthouseMetrics, Skills, Experience, contagem do GitHub).
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
6e1022b58c
commit
8d07b8c6bb
60 files changed
+4392
-2124
No files matched your search
@@ -0,0 +1,202 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import type { PortfolioProjectView } from "@/lib/portfolio-data";
|
||||
import CinematicHome from "./CinematicHome";
|
||||
import { useCinematicScroll } from "./useCinematicScroll";
|
||||
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
|
||||
|
||||
/**
|
||||
* Testes de caminhos-base de CinematicHome: o endereço do trabalho em destaque (projeto presente com site,
|
||||
* presente sem site, ausente), a repasse das props opcionais, a ordem das cenas e a ligação dos hooks.
|
||||
* As cenas e os hooks são trocados por dublês que registram o que recebem.
|
||||
*/
|
||||
|
||||
const mockHeroProps = jest.fn();
|
||||
const mockProjectsProps = jest.fn();
|
||||
const mockModalitiesProps = jest.fn();
|
||||
const mockTestimonialsProps = jest.fn();
|
||||
const mockFooterProps = jest.fn();
|
||||
|
||||
jest.mock("../Hero", () => ({
|
||||
__esModule: true,
|
||||
default: (props: unknown) => {
|
||||
mockHeroProps(props);
|
||||
return <section data-testid="scene-hero" />;
|
||||
},
|
||||
}));
|
||||
jest.mock("../Projects", () => ({
|
||||
__esModule: true,
|
||||
default: (props: unknown) => {
|
||||
mockProjectsProps(props);
|
||||
return <section data-testid="scene-projects" />;
|
||||
},
|
||||
}));
|
||||
jest.mock("../About", () => ({
|
||||
__esModule: true,
|
||||
default: () => <section data-testid="scene-about" />,
|
||||
}));
|
||||
jest.mock("../WorkModalities", () => ({
|
||||
WorkModalities: (props: unknown) => {
|
||||
mockModalitiesProps(props);
|
||||
return <section data-testid="scene-modalities" />;
|
||||
},
|
||||
}));
|
||||
jest.mock("../EngineeringWithAI", () => ({
|
||||
__esModule: true,
|
||||
default: () => <section data-testid="scene-ai" />,
|
||||
}));
|
||||
jest.mock("../Testimonials", () => ({
|
||||
__esModule: true,
|
||||
default: (props: unknown) => {
|
||||
mockTestimonialsProps(props);
|
||||
return <section data-testid="scene-testimonials" />;
|
||||
},
|
||||
}));
|
||||
jest.mock("../Contact", () => ({
|
||||
__esModule: true,
|
||||
default: () => <section data-testid="scene-contact" />,
|
||||
}));
|
||||
jest.mock("../Footer", () => ({
|
||||
__esModule: true,
|
||||
default: (props: unknown) => {
|
||||
mockFooterProps(props);
|
||||
return <footer data-testid="footer" />;
|
||||
},
|
||||
}));
|
||||
jest.mock("../FloatingWhatsApp", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="floating-whatsapp" />,
|
||||
}));
|
||||
jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
|
||||
jest.mock("./useHomeFragmentNavigation", () => ({
|
||||
useHomeFragmentNavigation: jest.fn(),
|
||||
}));
|
||||
|
||||
const onLayoutReady = jest.fn();
|
||||
|
||||
function project(id: string, demoUrl: string | null): PortfolioProjectView {
|
||||
return { id, demoUrl } as unknown as PortfolioProjectView;
|
||||
}
|
||||
|
||||
const lastHeroProps = () =>
|
||||
mockHeroProps.mock.calls[mockHeroProps.mock.calls.length - 1][0];
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
|
||||
});
|
||||
|
||||
describe("CinematicHome: endereço do trabalho em destaque", () => {
|
||||
it("path: the featured project is in the list with a site -> its domain goes to the hero", () => {
|
||||
render(
|
||||
<CinematicHome
|
||||
projects={[
|
||||
project("sev-modaintima", "https://sevmodaintima.com.br"),
|
||||
project(
|
||||
"lavacao-047",
|
||||
"https://www.landing-lavacao.vercel.app/pagina/",
|
||||
),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(lastHeroProps().workUrl).toEqual({
|
||||
text: "landing-lavacao.vercel.app/pagina",
|
||||
secure: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("path: the featured project is in the list but has no site -> no address", () => {
|
||||
render(<CinematicHome projects={[project("lavacao-047", null)]} />);
|
||||
|
||||
expect(lastHeroProps().workUrl).toBeNull();
|
||||
});
|
||||
|
||||
it("path: the featured project is not in the list -> no address", () => {
|
||||
render(
|
||||
<CinematicHome
|
||||
projects={[project("sev-modaintima", "https://sevmodaintima.com.br")]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(lastHeroProps().workUrl).toBeNull();
|
||||
});
|
||||
|
||||
it("path: empty project list -> no address and the page still renders", () => {
|
||||
render(<CinematicHome projects={[]} />);
|
||||
|
||||
expect(lastHeroProps().workUrl).toBeNull();
|
||||
expect(screen.getByTestId("scene-contact")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("CinematicHome: props e estrutura", () => {
|
||||
it("path: every optional prop given -> each scene receives its own data", () => {
|
||||
const projects = [project("lavacao-047", "https://a.example.com")];
|
||||
const clients = [{ id: "lavacao-047", name: "Lavação 047" }];
|
||||
const testimonials = [
|
||||
{ quote: "Ótimo.", name: "Ana", role: "Sócia", company: "Empresa" },
|
||||
];
|
||||
const serviceLinks = [
|
||||
{ href: "/servicos/x", label: "X", description: "Serviço X" },
|
||||
];
|
||||
|
||||
render(
|
||||
<CinematicHome
|
||||
projects={projects}
|
||||
clients={clients}
|
||||
testimonials={testimonials}
|
||||
serviceLinks={serviceLinks}
|
||||
heroStats={{ years: 5 }}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(lastHeroProps()).toMatchObject({ stats: { years: 5 }, clients });
|
||||
expect(mockProjectsProps).toHaveBeenCalledWith({ projects });
|
||||
expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: testimonials });
|
||||
expect(mockModalitiesProps).toHaveBeenCalledWith({ serviceLinks });
|
||||
expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks });
|
||||
});
|
||||
|
||||
it("path: optional props omitted -> the scenes receive undefined and decide their own defaults", () => {
|
||||
render(<CinematicHome projects={[]} />);
|
||||
|
||||
expect(lastHeroProps()).toMatchObject({
|
||||
stats: undefined,
|
||||
clients: undefined,
|
||||
});
|
||||
expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: undefined });
|
||||
expect(mockModalitiesProps).toHaveBeenCalledWith({
|
||||
serviceLinks: undefined,
|
||||
});
|
||||
expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks: undefined });
|
||||
});
|
||||
|
||||
it("path: scenes sit in order inside <main>; the footer and the floating button sit outside it", () => {
|
||||
render(<CinematicHome projects={[]} />);
|
||||
|
||||
const main = screen.getByRole("main");
|
||||
expect(
|
||||
Array.from(main.children).map((child) =>
|
||||
child.getAttribute("data-testid"),
|
||||
),
|
||||
).toEqual([
|
||||
"scene-hero",
|
||||
"scene-projects",
|
||||
"scene-about",
|
||||
"scene-modalities",
|
||||
"scene-ai",
|
||||
"scene-testimonials",
|
||||
"scene-contact",
|
||||
]);
|
||||
expect(main).not.toContainElement(screen.getByTestId("footer"));
|
||||
expect(main).not.toContainElement(screen.getByTestId("floating-whatsapp"));
|
||||
});
|
||||
|
||||
it("path: mount -> the scroll hook gets the <main> ref and the layout-ready callback runs once", () => {
|
||||
render(<CinematicHome projects={[]} />);
|
||||
|
||||
const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
|
||||
expect(ref.current).toBe(screen.getByRole("main"));
|
||||
expect(onLayoutReady).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user