@1doc/1ds-react 2.7.2 → 2.9.0

package/src/teste/Coachmark.test.tsx

@@ -0,0 +1,198 @@
+import { describe, expect, it, vi } from "vitest";
+import { useRef, useState } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Coachmark from "../components/Coachmark/Coachmark";
+
+const PASSOS = [
+  { target: "#alvo-a", title: "Cada item é uma aba", content: "Fluxos e formulários abrem em abas." },
+  { target: "#alvo-b", title: "Salvo sozinho", content: "Tudo fica neste navegador." },
+  { title: "Pronto", content: "Sem alvo: o cartão fica no centro." },
+];
+
+function Pagina(props: any) {
+  return (
+    <div>
+      <button id="alvo-a">A</button>
+      <button id="alvo-b">B</button>
+      <Coachmark steps={PASSOS} {...props} />
+    </div>
+  );
+}
+
+describe("Coachmark", () => {
+  it("fechado não desenha nada", () => {
+    render(<Pagina open={false} />);
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("aberto é um diálogo modal nomeado pelo título, com contador e texto", () => {
+    render(<Pagina open />);
+    const dialogo = screen.getByRole("dialog", { name: "Cada item é uma aba" });
+    expect(dialogo).toHaveAttribute("aria-modal", "true");
+    expect(dialogo).toHaveAccessibleDescription("Fluxos e formulários abrem em abas.");
+    expect(screen.getAllByText("1 de 3").length).toBeGreaterThan(0);
+    expect(screen.getByRole("button", { name: "Próximo" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Anterior" })).toBeNull();
+  });
+
+  it("o foco entra no cartão ao abrir", () => {
+    render(<Pagina open />);
+    expect(screen.getByRole("dialog")).toHaveFocus();
+  });
+
+  it("Próximo e Anterior trocam de passo e avisam em onStepChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Pagina open onStepChange={aoMudar} />);
+    await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+    expect(aoMudar).toHaveBeenLastCalledWith(1);
+    expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+    await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+    expect(aoMudar).toHaveBeenLastCalledWith(0);
+    expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+  });
+
+  it("setas direita e esquerda avançam e voltam", async () => {
+    const usuario = userEvent.setup();
+    render(<Pagina open />);
+    await usuario.keyboard("{ArrowRight}");
+    expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+    await usuario.keyboard("{ArrowLeft}");
+    expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+  });
+
+  it("o último passo troca Próximo por Concluir e fecha com 'finish'", async () => {
+    const usuario = userEvent.setup();
+    const aoFechar = vi.fn();
+    render(<Pagina open defaultStep={2} onClose={aoFechar} />);
+    expect(screen.queryByRole("button", { name: "Próximo" })).toBeNull();
+    await usuario.click(screen.getByRole("button", { name: "Concluir" }));
+    expect(aoFechar).toHaveBeenCalledWith("finish");
+  });
+
+  it("Sair do tour fecha com 'skip' e hideSkip esconde o botão", async () => {
+    const usuario = userEvent.setup();
+    const aoFechar = vi.fn();
+    const { rerender } = render(<Pagina open onClose={aoFechar} />);
+    await usuario.click(screen.getByRole("button", { name: "Sair do tour" }));
+    expect(aoFechar).toHaveBeenCalledWith("skip");
+    rerender(<Pagina open hideSkip onClose={aoFechar} />);
+    expect(screen.queryByRole("button", { name: "Sair do tour" })).toBeNull();
+  });
+
+  it("Esc fecha com 'escape'", async () => {
+    const usuario = userEvent.setup();
+    const aoFechar = vi.fn();
+    render(<Pagina open onClose={aoFechar} />);
+    await usuario.keyboard("{Escape}");
+    expect(aoFechar).toHaveBeenCalledWith("escape");
+  });
+
+  it("o foco fica preso no cartão: Tab gira e Shift+Tab volta", async () => {
+    const usuario = userEvent.setup();
+    render(<Pagina open />);
+    const sair = screen.getByRole("button", { name: "Sair do tour" });
+    const proximo = screen.getByRole("button", { name: "Próximo" });
+    proximo.focus();
+    await usuario.tab();
+    expect(sair).toHaveFocus();
+    await usuario.tab({ shift: true });
+    expect(proximo).toHaveFocus();
+  });
+
+  it("todos os textos vêm por prop", () => {
+    render(
+      <Pagina
+        open
+        defaultStep={1}
+        nextLabel="Next"
+        previousLabel="Back"
+        skipLabel="Skip tour"
+        counterLabel="{current} of {total}"
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Skip tour" })).toBeInTheDocument();
+    expect(screen.getAllByText("2 of 3").length).toBeGreaterThan(0);
+  });
+
+  it("finishLabel troca o texto do último passo", () => {
+    render(<Pagina open defaultStep={2} finishLabel="Done" />);
+    expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument();
+  });
+
+  it("com alvo, desenha o recorte; sem alvo (ou alvo que não existe), não", () => {
+    const { container, rerender } = render(<Pagina open />);
+    expect(document.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+    rerender(<Pagina open step={2} />);
+    expect(document.querySelector(".umds-coachmark__cutout")).toBeNull();
+    expect(document.querySelector(".umds-coachmark--no-target")).not.toBeNull();
+    void container;
+  });
+
+  it("alvo por ref do React e por elemento", () => {
+    function ComRef() {
+      const ref = useRef<HTMLButtonElement>(null);
+      return (
+        <div>
+          <button ref={ref}>Alvo</button>
+          <Coachmark open steps={[{ target: ref, title: "Por ref" }]} />
+        </div>
+      );
+    }
+    render(<ComRef />);
+    expect(screen.getByRole("dialog", { name: "Por ref" })).toBeInTheDocument();
+    expect(document.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+  });
+
+  it("step controlado manda no passo atual", () => {
+    render(<Pagina open step={1} />);
+    expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+  });
+
+  it("ao fechar, o foco volta ao elemento de antes", async () => {
+    const usuario = userEvent.setup();
+    function Dono() {
+      const [aberto, setAberto] = useState(false);
+      return (
+        <div>
+          <button id="abrir" onClick={() => setAberto(true)}>
+            Fazer o tour
+          </button>
+          <Coachmark open={aberto} steps={PASSOS} onClose={() => setAberto(false)} />
+        </div>
+      );
+    }
+    render(<Dono />);
+    const abrir = screen.getByRole("button", { name: "Fazer o tour" });
+    await usuario.click(abrir);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    // O foco entra no cartão depois da montagem (um quadro de animação): na CI,
+    // mais lenta, o Esc chegava antes e caía no body.
+    await waitFor(() => expect(screen.getByRole("dialog").contains(document.activeElement)).toBe(true));
+    await usuario.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(abrir).toHaveFocus();
+  });
+
+  it("reabrir recomeça do primeiro passo", async () => {
+    const usuario = userEvent.setup();
+    function Dono() {
+      const [aberto, setAberto] = useState(true);
+      return (
+        <div>
+          <button onClick={() => setAberto(true)}>Reabrir</button>
+          <Coachmark open={aberto} steps={PASSOS} onClose={() => setAberto(false)} />
+        </div>
+      );
+    }
+    render(<Dono />);
+    await usuario.keyboard("{ArrowRight}");
+    expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    await usuario.click(screen.getByRole("button", { name: "Reabrir" }));
+    expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+  });
+});

package/src/teste/ColorPicker.test.tsx

@@ -0,0 +1,153 @@
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+import { COLOR_PALETTE } from "../utils/paleta-de-cores";
+
+describe("ColorPicker", () => {
+  it("é um radiogroup com uma amostra por primitivo de cor, cada uma com nome", () => {
+    render(<ColorPicker ariaLabel="Cor do marcador" />);
+    const grupo = screen.getByRole("radiogroup", { name: "Cor do marcador" });
+    expect(grupo.querySelectorAll('[role="radio"]')).toHaveLength(COLOR_PALETTE.length);
+    expect(COLOR_PALETTE).toHaveLength(31);
+    expect(screen.getByRole("radio", { name: "Azul escuro" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Cinza muito claro" })).toBeInTheDocument();
+  });
+
+  it("pinta cada amostra com a variável do token", () => {
+    render(<ColorPicker ariaLabel="Cor" />);
+    const azul = screen.getByRole("radio", { name: "Azul" }) as HTMLElement;
+    expect(azul.style.backgroundColor).toBe("var(--umds-primitive-blue-pure)");
+  });
+
+  it("clicar escolhe e entrega o NOME do token em onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<ColorPicker ariaLabel="Cor" onChange={aoMudar} />);
+    await usuario.click(screen.getByRole("radio", { name: "Verde" }));
+    expect(aoMudar).toHaveBeenCalledWith("--umds-primitive-green-pure");
+    expect(screen.getByRole("radio", { name: "Verde" })).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("não escolhido tem aria-checked false e só a escolhida mostra a marcação", () => {
+    const { container } = render(<ColorPicker ariaLabel="Cor" defaultValue="--umds-primitive-red-pure" />);
+    expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("radio", { name: "Azul" })).toHaveAttribute("aria-checked", "false");
+    expect(container.querySelectorAll(".umds-color-picker__swatch svg")).toHaveLength(1);
+  });
+
+  it("Tab entra na amostra escolhida (roving tabindex)", () => {
+    render(<ColorPicker ariaLabel="Cor" value="--umds-primitive-orange-pure" />);
+    const radios = screen.getAllByRole("radio");
+    const comTab = radios.filter((r) => r.getAttribute("tabindex") === "0");
+    expect(comTab).toHaveLength(1);
+    expect(comTab[0]).toHaveAccessibleName("Laranja");
+  });
+
+  it("sem valor, Tab entra na primeira amostra", () => {
+    render(<ColorPicker ariaLabel="Cor" />);
+    expect(screen.getAllByRole("radio")[0]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("setas movem a escolha e o foco; Home e End vão às pontas; dá a volta", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<ColorPicker ariaLabel="Cor" families={["blue"]} defaultValue="--umds-primitive-blue-dark" onChange={aoMudar} />);
+    const radios = screen.getAllByRole("radio");
+    radios[0].focus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(aoMudar).toHaveBeenLastCalledWith("--umds-primitive-blue-pure");
+    expect(radios[1]).toHaveFocus();
+    await usuario.keyboard("{ArrowLeft}{ArrowLeft}");
+    expect(aoMudar).toHaveBeenLastCalledWith("--umds-primitive-blue-light");
+    expect(radios[3]).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(radios[0]).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(radios[3]).toHaveFocus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(radios[0]).toHaveFocus();
+  });
+
+  it("pula amostra desabilitada no teclado", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(
+      <ColorPicker
+        ariaLabel="Cor"
+        defaultValue="a"
+        onChange={aoMudar}
+        swatches={[
+          { value: "a", label: "A" },
+          { value: "b", label: "B", disabled: true },
+          { value: "c", label: "C" },
+        ]}
+      />,
+    );
+    screen.getByRole("radio", { name: "A" }).focus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(aoMudar).toHaveBeenLastCalledWith("c");
+  });
+
+  it("families recorta a paleta", () => {
+    render(<ColorPicker ariaLabel="Cor" families={["blue", "gray"]} />);
+    expect(screen.getAllByRole("radio")).toHaveLength(11);
+  });
+
+  it("swatches substitui a paleta (nomes traduzidos)", () => {
+    render(<ColorPicker ariaLabel="Color" swatches={[{ value: "--umds-primitive-blue-pure", label: "Blue" }]} />);
+    expect(screen.getAllByRole("radio")).toHaveLength(1);
+    expect(screen.getByRole("radio", { name: "Blue" })).toBeInTheDocument();
+  });
+
+  it("disabled desabilita todas as amostras", () => {
+    render(<ColorPicker ariaLabel="Cor" disabled />);
+    for (const r of screen.getAllByRole("radio")) expect(r).toBeDisabled();
+  });
+
+  it("label visível nomeia o grupo", () => {
+    render(<ColorPicker label="Cor de fundo" id="cp" />);
+    expect(screen.getByRole("radiogroup", { name: "Cor de fundo" })).toBeInTheDocument();
+  });
+
+  it("cor livre vem desligada: sem campo de hexadecimal", () => {
+    render(<ColorPicker ariaLabel="Cor" />);
+    expect(screen.queryByLabelText(/hexadecimal/i)).toBeNull();
+  });
+
+  it("allowCustom: hexadecimal completo vira #RRGGBB em maiúsculas; incompleto não emite", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<ColorPicker ariaLabel="Cor" allowCustom onChange={aoMudar} />);
+    const campo = screen.getByLabelText("Cor livre (hexadecimal)");
+    await usuario.type(campo, "0058d");
+    expect(aoMudar).not.toHaveBeenCalled();
+    await usuario.type(campo, "b");
+    expect(aoMudar).toHaveBeenCalledTimes(1);
+    expect(aoMudar).toHaveBeenCalledWith("#0058DB");
+  });
+
+  it("allowCustom: hexadecimal inválido mostra a mensagem ao sair do campo", async () => {
+    const usuario = userEvent.setup();
+    render(<ColorPicker ariaLabel="Cor" allowCustom customErrorMessage="Formato inválido" />);
+    const campo = screen.getByLabelText("Cor livre (hexadecimal)");
+    await usuario.type(campo, "xyz");
+    expect(screen.queryByText("Formato inválido")).toBeNull();
+    await usuario.tab();
+    expect(screen.getByText("Formato inválido")).toBeInTheDocument();
+  });
+
+  it("controlado: reflete o value e escolher uma amostra limpa o campo livre", async () => {
+    const usuario = userEvent.setup();
+    function Controlado() {
+      const [valor, setValor] = useState("#336699");
+      return <ColorPicker ariaLabel="Cor" allowCustom value={valor} onChange={setValor} />;
+    }
+    render(<Controlado />);
+    const campo = screen.getByLabelText("Cor livre (hexadecimal)") as HTMLInputElement;
+    expect(campo.value).toBe("#336699");
+    await usuario.click(screen.getByRole("radio", { name: "Azul" }));
+    expect(campo.value).toBe("");
+  });
+});

package/src/teste/ConfirmAIAction.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ConfirmDialog from "../components/ConfirmDialog/ConfirmDialog";
+import ConfirmAIAction from "../components/ConfirmAIAction/ConfirmAIAction";
+
+/**
+ * O ConfirmAIAction dizia "digite CONFIRMAR", mas o botão continuava
+ * clicável: o ConfirmDialog não tinha como desabilitá-lo. Agora tem
+ * (`confirmDisabled`), e em risco alto o botão só libera com a frase.
+ */
+describe("ConfirmDialog · confirmDisabled", () => {
+  it("desabilita o confirmar sem mudar o texto do botão", () => {
+    render(<ConfirmDialog open inline title="Excluir?" confirmLabel="Excluir" confirmDisabled />);
+    expect(screen.getByRole("button", { name: "Excluir" })).toBeDisabled();
+  });
+
+  it("sem a prop, o confirmar fica habilitado", () => {
+    render(<ConfirmDialog open inline title="Excluir?" confirmLabel="Excluir" />);
+    expect(screen.getByRole("button", { name: "Excluir" })).toBeEnabled();
+  });
+});
+
+describe("ConfirmAIAction · risco alto", () => {
+  it("botão desabilitado até a frase conferir", () => {
+    const onConfirm = vi.fn();
+    const { rerender } = render(
+      <ConfirmAIAction open risk="alto" title="Arquivar" affected={["Processo 1"]} typedValue="" onConfirm={onConfirm} />,
+    );
+    expect(screen.getByRole("button", { name: "Confirmar" })).toBeDisabled();
+
+    rerender(
+      <ConfirmAIAction open risk="alto" title="Arquivar" affected={["Processo 1"]} typedValue="confirmar" onConfirm={onConfirm} />,
+    );
+    expect(screen.getByRole("button", { name: "Confirmar" })).toBeEnabled();
+  });
+
+  it("risco médio não exige digitação", () => {
+    render(<ConfirmAIAction open risk="medio" title="Tramitar" />);
+    expect(screen.getByRole("button", { name: "Confirmar" })).toBeEnabled();
+  });
+});

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",
+    );
+  });
+});