@1doc/1ds-react 2.7.2 → 2.9.0

package/src/teste/RotulosTraduziveis.test.tsx

@@ -0,0 +1,545 @@
+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(<Chips label="Financeiro" removable />);
+    expect(screen.getByRole("button", { name: "Remover Financeiro" })).toBeInTheDocument();
+  });
+  it("prefixo customizado", () => {
+    render(<Chips label="Finance" removable removeAriaLabel="Remove" />);
+    expect(screen.getByRole("button", { name: "Remove Finance" })).toBeInTheDocument();
+  });
+});
+
+describe("Stepper · estados lidos", () => {
+  const passos = [
+    { title: "A", status: "completed" as const },
+    { title: "B", status: "active" as const },
+    { title: "C", status: "error" as const },
+    { title: "D", status: "pending" as const },
+  ];
+  it("padrão em português", () => {
+    render(<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(
+      <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" as const },
+    { name: "b.pdf", size: 2048, status: "uploading" as const, progress: 40 },
+  ];
+  it("padrão em português (base e card)", () => {
+    const { container, unmount } = render(
+      <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(<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(
+      <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(
+      <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(<AILabel {...props} open />);
+    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(<AILabel {...props} open 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(<AIContent sources={["Fonte"]} notIncluded="Fora">Texto</AIContent>);
+    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(
+      <AIContent
+        sources={["Source"]}
+        notIncluded="Out"
+        label="AI"
+        ariaLabel="AI-generated content"
+        explanationTitle="How this was generated"
+        sourcesLabel="Based on"
+        notIncludedLabel="Not considered"
+      >
+        Text
+      </AIContent>,
+    );
+    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(<Pagination page={1} totalPages={5} />);
+    expect(screen.getByText("de")).toBeInTheDocument();
+    unmount();
+    const resumida = render(
+      <Pagination variant="resumed" page={2} totalPages={5} pageSize={10} totalItems={45} />,
+    );
+    expect(screen.getByText("11-20 de 45")).toBeInTheDocument();
+    resumida.unmount();
+    render(<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: number, b: number, t: number) => `${a}–${b} of ${t}`,
+      pageLabel: (n: number) => `Page ${n}`,
+    };
+    const { unmount } = render(<Pagination {...rotulos} page={1} totalPages={5} />);
+    expect(screen.getByText("of")).toBeInTheDocument();
+    unmount();
+    const resumida = render(
+      <Pagination {...rotulos} variant="resumed" page={2} totalPages={5} pageSize={10} totalItems={45} />,
+    );
+    expect(screen.getByText("11–20 of 45")).toBeInTheDocument();
+    resumida.unmount();
+    render(<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(<DataTable columns={colunas} data={dados} selectable />);
+    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(
+      <DataTable
+        columns={colunas}
+        data={dados}
+        selectable
+        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(<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(
+      <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(<AvatarGroup avatars={pessoas} max={4} />);
+    const excedente = screen.getByLabelText("Mais 2 avatares");
+    expect(excedente).toHaveAttribute("title", "2 outros");
+  });
+  it("rótulos customizados", () => {
+    render(
+      <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(<AppSidebar items={itens} />);
+    expect(screen.getByRole("button", { name: "Fechar a navegação" })).toBeInTheDocument();
+    rerender(<AppSidebar items={itens} collapsed />);
+    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(<AppSidebar items={itens} {...rotulos} />);
+    expect(screen.getByRole("button", { name: "Close navigation" })).toBeInTheDocument();
+    rerender(<AppSidebar items={itens} collapsed {...rotulos} />);
+    expect(screen.getByRole("button", { name: "Open navigation" })).toBeInTheDocument();
+  });
+});
+
+describe("AttachmentCard · complementos", () => {
+  const base = {
+    fileName: "cnh.pdf",
+    documentType: "CNH",
+    required: true,
+    status: "positive" as const,
+    statusLabel: "Pré-aprovado",
+    statusDetails: { description: "Ok" },
+  };
+  it("padrão em português", () => {
+    render(<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(
+      <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(<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(
+      <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(<BottomSheet open title="Filtros" snapPoints={[0.3, 0.6]} />);
+    expect(screen.getByRole("slider", { name: "Altura do painel" })).toBeInTheDocument();
+  });
+  it("rótulo customizado", () => {
+    render(<BottomSheet open 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(<ConfirmDialog open inline title="Excluir?" confirmLoading />);
+    expect(screen.getByRole("button", { name: /Aguarde\.\.\./ })).toBeInTheDocument();
+  });
+  it("rótulo customizado", () => {
+    render(<ConfirmDialog open inline title="Delete?" confirmLoading loadingLabel="Please wait..." />);
+    expect(screen.getByRole("button", { name: /Please wait\.\.\./ })).toBeInTheDocument();
+  });
+});
+
+describe("ConfirmAIAction · risco alto", () => {
+  it("padrão em português", () => {
+    render(<ConfirmAIAction open 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(
+      <ConfirmAIAction open 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(
+      <ConfirmAIAction open 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(<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(
+      <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(<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(
+      <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(
+      <KanbanColumn title="Coluna" count={1}>
+        <KanbanCard title="T" assignee="Ana Lima" />
+      </KanbanColumn>,
+    );
+    expect(screen.getByLabelText("Responsável: Ana Lima")).toBeInTheDocument();
+    expect(screen.getByText("1 cartão")).toBeInTheDocument();
+  });
+  it("rótulos customizados", () => {
+    render(
+      <KanbanColumn title="Column" count={3} countLabel={(n) => `${n} cards`}>
+        <KanbanCard title="T" assignee="Ana Lima" assigneeLabel="Assignee" />
+      </KanbanColumn>,
+    );
+    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(<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(
+      <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(<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(
+      <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/src/teste/SegmentedControl.test.tsx

@@ -1,5 +1,6 @@
 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";
@@ -181,3 +182,59 @@ 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(
+        <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(
+      <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(
+      <>
+        <SegmentedControl label="A" options={POR_PAGINA} />
+        <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(
+      <SegmentedControl id="x" name="perPage" label="Itens" options={POR_PAGINA} />,
+    );
+    expect(screen.getByRole("radio", { name: "25" })).toHaveAttribute(
+      "name",
+      "perPage",
+    );
+  });
+});