@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/RichTextEditorAlinhaImagemTabela.test.tsx

@@ -0,0 +1,238 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { htmlDaTabela, htmlVazio, imagemSegura, sanitizarHtml } from "../utils/html-seguro";
+
+let execCommand: ReturnType<typeof vi.fn>;
+let estados: Record<string, boolean>;
+
+beforeEach(() => {
+  estados = {};
+  execCommand = vi.fn(() => true);
+  (document as any).execCommand = execCommand;
+  (document as any).queryCommandState = (comando: string) => !!estados[comando];
+});
+
+const area = () => screen.getByRole("textbox") as HTMLElement;
+const PNG = "data:image/png;base64,iVBORw0KGgo=";
+
+describe("html-seguro: alinhamento, imagem e tabela", () => {
+  it("text-align fica nos blocos, em style ou em align; o resto do style sai", () => {
+    expect(sanitizarHtml('<p style="text-align: center; color: red">a</p>')).toBe('<p style="text-align: center;">a</p>');
+    expect(sanitizarHtml('<div align="right">a</div>')).toBe('<div style="text-align: right;">a</div>');
+    expect(sanitizarHtml('<p style="text-align: expression(alert(1))">a</p>')).toBe("<p>a</p>");
+    expect(sanitizarHtml('<li style="text-align:justify">a</li>')).toBe('<li style="text-align: justify;">a</li>');
+    expect(sanitizarHtml('<b style="text-align:center">a</b>')).toBe("<b>a</b>");
+  });
+
+  it("imagem: http(s), caminho e data:image em PNG, JPEG, GIF e WebP ficam; o resto some inteiro", () => {
+    expect(sanitizarHtml('<img src="https://a.com/x.png" alt="Brasão" onerror="x()">')).toBe('<img src="https://a.com/x.png" alt="Brasão">');
+    expect(sanitizarHtml('<img src="/img/x.png">')).toBe('<img src="/img/x.png" alt="">');
+    expect(sanitizarHtml(`<img src="${PNG}" alt="a">`)).toBe(`<img src="${PNG}" alt="a">`);
+    for (const mau of ["javascript:alert(1)", "x", "data:image/svg+xml;base64,PHN2Zz4=", "data:text/html;base64,PGI+", "//evil.com/x.png", "ftp://a/x.png"]) {
+      expect(sanitizarHtml(`<p>a<img src="${mau}">b</p>`)).toBe("<p>ab</p>");
+    }
+  });
+
+  it("imagemSegura devolve vazio para o perigoso", () => {
+    expect(imagemSegura("java\nscript:alert(1)")).toBe("");
+    expect(imagemSegura("https://a.com/x.png")).toBe("https://a.com/x.png");
+    expect(imagemSegura("")).toBe("");
+  });
+
+  it("tabela simples: tags e colspan/rowspan ficam; atributos soltos saem", () => {
+    const html = '<table class="x" onclick="a()"><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3" style="color:red">a</td><td colspan="x">b</td></tr></tbody></table>';
+    expect(sanitizarHtml(html)).toBe('<table><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3">a</td><td>b</td></tr></tbody></table>');
+  });
+
+  it("htmlVazio: imagem e tabela contam como conteúdo", () => {
+    expect(htmlVazio("<img src='/a.png'>")).toBe(false);
+    expect(htmlVazio(htmlDaTabela(1, 1))).toBe(false);
+    expect(htmlVazio("<p><br></p>")).toBe(true);
+  });
+
+  it("htmlDaTabela faz linhas × colunas de células com quebra", () => {
+    const celulas = (htmlDaTabela(2, 3).match(/<td><br><\/td>/g) || []).length;
+    expect(celulas).toBe(6);
+    expect((htmlDaTabela(2, 3).match(/<tr>/g) || []).length).toBe(2);
+  });
+});
+
+describe("RichTextEditor: alinhamento", () => {
+  it("as quatro ferramentas de alinhamento pedem o comando e seguem o cursor", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["alignLeft", "alignCenter", "alignRight", "alignJustify"]} defaultValue="<p>x</p>" />);
+    const esperado: Record<string, string> = {
+      "Alinhar à esquerda": "justifyLeft",
+      Centralizar: "justifyCenter",
+      "Alinhar à direita": "justifyRight",
+      Justificar: "justifyFull",
+    };
+    for (const [nome, comando] of Object.entries(esperado)) {
+      execCommand.mockClear();
+      await usuario.click(screen.getByRole("button", { name: nome }));
+      expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+    }
+    estados.justifyCenter = true;
+    const faixa = document.createRange();
+    faixa.selectNodeContents(area());
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+    expect(screen.getByRole("button", { name: "Centralizar" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Justificar" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("a barra padrão não ganha as ferramentas novas", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    for (const nome of ["Centralizar", "Imagem", "Tabela"]) expect(screen.queryByRole("button", { name: nome })).toBeNull();
+  });
+});
+
+describe("RichTextEditor: imagem", () => {
+  const abrirImagem = async (props: any = {}, botao = "Imagem") => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["image"]} defaultValue="<p>texto</p>" {...props} />);
+    await usuario.click(screen.getByRole("button", { name: botao }));
+    return usuario;
+  };
+
+  it("o botão abre o painel com foco no endereço; Esc fecha", async () => {
+    const usuario = await abrirImagem();
+    expect(screen.getByLabelText("Endereço da imagem")).toHaveFocus();
+    expect(screen.getByLabelText("Texto alternativo")).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+  });
+
+  it("endereço e texto alternativo inserem o img com alt", async () => {
+    const aoMudar = vi.fn();
+    const usuario = await abrirImagem({ onChange: aoMudar });
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "exemplo.com.br/brasao.png");
+    await usuario.type(screen.getByLabelText("Texto alternativo"), "Brasão da prefeitura");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<img src="https://exemplo.com.br/brasao.png" alt="Brasão da prefeitura">');
+    expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+    expect(aoMudar).toHaveBeenCalled();
+  });
+
+  it("endereço perigoso mostra o erro e o painel continua aberto", async () => {
+    const usuario = await abrirImagem();
+    await usuario.type(screen.getByLabelText("Endereço da imagem"), "javascript:alert(1)");
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    expect(screen.getByText("Use um endereço http ou https, ou escolha um arquivo.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    expect(screen.getByLabelText("Endereço da imagem")).toBeInTheDocument();
+  });
+
+  it("arquivo vira data URL e entra no img", async () => {
+    const usuario = await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const arquivo = new File([new Uint8Array([137, 80, 78, 71])], "brasao.png", { type: "image/png" });
+    fireEvent.change(entrada, { target: { files: [arquivo] } });
+    await waitFor(() => expect(screen.getByText("brasao.png")).toBeInTheDocument());
+    await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toMatch(/^<img src="data:image\/png;base64,[A-Za-z0-9+/=]+" alt="">$/);
+  });
+
+  it("arquivo que não é PNG, JPEG, GIF ou WebP é recusado; acima de 2 MB também", async () => {
+    await abrirImagem();
+    const entrada = document.querySelector('input[type="file"]') as HTMLInputElement;
+    fireEvent.change(entrada, { target: { files: [new File(["x"], "a.svg", { type: "image/svg+xml" })] } });
+    expect(await screen.findByText("Use uma imagem PNG, JPEG, GIF ou WebP.")).toBeInTheDocument();
+    const grande = new File(["x"], "g.png", { type: "image/png" });
+    Object.defineProperty(grande, "size", { value: 3 * 1024 * 1024 });
+    fireEvent.change(entrada, { target: { files: [grande] } });
+    expect(await screen.findByText("A imagem passa de 2 MB.")).toBeInTheDocument();
+  });
+
+  it("os textos do painel vêm por labels", async () => {
+    await abrirImagem({ labels: { image: "Image", imageUrl: "Image address", imageAlt: "Alt text", imageApply: "Insert image", imageCancel: "Cancel", imageFile: "Choose file" } }, "Image");
+    expect(screen.getByLabelText("Image address")).toBeInTheDocument();
+    expect(screen.getByLabelText("Alt text")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Insert image" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Choose file" })).toBeInTheDocument();
+  });
+});
+
+describe("RichTextEditor: tabela", () => {
+  it("o painel insere linhas × colunas; o padrão é 3 × 3", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    expect(screen.getByLabelText("Linhas")).toHaveFocus();
+    await usuario.clear(screen.getByLabelText("Linhas"));
+    await usuario.type(screen.getByLabelText("Linhas"), "2");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+    expect(chamada![2]).toBe(htmlDaTabela(2, 3));
+  });
+
+  it("fora de 1 a 20 linhas e 1 a 10 colunas mostra o erro e não insere", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} />);
+    await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+    await usuario.clear(screen.getByLabelText("Colunas"));
+    await usuario.type(screen.getByLabelText("Colunas"), "11");
+    await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+    expect(screen.getByText("Use de 1 a 20 linhas e de 1 a 10 colunas.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+  });
+
+  const TABELA = "<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>";
+  const cursorNaCelula = (indice: number) => {
+    const celula = area().querySelectorAll("td")[indice];
+    const faixa = document.createRange();
+    faixa.selectNodeContents(celula);
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(faixa);
+    fireEvent(document, new Event("selectionchange"));
+  };
+
+  it("com o cursor numa célula aparece a barra; sem tabela na toolbar, não aparece", async () => {
+    const { rerender } = render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    cursorNaCelula(0);
+    expect(await screen.findByRole("group", { name: "Tabela" })).toBeInTheDocument();
+    rerender(<RichTextEditor ariaLabel="x" toolbar={["bold"]} defaultValue={TABELA} />);
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("adiciona e remove linha e coluna na célula do cursor e avisa onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue={TABELA} onChange={aoMudar} />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(3);
+    expect(area().querySelectorAll("tr")[1].cells.length).toBe(3);
+    expect(aoMudar).toHaveBeenCalled();
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Adicionar linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(3);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelectorAll("tr")).toHaveLength(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover coluna" }));
+    expect(area().querySelectorAll("tr")[0].cells.length).toBe(2);
+
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover tabela" }));
+    expect(area().querySelector("table")).toBeNull();
+    expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+  });
+
+  it("remover a única linha ou coluna remove a tabela", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["table"]} defaultValue="<table><tbody><tr><td>a</td></tr></tbody></table>" />);
+    cursorNaCelula(0);
+    await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+    expect(area().querySelector("table")).toBeNull();
+  });
+});

package/src/teste/RichTextEditorEstiloDeTexto.test.tsx

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { estiloDeTexto, sanitizarHtml } from "../utils/html-seguro";
+
+let execCommand: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  execCommand = vi.fn(() => true);
+  (document as any).execCommand = execCommand;
+  (document as any).queryCommandState = () => false;
+});
+
+const area = () => screen.getByRole("textbox") as HTMLElement;
+const selecionarTexto = () => {
+  const alvo = area().querySelector("p")!.firstChild as Text;
+  const faixa = document.createRange();
+  faixa.setStart(alvo, 0);
+  faixa.setEnd(alvo, alvo.length);
+  window.getSelection()!.removeAllRanges();
+  window.getSelection()!.addRange(faixa);
+};
+const abrir = (toolbar: string[], props: any = {}) =>
+  render(<RichTextEditor ariaLabel="x" toolbar={toolbar as any} defaultValue="<p>Parecer</p>" {...props} />);
+
+describe("html-seguro: estilo de texto por token", () => {
+  it("estiloDeTexto só aceita token do DS", () => {
+    expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
+    expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
+    expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
+    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+    for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
+      expect(estiloDeTexto("color", mau)).toBe("");
+    }
+    expect(estiloDeTexto("font-size", "12px")).toBe("");
+    expect(estiloDeTexto("font-size", "var(--umds-primitive-red-pure)")).toBe("");
+    expect(estiloDeTexto("font-family", "Comic Sans MS")).toBe("");
+    expect(estiloDeTexto("background", "var(--umds-primitive-red-pure)")).toBe("");
+  });
+
+  it("o span guarda só as declarações válidas; o resto do style sai", () => {
+    expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe(
+      '<span style="color: var(--umds-primitive-red-pure);">a</span>',
+    );
+    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
+      '<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>',
+    );
+    expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
+  });
+
+  it("estilo só vale em span: em outras tags sai", () => {
+    expect(sanitizarHtml('<b style="color: var(--umds-primitive-red-pure)">a</b>')).toBe("<b>a</b>");
+    expect(sanitizarHtml('<p style="color: var(--umds-primitive-red-pure)">a</p>')).toBe("<p>a</p>");
+  });
+});
+
+describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
+  it("a barra padrão não ganha as ferramentas novas", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    for (const nome of ["Fonte", "Tamanho da fonte", "Cor do texto"]) expect(screen.queryByRole("button", { name: nome })).toBeNull();
+  });
+
+  it("cada ferramenta abre um painel nomeado abaixo da barra; Fechar e Esc fecham", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontFamily", "fontSize", "textColor"]);
+    await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+    expect(screen.getByRole("group", { name: "Tamanho da fonte" })).toBeInTheDocument();
+    await usuario.click(screen.getByRole("button", { name: "Fechar" }));
+    expect(screen.queryByRole("group", { name: "Tamanho da fonte" })).toBeNull();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
+    expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
+  });
+
+  it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    abrir(["fontFamily"], { onChange: aoMudar });
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Fonte" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
+    await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+    expect(aoMudar).toHaveBeenCalled();
+    expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
+  });
+
+  it("o tamanho usa os degraus da escala do DS", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontSize"]);
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Tamanho da fonte" }));
+    const opcoes = screen.getAllByRole("option").map((o) => o.textContent);
+    expect(opcoes).toEqual(["12", "14", "16", "20", "24"]);
+    await usuario.click(screen.getByRole("option", { name: "20" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-size: var(--umds-primitive-font-size-sm);">Parecer</span>');
+  });
+
+  it("a cor vem da paleta do DS e vira var() do token", async () => {
+    const usuario = userEvent.setup();
+    abrir(["textColor"]);
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="color: var(--umds-primitive-red-pure);">Parecer</span>');
+  });
+
+  it("sem texto selecionado o painel pede a seleção e não aplica nada", async () => {
+    const usuario = userEvent.setup();
+    abrir(["textColor"]);
+    window.getSelection()!.removeAllRanges();
+    await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+    await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+    expect(screen.getByText("Selecione o texto antes de aplicar.")).toBeInTheDocument();
+    expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+  });
+
+  it("os textos vêm por labels", async () => {
+    const usuario = userEvent.setup();
+    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+    selecionarTexto();
+    await usuario.click(screen.getByRole("button", { name: "Font" }));
+    await usuario.click(screen.getByRole("combobox", { name: "Font" }));
+    expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+    await usuario.keyboard("{Escape}");
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+  });
+
+  it("o valor volta higienizado com o estilo por token", () => {
+    abrir(["textColor"], { defaultValue: '<p><span style="color: var(--umds-primitive-blue-pure); background: red">a</span></p>' });
+    expect(area().innerHTML).toBe('<p><span style="color: var(--umds-primitive-blue-pure);">a</span></p>');
+  });
+});

package/src/teste/SegmentedControlContador.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+
+const FILA = [
+  { label: "Todas", value: "todas", count: 31 },
+  { label: "Minhas", value: "minhas", count: 0 },
+  { label: "Arquivadas", value: "arquivadas" },
+  { label: "Vazias", value: "vazias", count: "" },
+];
+
+describe("SegmentedControl · count", () => {
+  it("desenha a pílula do contador depois do texto; 0 aparece, vazio e ausente não", () => {
+    const { container } = render(<SegmentedControl label="Fila" options={FILA} />);
+    const itens = [...container.querySelectorAll(".umds-segmented__item")];
+    expect(itens[0].querySelector(".umds-segmented__count")).toHaveTextContent("31");
+    expect(itens[1].querySelector(".umds-segmented__count")).toHaveTextContent("0");
+    expect(itens[2].querySelector(".umds-segmented__count")).toBeNull();
+    expect(itens[3].querySelector(".umds-segmented__count")).toBeNull();
+    const conteudo = itens[0].querySelector(".umds-segmented__conteudo") as HTMLElement;
+    expect(conteudo.lastElementChild).toHaveClass("umds-segmented__count");
+  });
+
+  it("o contador entra no nome acessível do segmento (o texto visível manda)", () => {
+    render(<SegmentedControl label="Fila" id="fila" options={FILA} />);
+    expect(screen.getByRole("radio", { name: /Todas\s*31/ })).toBeInTheDocument();
+  });
+
+  it("o contador acompanha a escolha e a escolha segue funcionando", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<SegmentedControl label="Fila" options={FILA} defaultValue="todas" />);
+    expect(screen.getByRole("radio", { name: /Todas/ })).toBeChecked();
+    await usuario.click(screen.getByText("Minhas"));
+    expect(screen.getByRole("radio", { name: /Minhas/ })).toBeChecked();
+    expect(container.querySelectorAll(".umds-segmented__count")).toHaveLength(2);
+  });
+
+  it("sem count em nenhum segmento, nada muda", () => {
+    const { container } = render(<SegmentedControl label="x" options={[{ label: "25", value: "25" }]} />);
+    expect(container.querySelector(".umds-segmented__count")).toBeNull();
+  });
+});

package/src/teste/SelectAbertoControladoEFlutuante.test.tsx

@@ -0,0 +1,180 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import Select from "../components/Select/Select";
+
+const OPCOES = [
+  { label: "Urgente", value: "urgente" },
+  { label: "Revisão", value: "revisao" },
+];
+
+afterEach(() => vi.restoreAllMocks());
+
+describe("Select · open e onOpenChange", () => {
+  it("open controlado mostra a lista sem clique; fechado, não mostra", () => {
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} />);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} open />);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("controlado: o clique só avisa; quem abre é o pai", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(aoAbrir).toHaveBeenCalledWith(true);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("controlado aberto: escolher uma opção, Esc e clique fora pedem para fechar", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getAllByRole("option")[0]);
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+
+    aoAbrir.mockClear();
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Escape" });
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+
+    aoAbrir.mockClear();
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).toHaveBeenCalledWith(false);
+  });
+
+  it("o clique fora não avisa quando a lista está fechada", () => {
+    const aoAbrir = vi.fn();
+    render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).not.toHaveBeenCalled();
+  });
+
+  it("clique fora vê o open de agora, não o do primeiro render", () => {
+    const aoAbrir = vi.fn();
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} open={false} onOpenChange={aoAbrir} />);
+    rerender(<Select ariaLabel="x" options={OPCOES} open onOpenChange={aoAbrir} />);
+    fireEvent.mouseDown(document.body);
+    expect(aoAbrir).toHaveBeenCalledWith(false);
+  });
+
+  it("sem open, o Select abre e fecha sozinho e também avisa", () => {
+    const aoAbrir = vi.fn();
+    render(<Select ariaLabel="x" options={OPCOES} onOpenChange={aoAbrir} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(aoAbrir).toHaveBeenLastCalledWith(true);
+    fireEvent.click(screen.getAllByRole("option")[1]);
+    expect(screen.queryByRole("listbox")).toBeNull();
+    expect(aoAbrir).toHaveBeenLastCalledWith(false);
+  });
+});
+
+describe("Select · gatilho com ícone, amostra e aria-required", () => {
+  it("triggerIcon e triggerSwatch aparecem no gatilho, decorativos", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={OPCOES} triggerIcon={faFilter} triggerSwatch="var(--umds-semantic-color-primary-pure)" />,
+    );
+    const icone = container.querySelector(".umds-select__trigger-icon") as HTMLElement;
+    expect(icone).toHaveAttribute("aria-hidden", "true");
+    expect(icone.querySelector("svg")).toHaveAttribute("data-icon", "filter");
+    const amostra = container.querySelector(".umds-select__swatch") as HTMLElement;
+    expect(amostra).toHaveAttribute("aria-hidden", "true");
+    expect(amostra.style.background).toContain("--umds-semantic-color-primary-pure");
+    expect(container.querySelector(".umds-select--has-trigger-icon")).not.toBeNull();
+  });
+
+  it("sem as props, não há ícone nem amostra", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} />);
+    expect(container.querySelector(".umds-select__trigger-icon")).toBeNull();
+    expect(container.querySelector(".umds-select__swatch")).toBeNull();
+  });
+
+  it("required repassa aria-required ao combobox", () => {
+    const { rerender } = render(<Select ariaLabel="x" options={OPCOES} required />);
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true");
+    rerender(<Select ariaLabel="x" options={OPCOES} />);
+    expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-required");
+  });
+});
+
+describe("Select · variantes de filtro", () => {
+  it("search e combo escrevem a classe do filtro e a própria", () => {
+    const { container, rerender } = render(<Select ariaLabel="x" options={OPCOES} variant="search" />);
+    expect(container.querySelector(".umds-select--filter.umds-select--filter-search")).not.toBeNull();
+    rerender(<Select ariaLabel="x" options={OPCOES} variant="combo" />);
+    expect(container.querySelector(".umds-select--filter.umds-select--filter-combo")).not.toBeNull();
+    expect(container.querySelector(".umds-select--filter-search")).toBeNull();
+  });
+
+  it("search foca a busca ao abrir, como o filter", async () => {
+    render(<Select ariaLabel="x" options={OPCOES} variant="search" searchable />);
+    fireEvent.click(screen.getByRole("combobox"));
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("textbox")));
+  });
+});
+
+describe("Select · por cima do diálogo", () => {
+  it("dentro de role=dialog a lista vira fixed, ancorada no gatilho", async () => {
+    const { container } = render(
+      <div role="dialog" aria-label="Filtros" style={{ overflow: "clip" }}>
+        <Select ariaLabel="x" options={OPCOES} />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    const lista = container.querySelector(".umds-select__dropdown") as HTMLElement;
+    expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+    expect(lista.style.position).toBe("fixed");
+    await waitFor(() => expect(lista.style.visibility).toBe("visible"));
+  });
+
+  it("fora de diálogo a lista continua posicionada pelo CSS (sem fixed)", () => {
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const lista = container.querySelector(".umds-select__dropdown") as HTMLElement;
+    expect(container.querySelector(".umds-select--floating")).toBeNull();
+    expect(lista.style.position).toBe("");
+  });
+
+  it("aria-modal também conta como diálogo", () => {
+    const { container } = render(
+      <div aria-modal="true">
+        <Select ariaLabel="x" options={OPCOES} />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+  });
+});
+
+describe("Select · placement auto mede o ancestral que rola", () => {
+  it("abre para cima e limita a altura da lista ao espaço do ancestral", () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
+      const rolante = this.getAttribute("data-rolante") !== null;
+      const [topo, base] = rolante ? [100, 300] : [200, 244];
+      return { top: topo, bottom: base, left: 0, right: 0, width: 0, height: base - topo, x: 0, y: topo, toJSON() {} } as any;
+    });
+    Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+    const { container } = render(
+      <div data-rolante style={{ overflowY: "auto" }}>
+        <Select ariaLabel="x" options={OPCOES} placement="auto" />
+      </div>,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+    expect((container.querySelector(".umds-select__dropdown") as HTMLElement).style.maxHeight).toBe("96px");
+  });
+
+  it("sem ancestral que corta, só a janela conta e a lista não ganha teto", () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      () => ({ top: 20, bottom: 64, left: 0, right: 0, width: 0, height: 44, x: 0, y: 20, toJSON() {} }) as any,
+    );
+    Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+    const { container } = render(<Select ariaLabel="x" options={OPCOES} placement="auto" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+    expect((container.querySelector(".umds-select__dropdown") as HTMLElement).style.maxHeight).toBe("");
+  });
+});