@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/IconPicker.test.tsx

@@ -0,0 +1,145 @@
+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 { faBuilding, faFileLines, faFolder, faGavel, faUser } from "@fortawesome/free-solid-svg-icons";
+import IconPicker from "../components/IconPicker/IconPicker";
+
+const ICONES = [
+  faUser,
+  faFolder,
+  faFileLines,
+  { icon: faBuilding, label: "Prédio", keywords: ["prefeitura", "órgão"] },
+  { icon: faGavel, label: "Martelo", keywords: ["jurídico", "decisão"] },
+];
+
+const radios = () => screen.getAllByRole("radio");
+
+describe("IconPicker", () => {
+  it("é um radiogroup com um radio por ícone, nomeado pelo iconName sem hífen", () => {
+    render(<IconPicker ariaLabel="Ícone da categoria" icons={ICONES} />);
+    expect(screen.getByRole("radiogroup", { name: "Ícone da categoria" })).toBeInTheDocument();
+    expect(radios()).toHaveLength(5);
+    expect(screen.getByRole("radio", { name: "user" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "file lines" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Prédio" })).toBeInTheDocument();
+  });
+
+  it("iconLabel traduz os nomes que não vêm com label", () => {
+    render(<IconPicker ariaLabel="x" icons={[faUser, faFolder]} iconLabel={(n) => ({ user: "Pessoa", folder: "Pasta" } as any)[n]} />);
+    expect(screen.getByRole("radio", { name: "Pessoa" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Pasta" })).toBeInTheDocument();
+  });
+
+  it("clicar escolhe e entrega o NOME do ícone e o item em onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<IconPicker ariaLabel="x" icons={ICONES} onChange={aoMudar} />);
+    await usuario.click(screen.getByRole("radio", { name: "folder" }));
+    expect(aoMudar).toHaveBeenCalledWith("folder", faFolder);
+    expect(screen.getByRole("radio", { name: "folder" })).toHaveAttribute("aria-checked", "true");
+    await usuario.click(screen.getByRole("radio", { name: "Prédio" }));
+    expect(aoMudar).toHaveBeenLastCalledWith("building", ICONES[3]);
+  });
+
+  it("defaultValue marca o escolhido; só ele entra na ordem de Tab", () => {
+    render(<IconPicker ariaLabel="x" icons={ICONES} defaultValue="file-lines" />);
+    expect(screen.getByRole("radio", { name: "file lines" })).toHaveAttribute("aria-checked", "true");
+    const comTab = radios().filter((r) => r.getAttribute("tabindex") === "0");
+    expect(comTab).toHaveLength(1);
+    expect(comTab[0]).toHaveAccessibleName("file lines");
+  });
+
+  it("sem valor, Tab entra no primeiro", () => {
+    render(<IconPicker ariaLabel="x" icons={ICONES} />);
+    expect(radios()[0]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("a busca filtra por nome, rótulo e palavras-chave, sem acento nem caixa", async () => {
+    const usuario = userEvent.setup();
+    render(<IconPicker ariaLabel="x" icons={ICONES} />);
+    const campo = screen.getByRole("searchbox", { name: "Buscar ícone" });
+    await usuario.type(campo, "PREFEITURA");
+    expect(radios()).toHaveLength(1);
+    expect(radios()[0]).toHaveAccessibleName("Prédio");
+    await usuario.clear(campo);
+    await usuario.type(campo, "juridico");
+    expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["Martelo"]);
+    await usuario.clear(campo);
+    await usuario.type(campo, "fol");
+    expect(radios().map((r) => r.getAttribute("aria-label"))).toEqual(["folder"]);
+  });
+
+  it("a quantidade de resultados é anunciada e resultsLabel traduz", async () => {
+    const usuario = userEvent.setup();
+    render(<IconPicker ariaLabel="x" icons={ICONES} resultsLabel="{count} icons" />);
+    expect(screen.getByRole("status")).toHaveTextContent("5 icons");
+    await usuario.type(screen.getByRole("searchbox"), "user");
+    expect(screen.getByRole("status")).toHaveTextContent("1 icons");
+  });
+
+  it("sem resultado mostra o texto e some a grade", async () => {
+    const usuario = userEvent.setup();
+    render(<IconPicker ariaLabel="x" icons={ICONES} emptyText="Nada por aqui" />);
+    await usuario.type(screen.getByRole("searchbox"), "zzz");
+    expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+    expect(screen.queryByRole("radiogroup")).toBeNull();
+  });
+
+  it("setas movem a escolha e o foco; cima e baixo andam uma linha (columns)", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<IconPicker ariaLabel="x" icons={ICONES} columns={2} defaultValue="user" onChange={aoMudar} />);
+    radios()[0].focus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(aoMudar).toHaveBeenLastCalledWith("folder", faFolder);
+    expect(radios()[1]).toHaveFocus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(radios()[3]).toHaveFocus();
+    await usuario.keyboard("{ArrowUp}");
+    expect(radios()[1]).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(radios()[4]).toHaveFocus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(radios()[0]).toHaveFocus();
+    await usuario.keyboard("{ArrowLeft}");
+    expect(radios()[4]).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(radios()[0]).toHaveFocus();
+  });
+
+  it("seta para baixo no campo de busca leva à grade", async () => {
+    const usuario = userEvent.setup();
+    render(<IconPicker ariaLabel="x" icons={ICONES} defaultValue="folder" />);
+    await usuario.click(screen.getByRole("searchbox"));
+    await usuario.keyboard("{ArrowDown}");
+    expect(screen.getByRole("radio", { name: "folder" })).toHaveFocus();
+  });
+
+  it("hideSearch tira o campo; disabled desabilita tudo", () => {
+    const { rerender } = render(<IconPicker ariaLabel="x" icons={ICONES} hideSearch />);
+    expect(screen.queryByRole("searchbox")).toBeNull();
+    rerender(<IconPicker ariaLabel="x" icons={ICONES} disabled />);
+    for (const r of radios()) expect(r).toBeDisabled();
+  });
+
+  it("textos da busca por prop; label visível nomeia o grupo; columns vira o grid", () => {
+    const { container } = render(
+      <IconPicker label="Ícone" id="ip" icons={ICONES} searchLabel="Search icon" searchPlaceholder="Search..." columns={4} maxHeight={120} />,
+    );
+    expect(screen.getByRole("radiogroup", { name: "Ícone" })).toBeInTheDocument();
+    expect(screen.getByRole("searchbox", { name: "Search icon" })).toHaveAttribute("placeholder", "Search...");
+    const grade = container.querySelector(".umds-icon-picker__grid") as HTMLElement;
+    expect(grade.style.gridTemplateColumns).toBe("repeat(4, var(--umds-icon-picker-tile))");
+    expect(grade.style.maxHeight).toBe("120px");
+  });
+
+  it("controlado: reflete o value", () => {
+    function Pai() {
+      const [valor, setValor] = useState("gavel");
+      return <IconPicker ariaLabel="x" icons={ICONES} value={valor} onChange={setValor} />;
+    }
+    render(<Pai />);
+    expect(screen.getByRole("radio", { name: "Martelo" })).toHaveAttribute("aria-checked", "true");
+  });
+});

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

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import Input from "../components/Input/Input";
+
+describe("Input · onChange a cada tecla, uma vez só", () => {
+  it("digitar chama onChange uma vez por tecla, com o valor novo", async () => {
+    const aoMudar = vi.fn();
+    render(<Input label="Nome" onChange={aoMudar} />);
+    await userEvent.type(screen.getByLabelText("Nome"), "ab");
+    expect(aoMudar.mock.calls.map((c) => c[0])).toEqual(["a", "ab"]);
+  });
+
+  it("change disparado à mão também chega (testes de quem consome)", () => {
+    const aoMudar = vi.fn();
+    render(<Input label="Nome" onChange={aoMudar} />);
+    fireEvent.change(screen.getByLabelText("Nome"), { target: { value: "xyz" } });
+    expect(aoMudar).toHaveBeenCalledTimes(1);
+    expect(aoMudar).toHaveBeenCalledWith("xyz");
+  });
+
+  it("onBlur continua sendo o evento de saída do campo", async () => {
+    const aoSair = vi.fn();
+    const aoMudar = vi.fn();
+    render(<Input label="Nome" onBlur={aoSair} onChange={aoMudar} />);
+    const campo = screen.getByLabelText("Nome");
+    await userEvent.type(campo, "a");
+    expect(aoSair).not.toHaveBeenCalled();
+    await userEvent.tab();
+    expect(aoSair).toHaveBeenCalledTimes(1);
+    expect(aoMudar).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Input · mask", () => {
+  async function digitar(mask: any, texto: string) {
+    const aoMudar = vi.fn();
+    render(<Input label="Campo" mask={mask} onChange={aoMudar} />);
+    const campo = screen.getByLabelText("Campo") as HTMLInputElement;
+    await userEvent.type(campo, texto);
+    return { campo, aoMudar };
+  }
+
+  it("cpf", async () => {
+    const { campo, aoMudar } = await digitar("cpf", "12345678901");
+    expect(campo.value).toBe("123.456.789-01");
+    expect(aoMudar).toHaveBeenLastCalledWith("123.456.789-01");
+  });
+
+  it("cnpj", async () => {
+    const { campo } = await digitar("cnpj", "12345678000190");
+    expect(campo.value).toBe("12.345.678/0001-90");
+  });
+
+  it("cep", async () => {
+    const { campo } = await digitar("cep", "80010000");
+    expect(campo.value).toBe("80010-000");
+  });
+
+  it("phone troca de formato com 10 ou 11 dígitos", async () => {
+    expect((await digitar("phone", "4133334444")).campo.value).toBe("(41) 3333-4444");
+  });
+
+  it("phone de 11 dígitos", async () => {
+    expect((await digitar("phone", "41999998888")).campo.value).toBe("(41) 99999-8888");
+  });
+
+  it("ignora letras e passa do tamanho, sem estourar", async () => {
+    const { campo } = await digitar("cpf", "12a3.4b5-678901999");
+    expect(campo.value).toBe("123.456.789-01");
+  });
+
+  it("valor controlado com dígitos aparece formatado", () => {
+    render(<Input label="CPF" mask="cpf" value="12345678901" onChange={() => {}} />);
+    expect((screen.getByLabelText("CPF") as HTMLInputElement).value).toBe("123.456.789-01");
+  });
+
+  it("abre o teclado numérico e limita o tamanho; sem máscara, nenhum dos dois", () => {
+    render(
+      <>
+        <Input label="Com" mask="cep" />
+        <Input label="Sem" />
+      </>,
+    );
+    expect(screen.getByLabelText("Com")).toHaveAttribute("inputmode", "numeric");
+    expect(screen.getByLabelText("Com")).toHaveAttribute("maxlength", "9");
+    expect(screen.getByLabelText("Sem")).not.toHaveAttribute("inputmode");
+    expect(screen.getByLabelText("Sem")).not.toHaveAttribute("maxlength");
+  });
+});
+
+describe("Input · iconRight e borderless", () => {
+  it("iconRight é decorativo: aparece, não é botão e fica fora da árvore de acessibilidade", () => {
+    const { container } = render(<Input ariaLabel="Número" iconRight={faMagnifyingGlass} />);
+    const icone = container.querySelector(".umds-input__icon-right") as HTMLElement;
+    expect(icone).not.toBeNull();
+    expect(icone).toHaveAttribute("aria-hidden", "true");
+    expect(icone.querySelector("svg")).not.toBeNull();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("sem iconRight não há ícone à direita", () => {
+    const { container } = render(<Input ariaLabel="x" />);
+    expect(container.querySelector(".umds-input__icon-right")).toBeNull();
+  });
+
+  it("borderless escreve a classe; sem a prop não", () => {
+    const { container } = render(
+      <>
+        <Input ariaLabel="a" borderless />
+        <Input ariaLabel="b" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-input--borderless");
+    expect(container.children[1]).not.toHaveClass("umds-input--borderless");
+  });
+
+  it("borderless com erro continua marcando o erro", () => {
+    const { container } = render(<Input ariaLabel="a" borderless errorMessage="Obrigatório" />);
+    expect(container.firstElementChild).toHaveClass("umds-input--borderless", "umds-input--error");
+    expect(screen.getByLabelText("a")).toHaveAttribute("aria-invalid", "true");
+  });
+});

package/src/teste/KbdCodeBlock.test.tsx

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Kbd from "../components/Kbd/Kbd";
+import CodeBlock from "../components/CodeBlock/CodeBlock";
+
+describe("Kbd", () => {
+  it("uma tecla é um kbd com o texto", () => {
+    const { container } = render(<Kbd>Esc</Kbd>);
+    const tecla = container.querySelector("kbd") as HTMLElement;
+    expect(tecla).toHaveTextContent("Esc");
+    expect(tecla).toHaveClass("umds-kbd", "umds-kbd--md");
+    expect(container.querySelectorAll("kbd")).toHaveLength(1);
+  });
+
+  it("keys desenha uma tecla por item, com o separador entre elas", () => {
+    const { container } = render(<Kbd keys={["Ctrl", "Shift", "P"]} />);
+    const conjunto = container.querySelector("kbd.umds-kbd-combo") as HTMLElement;
+    expect(conjunto).not.toBeNull();
+    expect(conjunto.querySelectorAll("kbd.umds-kbd")).toHaveLength(3);
+    expect(conjunto.textContent).toBe("Ctrl+Shift+P");
+  });
+
+  it("separator troca o texto entre as teclas; size vira classe", () => {
+    const { container } = render(<Kbd keys={["Ctrl", "K"]} separator=" + " size="sm" />);
+    expect(container.querySelector("kbd")).toHaveClass("umds-kbd--sm");
+    expect(container.textContent).toBe("Ctrl + K");
+  });
+
+  it("atributos HTML vão para o kbd", () => {
+    const { container } = render(<Kbd title="Atalho" data-x="1">Tab</Kbd>);
+    const tecla = container.querySelector("kbd") as HTMLElement;
+    expect(tecla).toHaveAttribute("title", "Atalho");
+    expect(tecla).toHaveAttribute("data-x", "1");
+  });
+});
+
+describe("CodeBlock", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("mostra o código em pre/code, mantendo as quebras, numa região focável e nomeada", () => {
+    const { container } = render(<CodeBlock code={'{\n  "ok": true\n}'} ariaLabel="Resposta" />);
+    const regiao = screen.getByRole("region", { name: "Resposta" });
+    expect(regiao.tagName).toBe("PRE");
+    expect(regiao).toHaveAttribute("tabindex", "0");
+    expect(container.querySelector("code")?.textContent).toBe('{\n  "ok": true\n}');
+  });
+
+  it("o texto também vem como conteúdo; o nome padrão é a linguagem, ou Código", () => {
+    const { rerender } = render(<CodeBlock language="JSON">{"{}"}</CodeBlock>);
+    expect(screen.getByRole("region", { name: "JSON" })).toHaveTextContent("{}");
+    expect(screen.getByText("JSON", { selector: ".umds-code-block__language" })).toBeInTheDocument();
+    rerender(<CodeBlock code="x" />);
+    expect(screen.getByRole("region", { name: "Código" })).toBeInTheDocument();
+  });
+
+  it("wrap e maxHeight", () => {
+    const { container } = render(<CodeBlock code="linha longa" wrap maxHeight={120} />);
+    expect(container.querySelector(".umds-code-block--wrap")).not.toBeNull();
+    expect((container.querySelector("pre") as HTMLElement).style.maxHeight).toBe("120px");
+  });
+
+  it("sem copyable e sem linguagem, não há cabeçalho nem botão", () => {
+    render(<CodeBlock code="x" />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("copiar manda o texto inteiro à área de transferência, confirma e volta depois de 2 s", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const escrever = vi.fn(() => Promise.resolve());
+    const aoCopiar = vi.fn();
+    const usuario = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    // O userEvent.setup instala a própria área de transferência: o espião entra depois.
+    Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+    render(<CodeBlock code={'{"a":1}'} copyable onCopy={aoCopiar} />);
+    await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+    expect(escrever).toHaveBeenCalledWith('{"a":1}');
+    expect(await screen.findByRole("button", { name: "Copiado" })).toBeInTheDocument();
+    expect(aoCopiar).toHaveBeenCalledWith('{"a":1}');
+    expect(screen.getByRole("status")).toHaveTextContent("Copiado");
+    await act(async () => {
+      vi.advanceTimersByTime(2100);
+    });
+    expect(screen.getByRole("button", { name: "Copiar" })).toBeInTheDocument();
+  });
+
+  it("copiar com o texto vindo como conteúdo lê o texto do bloco", async () => {
+    const escrever = vi.fn(() => Promise.resolve());
+    const usuario = userEvent.setup();
+    Object.defineProperty(navigator, "clipboard", { value: { writeText: escrever }, configurable: true });
+    render(<CodeBlock copyable>{"npm run build"}</CodeBlock>);
+    await usuario.click(screen.getByRole("button", { name: "Copiar" }));
+    expect(escrever).toHaveBeenCalledWith("npm run build");
+  });
+
+  it("copyLabel e copiedLabel por prop", async () => {
+    const usuario = userEvent.setup();
+    Object.defineProperty(navigator, "clipboard", { value: { writeText: () => Promise.resolve() }, configurable: true });
+    render(<CodeBlock code="x" copyable copyLabel="Copy" copiedLabel="Copied" />);
+    await usuario.click(screen.getByRole("button", { name: "Copy" }));
+    expect(await screen.findByRole("button", { name: "Copied" })).toBeInTheDocument();
+  });
+});

package/src/teste/List.test.tsx

@@ -0,0 +1,269 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faInbox } from "@fortawesome/free-solid-svg-icons";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+
+describe("ListItem", () => {
+  it("sem as nem href é um button dentro de um li", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Memorando 114/2025" />
+      </ul>,
+    );
+    const botao = screen.getByRole("button", { name: /Memorando 114\/2025/ });
+    expect(botao.tagName).toBe("BUTTON");
+    expect(botao).toHaveAttribute("type", "button");
+    expect(botao.parentElement?.tagName).toBe("LI");
+    expect(container.querySelectorAll("li")).toHaveLength(1);
+  });
+
+  it("com href vira link; target _blank ganha rel seguro", () => {
+    render(
+      <ul>
+        <ListItem title="Ofício" href="/oficios/31" target="_blank" />
+      </ul>,
+    );
+    const link = screen.getByRole("link", { name: /Ofício/ });
+    expect(link).toHaveAttribute("href", "/oficios/31");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("as='div' sem onClick é só leitura: sem role nem tabindex", () => {
+    const { container } = render(
+      <ul>
+        <ListItem as="div" title="Somente leitura" />
+      </ul>,
+    );
+    const linha = container.querySelector(".umds-list-item") as HTMLElement;
+    expect(linha.tagName).toBe("DIV");
+    expect(linha).not.toHaveAttribute("role");
+    expect(linha).not.toHaveAttribute("tabindex");
+    expect(linha).not.toHaveClass("umds-list-item--interactive");
+  });
+
+  it("as='div' com onClick é acionável por Enter e Espaço", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    render(
+      <ul>
+        <ListItem as="div" title="Acionável" onClick={aoClicar} />
+      </ul>,
+    );
+    const linha = screen.getByRole("button", { name: /Acionável/ });
+    linha.focus();
+    await usuario.keyboard("{Enter}");
+    await usuario.keyboard(" ");
+    expect(aoClicar).toHaveBeenCalledTimes(2);
+  });
+
+  it("monta título, subtítulo, meta, início e fim nos lugares certos", () => {
+    const { container } = render(
+      <ul>
+        <ListItem
+          title="Memorando 114/2025"
+          subtitle="Novo contrato - Governo"
+          meta="23 de agosto de 2025"
+          start={<span data-testid="inicio">AV</span>}
+          end={<span data-testid="fim">novo</span>}
+        >
+          <span data-testid="livre">conteúdo livre</span>
+        </ListItem>
+      </ul>,
+    );
+    expect(container.querySelector(".umds-list-item__title")).toHaveTextContent("Memorando 114/2025");
+    expect(container.querySelector(".umds-list-item__subtitle")).toHaveTextContent("Novo contrato - Governo");
+    expect(container.querySelector(".umds-list-item__meta")).toHaveTextContent("23 de agosto de 2025");
+    expect(container.querySelector(".umds-list-item__start")).toContainElement(screen.getByTestId("inicio"));
+    expect(container.querySelector(".umds-list-item__end")).toContainElement(screen.getByTestId("fim"));
+    expect(container.querySelector(".umds-list-item__body")).toContainElement(screen.getByTestId("livre"));
+  });
+
+  it("title aceita nó e não vira o atributo title do HTML", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title={<b data-testid="rico">Rico</b>} />
+      </ul>,
+    );
+    expect(screen.getByTestId("rico")).toBeInTheDocument();
+    expect(container.querySelector("[title]")).toBeNull();
+  });
+
+  it("sem start, end e textos, não desenha as regiões vazias", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Só título" />
+      </ul>,
+    );
+    expect(container.querySelector(".umds-list-item__start")).toBeNull();
+    expect(container.querySelector(".umds-list-item__end")).toBeNull();
+    expect(container.querySelector(".umds-list-item__subtitle")).toBeNull();
+    expect(container.querySelector(".umds-list-item__meta")).toBeNull();
+  });
+
+  it("selected marca aria-current e a classe de seleção", () => {
+    render(
+      <ul>
+        <ListItem title="Atual" selected />
+      </ul>,
+    );
+    const botao = screen.getByRole("button", { name: /Atual/ });
+    expect(botao).toHaveAttribute("aria-current", "true");
+    expect(botao).toHaveClass("umds-list-item--selected");
+  });
+
+  it("disabled bloqueia o clique e o foco do botão", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    render(
+      <ul>
+        <ListItem title="Bloqueada" disabled onClick={aoClicar} />
+      </ul>,
+    );
+    const botao = screen.getByRole("button", { name: /Bloqueada/ });
+    expect(botao).toBeDisabled();
+    await usuario.click(botao);
+    expect(aoClicar).not.toHaveBeenCalled();
+  });
+
+  it("link disabled perde o href e declara aria-disabled", () => {
+    render(
+      <ul>
+        <ListItem title="Link bloqueado" href="/x" disabled />
+      </ul>,
+    );
+    const link = screen.getByText("Link bloqueado").closest("a") as HTMLElement;
+    expect(link).not.toHaveAttribute("href");
+    expect(link).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("clique chama onClick com o evento", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    render(
+      <ul>
+        <ListItem title="Abrir" onClick={aoClicar} />
+      </ul>,
+    );
+    await usuario.click(screen.getByRole("button", { name: /Abrir/ }));
+    expect(aoClicar).toHaveBeenCalledTimes(1);
+  });
+
+  it("repassa aria-label, id, data-* e style ao elemento interativo", () => {
+    render(
+      <ul>
+        <ListItem aria-label="Abrir memorando" id="item-1" data-origem="home" style={{ marginTop: 4 }} />
+      </ul>,
+    );
+    const botao = screen.getByRole("button", { name: "Abrir memorando" });
+    expect(botao).toHaveAttribute("id", "item-1");
+    expect(botao).toHaveAttribute("data-origem", "home");
+    expect(botao).toHaveStyle({ marginTop: "4px" });
+  });
+});
+
+describe("List", () => {
+  it("é uma ul com role list, nome acessível e gap padrão", () => {
+    render(
+      <List ariaLabel="Documentos não lidos">
+        <ListItem title="A" />
+        <ListItem title="B" />
+      </List>,
+    );
+    const lista = screen.getByRole("list", { name: "Documentos não lidos" });
+    expect(lista.tagName).toBe("UL");
+    expect(lista).toHaveClass("umds-list--gap-quarck");
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+  });
+
+  it("as='ol' e gap trocam o elemento e a classe", () => {
+    render(
+      <List as="ol" gap="nano" ariaLabel="Passos">
+        <ListItem title="A" />
+      </List>,
+    );
+    const lista = screen.getByRole("list", { name: "Passos" });
+    expect(lista.tagName).toBe("OL");
+    expect(lista).toHaveClass("umds-list--gap-nano");
+  });
+
+  it("ariaLabelledby aponta para o título visível", () => {
+    render(
+      <>
+        <h2 id="titulo">Prazos a vencer</h2>
+        <List ariaLabelledby="titulo">
+          <ListItem title="A" />
+        </List>
+      </>,
+    );
+    expect(screen.getByRole("list", { name: "Prazos a vencer" })).toBeInTheDocument();
+  });
+
+  it("sem isEmpty mostra os itens e nunca o estado vazio", () => {
+    render(
+      <List ariaLabel="Lista" emptyTitle="Nada aqui">
+        <ListItem title="A" />
+      </List>,
+    );
+    expect(screen.queryByText("Nada aqui")).toBeNull();
+  });
+
+  it("isEmpty troca os itens pelo EmptyState dentro da própria lista", () => {
+    const aoAgir = vi.fn();
+    const { container } = render(
+      <List
+        ariaLabel="Lista"
+        isEmpty
+        emptyTitle="Nenhum documento"
+        emptyDescription="Tudo em dia."
+        emptyIcon={faInbox}
+        emptyActionLabel="Atualizar"
+        onEmptyAction={aoAgir}
+      >
+        <ListItem title="Não aparece" />
+      </List>,
+    );
+    expect(screen.queryByRole("list")).toBeNull();
+    expect(screen.queryByText("Não aparece")).toBeNull();
+    const raiz = container.firstElementChild as HTMLElement;
+    expect(raiz).toHaveAttribute("role", "status");
+    expect(raiz).toHaveClass("umds-list--empty");
+    expect(raiz.querySelector(".umds-empty-state")).not.toBeNull();
+    expect(screen.getByText("Nenhum documento")).toBeInTheDocument();
+    expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
+    expect(raiz.querySelector(".umds-empty-state--sm")).not.toBeNull();
+    screen.getByRole("button", { name: "Atualizar" }).click();
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+  });
+
+  it("isEmpty sem título usa o texto padrão", () => {
+    render(<List ariaLabel="Lista" isEmpty />);
+    expect(screen.getByText("Nenhum item encontrado")).toBeInTheDocument();
+  });
+
+  it("o conteúdo ao redor da lista não é desmontado ao esvaziar", () => {
+    const Tela = ({ vazia }: { vazia: boolean }) => (
+      <section>
+        <h2>Documentos</h2>
+        <input aria-label="Buscar" />
+        <List ariaLabel="Documentos" isEmpty={vazia}>
+          <ListItem title="A" />
+        </List>
+        <nav aria-label="Paginação">pág. 1</nav>
+      </section>
+    );
+    const { rerender } = render(<Tela vazia={false} />);
+    const busca = screen.getByLabelText("Buscar");
+    rerender(<Tela vazia />);
+    expect(screen.getByLabelText("Buscar")).toBe(busca);
+    expect(screen.getByRole("heading", { name: "Documentos" })).toBeInTheDocument();
+    expect(screen.getByRole("navigation", { name: "Paginação" })).toBeInTheDocument();
+  });
+
+  it("slot empty (prop empty no React) substitui o EmptyState", () => {
+    render(<List ariaLabel="Lista" isEmpty empty={<p data-testid="vazio">Nada por aqui</p>} />);
+    expect(screen.getByTestId("vazio")).toBeInTheDocument();
+    expect(document.querySelector(".umds-empty-state")).toBeNull();
+  });
+});