@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/teste/OrgChart.test.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import OrgChart from "../components/OrgChart/OrgChart";
+const ARVORE = [
+    {
+        id: "copirn",
+        title: "COPIRN",
+        subtitle: "Companhia Potiguar de Infraestrutura",
+        children: [
+            { id: "aj", title: "AJ", subtitle: "Assessoria Jurídica" },
+            {
+                id: "sadm",
+                title: "SADM",
+                subtitle: "Secretaria de Administração",
+                children: [
+                    { id: "al", title: "AL", subtitle: "Almoxarifado" },
+                    { id: "ssa", title: "SSA", subtitle: "Subsetor do Almoxarifado" },
+                ],
+            },
+            { id: "sfin", title: "SFIN", subtitle: "Secretaria de Finanças" },
+        ],
+    },
+];
+const item = (id) => document.querySelector(`[data-node-id="${id}"]`);
+const esquerda = (id) => parseFloat(item(id).style.left);
+describe("OrgChart", () => {
+    it("é uma tree nomeada, com um treeitem por nó visível e níveis ARIA", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, ariaLabel: "Setores" }));
+        expect(screen.getByRole("tree", { name: "Setores" })).toBeInTheDocument();
+        expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+        expect(item("copirn")).toHaveAttribute("aria-level", "1");
+        expect(item("al")).toHaveAttribute("aria-level", "3");
+        expect(item("sadm")).toHaveAttribute("aria-posinset", "2");
+        expect(item("sadm")).toHaveAttribute("aria-setsize", "3");
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+        expect(item("aj")).not.toHaveAttribute("aria-expanded");
+    });
+    it("o nome padrão é Organograma; título e subtítulo aparecem", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        expect(screen.getByRole("tree", { name: "Organograma" })).toBeInTheDocument();
+        expect(within(item("aj")).getByText("AJ")).toBeInTheDocument();
+        expect(within(item("aj")).getByText("Assessoria Jurídica")).toBeInTheDocument();
+    });
+    it("o pai se centra sobre os filhos e os irmãos andam lado a lado", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, nodeWidth: 100, gapX: 20 }));
+        expect(esquerda("aj")).toBe(0);
+        expect(esquerda("al")).toBe(120);
+        expect(esquerda("ssa")).toBe(240);
+        expect(esquerda("sadm")).toBe(180);
+        expect(esquerda("sfin")).toBe(360);
+        expect(esquerda("copirn")).toBe((0 + 360) / 2);
+        expect(parseFloat(item("sadm").style.top)).toBeGreaterThan(parseFloat(item("copirn").style.top));
+    });
+    it("desenha um conector por pai expandido", () => {
+        const { container } = render(_jsx(OrgChart, { nodes: ARVORE }));
+        expect(container.querySelectorAll(".umds-org-chart__line")).toHaveLength(2);
+    });
+    it("a raiz é cheia e o nó marcado leva aria-selected", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, selectedId: "aj" }));
+        expect(item("copirn")).toHaveClass("umds-org-chart__node--root");
+        expect(item("aj")).toHaveAttribute("aria-selected", "true");
+        expect(item("sfin")).not.toHaveAttribute("aria-selected");
+    });
+    it("recolher esconde os filhos e avisa; expandir volta", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OrgChart, { nodes: ARVORE, onCollapsedChange: aoMudar }));
+        item("sadm").focus();
+        await usuario.keyboard(" ");
+        expect(aoMudar).toHaveBeenLastCalledWith(["sadm"]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "false");
+        await usuario.keyboard(" ");
+        expect(aoMudar).toHaveBeenLastCalledWith([]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+    });
+    it("o botão de expandir do mouse faz o mesmo e não aciona o nó", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        const { container } = render(_jsx(OrgChart, { nodes: ARVORE, onNodeClick: aoClicar }));
+        const botoes = container.querySelectorAll(".umds-org-chart__toggle");
+        expect(botoes).toHaveLength(2);
+        await usuario.click(botoes[1]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("defaultCollapsedIds começa recolhido; collapsedIds controla", () => {
+        const { rerender } = render(_jsx(OrgChart, { nodes: ARVORE, defaultCollapsedIds: ["sadm"] }));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        rerender(_jsx(OrgChart, { nodes: ARVORE, collapsedIds: ["copirn"] }));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(1);
+    });
+    it("clicar e Enter acionam o nó com o nó", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx(OrgChart, { nodes: ARVORE, onNodeClick: aoClicar }));
+        await usuario.click(item("aj"));
+        expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "aj" }));
+        item("sfin").focus();
+        await usuario.keyboard("{Enter}");
+        expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "sfin" }));
+    });
+    it("só um nó entra na ordem de Tab (o primeiro)", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        const comTab = screen.getAllByRole("treeitem").filter((n) => n.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAttribute("data-node-id", "copirn");
+    });
+    it("setas: baixo desce ao primeiro filho, cima sobe ao pai, lados andam entre irmãos, Home e End", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        item("copirn").focus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("aj")).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(item("sadm")).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("al")).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(item("ssa")).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(item("al")).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(item("sadm")).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(item("sfin")).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}{ArrowLeft}");
+        expect(item("aj")).toHaveFocus();
+    });
+    it("baixo num nó recolhido abre; o foco desce no seguinte", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OrgChart, { nodes: ARVORE, defaultCollapsedIds: ["sadm"] }));
+        item("sadm").focus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("al")).toHaveFocus();
+    });
+    it("renderNode troca o conteúdo do nó", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, renderNode: (no, meta) => _jsx("b", { "data-testid": "c-" + no.id, children: no.title + ":" + meta.level }) }));
+        expect(screen.getByTestId("c-ssa")).toHaveTextContent("SSA:2");
+        expect(item("ssa").querySelector(".umds-org-chart__title")).toBeNull();
+    });
+    it("textos do botão por prop; sem nós, não desenha a árvore", () => {
+        const { container, rerender } = render(_jsx(OrgChart, { nodes: ARVORE, expandLabel: "Expand", collapseLabel: "Collapse" }));
+        expect(container.querySelector(".umds-org-chart__toggle")).toHaveAttribute("title", "Collapse");
+        rerender(_jsx(OrgChart, { nodes: [] }));
+        expect(screen.queryByRole("tree")).toBeNull();
+    });
+    it("controlado por pai", () => {
+        function Pai() {
+            const [fechados, setFechados] = useState([]);
+            return (_jsxs(_Fragment, { children: [_jsx(OrgChart, { nodes: ARVORE, collapsedIds: fechados, onCollapsedChange: setFechados }), _jsx("button", { onClick: () => setFechados(["sadm"]), children: "fechar" })] }));
+        }
+        render(_jsx(Pai, {}));
+        fireEvent.click(screen.getByText("fechar"));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+    });
+});

package/dist/teste/OtpInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/OtpInput.test.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 OtpInput from "../components/OtpInput/OtpInput";
+const caixas = () => screen.getAllByRole("textbox");
+describe("OtpInput", () => {
+    it("tem 6 caixas por padrão, cada uma com nome próprio, num grupo nomeado", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo de verifica\u00E7\u00E3o" }));
+        expect(screen.getByRole("group", { name: "Código de verificação" })).toBeInTheDocument();
+        expect(caixas()).toHaveLength(6);
+        expect(screen.getByRole("textbox", { name: "Dígito 3 de 6" })).toBeInTheDocument();
+    });
+    it("length muda a quantidade e digitLabel traduz o nome", () => {
+        render(_jsx(OtpInput, { ariaLabel: "Code", length: 4, digitLabel: "Digit {n} of {total}" }));
+        expect(caixas()).toHaveLength(4);
+        expect(screen.getByRole("textbox", { name: "Digit 2 of 4" })).toBeInTheDocument();
+    });
+    it("a primeira caixa leva autocomplete one-time-code e teclado numérico", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo" }));
+        expect(caixas()[0]).toHaveAttribute("autocomplete", "one-time-code");
+        expect(caixas()[1]).toHaveAttribute("autocomplete", "off");
+        expect(caixas()[0]).toHaveAttribute("inputmode", "numeric");
+    });
+    it("digitar avança o foco e entrega o código em onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("482");
+        expect(aoMudar).toHaveBeenLastCalledWith("482");
+        expect(caixas().map((c) => c.value).join("")).toBe("482");
+        expect(caixas()[3]).toHaveFocus();
+    });
+    it("rejeita o que não é dígito (numeric)", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("a-b");
+        expect(aoMudar).not.toHaveBeenCalled();
+        expect(caixas()[0].value).toBe("");
+        expect(caixas()[0]).toHaveFocus();
+    });
+    it("alphanumeric aceita letras e sai em maiúsculas", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", type: "alphanumeric", length: 4, onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("a9z");
+        expect(aoMudar).toHaveBeenLastCalledWith("A9Z");
+        expect(caixas()[0]).toHaveAttribute("inputmode", "text");
+    });
+    it("colar o código inteiro em qualquer caixa distribui e chama onComplete uma vez", async () => {
+        const usuario = userEvent.setup();
+        const aoCompletar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onComplete: aoCompletar }));
+        caixas()[2].focus();
+        await usuario.paste("482 913");
+        expect(caixas().map((c) => c.value).join("")).toBe("482913");
+        expect(aoCompletar).toHaveBeenCalledTimes(1);
+        expect(aoCompletar).toHaveBeenCalledWith("482913");
+        expect(caixas()[5]).toHaveFocus();
+    });
+    it("colar um pedaço entra a partir da caixa atual", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "12" }));
+        caixas()[2].focus();
+        await usuario.paste("345");
+        expect(caixas().map((c) => c.value).join("")).toBe("12345");
+    });
+    it("onComplete só dispara quando as caixas enchem", async () => {
+        const usuario = userEvent.setup();
+        const aoCompletar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", length: 3, onComplete: aoCompletar }));
+        caixas()[0].focus();
+        await usuario.keyboard("12");
+        expect(aoCompletar).not.toHaveBeenCalled();
+        await usuario.keyboard("3");
+        expect(aoCompletar).toHaveBeenCalledWith("123");
+    });
+    it("Backspace apaga o caractere e, em caixa vazia, volta e apaga o anterior", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "123", onChange: aoMudar }));
+        caixas()[3].focus();
+        await usuario.keyboard("{Backspace}");
+        expect(aoMudar).toHaveBeenLastCalledWith("12");
+        expect(caixas()[2]).toHaveFocus();
+        await usuario.keyboard("{Backspace}");
+        expect(aoMudar).toHaveBeenLastCalledWith("1");
+    });
+    it("setas, Home e End movem o foco", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "1234" }));
+        caixas()[4].focus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(caixas()[3]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(caixas()[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(caixas()[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(caixas()[4]).toHaveFocus();
+    });
+    it("focar uma caixa à frente da primeira vazia volta para ela (sem buraco)", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "12" }));
+        await usuario.click(caixas()[5]);
+        expect(caixas()[2]).toHaveFocus();
+    });
+    it("controlado: reflete o value e escreve no pai", async () => {
+        const usuario = userEvent.setup();
+        function Pai() {
+            const [codigo, setCodigo] = useState("");
+            return (_jsxs(_Fragment, { children: [_jsx(OtpInput, { ariaLabel: "C\u00F3digo", value: codigo, onChange: setCodigo }), _jsx("output", { "data-testid": "codigo", children: codigo })] }));
+        }
+        render(_jsx(Pai, {}));
+        caixas()[0].focus();
+        await usuario.keyboard("90");
+        expect(screen.getByTestId("codigo")).toHaveTextContent("90");
+        expect(caixas()[1].value).toBe("0");
+    });
+    it("errorMessage liga o estado de erro e descreve as caixas", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", errorMessage: "C\u00F3digo inv\u00E1lido", id: "otp" }));
+        expect(screen.getByText("Código inválido")).toBeInTheDocument();
+        for (const c of caixas()) {
+            expect(c).toHaveAttribute("aria-invalid", "true");
+            expect(c).toHaveAttribute("aria-describedby", "otp-error");
+        }
+    });
+    it("disabled desabilita todas as caixas; label visível nomeia o grupo", () => {
+        render(_jsx(OtpInput, { label: "C\u00F3digo do app", disabled: true, id: "o" }));
+        for (const c of caixas())
+            expect(c).toBeDisabled();
+        expect(screen.getByRole("group", { name: "Código do app" })).toBeInTheDocument();
+    });
+    it("autoFocus foca a primeira caixa vazia", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", autoFocus: true, defaultValue: "12" }));
+        expect(caixas()[2]).toHaveFocus();
+    });
+});

package/dist/teste/PopoverMaxHeight.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/PopoverMaxHeight.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeAll, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Popover from "../components/Popover/Popover";
+import Button from "../components/Button/Button";
+beforeAll(() => {
+    if (!globalThis.ResizeObserver) {
+        globalThis.ResizeObserver = class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    }
+});
+async function abrirCom(maxHeight) {
+    const usuario = userEvent.setup();
+    render(_jsx(Popover, { title: "Colunas", maxHeight: maxHeight, content: _jsx("p", { children: "Corpo do painel" }), children: _jsx(Button, { variant: "secondary", children: "Abrir" }) }));
+    await usuario.click(screen.getByRole("button", { name: "Abrir" }));
+    const corpo = document.querySelector(".umds-popover__body");
+    expect(corpo).not.toBeNull();
+    return corpo;
+}
+describe("Popover · maxHeight", () => {
+    it("sem a prop não escreve style no corpo (o teto de 300px do CSS segue valendo)", async () => {
+        const corpo = await abrirCom();
+        expect(corpo.getAttribute("style")).toBeNull();
+    });
+    it("número vira px", async () => {
+        expect((await abrirCom(180)).style.maxHeight).toBe("180px");
+    });
+    it("texto vai como CSS", async () => {
+        expect((await abrirCom("60vh")).style.maxHeight).toBe("60vh");
+    });
+    it("none deixa o corpo crescer", async () => {
+        expect((await abrirCom("none")).style.maxHeight).toBe("none");
+    });
+});

package/dist/teste/RichTextEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/RichTextEditor.test.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { enderecoSeguro, normalizarEndereco, sanitizarHtml } from "../utils/html-seguro";
+/** jsdom não traz `execCommand`: o teste fala com um espião e confere o que o editor pede ao navegador. */
+let execCommand;
+let estados;
+beforeEach(() => {
+    estados = {};
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = (comando) => !!estados[comando];
+});
+const area = () => screen.getByRole("textbox");
+/** Escreve na área como o navegador faz: muda o conteúdo e dispara `input`. */
+const escrever = (html) => {
+    area().innerHTML = html;
+    fireEvent.input(area());
+};
+const selecionarTudoNaArea = () => {
+    const selecao = window.getSelection();
+    const faixa = document.createRange();
+    faixa.selectNodeContents(area());
+    selecao.removeAllRanges();
+    selecao.addRange(faixa);
+};
+describe("RichTextEditor: estrutura e nomes", () => {
+    it("a barra é um toolbar nomeado com as ferramentas padrão", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "Despacho" }));
+        const barra = screen.getByRole("toolbar", { name: "Formatação" });
+        for (const nome of ["Negrito", "Itálico", "Sublinhado", "Lista com marcadores", "Lista numerada", "Link", "Desfazer", "Refazer"]) {
+            expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+        }
+        expect(barra.querySelectorAll('[role="separator"]')).toHaveLength(3);
+        expect(screen.queryByRole("button", { name: "Tachado" })).toBeNull();
+    });
+    it("a área de escrita é um textbox multilinha com nome e placeholder", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "Despacho", placeholder: "Escreva o despacho..." }));
+        const caixa = screen.getByRole("textbox", { name: "Despacho" });
+        expect(caixa).toHaveAttribute("aria-multiline", "true");
+        expect(caixa).toHaveAttribute("contenteditable", "true");
+        expect(caixa).toHaveAttribute("data-placeholder", "Escreva o despacho...");
+    });
+    it("label visível nomeia a área", () => {
+        render(_jsx(RichTextEditor, { label: "Descri\u00E7\u00E3o", id: "rte" }));
+        expect(screen.getByRole("textbox", { name: "Descrição" })).toBeInTheDocument();
+    });
+    it("toolbar escolhe as ferramentas e os separadores", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "|", "strike", "clear"] }));
+        expect(screen.getAllByRole("button").map((b) => b.getAttribute("aria-label"))).toEqual(["Negrito", "Tachado", "Limpar formatação"]);
+        expect(screen.getByRole("toolbar").querySelectorAll('[role="separator"]')).toHaveLength(1);
+    });
+    it("labels e toolbarLabel traduzem a barra", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbarLabel: "Formatting", toolbar: ["bold", "link"], labels: { bold: "Bold", link: "Link (Ctrl+K)" } }));
+        expect(screen.getByRole("toolbar", { name: "Formatting" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Bold" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Link (Ctrl+K)" })).toBeInTheDocument();
+    });
+    it("errorMessage e helperText ligam a área por aria-describedby", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", id: "r", errorMessage: "Escreva o despacho", helperText: "Obrigat\u00F3rio" }));
+        expect(area()).toHaveAttribute("aria-invalid", "true");
+        expect(area().getAttribute("aria-describedby")).toBe("r-error r-helper");
+        expect(screen.getByText("Escreva o despacho")).toBeInTheDocument();
+    });
+    it("minHeight e resizable", () => {
+        const { container } = render(_jsx(RichTextEditor, { ariaLabel: "x", minHeight: 200, resizable: true }));
+        expect(area().style.minHeight).toBe("200px");
+        expect(container.querySelector(".umds-rte--resizable")).not.toBeNull();
+    });
+    it("o slot footer aparece dentro da moldura", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", footer: _jsx("span", { "data-testid": "assinatura", children: "Ana Paula Souza" }) }));
+        expect(screen.getByTestId("assinatura").closest(".umds-rte__footer")).not.toBeNull();
+    });
+});
+describe("RichTextEditor: valor e higienização", () => {
+    it("defaultValue entra na área", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>Ol\u00E1 <b>mundo</b></p>" }));
+        expect(area().innerHTML).toBe("<p>Olá <b>mundo</b></p>");
+    });
+    it("o HTML que entra é higienizado: sem script, onerror, style nem javascript:", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: '<p style="color:red" class="x" onclick="a()">ok</p><script>alert(1)</script><img src=x onerror="alert(1)"><a href="javascript:alert(1)">mau</a><a href="https://1doc.com.br">bom</a>' }));
+        const html = area().innerHTML;
+        expect(html).not.toMatch(/script|onerror|onclick|style=|class=|javascript:|<img/i);
+        expect(html).toContain('<a href="https://1doc.com.br" rel="noopener noreferrer">bom</a>');
+        expect(html).toContain("<p>ok</p>");
+        expect(html).toContain("mau");
+    });
+    it("digitar entrega o HTML em onChange; apagar tudo entrega vazio", () => {
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", onChange: aoMudar }));
+        escrever("<b>Oi</b>");
+        expect(aoMudar).toHaveBeenLastCalledWith("<b>Oi</b>");
+        escrever("<br>");
+        expect(aoMudar).toHaveBeenLastCalledWith("");
+        expect(area().innerHTML).toBe("");
+    });
+    it("colar entra como texto puro (insertText) e não deixa o HTML colado passar", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        const evento = new Event("paste", { bubbles: true, cancelable: true });
+        Object.defineProperty(evento, "clipboardData", { value: { getData: (tipo) => (tipo === "text/plain" ? "texto puro" : "<b>html</b>") } });
+        area().dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+        expect(execCommand).toHaveBeenCalledWith("insertText", false, "texto puro");
+    });
+    it("controlado: um value novo de fora reescreve; o mesmo que o editor emitiu não", () => {
+        function Pai() {
+            const [html, setHtml] = useState("<p>um</p>");
+            return (_jsxs(_Fragment, { children: [_jsx(RichTextEditor, { ariaLabel: "x", value: html, onChange: setHtml }), _jsx("button", { onClick: () => setHtml("<p>dois</p>"), children: "trocar" })] }));
+        }
+        render(_jsx(Pai, {}));
+        expect(area().innerHTML).toBe("<p>um</p>");
+        escrever("<p>um mais</p>");
+        expect(area().innerHTML).toBe("<p>um mais</p>");
+        fireEvent.click(screen.getByText("trocar"));
+        expect(area().innerHTML).toBe("<p>dois</p>");
+    });
+});
+describe("RichTextEditor: ferramentas", () => {
+    it("clicar em Negrito pede o comando ao navegador e avisa onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", onChange: aoMudar, defaultValue: "<p>x</p>" }));
+        await usuario.click(screen.getByRole("button", { name: "Negrito" }));
+        expect(execCommand).toHaveBeenCalledWith("bold", false, undefined);
+        expect(aoMudar).toHaveBeenCalled();
+    });
+    it("cada ferramenta pede o seu comando", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "italic", "underline", "strike", "ul", "ol", "undo", "redo", "clear"] }));
+        const esperado = {
+            Negrito: "bold",
+            Itálico: "italic",
+            Sublinhado: "underline",
+            Tachado: "strikeThrough",
+            "Lista com marcadores": "insertUnorderedList",
+            "Lista numerada": "insertOrderedList",
+            Desfazer: "undo",
+            Refazer: "redo",
+            "Limpar formatação": "removeFormat",
+        };
+        for (const [nome, comando] of Object.entries(esperado)) {
+            execCommand.mockClear();
+            await usuario.click(screen.getByRole("button", { name: nome }));
+            expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+        }
+    });
+    it("o clique na barra não rouba o foco da área (mousedown é impedido)", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        const evento = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+        screen.getByRole("button", { name: "Negrito" }).dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+    it("os botões de liga/desliga seguem o cursor (aria-pressed)", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>x</p>" }));
+        const negrito = screen.getByRole("button", { name: "Negrito" });
+        expect(negrito).toHaveAttribute("aria-pressed", "false");
+        estados.bold = true;
+        selecionarTudoNaArea();
+        fireEvent(document, new Event("selectionchange"));
+        expect(negrito).toHaveAttribute("aria-pressed", "true");
+        expect(negrito).toHaveClass("umds-rte__tool--active");
+        expect(screen.getByRole("button", { name: "Itálico" })).toHaveAttribute("aria-pressed", "false");
+        expect(screen.getByRole("button", { name: "Link" })).not.toHaveAttribute("aria-pressed");
+    });
+    it("Tab entra numa parada só; setas, Home e End movem entre as ferramentas", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold", "italic", "underline"] }));
+        const botoes = screen.getAllByRole("button");
+        expect(botoes.map((b) => b.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+        botoes[0].focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(botoes[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(botoes[2]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(botoes[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(botoes[2]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(botoes[0]).toHaveFocus();
+    });
+    it("readOnly: sem barra e a área não edita; disabled: botões desabilitados", () => {
+        const { rerender } = render(_jsx(RichTextEditor, { ariaLabel: "x", readOnly: true, defaultValue: "<p>x</p>" }));
+        expect(screen.queryByRole("toolbar")).toBeNull();
+        expect(area()).toHaveAttribute("contenteditable", "false");
+        rerender(_jsx(RichTextEditor, { ariaLabel: "x", disabled: true }));
+        for (const b of screen.getAllByRole("button"))
+            expect(b).toBeDisabled();
+        expect(area()).toHaveAttribute("tabindex", "-1");
+    });
+});
+describe("RichTextEditor: link", () => {
+    it("o botão Link abre o campo, com foco nele; Esc fecha", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        const campo = screen.getByLabelText("Endereço do link");
+        expect(campo).toHaveFocus();
+        await usuario.keyboard("{Escape}");
+        expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+    });
+    it("Ctrl+K abre o campo de link", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        fireEvent.keyDown(area(), { key: "k", ctrlKey: true });
+        expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+    });
+    it("com texto escolhido, aplicar cria o link; endereço sem esquema ganha https://", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        selecionarTudoNaArea();
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "exemplo.com.br");
+        await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+        expect(execCommand).toHaveBeenCalledWith("createLink", false, "https://exemplo.com.br");
+        expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+    });
+    it("sem texto escolhido, o endereço vira o texto do link", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        const selecao = window.getSelection();
+        const faixa = document.createRange();
+        faixa.setStart(area().querySelector("p").firstChild, 2);
+        faixa.collapse(true);
+        selecao.removeAllRanges();
+        selecao.addRange(faixa);
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "https://1doc.com.br{Enter}");
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<a href="https://1doc.com.br">https://1doc.com.br</a>');
+    });
+    it("endereço perigoso não vira link: mostra o erro e continua aberto", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: "<p>texto</p>" }));
+        selecionarTudoNaArea();
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        await usuario.type(screen.getByLabelText("Endereço do link"), "javascript:alert(1)");
+        await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+        expect(execCommand).not.toHaveBeenCalledWith("createLink", expect.anything(), expect.anything());
+        expect(screen.getByText("Use um endereço http, https, mailto ou tel.")).toBeInTheDocument();
+        expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+    });
+    it("em cima de um link existente, o campo vem preenchido e Remover link aparece", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", defaultValue: '<p><a href="https://1doc.com.br">site</a></p>' }));
+        const selecao = window.getSelection();
+        const faixa = document.createRange();
+        faixa.setStart(area().querySelector("a").firstChild, 1);
+        faixa.collapse(true);
+        selecao.removeAllRanges();
+        selecao.addRange(faixa);
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        expect(screen.getByLabelText("Endereço do link")).toHaveValue("https://1doc.com.br");
+        await usuario.click(screen.getByRole("button", { name: "Remover link" }));
+        expect(execCommand).toHaveBeenCalledWith("unlink", false, undefined);
+    });
+    it("os textos do campo de link vêm por labels", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", labels: { linkAddress: "Link address", linkApply: "Apply", linkCancel: "Cancel" } }));
+        await usuario.click(screen.getByRole("button", { name: "Link" }));
+        expect(screen.getByLabelText("Link address")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+    });
+});
+describe("html-seguro", () => {
+    it("enderecoSeguro aceita http, https, mailto, tel, caminho e âncora; recusa o resto", () => {
+        for (const ok of ["https://a.com", "http://a.com", "mailto:a@b.com", "tel:+5584999999999", "/x", "./x", "../x", "#topo"]) {
+            expect(enderecoSeguro(ok)).toBe(ok);
+        }
+        for (const mau of ["javascript:alert(1)", "JaVaScRiPt:alert(1)", "java\nscript:alert(1)", "data:text/html,x", "vbscript:x", "exemplo.com"]) {
+            expect(enderecoSeguro(mau)).toBe("");
+        }
+    });
+    it("normalizarEndereco põe https:// no que não tem esquema e recusa o perigoso", () => {
+        expect(normalizarEndereco("exemplo.com.br")).toBe("https://exemplo.com.br");
+        expect(normalizarEndereco("  https://a.com ")).toBe("https://a.com");
+        expect(normalizarEndereco("javascript:alert(1)")).toBe("");
+        expect(normalizarEndereco("java\tscript:alert(1)")).toBe("");
+        expect(normalizarEndereco("")).toBe("");
+    });
+    it("sanitizarHtml tira tags desconhecidas mantendo o conteúdo e descarta as perigosas inteiras", () => {
+        expect(sanitizarHtml("<font color=red>a</font><iframe src=x>b</iframe><style>p{}</style>c")).toBe("ac");
+        expect(sanitizarHtml("<ul><li>um</li><li><b>dois</b></li></ul>")).toBe("<ul><li>um</li><li><b>dois</b></li></ul>");
+    });
+});

package/dist/teste/RotulosTraduziveis.test.d.ts

@@ -0,0 +1 @@
+export {};