@1doc/1ds-react 2.8.0 → 2.9.0

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

package/src/teste/OtpInput.test.tsx

@@ -0,0 +1,163 @@
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import OtpInput from "../components/OtpInput/OtpInput";
+
+const caixas = () => screen.getAllByRole("textbox") as HTMLInputElement[];
+
+describe("OtpInput", () => {
+  it("tem 6 caixas por padrão, cada uma com nome próprio, num grupo nomeado", () => {
+    render(<OtpInput ariaLabel="Código de verificação" />);
+    expect(screen.getByRole("group", { name: "Código de verificação" })).toBeInTheDocument();
+    expect(caixas()).toHaveLength(6);
+    expect(screen.getByRole("textbox", { name: "Dígito 3 de 6" })).toBeInTheDocument();
+  });
+
+  it("length muda a quantidade e digitLabel traduz o nome", () => {
+    render(<OtpInput ariaLabel="Code" length={4} digitLabel="Digit {n} of {total}" />);
+    expect(caixas()).toHaveLength(4);
+    expect(screen.getByRole("textbox", { name: "Digit 2 of 4" })).toBeInTheDocument();
+  });
+
+  it("a primeira caixa leva autocomplete one-time-code e teclado numérico", () => {
+    render(<OtpInput ariaLabel="Código" />);
+    expect(caixas()[0]).toHaveAttribute("autocomplete", "one-time-code");
+    expect(caixas()[1]).toHaveAttribute("autocomplete", "off");
+    expect(caixas()[0]).toHaveAttribute("inputmode", "numeric");
+  });
+
+  it("digitar avança o foco e entrega o código em onChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<OtpInput ariaLabel="Código" onChange={aoMudar} />);
+    caixas()[0].focus();
+    await usuario.keyboard("482");
+    expect(aoMudar).toHaveBeenLastCalledWith("482");
+    expect(caixas().map((c) => c.value).join("")).toBe("482");
+    expect(caixas()[3]).toHaveFocus();
+  });
+
+  it("rejeita o que não é dígito (numeric)", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<OtpInput ariaLabel="Código" onChange={aoMudar} />);
+    caixas()[0].focus();
+    await usuario.keyboard("a-b");
+    expect(aoMudar).not.toHaveBeenCalled();
+    expect(caixas()[0].value).toBe("");
+    expect(caixas()[0]).toHaveFocus();
+  });
+
+  it("alphanumeric aceita letras e sai em maiúsculas", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<OtpInput ariaLabel="Código" type="alphanumeric" length={4} onChange={aoMudar} />);
+    caixas()[0].focus();
+    await usuario.keyboard("a9z");
+    expect(aoMudar).toHaveBeenLastCalledWith("A9Z");
+    expect(caixas()[0]).toHaveAttribute("inputmode", "text");
+  });
+
+  it("colar o código inteiro em qualquer caixa distribui e chama onComplete uma vez", async () => {
+    const usuario = userEvent.setup();
+    const aoCompletar = vi.fn();
+    render(<OtpInput ariaLabel="Código" onComplete={aoCompletar} />);
+    caixas()[2].focus();
+    await usuario.paste("482 913");
+    expect(caixas().map((c) => c.value).join("")).toBe("482913");
+    expect(aoCompletar).toHaveBeenCalledTimes(1);
+    expect(aoCompletar).toHaveBeenCalledWith("482913");
+    expect(caixas()[5]).toHaveFocus();
+  });
+
+  it("colar um pedaço entra a partir da caixa atual", async () => {
+    const usuario = userEvent.setup();
+    render(<OtpInput ariaLabel="Código" defaultValue="12" />);
+    caixas()[2].focus();
+    await usuario.paste("345");
+    expect(caixas().map((c) => c.value).join("")).toBe("12345");
+  });
+
+  it("onComplete só dispara quando as caixas enchem", async () => {
+    const usuario = userEvent.setup();
+    const aoCompletar = vi.fn();
+    render(<OtpInput ariaLabel="Código" length={3} onComplete={aoCompletar} />);
+    caixas()[0].focus();
+    await usuario.keyboard("12");
+    expect(aoCompletar).not.toHaveBeenCalled();
+    await usuario.keyboard("3");
+    expect(aoCompletar).toHaveBeenCalledWith("123");
+  });
+
+  it("Backspace apaga o caractere e, em caixa vazia, volta e apaga o anterior", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<OtpInput ariaLabel="Código" defaultValue="123" onChange={aoMudar} />);
+    caixas()[3].focus();
+    await usuario.keyboard("{Backspace}");
+    expect(aoMudar).toHaveBeenLastCalledWith("12");
+    expect(caixas()[2]).toHaveFocus();
+    await usuario.keyboard("{Backspace}");
+    expect(aoMudar).toHaveBeenLastCalledWith("1");
+  });
+
+  it("setas, Home e End movem o foco", async () => {
+    const usuario = userEvent.setup();
+    render(<OtpInput ariaLabel="Código" defaultValue="1234" />);
+    caixas()[4].focus();
+    await usuario.keyboard("{ArrowLeft}");
+    expect(caixas()[3]).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(caixas()[0]).toHaveFocus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(caixas()[1]).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(caixas()[4]).toHaveFocus();
+  });
+
+  it("focar uma caixa à frente da primeira vazia volta para ela (sem buraco)", async () => {
+    const usuario = userEvent.setup();
+    render(<OtpInput ariaLabel="Código" defaultValue="12" />);
+    await usuario.click(caixas()[5]);
+    expect(caixas()[2]).toHaveFocus();
+  });
+
+  it("controlado: reflete o value e escreve no pai", async () => {
+    const usuario = userEvent.setup();
+    function Pai() {
+      const [codigo, setCodigo] = useState("");
+      return (
+        <>
+          <OtpInput ariaLabel="Código" value={codigo} onChange={setCodigo} />
+          <output data-testid="codigo">{codigo}</output>
+        </>
+      );
+    }
+    render(<Pai />);
+    caixas()[0].focus();
+    await usuario.keyboard("90");
+    expect(screen.getByTestId("codigo")).toHaveTextContent("90");
+    expect(caixas()[1].value).toBe("0");
+  });
+
+  it("errorMessage liga o estado de erro e descreve as caixas", () => {
+    render(<OtpInput ariaLabel="Código" errorMessage="Código inválido" id="otp" />);
+    expect(screen.getByText("Código inválido")).toBeInTheDocument();
+    for (const c of caixas()) {
+      expect(c).toHaveAttribute("aria-invalid", "true");
+      expect(c).toHaveAttribute("aria-describedby", "otp-error");
+    }
+  });
+
+  it("disabled desabilita todas as caixas; label visível nomeia o grupo", () => {
+    render(<OtpInput label="Código do app" disabled id="o" />);
+    for (const c of caixas()) expect(c).toBeDisabled();
+    expect(screen.getByRole("group", { name: "Código do app" })).toBeInTheDocument();
+  });
+
+  it("autoFocus foca a primeira caixa vazia", () => {
+    render(<OtpInput ariaLabel="Código" autoFocus defaultValue="12" />);
+    expect(caixas()[2]).toHaveFocus();
+  });
+});

package/src/teste/PopoverMaxHeight.test.tsx

@@ -0,0 +1,47 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Popover from "../components/Popover/Popover";
+import Button from "../components/Button/Button";
+
+beforeAll(() => {
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+async function abrirCom(maxHeight?: number | string) {
+  const usuario = userEvent.setup();
+  render(
+    <Popover title="Colunas" maxHeight={maxHeight} content={<p>Corpo do painel</p>}>
+      <Button variant="secondary">Abrir</Button>
+    </Popover>,
+  );
+  await usuario.click(screen.getByRole("button", { name: "Abrir" }));
+  const corpo = document.querySelector(".umds-popover__body") as HTMLElement;
+  expect(corpo).not.toBeNull();
+  return corpo;
+}
+
+describe("Popover · maxHeight", () => {
+  it("sem a prop não escreve style no corpo (o teto de 300px do CSS segue valendo)", async () => {
+    const corpo = await abrirCom();
+    expect(corpo.getAttribute("style")).toBeNull();
+  });
+
+  it("número vira px", async () => {
+    expect((await abrirCom(180)).style.maxHeight).toBe("180px");
+  });
+
+  it("texto vai como CSS", async () => {
+    expect((await abrirCom("60vh")).style.maxHeight).toBe("60vh");
+  });
+
+  it("none deixa o corpo crescer", async () => {
+    expect((await abrirCom("none")).style.maxHeight).toBe("none");
+  });
+});