@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/ListItemTooltipStandalone.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListItem from "../components/List/ListItem";
+
+describe("ListItem: tooltip, standalone e atributos só no elemento interativo", () => {
+  it("tooltip vira o atributo title do elemento interativo, e o li fica limpo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Memorando 114/2025" tooltip="Abrir o memorando" aria-label="Memorando" role="menuitem" data-origem="home" />
+      </ul>,
+    );
+    const li = container.querySelector("li") as HTMLElement;
+    const botao = screen.getByRole("menuitem");
+    expect(botao).toHaveAttribute("title", "Abrir o memorando");
+    expect(botao).toHaveAttribute("aria-label", "Memorando");
+    expect(botao).toHaveAttribute("data-origem", "home");
+    for (const atributo of ["title", "aria-label", "role", "data-origem"]) expect(li).not.toHaveAttribute(atributo);
+  });
+
+  it("tooltip funciona no link e na linha div; sem tooltip não há title", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Link" href="/x" tooltip="Dica do link" />
+        <ListItem as="div" title="Div" tooltip="Dica da div" />
+        <ListItem title="Sem dica" />
+      </ul>,
+    );
+    const titulos = [...container.querySelectorAll(".umds-list-item")].map((e) => e.getAttribute("title"));
+    expect(titulos).toEqual(["Dica do link", "Dica da div", null]);
+  });
+
+  it("o título da linha continua sendo texto, não o atributo", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Só o título" />
+      </ul>,
+    );
+    expect(container.querySelector("[title]")).toBeNull();
+  });
+
+  it("standalone renderiza sem li, só o elemento interativo", () => {
+    const aoClicar = vi.fn();
+    const { container } = render(
+      <div>
+        <ListItem standalone title="12" tooltip="Página 12" onClick={aoClicar} />
+      </div>,
+    );
+    expect(container.querySelector("li")).toBeNull();
+    const botao = screen.getByRole("button", { name: /12/ });
+    expect(botao.parentElement?.tagName).toBe("DIV");
+    expect(botao).toHaveAttribute("title", "Página 12");
+    fireEvent.click(botao);
+    expect(aoClicar).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem standalone o li continua lá", () => {
+    const { container } = render(
+      <ul>
+        <ListItem title="Normal" />
+      </ul>,
+    );
+    expect(container.querySelectorAll("li")).toHaveLength(1);
+  });
+});

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

package/src/teste/OrgChart.test.tsx

@@ -0,0 +1,183 @@
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import OrgChart from "../components/OrgChart/OrgChart";
+
+const ARVORE = [
+  {
+    id: "copirn",
+    title: "COPIRN",
+    subtitle: "Companhia Potiguar de Infraestrutura",
+    children: [
+      { id: "aj", title: "AJ", subtitle: "Assessoria Jurídica" },
+      {
+        id: "sadm",
+        title: "SADM",
+        subtitle: "Secretaria de Administração",
+        children: [
+          { id: "al", title: "AL", subtitle: "Almoxarifado" },
+          { id: "ssa", title: "SSA", subtitle: "Subsetor do Almoxarifado" },
+        ],
+      },
+      { id: "sfin", title: "SFIN", subtitle: "Secretaria de Finanças" },
+    ],
+  },
+];
+
+const item = (id: string) => document.querySelector(`[data-node-id="${id}"]`) as HTMLElement;
+const esquerda = (id: string) => parseFloat(item(id).style.left);
+
+describe("OrgChart", () => {
+  it("é uma tree nomeada, com um treeitem por nó visível e níveis ARIA", () => {
+    render(<OrgChart nodes={ARVORE} ariaLabel="Setores" />);
+    expect(screen.getByRole("tree", { name: "Setores" })).toBeInTheDocument();
+    expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+    expect(item("copirn")).toHaveAttribute("aria-level", "1");
+    expect(item("al")).toHaveAttribute("aria-level", "3");
+    expect(item("sadm")).toHaveAttribute("aria-posinset", "2");
+    expect(item("sadm")).toHaveAttribute("aria-setsize", "3");
+    expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+    expect(item("aj")).not.toHaveAttribute("aria-expanded");
+  });
+
+  it("o nome padrão é Organograma; título e subtítulo aparecem", () => {
+    render(<OrgChart nodes={ARVORE} />);
+    expect(screen.getByRole("tree", { name: "Organograma" })).toBeInTheDocument();
+    expect(within(item("aj")).getByText("AJ")).toBeInTheDocument();
+    expect(within(item("aj")).getByText("Assessoria Jurídica")).toBeInTheDocument();
+  });
+
+  it("o pai se centra sobre os filhos e os irmãos andam lado a lado", () => {
+    render(<OrgChart nodes={ARVORE} nodeWidth={100} gapX={20} />);
+    expect(esquerda("aj")).toBe(0);
+    expect(esquerda("al")).toBe(120);
+    expect(esquerda("ssa")).toBe(240);
+    expect(esquerda("sadm")).toBe(180);
+    expect(esquerda("sfin")).toBe(360);
+    expect(esquerda("copirn")).toBe((0 + 360) / 2);
+    expect(parseFloat(item("sadm").style.top)).toBeGreaterThan(parseFloat(item("copirn").style.top));
+  });
+
+  it("desenha um conector por pai expandido", () => {
+    const { container } = render(<OrgChart nodes={ARVORE} />);
+    expect(container.querySelectorAll(".umds-org-chart__line")).toHaveLength(2);
+  });
+
+  it("a raiz é cheia e o nó marcado leva aria-selected", () => {
+    render(<OrgChart nodes={ARVORE} selectedId="aj" />);
+    expect(item("copirn")).toHaveClass("umds-org-chart__node--root");
+    expect(item("aj")).toHaveAttribute("aria-selected", "true");
+    expect(item("sfin")).not.toHaveAttribute("aria-selected");
+  });
+
+  it("recolher esconde os filhos e avisa; expandir volta", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<OrgChart nodes={ARVORE} onCollapsedChange={aoMudar} />);
+    item("sadm").focus();
+    await usuario.keyboard(" ");
+    expect(aoMudar).toHaveBeenLastCalledWith(["sadm"]);
+    expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+    expect(item("sadm")).toHaveAttribute("aria-expanded", "false");
+    await usuario.keyboard(" ");
+    expect(aoMudar).toHaveBeenLastCalledWith([]);
+    expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+  });
+
+  it("o botão de expandir do mouse faz o mesmo e não aciona o nó", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    const { container } = render(<OrgChart nodes={ARVORE} onNodeClick={aoClicar} />);
+    const botoes = container.querySelectorAll(".umds-org-chart__toggle");
+    expect(botoes).toHaveLength(2);
+    await usuario.click(botoes[1] as HTMLElement);
+    expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+    expect(aoClicar).not.toHaveBeenCalled();
+  });
+
+  it("defaultCollapsedIds começa recolhido; collapsedIds controla", () => {
+    const { rerender } = render(<OrgChart nodes={ARVORE} defaultCollapsedIds={["sadm"]} />);
+    expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+    rerender(<OrgChart nodes={ARVORE} collapsedIds={["copirn"]} />);
+    expect(screen.getAllByRole("treeitem")).toHaveLength(1);
+  });
+
+  it("clicar e Enter acionam o nó com o nó", async () => {
+    const usuario = userEvent.setup();
+    const aoClicar = vi.fn();
+    render(<OrgChart nodes={ARVORE} onNodeClick={aoClicar} />);
+    await usuario.click(item("aj"));
+    expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "aj" }));
+    item("sfin").focus();
+    await usuario.keyboard("{Enter}");
+    expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "sfin" }));
+  });
+
+  it("só um nó entra na ordem de Tab (o primeiro)", () => {
+    render(<OrgChart nodes={ARVORE} />);
+    const comTab = screen.getAllByRole("treeitem").filter((n) => n.getAttribute("tabindex") === "0");
+    expect(comTab).toHaveLength(1);
+    expect(comTab[0]).toHaveAttribute("data-node-id", "copirn");
+  });
+
+  it("setas: baixo desce ao primeiro filho, cima sobe ao pai, lados andam entre irmãos, Home e End", async () => {
+    const usuario = userEvent.setup();
+    render(<OrgChart nodes={ARVORE} />);
+    item("copirn").focus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(item("aj")).toHaveFocus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(item("sadm")).toHaveFocus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(item("al")).toHaveFocus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(item("ssa")).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(item("al")).toHaveFocus();
+    await usuario.keyboard("{ArrowUp}");
+    expect(item("sadm")).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(item("sfin")).toHaveFocus();
+    await usuario.keyboard("{ArrowLeft}{ArrowLeft}");
+    expect(item("aj")).toHaveFocus();
+  });
+
+  it("baixo num nó recolhido abre; o foco desce no seguinte", async () => {
+    const usuario = userEvent.setup();
+    render(<OrgChart nodes={ARVORE} defaultCollapsedIds={["sadm"]} />);
+    item("sadm").focus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+    await usuario.keyboard("{ArrowDown}");
+    expect(item("al")).toHaveFocus();
+  });
+
+  it("renderNode troca o conteúdo do nó", () => {
+    render(<OrgChart nodes={ARVORE} renderNode={(no, meta) => <b data-testid={"c-" + no.id}>{no.title + ":" + meta.level}</b>} />);
+    expect(screen.getByTestId("c-ssa")).toHaveTextContent("SSA:2");
+    expect(item("ssa").querySelector(".umds-org-chart__title")).toBeNull();
+  });
+
+  it("textos do botão por prop; sem nós, não desenha a árvore", () => {
+    const { container, rerender } = render(<OrgChart nodes={ARVORE} expandLabel="Expand" collapseLabel="Collapse" />);
+    expect(container.querySelector(".umds-org-chart__toggle")).toHaveAttribute("title", "Collapse");
+    rerender(<OrgChart nodes={[]} />);
+    expect(screen.queryByRole("tree")).toBeNull();
+  });
+
+  it("controlado por pai", () => {
+    function Pai() {
+      const [fechados, setFechados] = useState<string[]>([]);
+      return (
+        <>
+          <OrgChart nodes={ARVORE} collapsedIds={fechados} onCollapsedChange={setFechados} />
+          <button onClick={() => setFechados(["sadm"])}>fechar</button>
+        </>
+      );
+    }
+    render(<Pai />);
+    fireEvent.click(screen.getByText("fechar"));
+    expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+  });
+});