Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
87 lines
3.2 KiB
TypeScript
87 lines
3.2 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("aside")).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>,
|
|
);
|
|
|
|
expect(screen.getByText("Sobre")).toHaveClass("ds-eyebrow");
|
|
expect(container.querySelector(".ds-section-description")).toBeNull();
|
|
expect(container.querySelector("aside")).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("aside")).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(screen.getByText("lateral").closest("aside")).toBeInTheDocument();
|
|
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);
|
|
});
|
|
});
|