@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/teste/Dropdown.test.js

@@ -156,3 +156,114 @@ describe("Dropdown · modo controlado", () => {
         await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
     });
 });
+describe("Dropdown · teclado", () => {
+    /**
+     * No React gerado, `moveActive` lia `activeIndex` do closure do render — o
+     * valor ANTERIOR ao `setActiveIndex` que acabara de ser chamado. Assim o End
+     * partia do índice velho e marcava o penúltimo, e o foco ia para o item que
+     * estava ativo antes da tecla, um passo atrás. O Vue não sofria disso porque
+     * lá o `ref` muda na hora. Estes testes prendem o comportamento dos dois.
+     */
+    const ITENS_COM_DESABILITADO = [
+        { key: "editar", label: "Editar" },
+        { key: "arquivar", label: "Arquivar", disabled: true },
+        { key: "duplicar", label: "Duplicar" },
+        { key: "excluir", label: "Excluir", danger: true },
+    ];
+    const item = (nome) => screen.getByRole("menuitem", { name: nome });
+    it("ArrowDown no gatilho abre e leva o foco ao primeiro item", async () => {
+        const usuario = userEvent.setup();
+        render(menu());
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+    });
+    it("ArrowUp no gatilho abre e leva o foco ao último item", async () => {
+        const usuario = userEvent.setup();
+        render(menu());
+        gatilho().focus();
+        await usuario.keyboard("{ArrowUp}");
+        await waitFor(() => expect(item("Excluir")).toHaveFocus());
+    });
+    it("as setas movem o foco item a item, com volta nas pontas", async () => {
+        const usuario = userEvent.setup();
+        render(menu());
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("Duplicar")).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("Excluir")).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("Editar")).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(item("Excluir")).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(item("Duplicar")).toHaveFocus();
+    });
+    it("Home e End vão ao primeiro e ao último item", async () => {
+        const usuario = userEvent.setup();
+        render(menu());
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+        await usuario.keyboard("{End}");
+        expect(item("Excluir")).toHaveFocus();
+        // End de novo, já no último: continua no último (era aqui que o React
+        // marcava o penúltimo).
+        await usuario.keyboard("{End}");
+        expect(item("Excluir")).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(item("Editar")).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(item("Editar")).toHaveFocus();
+    });
+    it("item desabilitado é pulado pelas setas", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(Dropdown, { items: ITENS_COM_DESABILITADO, ariaLabel: "A\u00E7\u00F5es", children: _jsx(Button, { variant: "secondary", children: "Abrir" }) }));
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("Duplicar")).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(item("Editar")).toHaveFocus();
+    });
+    it("Enter ativa o item com foco", async () => {
+        const usuario = userEvent.setup();
+        const aoSelecionar = vi.fn();
+        render(menu({ onSelect: aoSelecionar }));
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+        await usuario.keyboard("{ArrowDown}");
+        await usuario.keyboard("{Enter}");
+        expect(aoSelecionar).toHaveBeenCalledTimes(1);
+        expect(aoSelecionar).toHaveBeenCalledWith(expect.objectContaining({ key: "duplicar" }));
+        await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+        expect(gatilho()).toHaveFocus();
+    });
+    it("Espaço ativa o item com foco", async () => {
+        const usuario = userEvent.setup();
+        const aoSelecionar = vi.fn();
+        render(menu({ onSelect: aoSelecionar }));
+        gatilho().focus();
+        await usuario.keyboard("{ArrowUp}");
+        await waitFor(() => expect(item("Excluir")).toHaveFocus());
+        await usuario.keyboard(" ");
+        expect(aoSelecionar).toHaveBeenCalledTimes(1);
+        expect(aoSelecionar).toHaveBeenCalledWith(expect.objectContaining({ key: "excluir" }));
+    });
+    it("Esc fecha depois de navegar e devolve o foco ao gatilho", async () => {
+        const usuario = userEvent.setup();
+        render(menu());
+        gatilho().focus();
+        await usuario.keyboard("{ArrowDown}");
+        await waitFor(() => expect(item("Editar")).toHaveFocus());
+        await usuario.keyboard("{ArrowDown}");
+        await usuario.keyboard("{Escape}");
+        await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+        expect(gatilho()).toHaveFocus();
+    });
+});

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

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

package/dist/teste/FileInputTrigger.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import FileInput from "../components/FileInput/FileInput";
+const arquivo = (nome) => new File(["conteudo"], nome, { type: "application/pdf" });
+describe("FileInput · variant trigger", () => {
+    it("renderiza o conteúdo como gatilho, sem a caixa de arrastar", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        expect(screen.getByRole("button", { name: "Anexar arquivo" })).toBeInTheDocument();
+        expect(container.querySelector(".umds-file-input__drop-zone")).toBeNull();
+        expect(container.querySelector(".umds-file-input--trigger")).not.toBeNull();
+    });
+    it("clicar no conteúdo abre o seletor (clique no input nativo)", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", children: _jsx("button", { type: "button", children: "Anexar arquivo" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByRole("button", { name: "Anexar arquivo" }));
+        expect(clique).toHaveBeenCalledTimes(1);
+    });
+    it("disabled não abre o seletor", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", disabled: true, children: _jsx("span", { children: "Alterar foto" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        const clique = vi.spyOn(nativo, "click");
+        fireEvent.click(screen.getByText("Alterar foto"));
+        expect(clique).not.toHaveBeenCalled();
+    });
+    it("escolher arquivos chama onChange, e accept e multiple chegam ao input", () => {
+        const aoMudar = vi.fn();
+        const { container } = render(_jsx(FileInput, { variant: "trigger", accept: ".pdf", multiple: true, onChange: aoMudar, children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("accept", ".pdf");
+        expect(nativo).toHaveAttribute("multiple");
+        fireEvent.change(nativo, { target: { files: [arquivo("a.pdf"), arquivo("b.pdf")] } });
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar.mock.calls[0][0].map((f) => f.name)).toEqual(["a.pdf", "b.pdf"]);
+    });
+    it("o input nativo não entra no Tab e tem nome acessível", () => {
+        const { container } = render(_jsx(FileInput, { variant: "trigger", label: "Anexar arquivo", children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        const nativo = container.querySelector('input[type="file"]');
+        expect(nativo).toHaveAttribute("tabindex", "-1");
+        expect(nativo).toHaveAttribute("aria-label", "Anexar arquivo");
+        // o rótulo visível não aparece: o gatilho é o conteúdo
+        expect(container.querySelector(".umds-file-input__label")).toBeNull();
+    });
+    it("a lista de arquivos continua aparecendo no modo trigger", () => {
+        render(_jsx(FileInput, { variant: "trigger", files: [{ name: "oficio.pdf", size: 2048 }], children: _jsx("button", { type: "button", children: "Anexar" }) }));
+        expect(screen.getByText("oficio.pdf")).toBeInTheDocument();
+    });
+    it("as variantes base e card seguem com a caixa", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(FileInput, { variant: "base" }), _jsx(FileInput, { variant: "card" })] }));
+        expect(container.querySelectorAll(".umds-file-input__drop-zone")).toHaveLength(2);
+    });
+});

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

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

package/dist/teste/IconPicker.test.js

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

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

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

package/dist/teste/InputMascaraEAfins.test.js

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

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

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

package/dist/teste/KbdCodeBlock.test.js

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

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

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