Evandro Fonseca Junior
204ebd5fa5
Foco cai no destino ao chegar de outra página; âncoras ignoram ?tipo=; movimento reduzido salta em todos os cliques; cronômetro da janela ampliada; degradê no topo de Projetos e legendas do mergulho com intervalos testados; vitrine acima da barra de cookies e com 2 paradas por projeto; reel-list.css no global; 3D montado em tarefas curtas, limitado a ~30 qps e estático com WebGL por software; pôsteres da vitrine de 330 para 158 KB; SC Plus regravado; scripts sem funções acima de complexidade 10.
96 lines
3.4 KiB
TypeScript
96 lines
3.4 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>,
|
|
);
|
|
|
|
expect(screen.getByText("Sobre")).toHaveClass("ds-eyebrow");
|
|
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);
|
|
});
|
|
});
|