@1doc/1ds-react 2.9.0 → 2.11.0

package/src/teste/CoachmarkSemVeu.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+
+const PASSOS = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+
+function Pagina(props: any) {
+  return (
+    <div>
+      <button id="alvo-a">A</button>
+      <button id="fora">Fora</button>
+      <Coachmark steps={PASSOS} open {...props} />
+    </div>
+  );
+}
+
+describe("Coachmark · modal={false}", () => {
+  it("sem véu nem recorte; o cartão é um diálogo não modal e a raiz deixa o ponteiro passar", () => {
+    const { baseElement } = render(<Pagina modal={false} />);
+    expect(baseElement.querySelector(".umds-coachmark__veil")).toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark__cutout")).toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark")).toHaveClass("umds-coachmark--modeless");
+    expect(screen.getByRole("dialog", { name: "Novo: arrastar" })).toHaveAttribute("aria-modal", "false");
+  });
+
+  it("o padrão continua modal: véu, recorte e aria-modal verdadeiro", () => {
+    const { baseElement } = render(<Pagina />);
+    expect(baseElement.querySelector(".umds-coachmark__veil")).not.toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+    expect(baseElement.querySelector(".umds-coachmark")).not.toHaveClass("umds-coachmark--modeless");
+    expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+    const { unmount } = render(<Pagina modal />);
+    unmount();
+  });
+
+  it("o foco entra no cartão, mas o Tab não fica preso", async () => {
+    render(<Pagina modal={false} />);
+    const cartao = screen.getByRole("dialog");
+    await waitFor(() => expect(cartao).toHaveFocus());
+    const concluir = screen.getByRole("button", { name: "Concluir" });
+    concluir.focus();
+    const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+    concluir.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(false);
+  });
+
+  it("no modal o Tab continua preso (o último volta ao primeiro)", () => {
+    render(<Pagina />);
+    const concluir = screen.getByRole("button", { name: "Concluir" });
+    concluir.focus();
+    const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+    concluir.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+  });
+
+  it("a página segue clicável: o clique fora não é capturado e o tour não fecha sozinho", () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Fora" }));
+    expect(aoFechar).not.toHaveBeenCalled();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("o Esc fecha de qualquer lugar da página, uma vez só", () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    const fora = screen.getByRole("button", { name: "Fora" });
+    fora.focus();
+    fireEvent.keyDown(fora, { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    expect(aoFechar).toHaveBeenCalledWith("escape");
+  });
+
+  it("o Esc dentro do cartão também fecha uma vez só", async () => {
+    const aoFechar = vi.fn();
+    render(<Pagina modal={false} onClose={aoFechar} />);
+    await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+    fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("depois de fechar, o ouvinte do Esc sai do documento", () => {
+    const aoFechar = vi.fn();
+    const { rerender } = render(<Pagina modal={false} onClose={aoFechar} />);
+    rerender(<Pagina modal={false} open={false} onClose={aoFechar} />);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(aoFechar).not.toHaveBeenCalled();
+  });
+
+  it("ao fechar, o foco volta ao elemento de antes, se a pessoa não foi a outro lugar", async () => {
+    const { rerender } = render(<Pagina modal={false} open={false} />);
+    const gatilho = screen.getByRole("button", { name: "Fora" });
+    gatilho.focus();
+    expect(gatilho).toHaveFocus();
+    rerender(<Pagina modal={false} open />);
+    // O foco entra no cartão depois da montagem (um quadro de animação).
+    await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+    rerender(<Pagina modal={false} open={false} />);
+    await waitFor(() => expect(gatilho).toHaveFocus());
+  });
+});

package/src/teste/CoachmarkUmPasso.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+
+const UM = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+const DOIS = [...UM, { title: "Pronto", content: "Sem alvo." }];
+
+function Pagina({ passos, ...resto }: any) {
+  return (
+    <div>
+      <button id="alvo-a">A</button>
+      <Coachmark steps={passos} open {...resto} />
+    </div>
+  );
+}
+
+describe("Coachmark · contador", () => {
+  it("com um passo só não há contador, nem visível nem na região aria-live", () => {
+    const { baseElement } = render(<Pagina passos={UM} />);
+    expect(screen.queryByText("1 de 1")).toBeNull();
+    expect(baseElement.textContent).not.toContain("1 de 1");
+    expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("Novo: arrastar");
+  });
+
+  it("com um passo e modal={false} também não (a dica pontual)", () => {
+    const { baseElement } = render(<Pagina passos={UM} modal={false} />);
+    expect(baseElement.textContent).not.toContain("1 de 1");
+  });
+
+  it("com dois passos o contador aparece e o leitor de tela o ouve", () => {
+    const { baseElement } = render(<Pagina passos={DOIS} />);
+    expect(screen.getByText("1 de 2")).toBeInTheDocument();
+    expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("1 de 2: Novo: arrastar");
+  });
+
+  it("counterLabel segue valendo com mais de um passo", () => {
+    render(<Pagina passos={DOIS} counterLabel="Step {current} of {total}" />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+  });
+
+  it("o botão do último passo continua sendo Concluir", () => {
+    render(<Pagina passos={UM} />);
+    expect(screen.getByRole("button", { name: "Concluir" })).toBeInTheDocument();
+  });
+});

package/src/teste/ColorPickerXs.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+
+describe("ColorPicker · size xs", () => {
+  it("xs escreve a classe do tamanho; sm e md seguem como eram", () => {
+    const { container, rerender } = render(<ColorPicker ariaLabel="Cor" size="xs" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-color-picker--xs");
+    rerender(<ColorPicker ariaLabel="Cor" size="sm" />);
+    expect(raiz()).toHaveClass("umds-color-picker--sm");
+    expect(raiz()).not.toHaveClass("umds-color-picker--xs");
+    rerender(<ColorPicker ariaLabel="Cor" />);
+    expect(raiz()).toHaveClass("umds-color-picker--md");
+  });
+
+  it("no xs a amostra escolhida mantém a marcação e o aria-checked", () => {
+    const { container } = render(<ColorPicker ariaLabel="Cor" size="xs" defaultValue="--umds-primitive-red-pure" />);
+    expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+    expect(container.querySelectorAll(".umds-color-picker__swatch--selected")).toHaveLength(1);
+  });
+});

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/DataTableCompactaETom.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import DataTable from "../components/DataTable/DataTable";
+import { lerArquivo } from "./lerArquivo";
+
+const cssDataTable = await lerArquivo("../core/src/components/DataTable/DataTable.css");
+
+const COLUNAS = [
+  { key: "nome", label: "Nome" },
+  { key: "situacao", label: "Situação" },
+];
+const DADOS = [
+  { nome: "Ana Souza", situacao: "Ativa", tom: "positive" },
+  { nome: "Carlos Lima", situacao: "Bloqueado", tom: "negative" },
+  { nome: "Marina Alves", situacao: "Licença", tom: "info" },
+  { nome: "Rafael Pereira", situacao: "Desligado", tom: "muted" },
+  { nome: "Beatriz Lima", situacao: "Ativa" },
+];
+
+const linhas = (c: HTMLElement) => [...c.querySelectorAll("tbody tr")] as HTMLElement[];
+
+describe("DataTable · rowTone", () => {
+  it("o nome de um campo da linha traz o tom", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} rowTone="tom" />);
+    const l = linhas(container);
+    expect(l[0]).toHaveClass("umds-datatable__row--positive");
+    expect(l[1]).toHaveClass("umds-datatable__row--negative");
+    expect(l[2]).toHaveClass("umds-datatable__row--info");
+    expect(l[3]).toHaveClass("umds-datatable__row--muted");
+    expect(l[4].className).toBe("umds-datatable__row");
+  });
+
+  it("uma função (row, rowIndex) devolve o tom", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={DADOS} rowTone={(row, i) => (row.situacao === "Bloqueado" || i === 4 ? "negative" : undefined)} />,
+    );
+    const l = linhas(container);
+    expect(l[1]).toHaveClass("umds-datatable__row--negative");
+    expect(l[4]).toHaveClass("umds-datatable__row--negative");
+    expect(l[0].className).toBe("umds-datatable__row");
+  });
+
+  it("tom desconhecido ou vazio não vira classe", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={[{ nome: "A", situacao: "x", tom: "rosa" }, { nome: "B", situacao: "y", tom: "" }]} rowTone="tom" />,
+    );
+    for (const l of linhas(container)) expect(l.className).toBe("umds-datatable__row");
+  });
+
+  it("sem rowTone nada muda", () => {
+    const { container } = render(<DataTable columns={COLUNAS} data={DADOS} />);
+    for (const l of linhas(container)) expect(l.className).toBe("umds-datatable__row");
+  });
+
+  it("o tom convive com a linha selecionada e a zebra (as classes ficam; o CSS faz a selecionada vencer)", () => {
+    const { container } = render(
+      <DataTable columns={COLUNAS} data={DADOS} rowTone="tom" striped rowKey="nome" selectedRowKeys={["Carlos Lima"]} />,
+    );
+    const l = linhas(container);
+    expect(l[1]).toHaveClass("umds-datatable__row--negative", "umds-datatable__row--selected", "umds-datatable__row--striped");
+  });
+});
+
+describe("DataTable · compacta, 44px e CSS do tom", () => {
+  const css = cssDataTable.replace(/\r\n/g, "\n");
+  const bloco = (seletor: string) => {
+    const inicio = css.indexOf(seletor + " {");
+    return css.slice(inicio, css.indexOf("}", inicio));
+  };
+
+  it("a densidade compacta fixa cabeçalho e linha na altura de campo (44px); o documento fica de fora", () => {
+    expect(bloco(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td")).toMatch(
+      /height:\s*var\(--umds-semantic-field-height\)/,
+    );
+    expect(css).toContain(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,");
+    const { container } = render(<DataTable density="compact" columns={COLUNAS} data={DADOS} />);
+    expect(container.querySelector(".umds-datatable--compact")).not.toBeNull();
+  });
+
+  it("a linha selecionada vence o tom (o :not) e o tom vence a zebra", () => {
+    expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)/);
+    expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)\.umds-datatable__row--striped/);
+    expect(bloco(".umds-datatable__row--muted .umds-datatable__td")).toMatch(/neutral-dark-down/);
+  });
+});

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/InputAgrupado.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Input from "../components/Input/Input";
+
+describe("Input · grouped", () => {
+  it("grouped liga a classe própria e a do borderless; sem a prop, nenhuma das duas", () => {
+    const { container, rerender } = render(<Input ariaLabel="Adicionar setor" grouped />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-input--grouped");
+    expect(raiz()).toHaveClass("umds-input--borderless");
+    rerender(<Input ariaLabel="Adicionar setor" />);
+    expect(raiz()).not.toHaveClass("umds-input--grouped");
+    expect(raiz()).not.toHaveClass("umds-input--borderless");
+  });
+
+  it("borderless sozinho não ganha a classe do grupo (segue com altura de campo e foco próprio)", () => {
+    const { container } = render(<Input ariaLabel="x" borderless />);
+    expect(container.firstElementChild).toHaveClass("umds-input--borderless");
+    expect(container.firstElementChild).not.toHaveClass("umds-input--grouped");
+  });
+
+  it("o campo continua digitável dentro do grupo", () => {
+    const { container } = render(<Input ariaLabel="Adicionar setor" grouped placeholder="SADM, SOBR..." />);
+    expect(container.querySelector("input")).toHaveAttribute("placeholder", "SADM, SOBR...");
+  });
+});

package/src/teste/InputGhost.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import Input from "../components/Input/Input";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssInput = await lerArquivo("../core/src/components/Input/Input.css");
+
+const CSS: Record<string, string> = { Input: cssInput };
+const css = (componente: string) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto: string, seletor: string) => {
+  const inicio = texto.indexOf(seletor + " {");
+  expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+  return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+
+describe("Input · variant ghost", () => {
+  it("ghost escreve a classe; sem a prop e com default, não", () => {
+    const { container } = render(
+      <>
+        <Input ariaLabel="a" variant="ghost" />
+        <Input ariaLabel="b" />
+        <Input ariaLabel="c" variant="default" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-input--ghost");
+    expect(container.children[1]).not.toHaveClass("umds-input--ghost");
+    expect(container.children[2]).not.toHaveClass("umds-input--ghost");
+  });
+
+  it("CSS: só o repouso muda (fundo claro, borda clara) e com baixa especificidade, para o hover e o foco vencerem", () => {
+    const t = css("Input");
+    const ghost = bloco(t, ".umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container");
+    expect(ghost).toMatch(/background-color:\s*var\(--umds-semantic-color-background-light\)/);
+    expect(ghost).toMatch(/border-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    expect(t.indexOf(".umds-input__container:focus-within:not(")).toBeGreaterThanOrEqual(0);
+  });
+
+  it("o foco, o erro e o desabilitado do campo ghost seguem as classes do padrão", () => {
+    const { container } = render(<Input ariaLabel="d" variant="ghost" errorMessage="Obrigatório" />);
+    expect(container.firstElementChild).toHaveClass("umds-input--ghost", "umds-input--error");
+  });
+});