@1doc/1ds-react 2.8.0 → 2.9.0

package/src/teste/RichTextEditor.test.tsx

@@ -0,0 +1,329 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { enderecoSeguro, normalizarEndereco, sanitizarHtml } from "../utils/html-seguro";
+
+/** jsdom não traz `execCommand`: o teste fala com um espião e confere o que o editor pede ao navegador. */
+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;
+
+/** Escreve na área como o navegador faz: muda o conteúdo e dispara `input`. */
+const escrever = (html: string) => {
+  area().innerHTML = html;
+  fireEvent.input(area());
+};
+
+const selecionarTudoNaArea = () => {
+  const selecao = window.getSelection() as Selection;
+  const faixa = document.createRange();
+  faixa.selectNodeContents(area());
+  selecao.removeAllRanges();
+  selecao.addRange(faixa);
+};
+
+describe("RichTextEditor: estrutura e nomes", () => {
+  it("a barra é um toolbar nomeado com as ferramentas padrão", () => {
+    render(<RichTextEditor ariaLabel="Despacho" />);
+    const barra = screen.getByRole("toolbar", { name: "Formatação" });
+    for (const nome of ["Negrito", "Itálico", "Sublinhado", "Lista com marcadores", "Lista numerada", "Link", "Desfazer", "Refazer"]) {
+      expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+    }
+    expect(barra.querySelectorAll('[role="separator"]')).toHaveLength(3);
+    expect(screen.queryByRole("button", { name: "Tachado" })).toBeNull();
+  });
+
+  it("a área de escrita é um textbox multilinha com nome e placeholder", () => {
+    render(<RichTextEditor ariaLabel="Despacho" placeholder="Escreva o despacho..." />);
+    const caixa = screen.getByRole("textbox", { name: "Despacho" });
+    expect(caixa).toHaveAttribute("aria-multiline", "true");
+    expect(caixa).toHaveAttribute("contenteditable", "true");
+    expect(caixa).toHaveAttribute("data-placeholder", "Escreva o despacho...");
+  });
+
+  it("label visível nomeia a área", () => {
+    render(<RichTextEditor label="Descrição" id="rte" />);
+    expect(screen.getByRole("textbox", { name: "Descrição" })).toBeInTheDocument();
+  });
+
+  it("toolbar escolhe as ferramentas e os separadores", () => {
+    render(<RichTextEditor ariaLabel="x" toolbar={["bold", "|", "strike", "clear"]} />);
+    expect(screen.getAllByRole("button").map((b) => b.getAttribute("aria-label"))).toEqual(["Negrito", "Tachado", "Limpar formatação"]);
+    expect(screen.getByRole("toolbar").querySelectorAll('[role="separator"]')).toHaveLength(1);
+  });
+
+  it("labels e toolbarLabel traduzem a barra", () => {
+    render(<RichTextEditor ariaLabel="x" toolbarLabel="Formatting" toolbar={["bold", "link"]} labels={{ bold: "Bold", link: "Link (Ctrl+K)" }} />);
+    expect(screen.getByRole("toolbar", { name: "Formatting" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Bold" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Link (Ctrl+K)" })).toBeInTheDocument();
+  });
+
+  it("errorMessage e helperText ligam a área por aria-describedby", () => {
+    render(<RichTextEditor ariaLabel="x" id="r" errorMessage="Escreva o despacho" helperText="Obrigatório" />);
+    expect(area()).toHaveAttribute("aria-invalid", "true");
+    expect(area().getAttribute("aria-describedby")).toBe("r-error r-helper");
+    expect(screen.getByText("Escreva o despacho")).toBeInTheDocument();
+  });
+
+  it("minHeight e resizable", () => {
+    const { container } = render(<RichTextEditor ariaLabel="x" minHeight={200} resizable />);
+    expect(area().style.minHeight).toBe("200px");
+    expect(container.querySelector(".umds-rte--resizable")).not.toBeNull();
+  });
+
+  it("o slot footer aparece dentro da moldura", () => {
+    render(<RichTextEditor ariaLabel="x" footer={<span data-testid="assinatura">Ana Paula Souza</span>} />);
+    expect(screen.getByTestId("assinatura").closest(".umds-rte__footer")).not.toBeNull();
+  });
+});
+
+describe("RichTextEditor: valor e higienização", () => {
+  it("defaultValue entra na área", () => {
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>Olá <b>mundo</b></p>" />);
+    expect(area().innerHTML).toBe("<p>Olá <b>mundo</b></p>");
+  });
+
+  it("o HTML que entra é higienizado: sem script, onerror, style nem javascript:", () => {
+    render(
+      <RichTextEditor
+        ariaLabel="x"
+        defaultValue={'<p style="color:red" class="x" onclick="a()">ok</p><script>alert(1)</script><img src=x onerror="alert(1)"><a href="javascript:alert(1)">mau</a><a href="https://1doc.com.br">bom</a>'}
+      />,
+    );
+    const html = area().innerHTML;
+    expect(html).not.toMatch(/script|onerror|onclick|style=|class=|javascript:|<img/i);
+    expect(html).toContain('<a href="https://1doc.com.br" rel="noopener noreferrer">bom</a>');
+    expect(html).toContain("<p>ok</p>");
+    expect(html).toContain("mau");
+  });
+
+  it("digitar entrega o HTML em onChange; apagar tudo entrega vazio", () => {
+    const aoMudar = vi.fn();
+    render(<RichTextEditor ariaLabel="x" onChange={aoMudar} />);
+    escrever("<b>Oi</b>");
+    expect(aoMudar).toHaveBeenLastCalledWith("<b>Oi</b>");
+    escrever("<br>");
+    expect(aoMudar).toHaveBeenLastCalledWith("");
+    expect(area().innerHTML).toBe("");
+  });
+
+  it("colar entra como texto puro (insertText) e não deixa o HTML colado passar", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    const evento = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(evento, "clipboardData", { value: { getData: (tipo: string) => (tipo === "text/plain" ? "texto puro" : "<b>html</b>") } });
+    area().dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+    expect(execCommand).toHaveBeenCalledWith("insertText", false, "texto puro");
+  });
+
+  it("controlado: um value novo de fora reescreve; o mesmo que o editor emitiu não", () => {
+    function Pai() {
+      const [html, setHtml] = useState("<p>um</p>");
+      return (
+        <>
+          <RichTextEditor ariaLabel="x" value={html} onChange={setHtml} />
+          <button onClick={() => setHtml("<p>dois</p>")}>trocar</button>
+        </>
+      );
+    }
+    render(<Pai />);
+    expect(area().innerHTML).toBe("<p>um</p>");
+    escrever("<p>um mais</p>");
+    expect(area().innerHTML).toBe("<p>um mais</p>");
+    fireEvent.click(screen.getByText("trocar"));
+    expect(area().innerHTML).toBe("<p>dois</p>");
+  });
+});
+
+describe("RichTextEditor: ferramentas", () => {
+  it("clicar em Negrito pede o comando ao navegador e avisa onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<RichTextEditor ariaLabel="x" onChange={aoMudar} defaultValue="<p>x</p>" />);
+    await usuario.click(screen.getByRole("button", { name: "Negrito" }));
+    expect(execCommand).toHaveBeenCalledWith("bold", false, undefined);
+    expect(aoMudar).toHaveBeenCalled();
+  });
+
+  it("cada ferramenta pede o seu comando", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["bold", "italic", "underline", "strike", "ul", "ol", "undo", "redo", "clear"]} />);
+    const esperado: Record<string, string> = {
+      Negrito: "bold",
+      Itálico: "italic",
+      Sublinhado: "underline",
+      Tachado: "strikeThrough",
+      "Lista com marcadores": "insertUnorderedList",
+      "Lista numerada": "insertOrderedList",
+      Desfazer: "undo",
+      Refazer: "redo",
+      "Limpar formatação": "removeFormat",
+    };
+    for (const [nome, comando] of Object.entries(esperado)) {
+      execCommand.mockClear();
+      await usuario.click(screen.getByRole("button", { name: nome }));
+      expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+    }
+  });
+
+  it("o clique na barra não rouba o foco da área (mousedown é impedido)", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    const evento = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+    screen.getByRole("button", { name: "Negrito" }).dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+  });
+
+  it("os botões de liga/desliga seguem o cursor (aria-pressed)", () => {
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>x</p>" />);
+    const negrito = screen.getByRole("button", { name: "Negrito" });
+    expect(negrito).toHaveAttribute("aria-pressed", "false");
+    estados.bold = true;
+    selecionarTudoNaArea();
+    fireEvent(document, new Event("selectionchange"));
+    expect(negrito).toHaveAttribute("aria-pressed", "true");
+    expect(negrito).toHaveClass("umds-rte__tool--active");
+    expect(screen.getByRole("button", { name: "Itálico" })).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByRole("button", { name: "Link" })).not.toHaveAttribute("aria-pressed");
+  });
+
+  it("Tab entra numa parada só; setas, Home e End movem entre as ferramentas", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" toolbar={["bold", "italic", "underline"]} />);
+    const botoes = screen.getAllByRole("button");
+    expect(botoes.map((b) => b.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+    botoes[0].focus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(botoes[1]).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(botoes[2]).toHaveFocus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(botoes[0]).toHaveFocus();
+    await usuario.keyboard("{ArrowLeft}");
+    expect(botoes[2]).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(botoes[0]).toHaveFocus();
+  });
+
+  it("readOnly: sem barra e a área não edita; disabled: botões desabilitados", () => {
+    const { rerender } = render(<RichTextEditor ariaLabel="x" readOnly defaultValue="<p>x</p>" />);
+    expect(screen.queryByRole("toolbar")).toBeNull();
+    expect(area()).toHaveAttribute("contenteditable", "false");
+    rerender(<RichTextEditor ariaLabel="x" disabled />);
+    for (const b of screen.getAllByRole("button")) expect(b).toBeDisabled();
+    expect(area()).toHaveAttribute("tabindex", "-1");
+  });
+});
+
+describe("RichTextEditor: link", () => {
+  it("o botão Link abre o campo, com foco nele; Esc fecha", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>texto</p>" />);
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    const campo = screen.getByLabelText("Endereço do link");
+    expect(campo).toHaveFocus();
+    await usuario.keyboard("{Escape}");
+    expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+  });
+
+  it("Ctrl+K abre o campo de link", () => {
+    render(<RichTextEditor ariaLabel="x" />);
+    fireEvent.keyDown(area(), { key: "k", ctrlKey: true });
+    expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+  });
+
+  it("com texto escolhido, aplicar cria o link; endereço sem esquema ganha https://", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>texto</p>" />);
+    selecionarTudoNaArea();
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    await usuario.type(screen.getByLabelText("Endereço do link"), "exemplo.com.br");
+    await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+    expect(execCommand).toHaveBeenCalledWith("createLink", false, "https://exemplo.com.br");
+    expect(screen.queryByLabelText("Endereço do link")).toBeNull();
+  });
+
+  it("sem texto escolhido, o endereço vira o texto do link", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>texto</p>" />);
+    const selecao = window.getSelection() as Selection;
+    const faixa = document.createRange();
+    faixa.setStart(area().querySelector("p")!.firstChild!, 2);
+    faixa.collapse(true);
+    selecao.removeAllRanges();
+    selecao.addRange(faixa);
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    await usuario.type(screen.getByLabelText("Endereço do link"), "https://1doc.com.br{Enter}");
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<a href="https://1doc.com.br">https://1doc.com.br</a>');
+  });
+
+  it("endereço perigoso não vira link: mostra o erro e continua aberto", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" defaultValue="<p>texto</p>" />);
+    selecionarTudoNaArea();
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    await usuario.type(screen.getByLabelText("Endereço do link"), "javascript:alert(1)");
+    await usuario.click(screen.getByRole("button", { name: "Aplicar" }));
+    expect(execCommand).not.toHaveBeenCalledWith("createLink", expect.anything(), expect.anything());
+    expect(screen.getByText("Use um endereço http, https, mailto ou tel.")).toBeInTheDocument();
+    expect(screen.getByLabelText("Endereço do link")).toBeInTheDocument();
+  });
+
+  it("em cima de um link existente, o campo vem preenchido e Remover link aparece", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" defaultValue='<p><a href="https://1doc.com.br">site</a></p>' />);
+    const selecao = window.getSelection() as Selection;
+    const faixa = document.createRange();
+    faixa.setStart(area().querySelector("a")!.firstChild!, 1);
+    faixa.collapse(true);
+    selecao.removeAllRanges();
+    selecao.addRange(faixa);
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    expect(screen.getByLabelText("Endereço do link")).toHaveValue("https://1doc.com.br");
+    await usuario.click(screen.getByRole("button", { name: "Remover link" }));
+    expect(execCommand).toHaveBeenCalledWith("unlink", false, undefined);
+  });
+
+  it("os textos do campo de link vêm por labels", async () => {
+    const usuario = userEvent.setup();
+    render(<RichTextEditor ariaLabel="x" labels={{ linkAddress: "Link address", linkApply: "Apply", linkCancel: "Cancel" }} />);
+    await usuario.click(screen.getByRole("button", { name: "Link" }));
+    expect(screen.getByLabelText("Link address")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+});
+
+describe("html-seguro", () => {
+  it("enderecoSeguro aceita http, https, mailto, tel, caminho e âncora; recusa o resto", () => {
+    for (const ok of ["https://a.com", "http://a.com", "mailto:a@b.com", "tel:+5584999999999", "/x", "./x", "../x", "#topo"]) {
+      expect(enderecoSeguro(ok)).toBe(ok);
+    }
+    for (const mau of ["javascript:alert(1)", "JaVaScRiPt:alert(1)", "java\nscript:alert(1)", "data:text/html,x", "vbscript:x", "exemplo.com"]) {
+      expect(enderecoSeguro(mau)).toBe("");
+    }
+  });
+
+  it("normalizarEndereco põe https:// no que não tem esquema e recusa o perigoso", () => {
+    expect(normalizarEndereco("exemplo.com.br")).toBe("https://exemplo.com.br");
+    expect(normalizarEndereco("  https://a.com ")).toBe("https://a.com");
+    expect(normalizarEndereco("javascript:alert(1)")).toBe("");
+    expect(normalizarEndereco("java\tscript:alert(1)")).toBe("");
+    expect(normalizarEndereco("")).toBe("");
+  });
+
+  it("sanitizarHtml tira tags desconhecidas mantendo o conteúdo e descarta as perigosas inteiras", () => {
+    expect(sanitizarHtml("<font color=red>a</font><iframe src=x>b</iframe><style>p{}</style>c")).toBe("ac");
+    expect(sanitizarHtml("<ul><li>um</li><li><b>dois</b></li></ul>")).toBe("<ul><li>um</li><li><b>dois</b></li></ul>");
+  });
+});

package/src/teste/SelectPlacementFiltro.test.tsx

@@ -0,0 +1,110 @@
+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: number, base: number, alturaDaTela: number) {
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    () => ({ 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: alturaDaTela, configurable: true });
+}
+
+describe("Select · placement", () => {
+  it("padrão abre para baixo", () => {
+    const { container } = render(<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(<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(<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(<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(<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(<Select ariaLabel="x" options={OPCOES} variant="filter" />);
+    expect(container.querySelector(".umds-select--filter")).not.toBeNull();
+    rerender(<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(
+      <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(
+      <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(
+      <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(<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(<Select ariaLabel="x" options={OPCOES} footer={<button>Gerenciar marcadores</button>} />);
+    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(<Select ariaLabel="x" options={OPCOES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select__footer")).toBeNull();
+  });
+});

package/src/teste/Stack.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Stack from "../components/Stack/Stack";
+
+const TAGS = ["div", "span", "ul", "ol", "li", "section", "nav", "header", "footer", "form"] as const;
+
+describe("Stack", () => {
+  it("sem props continua um div vertical com gap xxxs", () => {
+    const { container } = render(<Stack>x</Stack>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.tagName).toBe("DIV");
+    expect(el.className).toBe("umds-stack umds-stack--vertical umds-stack--gap-xxxs");
+  });
+
+  it("aceita gap none", () => {
+    const { container } = render(<Stack gap="none">x</Stack>);
+    expect(container.firstElementChild).toHaveClass("umds-stack--gap-none");
+  });
+
+  it.each(TAGS)("as=%s renderiza o elemento certo", (tag) => {
+    const { container } = render(<Stack as={tag}>x</Stack>);
+    expect(container.firstElementChild?.tagName.toLowerCase()).toBe(tag);
+  });
+
+  it("ul e ol mantêm a semântica de lista", () => {
+    const { container } = render(
+      <Stack as="ul" aria-label="Itens">
+        <Stack as="li">um</Stack>
+      </Stack>,
+    );
+    expect(screen.getByRole("list", { name: "Itens" })).toBeInTheDocument();
+    expect(container.querySelectorAll("li")).toHaveLength(1);
+  });
+
+  it("repassa id, aria-label, title e style ao elemento raiz", () => {
+    const { container } = render(
+      <Stack as="nav" id="menu" aria-label="Principal" title="Dica" style={{ marginTop: 4 }}>
+        x
+      </Stack>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.id).toBe("menu");
+    expect(el.getAttribute("aria-label")).toBe("Principal");
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.marginTop).toBe("4px");
+    expect(screen.getByRole("navigation", { name: "Principal" })).toBe(el);
+  });
+
+  it("as=form chama onSubmit", () => {
+    const aoEnviar = vi.fn((e: Event) => e.preventDefault());
+    const { container } = render(
+      <Stack as="form" onSubmit={aoEnviar}>
+        <button type="submit">Enviar</button>
+      </Stack>,
+    );
+    fireEvent.submit(container.querySelector("form") as HTMLFormElement);
+    expect(aoEnviar).toHaveBeenCalledTimes(1);
+  });
+
+  it("escreve as classes de item flex", () => {
+    const { container } = render(
+      <Stack grow shrink="0" basis="50" minWidth="auto" overflow="hidden" overflowY="auto" fullHeight>
+        x
+      </Stack>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    for (const c of [
+      "umds-stack--grow",
+      "umds-stack--shrink-0",
+      "umds-stack--basis-50",
+      "umds-stack--min-w-auto",
+      "umds-stack--overflow-hidden",
+      "umds-stack--overflow-y-auto",
+      "umds-stack--full-height",
+    ]) {
+      expect(el).toHaveClass(c);
+    }
+    expect(el).not.toHaveClass("umds-stack--full-width");
+  });
+});

package/src/teste/StatCardRotuloTopo.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+
+const raiz = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("StatCard · labelPosition", () => {
+  it("top escreve a classe; sem a prop o cartão é o de antes", () => {
+    const { container } = render(
+      <>
+        <StatCard value={44} label="Não lidos" labelPosition="top" />
+        <StatCard value={44} label="Não lidos" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-stat-card--rotulo-topo");
+    expect(container.children[1]).not.toHaveClass("umds-stat-card--rotulo-topo");
+  });
+
+  it("o número continua antes do rótulo no HTML (ordem do leitor de tela)", () => {
+    const { container } = render(<StatCard value={44} label="Não lidos" labelPosition="top" />);
+    const valor = container.querySelector(".umds-stat-card__valor") as HTMLElement;
+    const rotulo = container.querySelector(".umds-stat-card__rotulo") as HTMLElement;
+    expect(valor.compareDocumentPosition(rotulo) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
+describe("StatCard · infoTooltip", () => {
+  it("mostra o ⓘ como botão nomeado, dentro do rótulo, descrito pelo texto de ajuda", () => {
+    const { container } = render(<StatCard value={44} label="Não lidos" infoTooltip="Ainda não abertos por você." />);
+    const info = screen.getByRole("button", { name: "Mais informações" });
+    expect(container.querySelector(".umds-stat-card__rotulo")?.contains(info)).toBe(true);
+    expect(info).toHaveAccessibleDescription("Ainda não abertos por você.");
+  });
+
+  it("infoLabel traduz o nome do ⓘ", () => {
+    render(<StatCard value={1} label="Unread" infoTooltip="Not opened yet." infoLabel="More info" />);
+    expect(screen.getByRole("button", { name: "More info" })).toBeInTheDocument();
+  });
+
+  it("sem infoTooltip não há botão", () => {
+    render(<StatCard value={1} label="x" />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});