@1doc/1ds-react 2.9.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/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/ListItemTooltipStandalone.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListItem from "../components/List/ListItem";
+
+describe("ListItem: tooltip, standalone e atributos só no elemento interativo", () => {
+  it("tooltip vira o atributo title do elemento interativo, e o li fica limpo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Memorando 114/2025" tooltip="Abrir o memorando" aria-label="Memorando" role="menuitem" data-origem="home" />
+      </ul>,
+    );
+    const li = container.querySelector("li") as HTMLElement;
+    const botao = screen.getByRole("menuitem");
+    expect(botao).toHaveAttribute("title", "Abrir o memorando");
+    expect(botao).toHaveAttribute("aria-label", "Memorando");
+    expect(botao).toHaveAttribute("data-origem", "home");
+    for (const atributo of ["title", "aria-label", "role", "data-origem"]) expect(li).not.toHaveAttribute(atributo);
+  });
+
+  it("tooltip funciona no link e na linha div; sem tooltip não há title", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Link" href="/x" tooltip="Dica do link" />
+        <ListItem as="div" title="Div" tooltip="Dica da div" />
+        <ListItem title="Sem dica" />
+      </ul>,
+    );
+    const titulos = [...container.querySelectorAll(".umds-list-item")].map((e) => e.getAttribute("title"));
+    expect(titulos).toEqual(["Dica do link", "Dica da div", null]);
+  });
+
+  it("o título da linha continua sendo texto, não o atributo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Só o título" />
+      </ul>,
+    );
+    expect(container.querySelector("[title]")).toBeNull();
+  });
+
+  it("standalone renderiza sem li, só o elemento interativo", () => {
+    const aoClicar = vi.fn();
+    const { container } = render(
+      <div>
+        <ListItem standalone title="12" tooltip="Página 12" onClick={aoClicar} />
+      </div>,
+    );
+    expect(container.querySelector("li")).toBeNull();
+    const botao = screen.getByRole("button", { name: /12/ });
+    expect(botao.parentElement?.tagName).toBe("DIV");
+    expect(botao).toHaveAttribute("title", "Página 12");
+    fireEvent.click(botao);
+    expect(aoClicar).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem standalone o li continua lá", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Normal" />
+      </ul>,
+    );
+    expect(container.querySelectorAll("li")).toHaveLength(1);
+  });
+});

package/src/teste/RichTextEditorAlinhaImagemTabela.test.tsx

@@ -0,0 +1,238 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { htmlDaTabela, htmlVazio, imagemSegura, sanitizarHtml } from "../utils/html-seguro";
+
+let execCommand: ReturnType<typeof vi.fn>;
+let estados: Record<string, boolean>;
+
+beforeEach(() => {
+  estados = {};
+  execCommand = vi.fn(() => true);
+  (document as any).execCommand = execCommand;
+  (document as any).queryCommandState = (comando: string) => !!estados[comando];
+});
+
+const area = () => screen.getByRole("textbox") as HTMLElement;
+const PNG = "data:image/png;base64,iVBORw0KGgo=";
+
+describe("html-seguro: alinhamento, imagem e tabela", () => {
+  it("text-align fica nos blocos, em style ou em align; o resto do style sai", () => {
+    expect(sanitizarHtml('<p style="text-align: center; color: red">a</p>')).toBe('<p style="text-align: center;">a</p>');
+    expect(sanitizarHtml('<div align="right">a</div>')).toBe('<div style="text-align: right;">a</div>');
+    expect(sanitizarHtml('<p style="text-align: expression(alert(1))">a</p>')).toBe("<p>a</p>");
+    expect(sanitizarHtml('<li style="text-align:justify">a</li>')).toBe('<li style="text-align: justify;">a</li>');
+    expect(sanitizarHtml('<b style="text-align:center">a</b>')).toBe("<b>a</b>");
+  });
+
+  it("imagem: http(s), caminho e data:image em PNG, JPEG, GIF e WebP ficam; o resto some inteiro", () => {
+    expect(sanitizarHtml('<img src="https://a.com/x.png" alt="Brasão" onerror="x()">')).toBe('<img src="https://a.com/x.png" alt="Brasão">');
+    expect(sanitizarHtml('<img src="/img/x.png">')).toBe('<img src="/img/x.png" alt="">');
+    expect(sanitizarHtml(`<img src="${PNG}" alt="a">`)).toBe(`<img src="${PNG}" alt="a">`);
+    for (const mau of ["javascript:alert(1)", "x", "data:image/svg+xml;base64,PHN2Zz4=", "data:text/html;base64,PGI+", "//evil.com/x.png", "ftp://a/x.png"]) {
+      expect(sanitizarHtml(`<p>a<img src="${mau}">b</p>`)).toBe("<p>ab</p>");
+    }
+  });
+
+  it("imagemSegura devolve vazio para o perigoso", () => {
+    expect(imagemSegura("java\nscript:alert(1)")).toBe("");
+    expect(imagemSegura("https://a.com/x.png")).toBe("https://a.com/x.png");
+    expect(imagemSegura("")).toBe("");
+  });
+
+  it("tabela simples: tags e colspan/rowspan ficam; atributos soltos saem", () => {
+    const html = '<table class="x" onclick="a()"><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3" style="color:red">a</td><td colspan="x">b</td></tr></tbody></table>';
+    expect(sanitizarHtml(html)).toBe('<table><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3">a</td><td>b</td></tr></tbody></table>');
+  });
+
+  it("htmlVazio: imagem e tabela contam como conteúdo", () => {
+    expect(htmlVazio("<img src='/a.png'>")).toBe(false);
+    expect(htmlVazio(htmlDaTabela(1, 1))).toBe(false);
+    expect(htmlVazio("<p><br></p>")).toBe(true);
+  });
+
+  it("htmlDaTabela faz linhas × colunas de células com quebra", () => {
+    const celulas = (htmlDaTabela(2, 3).match(/<td><br><\/td>/g) || []).length;
+    expect(celulas).toBe(6);
+    expect((htmlDaTabela(2, 3).match(/<tr>/g) || []).length).toBe(2);
+  });
+});
+
+describe("RichTextEditor: alinhamento", () => {
+  it("as quatro ferramentas de alinhamento pedem o comando e seguem o cursor", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["alignLeft", "alignCenter", "alignRight", "alignJustify"]} defaultValue="<p>x</p>" />);
+    const esperado: Record<string, string> = {
+      "Alinhar à esquerda": "justifyLeft",
+      Centralizar: "justifyCenter",
+      "Alinhar à direita": "justifyRight",
+      Justificar: "justifyFull",
+    };
+    for (const [nome, comando] of Object.entries(esperado)) {
+      execCommand.mockClear();
+      await usuario.click(screen.getByRole("button", { name: nome }));
+      expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+    }
+    estados.justifyCenter = true;
+    const faixa = document.createRange();
+    faixa.selectNodeContents(area());
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+    expect(screen.getByRole("button", { name: "Centralizar" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Justificar" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("a barra padrão não ganha as ferramentas novas", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    for (const nome of ["Centralizar", "Imagem", "Tabela"]) expect(screen.queryByRole("button", { name: nome })).toBeNull();
+  });
+});
+
+describe("RichTextEditor: imagem", () => {
+  const abrirImagem = async (props: any = {}, botao = "Imagem") => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["image"]} defaultValue="<p>texto</p>" {...props} />);
+    await usuario.click(screen.getByRole("button", { name: botao }));
+    return usuario;
+  };
+
+  it("o botão abre o painel com foco no endereço; Esc fecha", async () => {
+    const usuario = await abrirImagem();
+    expect(screen.getByLabelText("Endereço da imagem")).toHaveFocus();
+    expect(screen.getByLabelText("Texto alternativo")).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+  });
+
+  it("endereço e texto alternativo inserem o img com alt", async () => {
+    const aoMudar = vi.fn();
+    const usuario = await abrirImagem({ onChange: aoMudar });
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "exemplo.com.br/brasao.png");
+    await usuario.type(screen.getByLabelText("Texto alternativo"), "Brasão da prefeitura");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<img src="https://exemplo.com.br/brasao.png" alt="Brasão da prefeitura">');
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+    expect(aoMudar).toHaveBeenCalled();
+  });
+
+  it("endereço perigoso mostra o erro e o painel continua aberto", async () => {
+    const usuario = await abrirImagem();
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "javascript:alert(1)");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(screen.getByText("Use um endereço http ou https, ou escolha um arquivo.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    expect(screen.getByLabelText("Endereço da imagem")).toBeInTheDocument();
+  });
+
+  it("arquivo vira data URL e entra no img", async () => {
+    const usuario = await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const arquivo = new File([new Uint8Array([137, 80, 78, 71])], "brasao.png", { type: "image/png" });
+    fireEvent.change(entrada, { target: { files: [arquivo] } });
+    await waitFor(() => expect(screen.getByText("brasao.png")).toBeInTheDocument());
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toMatch(/^<img src="data:image\/png;base64,[A-Za-z0-9+/=]+" alt="">$/);
+  });
+
+  it("arquivo que não é PNG, JPEG, GIF ou WebP é recusado; acima de 2 MB também", async () => {
+    await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(entrada, { target: { files: [new File(["x"], "a.svg", { type: "image/svg+xml" })] } });
+    expect(await screen.findByText("Use uma imagem PNG, JPEG, GIF ou WebP.")).toBeInTheDocument();
+    const grande = new File(["x"], "g.png", { type: "image/png" });
+    Object.defineProperty(grande, "size", { value: 3 * 1024 * 1024 });
+    fireEvent.change(entrada, { target: { files: [grande] } });
+    expect(await screen.findByText("A imagem passa de 2 MB.")).toBeInTheDocument();
+  });
+
+  it("os textos do painel vêm por labels", async () => {
+    await abrirImagem({ labels: { image: "Image", imageUrl: "Image address", imageAlt: "Alt text", imageApply: "Insert image", imageCancel: "Cancel", imageFile: "Choose file" } }, "Image");
+    expect(screen.getByLabelText("Image address")).toBeInTheDocument();
+    expect(screen.getByLabelText("Alt text")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Insert image" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Choose file" })).toBeInTheDocument();
+  });
+});
+
+describe("RichTextEditor: tabela", () => {
+  it("o painel insere linhas × colunas; o padrão é 3 × 3", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    expect(screen.getByLabelText("Linhas")).toHaveFocus();
+    await usuario.clear(screen.getByLabelText("Linhas"));
+    await usuario.type(screen.getByLabelText("Linhas"), "2");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toBe(htmlDaTabela(2, 3));
+  });
+
+  it("fora de 1 a 20 linhas e 1 a 10 colunas mostra o erro e não insere", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    await usuario.clear(screen.getByLabelText("Colunas"));
+    await usuario.type(screen.getByLabelText("Colunas"), "11");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    expect(screen.getByText("Use de 1 a 20 linhas e de 1 a 10 colunas.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+  });
+
+  const TABELA = "<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>";
+  const cursorNaCelula = (indice: number) => {
+    const celula = area().querySelectorAll("td")[indice];
+    const faixa = document.createRange();
+    faixa.selectNodeContents(celula);
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+  };
+
+  it("com o cursor numa célula aparece a barra; sem tabela na toolbar, não aparece", async () => {
+    const { rerender } = render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    cursorNaCelula(0);
+    expect(await screen.findByRole("group", { name: "Tabela" })).toBeInTheDocument();
+    rerender(<RichTextEditor ariaLabel="x" toolbar={["bold"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("adiciona e remove linha e coluna na célula do cursor e avisa onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} onChange={aoMudar} />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(3);
+    expect(area().querySelectorAll("tr")[1].cells.length).toBe(3);
+    expect(aoMudar).toHaveBeenCalled();
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(3);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover tabela" }));
+    expect(area().querySelector("table")).toBeNull();
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("remover a única linha ou coluna remove a tabela", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue="<table><tbody><tr><td>a</td></tr></tbody></table>" />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelector("table")).toBeNull();
+  });
+});