@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/teste/List.test.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025" }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Of\u00EDcio", href: "/oficios/31", target: "_blank" }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Somente leitura" }) }));
+        const linha = container.querySelector(".umds-list-item");
+        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(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Acion\u00E1vel", onClick: aoClicar }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025", subtitle: "Novo contrato - Governo", meta: "23 de agosto de 2025", start: _jsx("span", { "data-testid": "inicio", children: "AV" }), end: _jsx("span", { "data-testid": "fim", children: "novo" }), children: _jsx("span", { "data-testid": "livre", children: "conte\u00FAdo livre" }) }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: _jsx("b", { "data-testid": "rico", children: "Rico" }) }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "S\u00F3 t\u00EDtulo" }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Atual", selected: true }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Bloqueada", disabled: true, onClick: aoClicar }) }));
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Link bloqueado", href: "/x", disabled: true }) }));
+        const link = screen.getByText("Link bloqueado").closest("a");
+        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(_jsx("ul", { children: _jsx(ListItem, { title: "Abrir", onClick: aoClicar }) }));
+        await usuario.click(screen.getByRole("button", { name: /Abrir/ }));
+        expect(aoClicar).toHaveBeenCalledTimes(1);
+    });
+    it("repassa aria-label, id, data-* e style ao elemento interativo", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { "aria-label": "Abrir memorando", id: "item-1", "data-origem": "home", style: { marginTop: 4 } }) }));
+        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(_jsxs(List, { ariaLabel: "Documentos n\u00E3o lidos", children: [_jsx(ListItem, { title: "A" }), _jsx(ListItem, { title: "B" })] }));
+        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(_jsx(List, { as: "ol", gap: "nano", ariaLabel: "Passos", children: _jsx(ListItem, { title: "A" }) }));
+        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(_jsxs(_Fragment, { children: [_jsx("h2", { id: "titulo", children: "Prazos a vencer" }), _jsx(List, { ariaLabelledby: "titulo", children: _jsx(ListItem, { title: "A" }) })] }));
+        expect(screen.getByRole("list", { name: "Prazos a vencer" })).toBeInTheDocument();
+    });
+    it("sem isEmpty mostra os itens e nunca o estado vazio", () => {
+        render(_jsx(List, { ariaLabel: "Lista", emptyTitle: "Nada aqui", children: _jsx(ListItem, { title: "A" }) }));
+        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(_jsx(List, { ariaLabel: "Lista", isEmpty: true, emptyTitle: "Nenhum documento", emptyDescription: "Tudo em dia.", emptyIcon: faInbox, emptyActionLabel: "Atualizar", onEmptyAction: aoAgir, children: _jsx(ListItem, { title: "N\u00E3o aparece" }) }));
+        expect(screen.queryByRole("list")).toBeNull();
+        expect(screen.queryByText("Não aparece")).toBeNull();
+        const raiz = container.firstElementChild;
+        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(_jsx(List, { ariaLabel: "Lista", isEmpty: true }));
+        expect(screen.getByText("Nenhum item encontrado")).toBeInTheDocument();
+    });
+    it("o conteúdo ao redor da lista não é desmontado ao esvaziar", () => {
+        const Tela = ({ vazia }) => (_jsxs("section", { children: [_jsx("h2", { children: "Documentos" }), _jsx("input", { "aria-label": "Buscar" }), _jsx(List, { ariaLabel: "Documentos", isEmpty: vazia, children: _jsx(ListItem, { title: "A" }) }), _jsx("nav", { "aria-label": "Pagina\u00E7\u00E3o", children: "p\u00E1g. 1" })] }));
+        const { rerender } = render(_jsx(Tela, { vazia: false }));
+        const busca = screen.getByLabelText("Buscar");
+        rerender(_jsx(Tela, { vazia: true }));
+        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(_jsx(List, { ariaLabel: "Lista", isEmpty: true, empty: _jsx("p", { "data-testid": "vazio", children: "Nada por aqui" }) }));
+        expect(screen.getByTestId("vazio")).toBeInTheDocument();
+        expect(document.querySelector(".umds-empty-state")).toBeNull();
+    });
+});

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

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

package/dist/teste/ModalVariantes.test.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Modal from "../components/Modal/Modal";
+import Select from "../components/Select/Select";
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+/** Troca `window.matchMedia` por um que responde `matches` e deixa disparar `change`. */
+function simularTela(matches) {
+    const ouvintes = new Set();
+    vi.stubGlobal("matchMedia", (consulta) => ({
+        matches,
+        media: consulta,
+        addEventListener: (_, fn) => ouvintes.add(fn),
+        removeEventListener: (_, fn) => ouvintes.delete(fn),
+    }));
+    return (novo) => ouvintes.forEach((fn) => fn({ matches: novo }));
+}
+describe("Modal · variant primary", () => {
+    it("fica no modal base (três faixas), com a classe do cabeçalho cheio", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "primary", title: "Resolver tarefa" }));
+        const dialogo = screen.getByRole("dialog", { name: "Resolver tarefa" });
+        expect(dialogo).toHaveClass("umds-modal--primary", "umds-modal--base");
+        expect(dialogo).not.toHaveClass("umds-modal--feedback");
+        expect(dialogo.querySelector(".umds-modal__header")).not.toBeNull();
+        expect(dialogo.querySelector(".umds-modal__icon")).toBeNull();
+    });
+    it("positive continua sendo diálogo de feedback", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "positive", title: "Pronto" }));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--feedback");
+    });
+});
+describe("Modal · width e maxWidth", () => {
+    it("escreve a largura e, sem maxWidth, solta o teto do size", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px" }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo.style.width).toBe("600px");
+        expect(dialogo.style.maxWidth).toBe("100%");
+    });
+    it("maxWidth explícito vale", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "90%", maxWidth: "720px" }));
+        expect(screen.getByRole("dialog").style.maxWidth).toBe("720px");
+    });
+    it("sem width nem maxWidth não escreve style", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog").getAttribute("style")).toBeNull();
+    });
+});
+describe("Modal · Escape", () => {
+    it("fecha com Escape no borbulho", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("não fecha quando outro componente já consumiu a tecla (defaultPrevented)", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        const consumidor = document.createElement("div");
+        consumidor.addEventListener("keydown", (e) => e.preventDefault());
+        document.body.appendChild(consumidor);
+        fireEvent.keyDown(consumidor, { key: "Escape" });
+        expect(aoFechar).not.toHaveBeenCalled();
+        consumidor.remove();
+    });
+    it("Select aberto dentro do modal fecha só a lista, e o modal fica", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar, children: _jsx(Select, { label: "Categoria", options: [{ label: "Administrativa", value: "adm" }] }) }));
+        const gatilho = screen.getByRole("combobox");
+        fireEvent.click(gatilho);
+        expect(gatilho).toHaveAttribute("aria-expanded", "true");
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(gatilho).toHaveAttribute("aria-expanded", "false");
+        expect(aoFechar).not.toHaveBeenCalled();
+        // Com o Select fechado, o Esc seguinte é do modal.
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · controles de janela escolhidos um a um", () => {
+    it("true liga os quatro, como antes", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: true }));
+        for (const nome of ["Modo normal", "Expandir", "Tela cheia", "Minimizar"]) {
+            expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+        }
+    });
+    it("lista escolhe só os pedidos, sem minimizar", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["expand", "fullscreen"] }));
+        expect(screen.getByRole("button", { name: "Expandir" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Tela cheia" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Minimizar" })).toBeNull();
+        expect(screen.queryByRole("button", { name: "Modo normal" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem windowControls só há o ×", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem o botão normal, clicar de novo no modo ativo volta ao normal; e o normal usa o tamanho do modal", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px", windowControls: ["expand"] }));
+        const dialogo = screen.getByRole("dialog");
+        const expandir = screen.getByRole("button", { name: "Expandir" });
+        expect(dialogo).not.toHaveClass("umds-modal--janela-normal");
+        expect(dialogo.style.width).toBe("600px");
+        fireEvent.click(expandir);
+        expect(dialogo).toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("");
+        fireEvent.click(expandir);
+        expect(dialogo).not.toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("600px");
+    });
+    it("minimizar chama onMinimize", () => {
+        const aoMinimizar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["minimize"], onMinimize: aoMinimizar }));
+        fireEvent.click(screen.getByRole("button", { name: "Minimizar" }));
+        expect(aoMinimizar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · responsive", () => {
+    it("em tela larga continua centralizado", () => {
+        simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("em tela estreita vira painel de baixo, sem controles de janela e sem a largura livre", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true, width: "600px", windowControls: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).toHaveClass("umds-modal--sheet");
+        expect(dialogo.style.width).toBe("");
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(dialogo.querySelector(".umds-modal__grabber")).not.toBeNull();
+    });
+    it("acompanha a mudança de tamanho da tela", () => {
+        const mudar = simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).not.toHaveClass("umds-modal--sheet");
+        act(() => mudar(true));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--sheet");
+        act(() => mudar(false));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("sem responsive nunca vira painel", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+});

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

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

package/dist/teste/NomeAcessivelSsr.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+import Select from "../components/Select/Select";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+/**
+ * Select, MultiSelect e SegmentedControl nascem SEM id automático (utils/id):
+ * o id só é gerado no onMount, para o servidor e a primeira renderização do
+ * cliente saírem idênticos. Só que o nome acessível deles vinha de
+ * `aria-labelledby` apontando para esse id — no HTML do servidor, e até a
+ * hidratação, o combobox ficava sem nome (axe `aria-input-field-name`, visto
+ * no portal Astro com `client:visible`).
+ *
+ * Aqui o HTML sai do `renderToString`, que não dispara o onMount, e vai para
+ * o DOM do jsdom como o navegador receberia. O nome é conferido pelo cálculo
+ * do Testing Library, o mesmo algoritmo de nome acessível que o axe usa.
+ */
+const OPCOES = [
+    { label: "Recursos Humanos", value: "rh" },
+    { label: "Financeiro", value: "fin" },
+];
+const POR_PAGINA = [
+    { label: "10", value: "10" },
+    { label: "25", value: "25" },
+];
+function comoDoServidor(html) {
+    const raiz = document.createElement("div");
+    raiz.innerHTML = html;
+    document.body.appendChild(raiz);
+    return raiz;
+}
+describe("Nome acessível no HTML do servidor", () => {
+    // As raízes são montadas à mão (fora do render), e o cleanup global não as vê.
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+    it("Select: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", options: OPCOES })));
+        const campo = screen.getByRole("combobox", { name: "Setor" });
+        expect(campo).not.toHaveAttribute("aria-labelledby");
+        expect(campo).toHaveAttribute("aria-label", "Setor");
+    });
+    it("Select: `ariaLabel` continua valendo sobre o label", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", ariaLabel: "Setor do servidor", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setor do servidor" })).toBeInTheDocument();
+    });
+    it("Select com `id`: o servidor já liga pelo aria-labelledby", () => {
+        const html = renderToString(_jsx(Select, { id: "setor", label: "Setor", options: OPCOES }));
+        expect(html).toContain('aria-labelledby="setor-label"');
+        expect(html).not.toContain('aria-label="Setor"');
+    });
+    it("MultiSelect: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(MultiSelect, { label: "Setores", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setores" })).toBeInTheDocument();
+    });
+    it("SegmentedControl: grupo e segmentos têm nome antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })));
+        expect(screen.getByRole("radiogroup", { name: "Itens" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "10" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "25" })).toBeInTheDocument();
+    });
+    it("hidrata sem divergência e, montado, volta ao aria-labelledby", async () => {
+        const arvore = (_jsxs("div", { children: [_jsx(Select, { label: "Setor", options: OPCOES }), _jsx(MultiSelect, { label: "Setores", options: OPCOES }), _jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })] }));
+        const raiz = comoDoServidor(renderToString(arvore));
+        const erro = vi.spyOn(console, "error").mockImplementation(() => { });
+        const avisosDeHidratacao = [];
+        await act(async () => {
+            hydrateRoot(raiz, arvore, {
+                onRecoverableError: (e) => avisosDeHidratacao.push(e),
+            });
+        });
+        const chamadas = erro.mock.calls.map((c) => String(c[0]));
+        erro.mockRestore();
+        expect(avisosDeHidratacao).toEqual([]);
+        expect(chamadas.filter((c) => /hydrat|did not match/i.test(c))).toEqual([]);
+        const select = screen.getByRole("combobox", { name: "Setor" });
+        expect(select).toHaveAttribute("aria-labelledby");
+        expect(select).not.toHaveAttribute("aria-label");
+        const multi = screen.getByRole("combobox", { name: "Setores" });
+        expect(multi).toHaveAttribute("aria-labelledby");
+        const grupo = screen.getByRole("radiogroup", { name: "Itens" });
+        expect(grupo).toHaveAttribute("aria-labelledby");
+        expect(screen.getByRole("radio", { name: "10" })).not.toHaveAttribute("aria-label");
+    });
+});

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

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

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 {};