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.
98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { Section } from "./Section";
|
|
|
|
/**
|
|
* Testes de caminhos-base de Section (complemento de Reveal.test.tsx): cada parte opcional do cabeçalho
|
|
* (eyebrow, descrição, aside) aparece só quando é dada, a casca clara é a padrão e o id é opcional.
|
|
*/
|
|
|
|
describe("Section", () => {
|
|
it("path: only the title and the body -> no eyebrow, no description, no aside", () => {
|
|
const { container } = render(
|
|
<Section title="Quem faz">
|
|
<p>Corpo</p>
|
|
</Section>,
|
|
);
|
|
|
|
expect(
|
|
screen.getByRole("heading", { level: 2, name: "Quem faz" }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText("Corpo")).toBeInTheDocument();
|
|
expect(container.querySelector(".ds-eyebrow")).toBeNull();
|
|
expect(container.querySelector(".ds-section-description")).toBeNull();
|
|
expect(
|
|
container.querySelector(".ds-section-header > .ds-reveal"),
|
|
).toBeNull();
|
|
// a linha que se desenha embaixo do título é sempre desenhada
|
|
expect(container.querySelector(".ds-draw-line")).toBeInTheDocument();
|
|
});
|
|
|
|
it("path: light skin by default -> no dark class, and no id attribute without one", () => {
|
|
const { container } = render(<Section title="Titulo">x</Section>);
|
|
|
|
const section = container.querySelector("section");
|
|
expect(section).toHaveClass("ds-section");
|
|
expect(section).not.toHaveClass("ds-section-dark");
|
|
expect(section).not.toHaveAttribute("id");
|
|
});
|
|
|
|
it("path: only the eyebrow -> the eyebrow shows, the description and the aside stay out", () => {
|
|
const { container } = render(
|
|
<Section title="Titulo" eyebrow="Sobre">
|
|
x
|
|
</Section>,
|
|
);
|
|
|
|
const eyebrow = screen.getByText("Sobre");
|
|
expect(eyebrow).toHaveClass("ds-eyebrow", "ds-type");
|
|
expect(eyebrow.style.getPropertyValue("--n")).toBe("5");
|
|
expect(container.querySelector(".ds-section-description")).toBeNull();
|
|
expect(
|
|
container.querySelector(".ds-section-header > .ds-reveal"),
|
|
).toBeNull();
|
|
});
|
|
|
|
it("path: only the description -> the description shows, the eyebrow and the aside stay out", () => {
|
|
const { container } = render(
|
|
<Section title="Titulo" description="Texto de apoio">
|
|
x
|
|
</Section>,
|
|
);
|
|
|
|
expect(screen.getByText("Texto de apoio")).toHaveClass(
|
|
"ds-section-description",
|
|
);
|
|
expect(container.querySelector(".ds-eyebrow")).toBeNull();
|
|
expect(
|
|
container.querySelector(".ds-section-header > .ds-reveal"),
|
|
).toBeNull();
|
|
});
|
|
|
|
it("path: only the aside -> the aside shows next to the title, the eyebrow and the description stay out", () => {
|
|
const { container } = render(
|
|
<Section title="Titulo" aside={<span>lateral</span>}>
|
|
x
|
|
</Section>,
|
|
);
|
|
|
|
expect(
|
|
container.querySelector(".ds-section-header > .ds-reveal"),
|
|
).toHaveTextContent("lateral");
|
|
expect(container.querySelector("aside")).toBeNull();
|
|
expect(container.querySelector(".ds-eyebrow")).toBeNull();
|
|
expect(container.querySelector(".ds-section-description")).toBeNull();
|
|
});
|
|
|
|
it("path: children animation disabled -> the body is a plain block, not inside a reveal", () => {
|
|
const { container } = render(
|
|
<Section title="Titulo" disableChildrenAnimation>
|
|
<p>Corpo</p>
|
|
</Section>,
|
|
);
|
|
|
|
const body = screen.getByText("Corpo").parentElement;
|
|
expect(body?.parentElement).toHaveClass("ds-section-shell");
|
|
expect(container.querySelectorAll(".ds-reveal")).toHaveLength(0);
|
|
});
|
|
});
|