@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/SelectFiltroCorETamanho.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Select from "../components/Select/Select";
+
+const MARCADORES = [
+  { label: "Urgente", value: "urgente", color: "var(--umds-semantic-color-feedback-negative-pure)" },
+  { label: "Revisão", value: "revisao", color: "var(--umds-semantic-color-primary-pure)" },
+  { label: "Sem marcador", value: "nenhum" },
+];
+
+describe("Select filtro · tamanho e fundo", () => {
+  it("as variantes de filtro nascem no tamanho sm; size explícito manda; o padrão segue md", () => {
+    const { container, rerender } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).toHaveClass("umds-select--sm");
+    rerender(<Select ariaLabel="x" options={MARCADORES} variant="search" />);
+    expect(raiz()).toHaveClass("umds-select--sm");
+    rerender(<Select ariaLabel="x" options={MARCADORES} variant="combo" />);
+    expect(raiz()).toHaveClass("umds-select--sm");
+    rerender(<Select ariaLabel="x" options={MARCADORES} variant="filter" size="md" />);
+    expect(raiz()).toHaveClass("umds-select--md");
+    rerender(<Select ariaLabel="x" options={MARCADORES} />);
+    expect(raiz()).toHaveClass("umds-select--md");
+    expect(raiz()).not.toHaveClass("umds-select--sm");
+  });
+
+  it("o azul-claro do gatilho só vem com valor escolhido (--has-value); sem valor, não", () => {
+    const { container, rerender } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    expect(raiz()).not.toHaveClass("umds-select--has-value");
+    rerender(<Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" value="urgente" />);
+    expect(raiz()).toHaveClass("umds-select--has-value");
+    rerender(<Select ariaLabel="x" options={MARCADORES} placeholder="Marcadores" value="urgente" />);
+    expect(raiz()).not.toHaveClass("umds-select--has-value");
+  });
+
+  it("o valor vazio do emptyOptionLabel volta ao estado sem valor", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" emptyOptionLabel="Todos" value="" />,
+    );
+    expect(container.firstElementChild).not.toHaveClass("umds-select--has-value");
+  });
+});
+
+describe("Select · cor por opção", () => {
+  it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const opcoes = [...container.querySelectorAll('[role="option"]')];
+    expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
+    expect((opcoes[0].querySelector(".umds-select__swatch") as HTMLElement).style.background).toContain("--umds-semantic-color-feedback-negative-pure");
+    expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
+    expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+  });
+
+  it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" value="revisao" />);
+    const amostra = container.querySelector(".umds-select__trigger .umds-select__swatch") as HTMLElement;
+    expect(amostra.style.background).toContain("--umds-semantic-color-primary-pure");
+  });
+
+  it("opção escolhida sem color e estado sem valor: o gatilho não tem amostra", () => {
+    const { container, rerender } = render(<Select ariaLabel="x" options={MARCADORES} placeholder="Marcadores" value="nenhum" />);
+    expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+    rerender(<Select ariaLabel="x" options={MARCADORES} placeholder="Marcadores" />);
+    expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+  });
+
+  it("triggerSwatch explícito manda sobre a cor da opção", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={MARCADORES} value="urgente" triggerSwatch="var(--umds-semantic-color-feedback-positive-pure)" />,
+    );
+    const amostras = container.querySelectorAll(".umds-select__trigger .umds-select__swatch");
+    expect(amostras).toHaveLength(1);
+    expect((amostras[0] as HTMLElement).style.background).toContain("--umds-semantic-color-feedback-positive-pure");
+  });
+
+  it("na seleção múltipla o gatilho não pinta amostra (são várias), mas a lista mostra as cores", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} multiple value={["urgente", "revisao"]} />);
+    expect(container.querySelector(".umds-select__trigger .umds-select__swatch")).toBeNull();
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelectorAll('[role="option"] .umds-select__swatch')).toHaveLength(2);
+  });
+
+  it("a cor não vira texto nem entra no nome acessível da opção", () => {
+    render(<Select ariaLabel="x" options={MARCADORES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
+  });
+});

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();
+  });
+});

package/src/teste/StatCardSecundariaETom.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import StatCard from "../components/StatCard/StatCard";
+
+describe("StatCard · segunda medida e valueTone", () => {
+  it("secondaryValue e secondaryLabel vêm depois do corpo, e o número principal segue antes do rótulo", () => {
+    const { container } = render(
+      <StatCard value="22,31%" label="Eficiência" description="Meu Setor" secondaryValue="14,11%" secondaryLabel="Geral" labelPosition="top" />,
+    );
+    const filhos = [...(container.firstElementChild as HTMLElement).children].map((e) => e.className);
+    expect(filhos[filhos.length - 1]).toBe("umds-stat-card__secundaria");
+    const secundaria = container.querySelector(".umds-stat-card__secundaria") as HTMLElement;
+    expect(secundaria.querySelector(".umds-stat-card__valor-secundario")).toHaveTextContent("14,11%");
+    expect(secundaria.querySelector(".umds-stat-card__rotulo-secundario")).toHaveTextContent("Geral");
+    expect(container.firstElementChild).toHaveClass("umds-stat-card--com-secundaria");
+    const texto = (container.firstElementChild as HTMLElement).textContent as string;
+    expect(texto.indexOf("22,31%")).toBeLessThan(texto.indexOf("Eficiência"));
+    expect(texto.indexOf("Eficiência")).toBeLessThan(texto.indexOf("14,11%"));
+  });
+
+  it("secondaryValue 0 aparece; vazio e ausente não", () => {
+    const { container, rerender } = render(<StatCard value="5" label="x" secondaryValue={0} />);
+    expect(container.querySelector(".umds-stat-card__valor-secundario")).toHaveTextContent("0");
+    rerender(<StatCard value="5" label="x" secondaryValue="" />);
+    expect(container.querySelector(".umds-stat-card__secundaria")).toBeNull();
+    rerender(<StatCard value="5" label="x" />);
+    expect(container.querySelector(".umds-stat-card__secundaria")).toBeNull();
+    expect(container.firstElementChild).not.toHaveClass("umds-stat-card--com-secundaria");
+  });
+
+  it("secondaryValue sem secondaryLabel não desenha o rótulo", () => {
+    const { container } = render(<StatCard value="5" label="x" secondaryValue="9" />);
+    expect(container.querySelector(".umds-stat-card__rotulo-secundario")).toBeNull();
+  });
+
+  it("valueTone escreve a classe do tom; default e ausente não", () => {
+    const { container, rerender } = render(<StatCard value="5" label="x" valueTone="negative" />);
+    expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-negative");
+    rerender(<StatCard value="5" label="x" valueTone="primary" />);
+    expect(container.firstElementChild).toHaveClass("umds-stat-card--valor-primary");
+    rerender(<StatCard value="5" label="x" valueTone="default" />);
+    expect(container.firstElementChild!.className).not.toMatch(/valor-/);
+    rerender(<StatCard value="5" label="x" />);
+    expect(container.firstElementChild!.className).not.toMatch(/valor-/);
+  });
+
+  it("valueTone não mexe na variant do ícone", () => {
+    const { container } = render(<StatCard value="5" label="x" variant="positive" valueTone="negative" />);
+    expect(container.firstElementChild).toHaveClass("umds-stat-card--positive", "umds-stat-card--valor-negative");
+  });
+});

package/src/teste/TabsContadorFechavel.test.tsx

@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+
+describe("Tab · count", () => {
+  it("mostra o contador em pílula e ele entra no nome da aba", () => {
+    render(
+      <Tabs value="0" ariaLabel="Tarefas">
+        <Tab label="Todas" index="0" count={31} />
+        <Tab label="Atribuídas" index="1" count={9} />
+      </Tabs>,
+    );
+    expect(screen.getByRole("tab", { name: "Todas 31" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Atribuídas 9" })).toBeInTheDocument();
+  });
+
+  it("o 0 aparece; sem count, não há pílula", () => {
+    const { container } = render(
+      <Tabs value="0">
+        <Tab label="Concluídas" index="0" count={0} />
+        <Tab label="Sem contador" index="1" />
+      </Tabs>,
+    );
+    const pilulas = container.querySelectorAll(".umds-tabs__count");
+    expect(pilulas).toHaveLength(1);
+    expect(pilulas[0].textContent).toBe("0");
+  });
+
+  it("a pílula fica dentro da aba selecionada (que a pinta de azul pelo CSS)", () => {
+    const { container } = render(
+      <Tabs value="1">
+        <Tab label="A" index="0" count={1} />
+        <Tab label="B" index="1" count={2} />
+      </Tabs>,
+    );
+    const selecionada = container.querySelector(".umds-tabs__tab--selected");
+    expect(selecionada?.querySelector(".umds-tabs__count")?.textContent).toBe("2");
+  });
+});
+
+describe("Tab · closable", () => {
+  it("o × é um botão irmão da aba, com o nome 'Fechar <aba>'", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Documento 1" index="0" closable />
+      </Tabs>,
+    );
+    const fechar = screen.getByRole("button", { name: "Fechar Documento 1" });
+    const aba = screen.getByRole("tab");
+    expect(aba.contains(fechar)).toBe(false);
+    expect(fechar.parentElement).toBe(aba.parentElement);
+  });
+
+  it("o rótulo do × vem por prop", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Doc 1" index="0" closable closeLabel="Close" />
+      </Tabs>,
+    );
+    expect(screen.getByRole("button", { name: "Close Doc 1" })).toBeInTheDocument();
+  });
+
+  it("clicar no × chama onClose com o index e não troca de aba", () => {
+    const aoFechar = vi.fn();
+    const aoTrocar = vi.fn();
+    render(
+      <Tabs value="0" onChange={aoTrocar}>
+        <Tab label="Um" index="0" />
+        <Tab label="Dois" index="1" closable onClose={aoFechar} />
+      </Tabs>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Fechar Dois" }));
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    expect(aoFechar.mock.calls[0][0]).toBe("1");
+    expect(aoTrocar).not.toHaveBeenCalled();
+  });
+
+  it("Delete na aba focada fecha; sem closable, não", () => {
+    const aoFechar = vi.fn();
+    render(
+      <Tabs value="0">
+        <Tab label="Fechável" index="0" closable onClose={aoFechar} />
+        <Tab label="Fixa" index="1" onClose={aoFechar} />
+      </Tabs>,
+    );
+    fireEvent.keyDown(screen.getByRole("tab", { name: "Fechável" }), { key: "Delete" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    fireEvent.keyDown(screen.getByRole("tab", { name: "Fixa" }), { key: "Delete" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem closable não há ×", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Fixa" index="0" />
+      </Tabs>,
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("o tablist só tem abas como filhas de papel (o × não é tab)", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="A" index="0" closable />
+        <Tab label="B" index="1" closable />
+      </Tabs>,
+    );
+    expect(screen.getAllByRole("tab")).toHaveLength(2);
+  });
+});
+
+describe("Tabs · onAdd", () => {
+  it("mostra o + fora do tablist e chama onAdd", () => {
+    const aoAdicionar = vi.fn();
+    render(
+      <Tabs value="0" onAdd={aoAdicionar}>
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    const mais = screen.getByRole("button", { name: "Adicionar aba" });
+    expect(screen.getByRole("tablist").contains(mais)).toBe(false);
+    fireEvent.click(mais);
+    expect(aoAdicionar).toHaveBeenCalledTimes(1);
+  });
+
+  it("o rótulo do + vem por prop", () => {
+    render(
+      <Tabs value="0" onAdd={() => {}} addLabel="New tab">
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    expect(screen.getByRole("button", { name: "New tab" })).toBeInTheDocument();
+  });
+
+  it("sem onAdd não há botão", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});

package/src/teste/ToastAcaoEDetalhes.test.tsx

@@ -0,0 +1,109 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Toast from "../components/Toast/Toast";
+import ToastStack from "../components/Toast/ToastStack";
+import { dismissAllToasts, toast } from "../utils/toast";
+
+afterEach(() => {
+  act(() => dismissAllToasts());
+});
+
+describe("Toast · ação e detalhes", () => {
+  it("actionLabel com onAction desenha o botão; acionar chama onAction e fecha", () => {
+    const aoAgir = vi.fn();
+    const aoFechar = vi.fn();
+    render(<Toast open message="Despacho enviado" actionLabel="Desfazer" onAction={aoAgir} onClose={aoFechar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("a ação roda antes de fechar", () => {
+    const ordem: string[] = [];
+    render(
+      <Toast
+        open
+        message="x"
+        actionLabel="Ver processo"
+        onAction={() => ordem.push("acao")}
+        onClose={() => ordem.push("fechar")}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Ver processo" }));
+    expect(ordem).toEqual(["acao", "fechar"]);
+  });
+
+  it("actionLabel sem onAction, ou onAction sem actionLabel, não desenha botão de ação", () => {
+    const { rerender } = render(<Toast open message="x" actionLabel="Desfazer" />);
+    expect(screen.queryByRole("button", { name: "Desfazer" })).toBeNull();
+    rerender(<Toast open message="x" onAction={() => {}} />);
+    expect(document.querySelector(".umds-toast__action")).toBeNull();
+  });
+
+  it("details vira uma lista de linhas abaixo da descrição", () => {
+    render(<Toast open message="3 anexos não enviados" description="Corrija e envie de novo." details={["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]} />);
+    const itens = screen.getAllByRole("listitem");
+    expect(itens.map((i) => i.textContent)).toEqual(["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]);
+  });
+
+  it("sem details não há lista", () => {
+    render(<Toast open message="Salvo" />);
+    expect(document.querySelector(".umds-toast__details")).toBeNull();
+  });
+
+  it("o botão de fechar continua ao lado da ação", () => {
+    render(<Toast open message="x" actionLabel="Desfazer" onAction={() => {}} />);
+    expect(screen.getByRole("button", { name: "Fechar notificação" })).toBeInTheDocument();
+  });
+});
+
+describe("toast() imperativo com ação e detalhes", () => {
+  it("passa ação e detalhes ao ToastStack, e acionar a ação fecha o toast", () => {
+    const aoAgir = vi.fn();
+    render(<ToastStack />);
+    act(() => {
+      toast({ message: "Despacho enviado", details: ["SADM", "SOBR"], actionLabel: "Desfazer", onAction: aoAgir });
+    });
+    expect(screen.getByText("Despacho enviado")).toBeInTheDocument();
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText("Despacho enviado")).toBeNull();
+  });
+
+  it("toast com ação não some sozinho (duration 0); sem ação continua em 5000", () => {
+    vi.useFakeTimers();
+    try {
+      render(<ToastStack />);
+      act(() => {
+        toast({ message: "Com ação", actionLabel: "Desfazer", onAction: () => {} });
+        toast({ message: "Sem ação" });
+      });
+      expect(screen.getByText("Com ação")).toBeInTheDocument();
+      expect(screen.getByText("Sem ação")).toBeInTheDocument();
+      act(() => {
+        vi.advanceTimersByTime(5100);
+      });
+      expect(screen.queryByText("Sem ação")).toBeNull();
+      expect(screen.getByText("Com ação")).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("um duration explícito vale também com ação", () => {
+    vi.useFakeTimers();
+    try {
+      render(<ToastStack />);
+      act(() => {
+        toast({ message: "Curto", actionLabel: "Desfazer", onAction: () => {}, duration: 1000 });
+      });
+      act(() => {
+        vi.advanceTimersByTime(1100);
+      });
+      expect(screen.queryByText("Curto")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});