@1doc/1ds-react 2.7.2 → 2.9.0

package/src/teste/List.test.tsx

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

package/src/teste/Modal.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Modal from "../components/Modal/Modal";
+
+/**
+ * Modal sem `title` saía com `role="dialog"` anônimo: o leitor de tela dizia
+ * só "diálogo". Com título, quem nomeia é o `aria-labelledby`; sem título,
+ * `ariaLabel`; sem nenhum dos dois, o genérico "Diálogo".
+ */
+describe("Modal · nome acessível", () => {
+  it("com title, é nomeado pelo título e ignora ariaLabel", () => {
+    render(<Modal open inline title="Admitir colaborador" ariaLabel="Outro nome" />);
+    const dialogo = screen.getByRole("dialog", { name: "Admitir colaborador" });
+    expect(dialogo).toHaveAttribute("aria-labelledby");
+    expect(dialogo).not.toHaveAttribute("aria-label");
+  });
+
+  it("sem title, usa ariaLabel", () => {
+    render(<Modal open inline ariaLabel="Pré-visualização do documento" />);
+    const dialogo = screen.getByRole("dialog", { name: "Pré-visualização do documento" });
+    expect(dialogo).not.toHaveAttribute("aria-labelledby");
+  });
+
+  it("sem title e sem ariaLabel, nunca sai anônimo", () => {
+    render(<Modal open inline />);
+    expect(screen.getByRole("dialog", { name: "Diálogo" })).toBeInTheDocument();
+  });
+});

package/src/teste/ModalVariantes.test.tsx

@@ -0,0 +1,173 @@
+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: boolean) {
+  const ouvintes = new Set<(e: { matches: boolean }) => void>();
+  vi.stubGlobal("matchMedia", (consulta: string) => ({
+    matches,
+    media: consulta,
+    addEventListener: (_: string, fn: any) => ouvintes.add(fn),
+    removeEventListener: (_: string, fn: any) => ouvintes.delete(fn),
+  }));
+  return (novo: boolean) => 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(<Modal open inline 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(<Modal open inline 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(<Modal open inline 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(<Modal open inline title="x" width="90%" maxWidth="720px" />);
+    expect(screen.getByRole("dialog").style.maxWidth).toBe("720px");
+  });
+
+  it("sem width nem maxWidth não escreve style", () => {
+    render(<Modal open inline title="x" />);
+    expect(screen.getByRole("dialog").getAttribute("style")).toBeNull();
+  });
+});
+
+describe("Modal · Escape", () => {
+  it("fecha com Escape no borbulho", () => {
+    const aoFechar = vi.fn();
+    render(<Modal open inline 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(<Modal open inline 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(
+      <Modal open inline title="x" onClose={aoFechar}>
+        <Select label="Categoria" options={[{ label: "Administrativa", value: "adm" }]} />
+      </Modal>,
+    );
+    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(<Modal open inline title="x" windowControls />);
+    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(<Modal open inline 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(<Modal open inline 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(<Modal open inline 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(<Modal open inline 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(<Modal open inline title="x" responsive />);
+    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(<Modal open inline title="x" responsive width="600px" windowControls />);
+    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(<Modal open inline title="x" responsive />);
+    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(<Modal open inline title="x" />);
+    expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+  });
+});

package/src/teste/MultiSelectErro.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+
+/**
+ * O foco do MultiSelect 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("MultiSelect · erro e apoio ligados ao campo", () => {
+  it("a mensagem de erro descreve o combobox e o marca inválido", () => {
+    render(
+      <MultiSelect 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(
+      <MultiSelect
+        label="Setor"
+        options={OPCOES}
+        errorMessage="Obrigatório"
+        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(<MultiSelect 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(<MultiSelect 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(<MultiSelect label="Setor" options={OPCOES} invalid />);
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+  });
+
+  it("com `id`, os ids internos derivam dele", () => {
+    render(
+      <MultiSelect id="setor" label="Setor" options={OPCOES} errorMessage="Erro" />,
+    );
+    expect(screen.getByRole("combobox")).toHaveAttribute(
+      "aria-describedby",
+      "setor-error",
+    );
+  });
+});
+
+describe("MultiSelect · 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(
+        <MultiSelect label="Setor" options={OPCOES} errorMessage="Erro" />,
+      );
+    expect(html()).toBe(html());
+  });
+
+  it("com `id`, o servidor já manda o describedby", () => {
+    const html = renderToString(
+      <MultiSelect id="setor" label="Setor" options={OPCOES} errorMessage="Erro" />,
+    );
+    expect(html).toContain('aria-describedby="setor-error"');
+    expect(html).toContain('id="setor-error"');
+  });
+});

package/src/teste/NomeAcessivelSsr.test.tsx

@@ -0,0 +1,110 @@
+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: string) {
+  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(<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(<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(<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(<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(<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 = (
+      <div>
+        <Select label="Setor" options={OPCOES} />
+        <MultiSelect label="Setores" options={OPCOES} />
+        <SegmentedControl label="Itens" options={POR_PAGINA} />
+      </div>
+    );
+    const raiz = comoDoServidor(renderToString(arvore));
+    const erro = vi.spyOn(console, "error").mockImplementation(() => {});
+    const avisosDeHidratacao: unknown[] = [];
+    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");
+  });
+});