@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/teste/RotulosTraduziveis.test.js

@@ -0,0 +1,405 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AIContent from "../components/AIContent/AIContent";
+import AILabel from "../components/AILabel/AILabel";
+import AppSidebar from "../components/AppSidebar/AppSidebar";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+import AvatarGroup from "../components/Avatar/AvatarGroup";
+import BarChart from "../components/Chart/BarChart";
+import LineChart from "../components/Chart/LineChart";
+import BottomSheet from "../components/BottomSheet/BottomSheet";
+import Chips from "../components/Chips/Chips";
+import ConfirmAIAction from "../components/ConfirmAIAction/ConfirmAIAction";
+import ConfirmDialog from "../components/ConfirmDialog/ConfirmDialog";
+import DataTable from "../components/DataTable/DataTable";
+import DatePicker from "../components/DatePicker/DatePicker";
+import FileInput from "../components/FileInput/FileInput";
+import Input from "../components/Input/Input";
+import Kanban from "../components/Kanban/Kanban";
+import KanbanCard from "../components/Kanban/KanbanCard";
+import KanbanColumn from "../components/Kanban/KanbanColumn";
+import Pagination from "../components/Pagination/Pagination";
+import PhoneInput from "../components/PhoneInput/PhoneInput";
+import Stepper from "../components/Stepper/Stepper";
+import TimePicker from "../components/TimePicker/TimePicker";
+/**
+ * Rótulos traduzíveis. Cada componente tinha texto em português fixo no código
+ * (visível ou lido pelo leitor de tela), sem prop para trocar. Duas garantias
+ * por componente: SEM a prop, sai exatamente o português de antes; COM a prop,
+ * sai o texto passado. A primeira é a que protege quem já usa o DS.
+ */
+describe("Chips · removeAriaLabel", () => {
+    it("padrão em português", () => {
+        render(_jsx(Chips, { label: "Financeiro", removable: true }));
+        expect(screen.getByRole("button", { name: "Remover Financeiro" })).toBeInTheDocument();
+    });
+    it("prefixo customizado", () => {
+        render(_jsx(Chips, { label: "Finance", removable: true, removeAriaLabel: "Remove" }));
+        expect(screen.getByRole("button", { name: "Remove Finance" })).toBeInTheDocument();
+    });
+});
+describe("Stepper · estados lidos", () => {
+    const passos = [
+        { title: "A", status: "completed" },
+        { title: "B", status: "active" },
+        { title: "C", status: "error" },
+        { title: "D", status: "pending" },
+    ];
+    it("padrão em português", () => {
+        render(_jsx(Stepper, { steps: passos }));
+        for (const nome of ["A, concluído", "B, atual", "C, erro", "D, pendente"]) {
+            expect(screen.getByRole("listitem", { name: nome })).toBeInTheDocument();
+        }
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(Stepper, { steps: passos, completedLabel: "completed", activeLabel: "current", errorLabel: "failed", pendingLabel: "pending" }));
+        for (const nome of ["A, completed", "B, current", "C, failed", "D, pending"]) {
+            expect(screen.getByRole("listitem", { name: nome })).toBeInTheDocument();
+        }
+    });
+});
+describe("FileInput · textos", () => {
+    const arquivos = [
+        { name: "a.pdf", size: 2048, status: "completed" },
+        { name: "b.pdf", size: 2048, status: "uploading", progress: 40 },
+    ];
+    it("padrão em português (base e card)", () => {
+        const { container, unmount } = render(_jsx(FileInput, { files: arquivos, maxSize: 1048576 }));
+        expect(screen.getByRole("button", { name: "Remover a.pdf" })).toBeInTheDocument();
+        expect(screen.getByRole("progressbar", { name: "Enviando b.pdf" })).toBeInTheDocument();
+        expect(screen.getByLabelText("Selecionar arquivo")).toBeInTheDocument();
+        const gatilho = container.querySelector(".umds-file-input__trigger-text");
+        expect(gatilho.textContent).toBe("Clique para selecionar ou arraste aqui");
+        expect(screen.getByText("Máximo 1.0 MB")).toBeInTheDocument();
+        unmount();
+        const card = render(_jsx(FileInput, { variant: "card" }));
+        const texto = card.container.querySelector(".umds-file-input__card-text");
+        expect(texto.textContent).toBe("Arraste e solte ou clique para escolher");
+    });
+    it("rótulos customizados", () => {
+        const { container, unmount } = render(_jsx(FileInput, { files: arquivos, maxSize: 1048576, selectFileLabel: "Select file", triggerLabel: "Click to select", triggerHint: "or drag here", maxSizeLabel: "Max", removeAriaLabel: "Remove", uploadingAriaLabel: "Uploading" }));
+        expect(screen.getByRole("button", { name: "Remove a.pdf" })).toBeInTheDocument();
+        expect(screen.getByRole("progressbar", { name: "Uploading b.pdf" })).toBeInTheDocument();
+        expect(screen.getByLabelText("Select file")).toBeInTheDocument();
+        const gatilho = container.querySelector(".umds-file-input__trigger-text");
+        expect(gatilho.textContent).toBe("Click to select or drag here");
+        expect(screen.getByText("Max 1.0 MB")).toBeInTheDocument();
+        unmount();
+        const card = render(_jsx(FileInput, { variant: "card", dropLabel: "Drag and drop", orLabel: "or", browseLabel: "click to choose" }));
+        const texto = card.container.querySelector(".umds-file-input__card-text");
+        expect(texto.textContent).toBe("Drag and drop or click to choose");
+    });
+});
+describe("AILabel · painel", () => {
+    const props = { sources: ["Fonte"], notIncluded: "Fora" };
+    it("padrão em português", () => {
+        render(_jsx(AILabel, { ...props, open: true }));
+        expect(screen.getByRole("button", { name: "Conteúdo gerado por IA" })).toBeInTheDocument();
+        expect(screen.getByText("Baseado em")).toBeInTheDocument();
+        expect(screen.getByText("Não considerado")).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(AILabel, { ...props, open: true, sourcesLabel: "Based on", notIncludedLabel: "Not considered" }));
+        expect(screen.getByText("Based on")).toBeInTheDocument();
+        expect(screen.getByText("Not considered")).toBeInTheDocument();
+    });
+});
+describe("AIContent · repasse ao selo", () => {
+    it("padrão em português", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(AIContent, { sources: ["Fonte"], notIncluded: "Fora", children: "Texto" }));
+        const selo = screen.getByRole("button", { name: "Conteúdo gerado por IA" });
+        expect(selo).toHaveTextContent("IA");
+        await usuario.click(selo);
+        expect(screen.getByText("Como isto foi gerado")).toBeInTheDocument();
+        expect(screen.getByText("Baseado em")).toBeInTheDocument();
+        expect(screen.getByText("Não considerado")).toBeInTheDocument();
+    });
+    it("rótulos customizados chegam ao AILabel", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(AIContent, { sources: ["Source"], notIncluded: "Out", label: "AI", ariaLabel: "AI-generated content", explanationTitle: "How this was generated", sourcesLabel: "Based on", notIncludedLabel: "Not considered", children: "Text" }));
+        const selo = screen.getByRole("button", { name: "AI-generated content" });
+        expect(selo).toHaveTextContent("AI");
+        await usuario.click(selo);
+        expect(screen.getByText("How this was generated")).toBeInTheDocument();
+        expect(screen.getByText("Based on")).toBeInTheDocument();
+        expect(screen.getByText("Not considered")).toBeInTheDocument();
+    });
+});
+describe("Pagination · textos", () => {
+    it("padrão em português", () => {
+        const { unmount } = render(_jsx(Pagination, { page: 1, totalPages: 5 }));
+        expect(screen.getByText("de")).toBeInTheDocument();
+        unmount();
+        const resumida = render(_jsx(Pagination, { variant: "resumed", page: 2, totalPages: 5, pageSize: 10, totalItems: 45 }));
+        expect(screen.getByText("11-20 de 45")).toBeInTheDocument();
+        resumida.unmount();
+        render(_jsx(Pagination, { variant: "full-width", page: 1, totalPages: 3 }));
+        expect(screen.getByRole("button", { name: "Página 2" })).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        const rotulos = {
+            ofLabel: "of",
+            itemRangeLabel: (a, b, t) => `${a}–${b} of ${t}`,
+            pageLabel: (n) => `Page ${n}`,
+        };
+        const { unmount } = render(_jsx(Pagination, { ...rotulos, page: 1, totalPages: 5 }));
+        expect(screen.getByText("of")).toBeInTheDocument();
+        unmount();
+        const resumida = render(_jsx(Pagination, { ...rotulos, variant: "resumed", page: 2, totalPages: 5, pageSize: 10, totalItems: 45 }));
+        expect(screen.getByText("11–20 of 45")).toBeInTheDocument();
+        resumida.unmount();
+        render(_jsx(Pagination, { ...rotulos, variant: "bordered", page: 1, totalPages: 3 }));
+        expect(screen.getByRole("button", { name: "Page 2" })).toBeInTheDocument();
+    });
+});
+describe("DataTable · seleção", () => {
+    const colunas = [{ key: "nome", label: "Nome" }];
+    const dados = [{ nome: "Ana" }, { nome: "Bia" }];
+    it("padrão em português", () => {
+        render(_jsx(DataTable, { columns: colunas, data: dados, selectable: true }));
+        expect(screen.getByRole("checkbox", { name: "Selecionar todas as linhas" })).toBeInTheDocument();
+        expect(screen.getByRole("checkbox", { name: "Selecionar linha 2" })).toBeInTheDocument();
+    });
+    it("rótulos customizados (a função recebe o número da linha a partir de 1)", () => {
+        render(_jsx(DataTable, { columns: colunas, data: dados, selectable: true, selectAllLabel: "Select all rows", selectRowLabel: (n) => `Select row ${n}` }));
+        expect(screen.getByRole("checkbox", { name: "Select all rows" })).toBeInTheDocument();
+        expect(screen.getByRole("checkbox", { name: "Select row 1" })).toBeInTheDocument();
+    });
+});
+describe("Input · senha", () => {
+    it("padrão em português", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(Input, { label: "Senha", type: "password" }));
+        await usuario.click(screen.getByRole("button", { name: "Mostrar senha" }));
+        expect(screen.getByRole("button", { name: "Ocultar senha" })).toBeInTheDocument();
+    });
+    it("rótulos customizados", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(Input, { label: "Password", type: "password", showPasswordLabel: "Show password", hidePasswordLabel: "Hide password" }));
+        await usuario.click(screen.getByRole("button", { name: "Show password" }));
+        expect(screen.getByRole("button", { name: "Hide password" })).toBeInTheDocument();
+    });
+});
+describe("AvatarGroup · excedente", () => {
+    const pessoas = ["Ana", "Bia", "Caio", "Davi", "Edu", "Fábio"].map((name) => ({ name }));
+    it("padrão em português", () => {
+        render(_jsx(AvatarGroup, { avatars: pessoas, max: 4 }));
+        const excedente = screen.getByLabelText("Mais 2 avatares");
+        expect(excedente).toHaveAttribute("title", "2 outros");
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(AvatarGroup, { avatars: pessoas, max: 4, overflowAriaLabel: (n) => `${n} more avatars`, overflowTitle: (n) => `${n} others` }));
+        const excedente = screen.getByLabelText("2 more avatars");
+        expect(excedente).toHaveAttribute("title", "2 others");
+    });
+});
+describe("AppSidebar · abrir/fechar", () => {
+    const itens = [{ id: "a", label: "Início" }];
+    it("padrão em português", () => {
+        const { rerender } = render(_jsx(AppSidebar, { items: itens }));
+        expect(screen.getByRole("button", { name: "Fechar a navegação" })).toBeInTheDocument();
+        rerender(_jsx(AppSidebar, { items: itens, collapsed: true }));
+        expect(screen.getByRole("button", { name: "Abrir a navegação" })).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        const rotulos = { expandLabel: "Open navigation", collapseLabel: "Close navigation" };
+        const { rerender } = render(_jsx(AppSidebar, { items: itens, ...rotulos }));
+        expect(screen.getByRole("button", { name: "Close navigation" })).toBeInTheDocument();
+        rerender(_jsx(AppSidebar, { items: itens, collapsed: true, ...rotulos }));
+        expect(screen.getByRole("button", { name: "Open navigation" })).toBeInTheDocument();
+    });
+});
+describe("AttachmentCard · complementos", () => {
+    const base = {
+        fileName: "cnh.pdf",
+        documentType: "CNH",
+        required: true,
+        status: "positive",
+        statusLabel: "Pré-aprovado",
+        statusDetails: { description: "Ok" },
+    };
+    it("padrão em português", () => {
+        render(_jsx(AttachmentCard, { ...base }));
+        expect(screen.getByRole("button", { name: /^Pré-aprovado.*: conferência de CNH$/ })).toBeInTheDocument();
+        expect(screen.getByText("(obrigatório)")).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(AttachmentCard, { ...base, statusLabel: "Pre-approved", statusContextLabel: (s) => `review of ${s}`, requiredLabel: "(required)" }));
+        expect(screen.getByRole("button", { name: /^Pre-approved.*: review of CNH$/ })).toBeInTheDocument();
+        expect(screen.getByText("(required)")).toBeInTheDocument();
+    });
+});
+describe("BarChart e LineChart · tabela oculta", () => {
+    const dados = [
+        { label: "A", value: 1 },
+        { label: "B", value: 2 },
+    ];
+    it("padrão em português", () => {
+        render(_jsx(BarChart, { data: dados }));
+        expect(screen.getByRole("columnheader", { name: "Categoria" })).toBeInTheDocument();
+        expect(screen.getByRole("list", { name: "Valores por categoria" })).toBeInTheDocument();
+        expect(screen.getByRole("table", { name: "Gráfico de barras" })).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(LineChart, { data: dados, title: "Cases", categoryLabel: "Category", valuesListLabel: "Values by category", typeLabel: "Line chart" }));
+        expect(screen.getByRole("columnheader", { name: "Category" })).toBeInTheDocument();
+        expect(screen.getByRole("list", { name: "Values by category — Cases" })).toBeInTheDocument();
+    });
+});
+describe("BottomSheet · alça", () => {
+    it("padrão em português", () => {
+        render(_jsx(BottomSheet, { open: true, title: "Filtros", snapPoints: [0.3, 0.6] }));
+        expect(screen.getByRole("slider", { name: "Altura do painel" })).toBeInTheDocument();
+    });
+    it("rótulo customizado", () => {
+        render(_jsx(BottomSheet, { open: true, title: "Filters", snapPoints: [0.3, 0.6], grabberLabel: "Sheet height" }));
+        expect(screen.getByRole("slider", { name: "Sheet height" })).toBeInTheDocument();
+    });
+});
+describe("ConfirmDialog · carregando", () => {
+    it("padrão em português", () => {
+        render(_jsx(ConfirmDialog, { open: true, inline: true, title: "Excluir?", confirmLoading: true }));
+        expect(screen.getByRole("button", { name: /Aguarde\.\.\./ })).toBeInTheDocument();
+    });
+    it("rótulo customizado", () => {
+        render(_jsx(ConfirmDialog, { open: true, inline: true, title: "Delete?", confirmLoading: true, loadingLabel: "Please wait..." }));
+        expect(screen.getByRole("button", { name: /Please wait\.\.\./ })).toBeInTheDocument();
+    });
+});
+describe("ConfirmAIAction · risco alto", () => {
+    it("padrão em português", () => {
+        render(_jsx(ConfirmAIAction, { open: true, risk: "alto", title: "Arquivar", affected: ["Processo 1"], typedValue: "" }));
+        expect(screen.getByText("O que será afetado")).toBeInTheDocument();
+        expect(screen.getByText("Esta ação não pode ser desfeita.")).toBeInTheDocument();
+        expect(screen.getByText("O botão de confirmar fica desabilitado até o texto conferir.")).toBeInTheDocument();
+        const rotulo = document.querySelector(".umds-confirmai__label");
+        expect(rotulo.textContent).toBe("Para confirmar, digite CONFIRMAR");
+    });
+    it("rótulos customizados", () => {
+        const rotulos = {
+            impactLabel: "What will be affected",
+            irreversibleLabel: "This action cannot be undone.",
+            typePhraseLabel: "To confirm, type",
+            phraseMatchedLabel: "Text matches.",
+            phrasePendingLabel: "Waiting for the text.",
+        };
+        const { rerender } = render(_jsx(ConfirmAIAction, { open: true, risk: "alto", title: "Archive", affected: ["Case 1"], confirmPhrase: "CONFIRM", typedValue: "", ...rotulos }));
+        expect(screen.getByText("What will be affected")).toBeInTheDocument();
+        expect(screen.getByRole("list", { name: "What will be affected" })).toBeInTheDocument();
+        expect(screen.getByText("This action cannot be undone.")).toBeInTheDocument();
+        expect(screen.getByText("Waiting for the text.")).toBeInTheDocument();
+        expect(document.querySelector(".umds-confirmai__label").textContent).toBe("To confirm, type CONFIRM");
+        rerender(_jsx(ConfirmAIAction, { open: true, risk: "alto", title: "Archive", affected: ["Case 1"], confirmPhrase: "CONFIRM", typedValue: "confirm", ...rotulos }));
+        expect(screen.getByText("Text matches.")).toBeInTheDocument();
+    });
+});
+describe("DatePicker · painel e dias", () => {
+    it("padrão em português", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(DatePicker, { label: "Data", value: "2026-07-10" }));
+        await usuario.click(screen.getByRole("combobox"));
+        const painel = await screen.findByRole("dialog", { name: "Selecionar data" });
+        expect(within(painel).getAllByRole("button", { name: /^20 de [a-zç]+ de 2026$/ }).length).toBeGreaterThan(0);
+    });
+    it("rótulos customizados", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(DatePicker, { label: "Date", value: "2026-07-10", dialogLabel: "Pick a date", dayLabel: (iso) => `day ${iso}` }));
+        await usuario.click(screen.getByRole("combobox"));
+        const painel = await screen.findByRole("dialog", { name: "Pick a date" });
+        expect(within(painel).getAllByRole("button", { name: /^day 2026-\d{2}-20$/ }).length).toBeGreaterThan(0);
+    });
+});
+describe("Kanban · textos", () => {
+    const colunas = [
+        {
+            id: "a",
+            title: "A fazer",
+            wipLimit: 2,
+            cards: [{ id: "1", title: "Cartão 1", assignee: "Ana Lima", tags: [{ label: "RH" }] }],
+        },
+        { id: "b", title: "Feito", cards: [] },
+    ];
+    it("padrão em português", async () => {
+        const usuario = userEvent.setup();
+        const { container } = render(_jsx(Kanban, { columns: colunas }));
+        const cartao = screen.getByRole("button", { name: "Cartão 1" });
+        expect(cartao).toHaveAttribute("aria-roledescription", "cartão arrastável");
+        expect(screen.getByText("Responsável: Ana Lima. Etiquetas: RH")).toBeInTheDocument();
+        expect(screen.getByText("1 de 2 cartões")).toBeInTheDocument();
+        cartao.focus();
+        await usuario.keyboard(" ");
+        const regiao = container.querySelector('[aria-live="assertive"]');
+        await waitFor(() => expect(regiao).toHaveTextContent("Cartão Cartão 1 pego. Coluna A fazer, posição 1 de 1."));
+        await usuario.keyboard("{ArrowUp}");
+        await waitFor(() => expect(regiao).toHaveTextContent("Início da coluna."));
+        await usuario.keyboard("{Escape}");
+        await waitFor(() => expect(regiao).toHaveTextContent("Movimento cancelado. Cartão Cartão 1 voltou."));
+    });
+    it("rótulos customizados", async () => {
+        const usuario = userEvent.setup();
+        const { container } = render(_jsx(Kanban, { columns: colunas, assigneeLabel: "Assignee", tagsLabel: "Tags", cardRoleDescription: "draggable card", columnCountLabel: (n, limite) => `${n}/${limite ?? "-"} cards`, announcements: {
+                position: (coluna, pos, total) => `Column ${coluna}, ${pos} of ${total}.`,
+                grabbed: (c, pos) => `Grabbed ${c}. ${pos}`,
+                columnStart: "Top of column.",
+                cancelled: (c) => `Cancelled ${c}.`,
+            } }));
+        const cartao = screen.getByRole("button", { name: "Cartão 1" });
+        expect(cartao).toHaveAttribute("aria-roledescription", "draggable card");
+        expect(screen.getByText("Assignee: Ana Lima. Tags: RH")).toBeInTheDocument();
+        expect(screen.getByText("1/2 cards")).toBeInTheDocument();
+        expect(screen.getByText("0/- cards")).toBeInTheDocument();
+        cartao.focus();
+        await usuario.keyboard(" ");
+        const regiao = container.querySelector('[aria-live="assertive"]');
+        await waitFor(() => expect(regiao).toHaveTextContent("Grabbed Cartão 1. Column A fazer, 1 of 1."));
+        await usuario.keyboard("{ArrowUp}");
+        await waitFor(() => expect(regiao).toHaveTextContent("Top of column. Column A fazer, 1 of 1."));
+        await usuario.keyboard("{Escape}");
+        await waitFor(() => expect(regiao).toHaveTextContent("Cancelled Cartão 1."));
+    });
+});
+describe("KanbanCard e KanbanColumn · avulsos", () => {
+    it("padrão em português", () => {
+        render(_jsx(KanbanColumn, { title: "Coluna", count: 1, children: _jsx(KanbanCard, { title: "T", assignee: "Ana Lima" }) }));
+        expect(screen.getByLabelText("Responsável: Ana Lima")).toBeInTheDocument();
+        expect(screen.getByText("1 cartão")).toBeInTheDocument();
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(KanbanColumn, { title: "Column", count: 3, countLabel: (n) => `${n} cards`, children: _jsx(KanbanCard, { title: "T", assignee: "Ana Lima", assigneeLabel: "Assignee" }) }));
+        expect(screen.getByLabelText("Assignee: Ana Lima")).toBeInTheDocument();
+        expect(screen.getByText("3 cards")).toBeInTheDocument();
+    });
+});
+describe("PhoneInput · copiar e países", () => {
+    it("padrão em português", () => {
+        render(_jsx(PhoneInput, { value: "11 99999-0000", country: "ES" }));
+        expect(screen.getByRole("button", { name: "Copiar número" })).toHaveAttribute("title", "Copiar");
+        expect(screen.getAllByAltText("Espanha").length).toBeGreaterThan(0);
+    });
+    it("rótulos customizados", () => {
+        render(_jsx(PhoneInput, { value: "11 99999-0000", country: "ES", copyLabel: "Copy number", copyTitle: "Copy", copiedLabel: "Copied!", countryNames: { ES: "Spain" } }));
+        expect(screen.getByRole("button", { name: "Copy number" })).toHaveAttribute("title", "Copy");
+        expect(screen.getAllByAltText("Spain").length).toBeGreaterThan(0);
+    });
+});
+describe("TimePicker · unidades", () => {
+    it("padrão em português", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(TimePicker, { label: "Hora", format: "HH:mm:ss" }));
+        await usuario.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(screen.getByText("seg")).toBeInTheDocument());
+        expect(screen.getByText("min")).toBeInTheDocument();
+        expect(screen.getByText("h")).toBeInTheDocument();
+    });
+    it("rótulos customizados", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(TimePicker, { label: "Time", format: "HH:mm:ss", hourUnitLabel: "hr", minuteUnitLabel: "mins", secondUnitLabel: "sec" }));
+        await usuario.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(screen.getByText("sec")).toBeInTheDocument());
+        expect(screen.getByText("mins")).toBeInTheDocument();
+        expect(screen.getByText("hr")).toBeInTheDocument();
+    });
+});

package/dist/teste/SegmentedControl.test.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
 import userEvent from "@testing-library/user-event";
 import { faList } from "@fortawesome/free-solid-svg-icons";
 import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
@@ -100,3 +101,35 @@ describe("SegmentedControl · acessibilidade", () => {
         expect(new Set(nomes).size).toBe(2);
     });
 });
+/**
+ * O id automático era sorteado na inicialização: um no servidor, outro no
+ * cliente, e a hidratação divergia no `for`, no `name` e no
+ * `aria-labelledby`. Duas renderizações de servidor têm de sair iguais.
+ */
+describe("SegmentedControl · ids estáveis", () => {
+    it("o HTML do servidor é determinístico", () => {
+        const html = () => renderToString(_jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA, defaultValue: "25" }));
+        expect(html()).toBe(html());
+    });
+    it("com `id`, o servidor já manda os ids e o name derivados dele", () => {
+        const html = renderToString(_jsx(SegmentedControl, { id: "por-pagina", label: "Itens", options: POR_PAGINA, errorMessage: "Escolha um" }));
+        expect(html).toContain('id="por-pagina-label"');
+        expect(html).toContain('for="por-pagina-0"');
+        expect(html).toContain('name="por-pagina"');
+        expect(html).toContain('aria-describedby="por-pagina-error"');
+    });
+    it("sem `id` nem `name`, o cliente gera um name único por grupo", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(SegmentedControl, { label: "A", options: POR_PAGINA }), _jsx(SegmentedControl, { label: "B", options: POR_PAGINA })] }));
+        const [grupoA, grupoB] = screen.getAllByRole("radiogroup");
+        const nomeA = grupoA.querySelector("input")?.getAttribute("name");
+        const nomeB = grupoB.querySelector("input")?.getAttribute("name");
+        expect(nomeA).toBeTruthy();
+        expect(nomeB).toBeTruthy();
+        expect(nomeA).not.toBe(nomeB);
+        expect(screen.getByRole("radiogroup", { name: "A" })).toBe(grupoA);
+    });
+    it("`name` explícito continua mandando no agrupamento", () => {
+        render(_jsx(SegmentedControl, { id: "x", name: "perPage", label: "Itens", options: POR_PAGINA }));
+        expect(screen.getByRole("radio", { name: "25" })).toHaveAttribute("name", "perPage");
+    });
+});

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

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

package/dist/teste/Select.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import Select from "../components/Select/Select";
+/**
+ * O foco do Select cai no trigger `role="combobox"`, não num `<select>`
+ * nativo. Então nada liga a mensagem de erro ao campo de graça: se o
+ * `aria-describedby` não estiver no combobox, o leitor de tela anuncia
+ * "Setor, caixa de combinação" e a pessoa nunca ouve POR QUE o campo está
+ * vermelho.
+ */
+const OPCOES = [
+    { label: "Recursos Humanos", value: "rh" },
+    { label: "Financeiro", value: "fin" },
+];
+describe("Select · erro e apoio ligados ao campo", () => {
+    it("a mensagem de erro descreve o combobox e o marca inválido", () => {
+        render(_jsx(Select, { label: "Setor", options: OPCOES, errorMessage: "Escolha um setor" }));
+        const campo = screen.getByRole("combobox", { name: "Setor" });
+        expect(campo).toHaveAccessibleDescription("Escolha um setor");
+        expect(campo).toHaveAttribute("aria-invalid", "true");
+    });
+    it("erro e texto de apoio entram os dois, erro primeiro", () => {
+        render(_jsx(Select, { label: "Setor", options: OPCOES, errorMessage: "Obrigat\u00F3rio", helperText: "Onde a pessoa trabalha" }));
+        expect(screen.getByRole("combobox")).toHaveAccessibleDescription("Obrigatório Onde a pessoa trabalha");
+    });
+    it("o apelido antigo `description` também é ligado", () => {
+        render(_jsx(Select, { label: "Setor", options: OPCOES, description: "Opcional" }));
+        expect(screen.getByRole("combobox")).toHaveAccessibleDescription("Opcional");
+    });
+    it("sem erro nem apoio, nada de aria-describedby ou aria-invalid", () => {
+        render(_jsx(Select, { label: "Setor", options: OPCOES }));
+        const campo = screen.getByRole("combobox");
+        expect(campo).not.toHaveAttribute("aria-describedby");
+        expect(campo).not.toHaveAttribute("aria-invalid");
+    });
+    it("`invalid` sem mensagem também marca aria-invalid", () => {
+        render(_jsx(Select, { label: "Setor", options: OPCOES, invalid: true }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true");
+    });
+    it("com `id`, os ids internos derivam dele", () => {
+        render(_jsx(Select, { id: "setor", label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-describedby", "setor-error");
+    });
+});
+describe("Select · ids na renderização do servidor", () => {
+    /**
+     * Id sorteado no render sai diferente no servidor e no cliente: a
+     * hidratação diverge e o describedby do HTML aponta para o nada. Duas
+     * renderizações de servidor têm de sair byte a byte iguais.
+     */
+    it("o HTML do servidor é determinístico", () => {
+        const html = () => renderToString(_jsx(Select, { label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(html()).toBe(html());
+    });
+    it("com `id`, o servidor já manda o describedby", () => {
+        const html = renderToString(_jsx(Select, { id: "setor", label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(html).toContain('aria-describedby="setor-error"');
+        expect(html).toContain('id="setor-error"');
+    });
+});

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

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

package/dist/teste/SelectPlacementFiltro.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+const OPCOES = [
+    { label: "Urgente", value: "urgente" },
+    { label: "Revisão", value: "revisao" },
+];
+afterEach(() => vi.restoreAllMocks());
+/** jsdom não tem layout: o gatilho "mede" o que o teste mandar. */
+function medirGatilho(topo, base, alturaDaTela) {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({ top: topo, bottom: base, left: 0, right: 0, width: 0, height: base - topo, x: 0, y: topo, toJSON() { } }));
+    Object.defineProperty(window, "innerHeight", { value: alturaDaTela, configurable: true });
+}
+describe("Select · placement", () => {
+    it("padrão abre para baixo", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+    it("top abre para cima", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "top" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    });
+    it("auto abre para cima quando falta espaço embaixo e há mais em cima", () => {
+        medirGatilho(500, 544, 600);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    });
+    it("auto abre para baixo quando cabe", () => {
+        medirGatilho(20, 64, 900);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+    it("auto abre para baixo quando falta espaço dos dois lados e embaixo é maior", () => {
+        medirGatilho(60, 104, 220);
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    });
+});
+describe("Select · variant filter", () => {
+    it("escreve a classe do filtro; sem variant não escreve", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "filter" }));
+        expect(container.querySelector(".umds-select--filter")).not.toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        expect(container.querySelector(".umds-select--filter")).toBeNull();
+    });
+    it("emptyOptionLabel vem no topo, marcada sem seleção; escolher chama onChange com vazio e volta ao placeholder", () => {
+        const aoMudar = vi.fn();
+        const { rerender } = render(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", onChange: aoMudar }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const opcoes = screen.getAllByRole("option");
+        expect(opcoes[0]).toHaveTextContent("Todos os marcadores");
+        expect(opcoes[0]).toHaveAttribute("aria-selected", "true");
+        fireEvent.click(opcoes[1]);
+        expect(aoMudar).toHaveBeenLastCalledWith("urgente");
+        rerender(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", value: "urgente", onChange: aoMudar }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Urgente");
+        fireEvent.click(screen.getByRole("combobox"));
+        fireEvent.click(screen.getAllByRole("option")[0]);
+        expect(aoMudar).toHaveBeenLastCalledWith("");
+        rerender(_jsx(Select, { ariaLabel: "Marcadores", placeholder: "Marcadores", options: OPCOES, emptyOptionLabel: "Todos os marcadores", value: "", onChange: aoMudar }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("Marcadores");
+    });
+    it("sem emptyOptionLabel não há opção extra", () => {
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getAllByRole("option")).toHaveLength(2);
+    });
+    it("footer aparece dentro da lista aberta, e não fecha ao clicar nele", () => {
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES, footer: _jsx("button", { children: "Gerenciar marcadores" }) }));
+        expect(screen.queryByText("Gerenciar marcadores")).toBeNull();
+        fireEvent.click(screen.getByRole("combobox"));
+        const acao = screen.getByText("Gerenciar marcadores");
+        expect(acao.closest(".umds-select__footer")).not.toBeNull();
+        fireEvent.mouseDown(acao);
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+    });
+    it("sem footer não há rodapé", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select__footer")).toBeNull();
+    });
+});

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

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