@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/DataTableArvoreEVariantes.test.tsx

@@ -0,0 +1,240 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { faBoxOpen } from "@fortawesome/free-solid-svg-icons";
+import DataTable from "../components/DataTable/DataTable";
+
+const COLUNAS = [
+  { key: "nome", label: "Nome" },
+  { key: "sigla", label: "Sigla" },
+];
+const DADOS = [
+  { id: "a", nome: "Ana", sigla: "SADM" },
+  { id: "b", nome: "Bruno", sigla: "SOBR" },
+  { id: "c", nome: "Carla", sigla: "SEFIN" },
+];
+
+describe("DataTable: cabeçalho, zebra e destaque", () => {
+  it("headerVariant dark e headerUppercase ligam as classes; sem as props, nada muda", () => {
+    const { container, rerender } = render(<DataTable columns={COLUNAS} data={DADOS} />);
+    const raiz = () => container.querySelector(".umds-datatable") as HTMLElement;
+    expect(raiz().className).not.toMatch(/header-dark|header-uppercase|striped|header-hidden/);
+    rerender(<DataTable columns={COLUNAS} data={DADOS} headerVariant="dark" headerUppercase striped hideHeader />);
+    expect(raiz()).toHaveClass("umds-datatable--header-dark");
+    expect(raiz()).toHaveClass("umds-datatable--header-uppercase");
+    expect(raiz()).toHaveClass("umds-datatable--striped");
+    expect(raiz()).toHaveClass("umds-datatable--header-hidden");
+  });
+
+  it("hideHeader não remove o cabeçalho: as colunas continuam nomeadas", () => {
+    render(<DataTable columns={COLUNAS} data={DADOS} hideHeader />);
+    expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+  });
+
+  it("striped marca as linhas ímpares", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} striped />);
+    const linhas = [...container.querySelectorAll("tbody tr")];
+    expect(linhas.map((l) => l.classList.contains("umds-datatable__row--striped"))).toEqual([false, true, false]);
+  });
+
+  it("selectedRowKeys destaca a linha sem checkbox e marca aria-selected", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} rowKey="id" selectedRowKeys={["b"]} />);
+    const linhas = [...container.querySelectorAll("tbody tr")];
+    expect(linhas[1]).toHaveClass("umds-datatable__row--selected");
+    expect(linhas[1]).toHaveClass("umds-datatable__row--highlighted");
+    expect(linhas[1]).toHaveAttribute("aria-selected", "true");
+    expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
+    expect(linhas[0]).not.toHaveAttribute("aria-selected");
+    expect(screen.queryByRole("checkbox")).toBeNull();
+  });
+
+  it("isRowSelected destaca por função", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={DADOS} isRowSelected={(row) => row.sigla === "SEFIN"} />
+    );
+    const linhas = [...container.querySelectorAll("tbody tr")];
+    expect(linhas[2]).toHaveClass("umds-datatable__row--selected");
+    expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
+  });
+
+  it("emptyIcon e emptyDescription entram no estado vazio", () => {
+    const { container } = render(
+      <DataTable
+        columns={COLUNAS}
+        data={[]}
+        emptyMessage="Nada por aqui"
+        emptyDescription="Ajuste o filtro de setor."
+        emptyIcon={faBoxOpen}
+      />
+    );
+    expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+    expect(screen.getByText("Ajuste o filtro de setor.")).toBeInTheDocument();
+    expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "box-open");
+  });
+
+  it("o ícone padrão do estado vazio continua o inbox", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={[]} />);
+    expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "inbox");
+    expect(container.querySelector(".umds-datatable__empty-desc")).toBeNull();
+  });
+
+  it("compact na tabela de documento soma as duas classes", () => {
+    const { container } = render(<DataTable variant="document" density="compact" columns={COLUNAS} data={DADOS} />);
+    const raiz = container.querySelector(".umds-datatable") as HTMLElement;
+    expect(raiz).toHaveClass("umds-datatable--document");
+    expect(raiz).toHaveClass("umds-datatable--compact");
+  });
+});
+
+const ARVORE = [
+  {
+    id: "gab",
+    nome: "Gabinete",
+    sigla: "GAB",
+    children: [
+      { id: "sadm", nome: "Administração", sigla: "SADM", children: [{ id: "rh", nome: "Recursos Humanos", sigla: "RH" }] },
+      { id: "sobr", nome: "Obras", sigla: "SOBR" },
+    ],
+  },
+  { id: "sefin", nome: "Finanças", sigla: "SEFIN" },
+];
+
+const linhas = (c: HTMLElement) => [...c.querySelectorAll("tbody tr")] as HTMLElement[];
+const nomes = (c: HTMLElement) => linhas(c).map((l) => l.querySelectorAll("td")[0].textContent);
+
+describe("DataTable treeData", () => {
+  it("vira treegrid; fechada, mostra só as raízes, com aria-level, posinset, setsize e expanded", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" />);
+    expect(screen.getByRole("treegrid")).toBeInTheDocument();
+    expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+    const [gab, fin] = linhas(container);
+    expect(gab).toHaveAttribute("aria-level", "1");
+    expect(gab).toHaveAttribute("aria-posinset", "1");
+    expect(gab).toHaveAttribute("aria-setsize", "2");
+    expect(gab).toHaveAttribute("aria-expanded", "false");
+    expect(fin).not.toHaveAttribute("aria-expanded");
+  });
+
+  it("o botão expande e recolhe, com nome acessível e onExpand", () => {
+    const aoExpandir = vi.fn();
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" onExpand={aoExpandir} />);
+    fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+    expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+    expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
+    const filha = linhas(container)[1];
+    expect(filha).toHaveAttribute("aria-level", "2");
+    expect(filha).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[0]);
+    expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+    expect(aoExpandir).toHaveBeenLastCalledWith([], ARVORE[0], false);
+  });
+
+  it("expandLabel e collapseLabel traduzem os botões", () => {
+    render(
+      <DataTable
+        columns={COLUNAS}
+        data={ARVORE}
+        treeData
+        rowKey="id"
+        defaultExpandedKeys={["gab"]}
+        expandLabel="Expand"
+        collapseLabel="Collapse"
+      />
+    );
+    expect(screen.getByRole("button", { name: "Collapse" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+  });
+
+  it("defaultExpandAll abre tudo, e o primeiro recolher parte da árvore aberta", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" defaultExpandAll />);
+    expect(nomes(container)).toEqual(["Gabinete", "Administração", "Recursos Humanos", "Obras", "Finanças"]);
+    expect(linhas(container)[2]).toHaveAttribute("aria-level", "3");
+    fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[1]);
+    expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+  });
+
+  it("expandedKeys controla: o clique avisa, mas só muda quando o pai muda a prop", () => {
+    const aoExpandir = vi.fn();
+    const { container, rerender } = render(
+      <DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" expandedKeys={[]} onExpand={aoExpandir} />
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+    expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
+    expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+    rerender(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" expandedKeys={["gab"]} onExpand={aoExpandir} />);
+    expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+  });
+
+  it("sem rowKey, a chave é o caminho de índices", () => {
+    const aoExpandir = vi.fn();
+    render(<DataTable columns={COLUNAS} data={ARVORE} treeData onExpand={aoExpandir} />);
+    fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+    expect(aoExpandir.mock.calls[0][0]).toEqual(["0"]);
+  });
+
+  it("desenha os fios: tee para quem tem irmã depois, elbow para a última, line para o que continua", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" defaultExpandAll />);
+    const guias = (l: HTMLElement) => [...l.querySelectorAll(".umds-datatable__guide")].map((g) => g.className.replace("umds-datatable__guide umds-datatable__guide--", ""));
+    const [gab, sadm, rh, sobr] = linhas(container);
+    expect(guias(gab)).toEqual([]);
+    expect(guias(sadm)).toEqual(["tee"]);
+    expect(guias(rh)).toEqual(["line", "elbow"]);
+    expect(guias(sobr)).toEqual(["elbow"]);
+  });
+
+  it("o recuo cresce por nível", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" defaultExpandAll />);
+    const recuo = (l: HTMLElement) => (l.querySelector(".umds-datatable__tree-content") as HTMLElement).style.paddingLeft;
+    expect(recuo(linhas(container)[0])).toContain("calc(0 *");
+    expect(recuo(linhas(container)[2])).toContain("calc(2 *");
+  });
+
+  it("teclado: ↓ ↑ andam, → expande e desce, ← recolhe e sobe, Home e End", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" />);
+    const gab = linhas(container)[0];
+    gab.focus();
+    expect(gab).toHaveAttribute("tabindex", "0");
+    expect(linhas(container)[1]).toHaveAttribute("tabindex", "-1");
+
+    fireEvent.keyDown(gab, { key: "ArrowRight" });
+    expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+    expect(document.activeElement).toBe(gab);
+
+    fireEvent.keyDown(gab, { key: "ArrowRight" });
+    expect(document.activeElement).toBe(linhas(container)[1]);
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(linhas(container)[2]);
+    expect(linhas(container)[2]).toHaveAttribute("tabindex", "0");
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(linhas(container)[0]);
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "End" });
+    expect(document.activeElement).toBe(linhas(container)[3]);
+    fireEvent.keyDown(document.activeElement as Element, { key: "Home" });
+    expect(document.activeElement).toBe(linhas(container)[0]);
+
+    fireEvent.keyDown(document.activeElement as Element, { key: "ArrowLeft" });
+    expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+  });
+
+  it("clicar no botão não aciona o onRowClick da linha", () => {
+    const aoClicar = vi.fn();
+    render(<DataTable columns={COLUNAS} data={ARVORE} treeData rowKey="id" onRowClick={aoClicar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+    expect(aoClicar).not.toHaveBeenCalled();
+  });
+
+  it("sem treeData, a tabela é a de sempre: sem role, sem aria-level", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={ARVORE} />);
+    expect(screen.queryByRole("treegrid")).toBeNull();
+    expect(container.querySelector("[aria-level]")).toBeNull();
+    expect(container.querySelector(".umds-datatable__tree-toggle")).toBeNull();
+  });
+
+  it("childrenKey troca o campo das filhas", () => {
+    const dados = [{ id: 1, nome: "Pai", sigla: "P", itens: [{ id: 2, nome: "Filho", sigla: "F" }] }];
+    const { container } = render(<DataTable columns={COLUNAS} data={dados} treeData childrenKey="itens" rowKey="id" defaultExpandAll />);
+    expect(nomes(container)).toEqual(["Pai", "Filho"]);
+  });
+});

package/src/teste/DataTableCelulaLivre.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import DataTable, { type DataTableColumn } from "../components/DataTable/DataTable";
+
+/**
+ * Célula livre (`render` devolvendo nó) e linha de grupo (`rowGroup`).
+ * No Vue o equivalente é o slot `#cell-<key>`: ver `datatable-slots.test.mjs`.
+ */
+
+const USUARIOS = [
+  { id: 1, nome: "Lucas Andrade", setor: "SADM", perfil: "Administrador" },
+  { id: 2, nome: "Marina Souza", setor: "SADM", perfil: "Nível 1" },
+  { id: 3, nome: "Rafael Pereira", setor: "SOBR", perfil: "Nível 2" },
+];
+
+describe("DataTable · célula livre", () => {
+  it("render devolvendo elemento desenha o nó, não texto", () => {
+    const colunas: DataTableColumn[] = [
+      { key: "nome", label: "Usuário", render: (row) => <strong data-testid="nome">{row.nome}</strong> },
+      { key: "perfil", label: "Perfil" },
+    ];
+    render(<DataTable columns={colunas} data={USUARIOS} />);
+
+    const nos = screen.getAllByTestId("nome");
+    expect(nos).toHaveLength(3);
+    expect(nos[0].tagName).toBe("STRONG");
+    expect(nos[0]).toHaveTextContent("Lucas Andrade");
+  });
+
+  it("render recebe a linha e o índice", () => {
+    const colunas: DataTableColumn[] = [
+      { key: "nome", label: "Usuário", render: (row, i) => `${i + 1}. ${row.nome}` },
+    ];
+    render(<DataTable columns={colunas} data={USUARIOS} />);
+    expect(screen.getByText("2. Marina Souza")).toBeInTheDocument();
+  });
+
+  it("DataTableColumn é exportado e tipa a coluna com render de nó", () => {
+    const coluna: DataTableColumn = {
+      key: "acoes",
+      label: "Ações",
+      render: () => <button type="button">Editar</button>,
+    };
+    render(<DataTable columns={[coluna]} data={USUARIOS} />);
+    expect(screen.getAllByRole("button", { name: "Editar" })).toHaveLength(3);
+  });
+});
+
+describe("DataTable · linha de grupo (rowGroup)", () => {
+  const colunas: DataTableColumn[] = [
+    { key: "nome", label: "Usuário" },
+    { key: "perfil", label: "Perfil" },
+  ];
+
+  it("sem rowGroup não desenha linha de grupo", () => {
+    const { container } = render(<DataTable columns={colunas} data={USUARIOS} />);
+    expect(container.querySelector("th[scope='rowgroup']")).toBeNull();
+  });
+
+  it("rowGroup por campo abre um grupo por valor consecutivo", () => {
+    const { container } = render(<DataTable columns={colunas} data={USUARIOS} rowGroup="setor" />);
+    const grupos = container.querySelectorAll("th[scope='rowgroup']");
+    expect(Array.from(grupos).map((g) => g.textContent)).toEqual(["SADM", "SOBR"]);
+    // a linha de grupo atravessa as colunas todas
+    expect(grupos[0]).toHaveAttribute("colspan", "2");
+  });
+
+  it("rowGroup por função e colspan com selectable", () => {
+    const { container } = render(
+      <DataTable
+        columns={colunas}
+        data={USUARIOS}
+        selectable
+        rowGroup={(row) => (row.id === 3 ? undefined : "Equipe A")}
+      />,
+    );
+    const grupos = container.querySelectorAll("th[scope='rowgroup']");
+    expect(grupos).toHaveLength(1);
+    expect(grupos[0]).toHaveTextContent("Equipe A");
+    expect(grupos[0]).toHaveAttribute("colspan", "3");
+  });
+
+  it("renderRowGroup devolve nó", () => {
+    render(
+      <DataTable
+        columns={colunas}
+        data={USUARIOS}
+        rowGroup="setor"
+        renderRowGroup={(rotulo) => <em data-testid="grupo">{rotulo}!</em>}
+      />,
+    );
+    expect(screen.getAllByTestId("grupo").map((n) => n.textContent)).toEqual(["SADM!", "SOBR!"]);
+  });
+
+  it("a linha de grupo não entra na seleção por índice", async () => {
+    const { container } = render(
+      <DataTable columns={colunas} data={USUARIOS} rowGroup="setor" selectable selectedRows={[2]} />,
+    );
+    const selecionadas = container.querySelectorAll(".umds-datatable__row--selected");
+    expect(selecionadas).toHaveLength(1);
+    expect(within(selecionadas[0] as HTMLElement).getByText("Rafael Pereira")).toBeInTheDocument();
+  });
+});

package/src/teste/DataTableDocumento.test.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DataTable from "../components/DataTable/DataTable";
+import DescriptionList from "../components/DescriptionList/DescriptionList";
+
+const COLUNAS = [
+  { key: "descricao", label: "Descrição", sortable: true },
+  { key: "quantidade", label: "Quantidade", align: "right" as const },
+];
+const DADOS = [
+  { descricao: "Diesel S10", quantidade: "5.760" },
+  { descricao: "Gasolina comum", quantidade: "1.200" },
+];
+
+describe("DataTable variant=document", () => {
+  it("é a tabela de documento: classe própria, cabeçalho e linhas", () => {
+    const { container } = render(<DataTable variant="document" columns={COLUNAS} data={DADOS} />);
+    expect(container.querySelector(".umds-datatable--document")).not.toBeNull();
+    expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+    expect(screen.getByText("Diesel S10")).toBeInTheDocument();
+  });
+
+  it("não ordena: sem botão de ordenar, sem aria-sort", () => {
+    render(<DataTable variant="document" columns={COLUNAS} data={DADOS} sortKey="descricao" sortDirection="asc" />);
+    expect(screen.queryByRole("button")).toBeNull();
+    for (const th of screen.getAllByRole("columnheader")) expect(th).not.toHaveAttribute("aria-sort");
+  });
+
+  it("não seleciona: selectable é ignorado", () => {
+    render(<DataTable variant="document" selectable columns={COLUNAS} data={DADOS} />);
+    expect(screen.queryByRole("checkbox")).toBeNull();
+    expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+  });
+
+  it("linha não é clicável nem entra na ordem de Tab", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    const { container } = render(<DataTable variant="document" columns={COLUNAS} data={DADOS} onRowClick={aoClicar} />);
+    const linha = container.querySelector("tbody tr") as HTMLElement;
+    expect(linha).not.toHaveAttribute("tabindex");
+    expect(linha).not.toHaveClass("umds-datatable__row--clickable");
+    await usuario.click(linha);
+    expect(aoClicar).not.toHaveBeenCalled();
+  });
+
+  it("a tabela de interface continua igual (ordena, seleciona, clica)", async () => {
+    const usuario = userEvent.setup();
+    const aoOrdenar = vi.fn();
+    render(<DataTable columns={COLUNAS} data={DADOS} selectable onSort={aoOrdenar} />);
+    expect(screen.getAllByRole("checkbox").length).toBeGreaterThan(0);
+    await usuario.click(screen.getByRole("button", { name: /Descrição/ }));
+    expect(aoOrdenar).toHaveBeenCalledWith("descricao", "asc");
+  });
+});
+
+describe("DescriptionList", () => {
+  const ITENS = [
+    { label: "Dotação", value: "02.031.0001" },
+    { label: "Empenho", value: "2026NE000184" },
+    { label: "Fonte", value: "" },
+  ];
+
+  it("é um dl com um dt e um dd por par", () => {
+    const { container } = render(<DescriptionList items={ITENS} ariaLabel="Dados de empenho" />);
+    const dl = container.querySelector("dl") as HTMLElement;
+    expect(dl).toHaveAttribute("aria-label", "Dados de empenho");
+    expect(dl.querySelectorAll("dt")).toHaveLength(3);
+    expect(dl.querySelectorAll("dd")).toHaveLength(3);
+    expect(dl.querySelector("dt")).toHaveTextContent("Dotação");
+    expect(dl.querySelector("dd")).toHaveTextContent("02.031.0001");
+  });
+
+  it("valor vazio mostra o traço, ou o texto de emptyValue", () => {
+    const { container, rerender } = render(<DescriptionList items={ITENS} />);
+    expect(container.querySelectorAll("dd")[2]).toHaveTextContent("—");
+    rerender(<DescriptionList items={ITENS} emptyValue="Não informado" />);
+    expect(container.querySelectorAll("dd")[2]).toHaveTextContent("Não informado");
+  });
+
+  it("inline é o padrão; fit encolhe", () => {
+    const { container, rerender } = render(<DescriptionList items={ITENS} />);
+    const dl = container.querySelector("dl") as HTMLElement;
+    expect(dl).toHaveClass("umds-description-list--inline");
+    expect(dl).not.toHaveClass("umds-description-list--fit");
+    rerender(<DescriptionList items={ITENS} fit />);
+    expect(container.querySelector("dl")).toHaveClass("umds-description-list--fit");
+  });
+
+  it("stacked ganha as colunas e a caixa do valor", () => {
+    const { container } = render(<DescriptionList items={ITENS} layout="stacked" columns={3} bordered />);
+    const dl = container.querySelector("dl") as HTMLElement;
+    expect(dl).toHaveClass("umds-description-list--stacked");
+    expect(dl).toHaveClass("umds-description-list--cols-3");
+    expect(dl).toHaveClass("umds-description-list--bordered");
+  });
+
+  it("sem itens, não desenha par nenhum", () => {
+    const { container } = render(<DescriptionList />);
+    expect(container.querySelectorAll("dt")).toHaveLength(0);
+  });
+});

package/src/teste/DatePicker.test.tsx

@@ -84,3 +84,41 @@ describe("DatePicker · teclado", () => {
     expect(screen.getByRole("combobox")).toHaveTextContent(/15\/\d{2}\/\d{4}/);
   });
 });
+
+/**
+ * A story "Com valor" mostrava "Selecione o período" com `value="2025-12-31"`.
+ * Não era a story: no modo single o componente só lia `range`, e `value` e
+ * `defaultValue` eram declarados e nunca chegavam ao campo.
+ */
+describe("DatePicker · valor no modo single", () => {
+  it("`value` aparece no campo, no formato pedido", () => {
+    render(
+      <DatePicker label="Vencimento" value="2025-12-31" format="DD/MM/YYYY" />,
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("31/12/2025");
+  });
+
+  it("`defaultValue` semeia o campo no modo não-controlado", () => {
+    render(<DatePicker label="Vencimento" defaultValue="2025-06-15" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("15/06/2025");
+  });
+
+  it("`value` vazio no modo controlado mostra o placeholder", () => {
+    render(<DatePicker label="Vencimento" value="" placeholder="DD/MM/AAAA" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("DD/MM/AAAA");
+  });
+
+  it("o modo range continua lendo `range`, não `value`", () => {
+    render(
+      <DatePicker
+        mode="range"
+        label="Período"
+        value="2025-01-01"
+        range={{ from: "2025-03-01", to: "2025-03-10" }}
+      />,
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent(
+      "01/03/2025 – 10/03/2025",
+    );
+  });
+});

package/src/teste/DescriptionListCompacta.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import DescriptionList from "../components/DescriptionList/DescriptionList";
+
+const ITENS = [{ label: "Dotação", value: "02.031.0001" }];
+
+describe("DescriptionList · density", () => {
+  it("compact escreve a classe; o padrão não", () => {
+    const { container, rerender } = render(<DescriptionList items={ITENS} density="compact" />);
+    const dl = () => container.querySelector("dl") as HTMLElement;
+    expect(dl()).toHaveClass("umds-description-list--compact");
+    rerender(<DescriptionList items={ITENS} density="default" />);
+    expect(dl()).not.toHaveClass("umds-description-list--compact");
+    rerender(<DescriptionList items={ITENS} />);
+    expect(dl()).not.toHaveClass("umds-description-list--compact");
+  });
+
+  it("compact vale nos dois desenhos", () => {
+    const { container, rerender } = render(<DescriptionList items={ITENS} density="compact" layout="stacked" bordered />);
+    expect(container.querySelector("dl")).toHaveClass("umds-description-list--stacked", "umds-description-list--compact");
+    rerender(<DescriptionList items={ITENS} density="compact" fit />);
+    expect(container.querySelector("dl")).toHaveClass("umds-description-list--inline", "umds-description-list--compact");
+  });
+});

package/src/teste/EmptyStateTituloRico.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { faInbox } from "@fortawesome/free-solid-svg-icons";
+import EmptyState from "../components/EmptyState/EmptyState";
+
+describe("EmptyState · título rico", () => {
+  it("título em texto continua igual", () => {
+    const { container } = render(<EmptyState icon={faInbox} title="Nenhuma mensagem" description="Tudo em dia." />);
+    expect(container.querySelector(".umds-empty-state__title")).toHaveTextContent("Nenhuma mensagem");
+    expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
+  });
+
+  it("título aceita conteúdo rico: negrito, link", () => {
+    const { container } = render(
+      <EmptyState
+        title={
+          <>
+            Nenhum processo para <strong data-testid="termo">SOBR</strong>{" "}
+            <a href="#limpar">Limpar filtro</a>
+          </>
+        }
+      />,
+    );
+    const titulo = container.querySelector(".umds-empty-state__title") as HTMLElement;
+    expect(titulo).toContainElement(screen.getByTestId("termo"));
+    expect(titulo.querySelector("a")).toHaveAttribute("href", "#limpar");
+  });
+
+  it("o título é um div (conteúdo de bloco não vira HTML inválido dentro de p)", () => {
+    const { container } = render(<EmptyState title={<div data-testid="bloco">Bloco</div>} />);
+    expect(container.querySelector(".umds-empty-state__title")!.tagName).toBe("DIV");
+    expect(screen.getByTestId("bloco").parentElement).toHaveClass("umds-empty-state__title");
+  });
+});

package/src/teste/FileInputTrigger.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import FileInput from "../components/FileInput/FileInput";
+
+const arquivo = (nome: string) => new File(["conteudo"], nome, { type: "application/pdf" });
+
+describe("FileInput · variant trigger", () => {
+  it("renderiza o conteúdo como gatilho, sem a caixa de arrastar", () => {
+    const { container } = render(
+      <FileInput variant="trigger">
+        <button type="button">Anexar arquivo</button>
+      </FileInput>,
+    );
+    expect(screen.getByRole("button", { name: "Anexar arquivo" })).toBeInTheDocument();
+    expect(container.querySelector(".umds-file-input__drop-zone")).toBeNull();
+    expect(container.querySelector(".umds-file-input--trigger")).not.toBeNull();
+  });
+
+  it("clicar no conteúdo abre o seletor (clique no input nativo)", () => {
+    const { container } = render(
+      <FileInput variant="trigger">
+        <button type="button">Anexar arquivo</button>
+      </FileInput>,
+    );
+    const nativo = container.querySelector('input[type="file"]') as HTMLInputElement;
+    const clique = vi.spyOn(nativo, "click");
+    fireEvent.click(screen.getByRole("button", { name: "Anexar arquivo" }));
+    expect(clique).toHaveBeenCalledTimes(1);
+  });
+
+  it("disabled não abre o seletor", () => {
+    const { container } = render(
+      <FileInput variant="trigger" disabled>
+        <span>Alterar foto</span>
+      </FileInput>,
+    );
+    const nativo = container.querySelector('input[type="file"]') as HTMLInputElement;
+    const clique = vi.spyOn(nativo, "click");
+    fireEvent.click(screen.getByText("Alterar foto"));
+    expect(clique).not.toHaveBeenCalled();
+  });
+
+  it("escolher arquivos chama onChange, e accept e multiple chegam ao input", () => {
+    const aoMudar = vi.fn();
+    const { container } = render(
+      <FileInput variant="trigger" accept=".pdf" multiple onChange={aoMudar}>
+        <button type="button">Anexar</button>
+      </FileInput>,
+    );
+    const nativo = container.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(nativo).toHaveAttribute("accept", ".pdf");
+    expect(nativo).toHaveAttribute("multiple");
+    fireEvent.change(nativo, { target: { files: [arquivo("a.pdf"), arquivo("b.pdf")] } });
+    expect(aoMudar).toHaveBeenCalledTimes(1);
+    expect(aoMudar.mock.calls[0][0].map((f: File) => f.name)).toEqual(["a.pdf", "b.pdf"]);
+  });
+
+  it("o input nativo não entra no Tab e tem nome acessível", () => {
+    const { container } = render(
+      <FileInput variant="trigger" label="Anexar arquivo">
+        <button type="button">Anexar</button>
+      </FileInput>,
+    );
+    const nativo = container.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(nativo).toHaveAttribute("tabindex", "-1");
+    expect(nativo).toHaveAttribute("aria-label", "Anexar arquivo");
+    // o rótulo visível não aparece: o gatilho é o conteúdo
+    expect(container.querySelector(".umds-file-input__label")).toBeNull();
+  });
+
+  it("a lista de arquivos continua aparecendo no modo trigger", () => {
+    render(
+      <FileInput variant="trigger" files={[{ name: "oficio.pdf", size: 2048 }]}>
+        <button type="button">Anexar</button>
+      </FileInput>,
+    );
+    expect(screen.getByText("oficio.pdf")).toBeInTheDocument();
+  });
+
+  it("as variantes base e card seguem com a caixa", () => {
+    const { container } = render(
+      <>
+        <FileInput variant="base" />
+        <FileInput variant="card" />
+      </>,
+    );
+    expect(container.querySelectorAll(".umds-file-input__drop-zone")).toHaveLength(2);
+  });
+});