@1doc/1ds-react 0.0.1 → 2.7.1

package/src/teste/Chart.test.tsx

@@ -0,0 +1,233 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import BarChart from "../components/Chart/BarChart";
+import LineChart from "../components/Chart/LineChart";
+import DonutChart from "../components/Chart/DonutChart";
+import {
+  CHART_MAX_SERIES,
+  RAIO_DA_BARRA,
+  caminhoDaBarra,
+  escalaRedonda,
+  formatarValor,
+  montarRosca,
+} from "../utils/chart";
+
+/**
+ * O desenho dos gráficos quem guarda é a esteira visual. Aqui fica o que uma
+ * foto não mostra: a escala redonda que sempre inclui o zero, o teto de
+ * cinco cores, a tabela que leva os números ao leitor de tela, e o teclado
+ * que anda entre as categorias.
+ */
+
+const MESES = [
+  { label: "Jan", value: 120 },
+  { label: "Fev", value: 90 },
+  { label: "Mar", value: 150 },
+];
+
+const SERIES = [
+  { name: "2025", values: [10, 20, 30] },
+  { name: "2026", values: [15, null, 35] },
+];
+
+describe("Chart · geometria", () => {
+  it("a escala tem números redondos e sempre inclui o zero", () => {
+    const escala = escalaRedonda([37, 142]);
+    expect(escala.min).toBe(0);
+    expect(escala.max).toBeGreaterThanOrEqual(142);
+    expect(escala.ticks[0]).toBe(0);
+    const passo = escala.ticks[1] - escala.ticks[0];
+    for (const t of escala.ticks) expect(t % passo).toBe(0);
+  });
+
+  it("valores negativos puxam a escala para baixo do zero", () => {
+    const escala = escalaRedonda([-12, 40]);
+    expect(escala.min).toBeLessThan(0);
+    expect(escala.ticks).toContain(0);
+  });
+
+  it("formata em pt-BR, com % encostado e outras unidades com espaço", () => {
+    expect(formatarValor(1234.5, {})).toBe("1.234,5");
+    expect(formatarValor(12, { unit: "%" })).toBe("12%");
+    expect(formatarValor(3, { unit: "dias" })).toBe("3 dias");
+    expect(formatarValor(null, {})).toBe("—");
+    expect(formatarValor(5, { valueFormatter: (v) => `R$ ${v}`, unit: "%" })).toBe("R$ 5");
+  });
+
+  it("a ponta da barra usa o raio canônico, limitado por metade da largura e da altura", () => {
+    const raio = (d: string) => Number(/A([\d.]+),/.exec(d)?.[1]);
+    expect(RAIO_DA_BARRA).toBe(8);
+    // Barra larga e alta: 8px na ponta, quadrada na base (y0 = 100).
+    const alta = caminhoDaBarra(0, 24, 100, 20);
+    expect(raio(alta)).toBe(8);
+    expect(alta.startsWith("M0,100V28")).toBe(true);
+    // Fina: nunca vira pílula.
+    expect(raio(caminhoDaBarra(0, 6, 100, 20))).toBe(3);
+    // Curta: não passa da metade da altura.
+    expect(raio(caminhoDaBarra(0, 24, 100, 94))).toBe(3);
+    // Negativa: arredonda embaixo, base quadrada no zero.
+    const negativa = caminhoDaBarra(0, 24, 100, 180);
+    expect(raio(negativa)).toBe(8);
+    expect(negativa.startsWith("M0,100V172")).toBe(true);
+  });
+
+  it("a rosca agrupa o excedente em Outros, na cor neutra", () => {
+    const partes = Array.from({ length: 7 }, (_, i) => ({ label: `P${i}`, value: 10 }));
+    const rosca = montarRosca(partes, 160, {}, "Outros");
+    expect(rosca.fatias).toHaveLength(CHART_MAX_SERIES);
+    const ultima = rosca.fatias[rosca.fatias.length - 1];
+    expect(ultima.nome).toBe("Outros");
+    expect(ultima.valor).toBe(30);
+    expect(ultima.serie).toBe(0);
+    expect(rosca.total).toBe(70);
+  });
+});
+
+describe("BarChart", () => {
+  it("desenha uma barra por valor e resume o gráfico no role=img", () => {
+    const { container } = render(<BarChart data={MESES} title="Processos por mês" />);
+    expect(container.querySelectorAll(".umds-chart__barra")).toHaveLength(3);
+    const resumo = screen.getByRole("img").getAttribute("aria-label") || "";
+    expect(resumo).toContain("3 categorias");
+    // O título já nomeia a figura pela <figcaption>; repetir seria ler duas vezes.
+    expect(resumo).not.toContain("Processos por mês");
+    expect(container.querySelector("figure > figcaption")?.textContent).toBe("Processos por mês");
+  });
+
+  it("leva os números a uma tabela para o leitor de tela", () => {
+    render(<BarChart series={SERIES} labels={["Jan", "Fev", "Mar"]} />);
+    const tabela = screen.getByRole("table");
+    expect(within(tabela).getAllByRole("columnheader").map((c) => c.textContent)).toEqual([
+      "Categoria",
+      "2025",
+      "2026",
+    ]);
+    const fev = within(tabela).getByRole("rowheader", { name: "Fev" }).closest("tr")!;
+    expect(fev.textContent).toContain("20");
+    // "—" é lido como "travessão": para o leitor de tela, ausência vira texto.
+    expect(fev.textContent).toContain("sem dado");
+  });
+
+  it("série única não tem legenda; duas séries têm", () => {
+    const { container, rerender } = render(<BarChart data={MESES} />);
+    expect(container.querySelector(".umds-chart__legenda")).toBeNull();
+    rerender(<BarChart series={SERIES} labels={["Jan", "Fev", "Mar"]} />);
+    expect(container.querySelectorAll(".umds-chart__legenda-item")).toHaveLength(2);
+    rerender(<BarChart series={SERIES} labels={["Jan", "Fev", "Mar"]} showLegend={false} />);
+    expect(container.querySelector(".umds-chart__legenda")).toBeNull();
+  });
+
+  it("não desenha a sexta série — cor gerada não existe", () => {
+    const muitas = Array.from({ length: 7 }, (_, i) => ({ name: `S${i}`, values: [i + 1] }));
+    const { container } = render(<BarChart series={muitas} labels={["A"]} />);
+    expect(container.querySelectorAll(".umds-chart__barra")).toHaveLength(CHART_MAX_SERIES);
+  });
+
+  it("sem valores mostra o texto de vazio, sem tabela nem desenho", () => {
+    render(<BarChart data={[]} emptyText="Nada por aqui" />);
+    expect(screen.getByText("Nada por aqui")).toBeTruthy();
+    expect(screen.queryByRole("img")).toBeNull();
+    expect(screen.queryByRole("table")).toBeNull();
+  });
+
+  it("Tab entra numa categoria só; as setas andam e o tooltip acompanha", () => {
+    const { container } = render(<BarChart data={MESES} />);
+    const alvos = screen.getAllByRole("listitem");
+    expect(alvos.map((a) => a.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+    // O texto está DENTRO do item (oculto), não num aria-label: JAWS ignora
+    // aria-label em listitem no modo de navegação.
+    expect(alvos[0].textContent).toBe("Jan: 120");
+
+    fireEvent.focus(alvos[0]);
+    expect(container.querySelector(".umds-chart__tooltip")?.textContent).toContain("Jan");
+
+    fireEvent.keyDown(alvos[0], { key: "ArrowRight" });
+    expect(document.activeElement).toBe(alvos[1]);
+    fireEvent.focus(alvos[1]);
+    expect(container.querySelector(".umds-chart__tooltip")?.textContent).toContain("Fev");
+    expect(screen.getAllByRole("listitem")[1].getAttribute("tabindex")).toBe("0");
+
+    fireEvent.keyDown(alvos[1], { key: "End" });
+    expect(document.activeElement).toBe(alvos[2]);
+
+    fireEvent.focus(alvos[2]);
+    // fireEvent devolve false quando o evento teve preventDefault.
+    expect(fireEvent.keyDown(alvos[2], { key: "Escape" })).toBe(false);
+    expect(container.querySelector(".umds-chart__tooltip")).toBeNull();
+
+    // Sem tooltip, o Esc passa adiante — é ele que fecha o Modal em volta.
+    expect(fireEvent.keyDown(alvos[2], { key: "Escape" })).toBe(true);
+  });
+
+  it("o mouse saindo de outra categoria não apaga o tooltip de quem tem o foco", () => {
+    const { container } = render(<BarChart data={MESES} />);
+    const alvos = screen.getAllByRole("listitem");
+    fireEvent.focus(alvos[0]);
+    fireEvent.mouseEnter(alvos[2]);
+    expect(container.querySelector(".umds-chart__tooltip")?.textContent).toContain("Mar");
+    fireEvent.mouseLeave(alvos[2]);
+    expect(container.querySelector(".umds-chart__tooltip")?.textContent).toContain("Jan");
+  });
+
+  it("dados que encolhem não tiram o gráfico da ordem de Tab", () => {
+    const { rerender } = render(<BarChart data={MESES} />);
+    fireEvent.focus(screen.getAllByRole("listitem")[2]);
+    rerender(<BarChart data={MESES.slice(0, 2)} />);
+    expect(screen.getAllByRole("listitem").map((a) => a.getAttribute("tabindex"))).toContain("0");
+  });
+
+  it("com uma categoria em foco, as barras das outras recuam", () => {
+    const { container } = render(<BarChart data={MESES} />);
+    fireEvent.mouseEnter(screen.getAllByRole("listitem")[2]);
+    expect(container.querySelectorAll(".umds-chart__barra--recuada")).toHaveLength(2);
+  });
+});
+
+describe("LineChart", () => {
+  it("um traço por série e null interrompe a linha", () => {
+    const { container } = render(<LineChart series={SERIES} labels={["Jan", "Fev", "Mar"]} />);
+    const tracos = container.querySelectorAll(".umds-chart__linha");
+    expect(tracos).toHaveLength(2);
+    // 2026 tem um buraco em Fev: dois "M" no caminho, nunca um "L" atravessando.
+    expect((tracos[1].getAttribute("d") || "").match(/M/g)).toHaveLength(2);
+  });
+
+  it("pontos só na categoria em foco, a menos que showPoints", () => {
+    const { container, rerender } = render(<LineChart data={MESES} />);
+    expect(container.querySelectorAll(".umds-chart__ponto")).toHaveLength(0);
+    fireEvent.mouseEnter(screen.getAllByRole("listitem")[1]);
+    expect(container.querySelectorAll(".umds-chart__ponto")).toHaveLength(1);
+    expect(container.querySelector(".umds-chart__cursor")).not.toBeNull();
+    rerender(<LineChart data={MESES} showPoints />);
+    expect(container.querySelectorAll(".umds-chart__ponto")).toHaveLength(3);
+  });
+});
+
+describe("DonutChart", () => {
+  const PARTES = [
+    { label: "Concluídos", value: 60 },
+    { label: "Em andamento", value: 30 },
+    { label: "Pendentes", value: 10 },
+  ];
+
+  it("total no centro e legenda com valor e percentual em texto", () => {
+    const { container } = render(<DonutChart data={PARTES} />);
+    expect(container.querySelector(".umds-chart__centro-valor")?.textContent).toBe("100");
+    const itens = screen.getAllByRole("listitem");
+    expect(itens).toHaveLength(3);
+    expect(itens[0].textContent).toContain("Concluídos");
+    expect(itens[0].textContent).toContain("60%");
+  });
+
+  it("sem legenda visível, a lista continua para o leitor de tela", () => {
+    const { container } = render(<DonutChart data={PARTES} showLegend={false} />);
+    const lista = container.querySelector(".umds-chart__legenda")!;
+    expect(lista.className).toContain("umds-chart__oculto");
+    expect(screen.getAllByRole("listitem")).toHaveLength(3);
+  });
+
+  it("total zero é estado vazio", () => {
+    render(<DonutChart data={[{ label: "A", value: 0 }]} />);
+    expect(screen.getByText("Sem dados para exibir.")).toBeTruthy();
+  });
+});

package/src/teste/Combobox.test.tsx

@@ -0,0 +1,251 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Combobox from "../components/Combobox/Combobox";
+
+/**
+ * O `Combobox` é o primeiro campo do DS em que digitar MUDA a lista. Três
+ * contratos não se veem numa foto e quebram calados:
+ *
+ *  - o filtro roda sobre o texto digitado, e PARA de rodar quando a busca é
+ *    remota (`onSearchChange`) — filtrar de novo esconderia o que o servidor
+ *    acabou de mandar;
+ *  - `allowCustomValue` muda o Enter: sem ela o Enter pega a sugestão
+ *    destacada, com ela o Enter respeita o que a pessoa escreveu;
+ *  - `aria-activedescendant` precisa apontar para um id que EXISTE, inclusive
+ *    quando o filtro esvazia a lista.
+ */
+
+const ESTADOS = [
+  { label: "Paraná", value: "PR" },
+  { label: "Rio de Janeiro", value: "RJ" },
+  { label: "Rio Grande do Sul", value: "RS" },
+  { label: "São Paulo", value: "SP" },
+];
+
+describe("Combobox · filtro", () => {
+  it("digitar filtra a lista pelo rótulo, sem diferenciar maiúscula", async () => {
+    const usuario = userEvent.setup();
+    render(<Combobox label="Estado" options={ESTADOS} />);
+
+    await usuario.type(screen.getByRole("combobox"), "RIO");
+
+    const opcoes = screen.getAllByRole("option");
+    expect(opcoes).toHaveLength(2);
+    expect(opcoes[0]).toHaveTextContent("Rio de Janeiro");
+    expect(opcoes[1]).toHaveTextContent("Rio Grande do Sul");
+  });
+
+  it("sem resultado, mostra o texto de vazio e nenhuma opção", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <Combobox label="Estado" options={ESTADOS} emptyLabel="Nada aqui" />,
+    );
+
+    await usuario.type(screen.getByRole("combobox"), "zzz");
+
+    expect(screen.queryAllByRole("option")).toHaveLength(0);
+    expect(screen.getByText("Nada aqui")).toBeInTheDocument();
+  });
+
+  /**
+   * O contrato que o Storybook quebrou na primeira versão: `onSearchChange`
+   * presente significa "quem filtra é o servidor". Se o componente filtrasse
+   * também, um resultado remoto que não casa com o texto digitado sumiria.
+   */
+  it("com onSearchChange, NÃO filtra localmente", async () => {
+    const usuario = userEvent.setup();
+    const aoBuscar = vi.fn();
+    render(
+      <Combobox label="Estado" options={ESTADOS} onSearchChange={aoBuscar} />,
+    );
+
+    await usuario.type(screen.getByRole("combobox"), "zzz");
+
+    expect(screen.getAllByRole("option")).toHaveLength(ESTADOS.length);
+  });
+
+  it("onInputChange apenas observa — o filtro local continua", async () => {
+    const usuario = userEvent.setup();
+    const aoDigitar = vi.fn();
+    render(
+      <Combobox label="Estado" options={ESTADOS} onInputChange={aoDigitar} />,
+    );
+
+    await usuario.type(screen.getByRole("combobox"), "par");
+
+    expect(aoDigitar).toHaveBeenLastCalledWith("par");
+    expect(screen.getAllByRole("option")).toHaveLength(1);
+  });
+});
+
+describe("Combobox · teclado", () => {
+  it("ArrowDown abre a lista e Enter escolhe a opção destacada", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Combobox label="Estado" options={ESTADOS} onChange={aoMudar} />);
+
+    const campo = screen.getByRole("combobox");
+    await usuario.click(campo);
+    expect(campo).toHaveAttribute("aria-expanded", "false");
+
+    await usuario.keyboard("{ArrowDown}");
+    expect(campo).toHaveAttribute("aria-expanded", "true");
+
+    await usuario.keyboard("{ArrowDown}{Enter}");
+
+    expect(aoMudar).toHaveBeenCalledWith("RJ");
+    expect(campo).toHaveValue("Rio de Janeiro");
+    expect(campo).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("ArrowUp na primeira opção dá a volta para a última", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Combobox label="Estado" options={ESTADOS} onChange={aoMudar} />);
+
+    const campo = screen.getByRole("combobox");
+    await usuario.click(campo);
+    await usuario.keyboard("{ArrowDown}{ArrowUp}{Enter}");
+
+    expect(aoMudar).toHaveBeenCalledWith("SP");
+  });
+
+  it("Escape fecha a lista; com a lista fechada, limpa o campo", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <Combobox label="Estado" options={ESTADOS} clearable defaultValue="PR" />,
+    );
+
+    const campo = screen.getByRole("combobox");
+    await usuario.click(campo);
+    await usuario.keyboard("{ArrowDown}");
+    expect(campo).toHaveAttribute("aria-expanded", "true");
+
+    await usuario.keyboard("{Escape}");
+    expect(campo).toHaveAttribute("aria-expanded", "false");
+    expect(campo).toHaveValue("Paraná");
+
+    await usuario.keyboard("{Escape}");
+    expect(campo).toHaveValue("");
+  });
+});
+
+describe("Combobox · sair do campo", () => {
+  /**
+   * Digitar e sair sem escolher deixava o texto meio-digitado no campo com o
+   * valor antigo por baixo. O campo passava a mentir — inclusive para o leitor
+   * de tela, que lê o texto do input como nome do campo.
+   */
+  it("texto meio-digitado volta para o rótulo do valor escolhido", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <>
+        <Combobox label="Estado" options={ESTADOS} defaultValue="PR" />
+        <button>fora</button>
+      </>,
+    );
+
+    const campo = screen.getByRole("combobox");
+    await usuario.clear(campo);
+    await usuario.type(campo, "rio");
+    expect(campo).toHaveValue("rio");
+
+    await usuario.tab();
+    expect(campo).toHaveValue("Paraná");
+  });
+
+  it("com allowCustomValue o texto É o valor, e fica como está", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <>
+        <Combobox label="Assunto" options={ESTADOS} allowCustomValue />
+        <button>fora</button>
+      </>,
+    );
+
+    const campo = screen.getByRole("combobox");
+    await usuario.type(campo, "outro assunto");
+    await usuario.tab();
+
+    expect(campo).toHaveValue("outro assunto");
+  });
+});
+
+describe("Combobox · texto livre", () => {
+  it("sem allowCustomValue, o Enter pega a primeira sugestão", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Combobox label="Estado" options={ESTADOS} onChange={aoMudar} />);
+
+    await usuario.type(screen.getByRole("combobox"), "são{Enter}");
+
+    expect(aoMudar).toHaveBeenCalledWith("SP");
+  });
+
+  /**
+   * Com texto livre nenhuma opção nasce destacada — senão o Enter trocaria o
+   * que a pessoa escreveu pela sugestão de cima, que é exatamente o que ela
+   * NÃO quis ao digitar algo fora da lista.
+   */
+  it("com allowCustomValue, o Enter respeita o que foi digitado", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(
+      <Combobox
+        label="Assunto"
+        options={ESTADOS}
+        allowCustomValue
+        onChange={aoMudar}
+      />,
+    );
+
+    await usuario.type(screen.getByRole("combobox"), "são{Enter}");
+
+    expect(aoMudar).toHaveBeenCalledWith("são");
+  });
+});
+
+describe("Combobox · acessibilidade", () => {
+  it("o rótulo visível nomeia o campo", () => {
+    render(<Combobox label="Estado" options={ESTADOS} />);
+    expect(screen.getByRole("combobox", { name: "Estado" })).toBeInTheDocument();
+  });
+
+  /**
+   * `aria-activedescendant` apontando para um id inexistente é referência
+   * quebrada — o leitor de tela anuncia o nada. O caso que quebra é o filtro
+   * esvaziar a lista com um índice ativo ainda de pé.
+   */
+  it("aria-activedescendant só existe quando aponta para uma opção real", async () => {
+    const usuario = userEvent.setup();
+    render(<Combobox label="Estado" options={ESTADOS} />);
+    const campo = screen.getByRole("combobox");
+
+    await usuario.type(campo, "rio");
+    const idAtivo = campo.getAttribute("aria-activedescendant");
+    expect(idAtivo).toBeTruthy();
+    expect(document.getElementById(idAtivo!)).toBeInTheDocument();
+
+    // Filtro esvaziou a lista: ou o atributo some, ou ele aponta para algo que
+    // existe. Apontar para um id ausente é referência quebrada.
+    await usuario.type(campo, "zzz");
+    expect(screen.queryAllByRole("option")).toHaveLength(0);
+    const depois = campo.getAttribute("aria-activedescendant");
+    if (depois !== null) {
+      expect(document.getElementById(depois)).toBeInTheDocument();
+    }
+  });
+
+  it("readOnly não abre a lista", async () => {
+    const usuario = userEvent.setup();
+    render(<Combobox label="Estado" options={ESTADOS} readOnly />);
+
+    const campo = screen.getByRole("combobox");
+    await usuario.click(campo);
+    await usuario.keyboard("{ArrowDown}");
+
+    expect(campo).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryAllByRole("option")).toHaveLength(0);
+  });
+});

package/src/teste/DataTable.test.tsx

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DataTable from "../components/DataTable/DataTable";
+
+/**
+ * O que esta suíte guarda: o P0-01 da auditoria de 18/09.
+ *
+ * Com `selectable` e `onRowClick` juntos, o Espaço dentro do checkbox era
+ * engolido pelo `preventDefault` do handler da linha e acionava a linha inteira
+ * — marcar por teclado era impossível. Foi corrigido, e nada impedia de voltar:
+ * a regressão visual não vê tecla, e o axe não vê comportamento.
+ */
+
+const COLUNAS = [
+  { key: "nome", label: "Nome" },
+  { key: "setor", label: "Setor" },
+];
+
+const DADOS = [
+  { nome: "Cris Lima", setor: "SADM" },
+  { nome: "Ana Paula", setor: "SEJUS" },
+];
+
+describe("DataTable · seleção por teclado", () => {
+  it("o Espaço no checkbox marca a linha e NÃO aciona onRowClick", async () => {
+    const usuario = userEvent.setup();
+    const aoClicarNaLinha = vi.fn();
+    const aoSelecionar = vi.fn();
+
+    render(
+      <DataTable
+        columns={COLUNAS}
+        data={DADOS}
+        selectable
+        onRowClick={aoClicarNaLinha}
+        onSelect={aoSelecionar}
+      />,
+    );
+
+    // O primeiro checkbox é o "selecionar todas" do cabeçalho; o da linha é o 2º.
+    const caixas = screen.getAllByRole("checkbox");
+    await usuario.tab();
+    caixas[1].focus();
+    await usuario.keyboard(" ");
+
+    expect(aoSelecionar).toHaveBeenCalledWith([0]);
+    expect(aoClicarNaLinha).not.toHaveBeenCalled();
+  });
+
+  it("o Espaço na própria linha aciona onRowClick", async () => {
+    const usuario = userEvent.setup();
+    const aoClicarNaLinha = vi.fn();
+
+    render(<DataTable columns={COLUNAS} data={DADOS} onRowClick={aoClicarNaLinha} />);
+
+    const linhas = screen.getAllByRole("row");
+    // getAllByRole('row') inclui a linha de cabeçalho — a primeira de dados é a 2ª.
+    linhas[1].focus();
+    await usuario.keyboard(" ");
+
+    expect(aoClicarNaLinha).toHaveBeenCalledWith(0, DADOS[0]);
+  });
+
+  it("sem onRowClick a linha fica fora da ordem de tabulação", () => {
+    render(<DataTable columns={COLUNAS} data={DADOS} />);
+    const linhas = screen.getAllByRole("row");
+    expect(linhas[1]).not.toHaveAttribute("tabindex", "0");
+  });
+});

package/src/teste/DatePicker.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DatePicker from "../components/DatePicker/DatePicker";
+
+/**
+ * O que esta suíte guarda: o P0-02 da auditoria de 18/09.
+ *
+ * O foco nunca entrava no painel. `ArrowDown` abria o calendário e o teclado
+ * ficava inerte, porque o painel vive num Portal e o Tab a partir do gatilho ia
+ * para o resto da página — o calendário era inoperável sem mouse.
+ *
+ * O alvo do foco é o dia marcado pelo roving tabindex, que é a verdade do DOM
+ * no instante em que o frame roda. O seletor anterior lia um valor de estado da
+ * closure do render anterior, que ao abrir ainda era o antigo.
+ */
+
+describe("DatePicker · teclado", () => {
+  it("abrir com ArrowDown põe o foco num dia do calendário", async () => {
+    const usuario = userEvent.setup();
+    render(<DatePicker label="Data de nascimento" />);
+
+    const gatilho = screen.getByRole("combobox");
+    gatilho.focus();
+    await usuario.keyboard("{ArrowDown}");
+
+    const painel = await screen.findByRole("dialog");
+    expect(painel).toBeVisible();
+
+    // O foco tem de estar DENTRO do painel, não no gatilho nem no body.
+    await waitFor(() => {
+      expect(painel.contains(document.activeElement)).toBe(true);
+    });
+  });
+
+  it("o dia focável é único — roving tabindex", async () => {
+    const usuario = userEvent.setup();
+    render(<DatePicker label="Data" />);
+
+    await usuario.click(screen.getByRole("combobox"));
+    const painel = await screen.findByRole("dialog");
+
+    const focaveis = painel.querySelectorAll('.umds-datepicker__day[tabindex="0"]');
+    expect(focaveis.length).toBe(1);
+  });
+
+  it("Escape fecha o painel e devolve o foco ao campo", async () => {
+    const usuario = userEvent.setup();
+    render(<DatePicker label="Data" />);
+
+    const gatilho = screen.getByRole("combobox");
+    await usuario.click(gatilho);
+    await screen.findByRole("dialog");
+
+    await usuario.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    expect(document.activeElement).toBe(gatilho);
+  });
+
+  /**
+   * `format` é de EXIBIÇÃO; o `onChange` entrega ISO. Vale fixar em teste
+   * porque é a pergunta que todo consumidor faz e a resposta não está óbvia
+   * na API: quem monta um formulário quer saber o que vai para o backend.
+   */
+  it("escolher um dia devolve ISO no onChange, não o formato de exibição", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<DatePicker label="Data" format="DD/MM/YYYY" onChange={aoMudar} />);
+
+    await usuario.click(screen.getByRole("combobox"));
+    const painel = await screen.findByRole("dialog");
+
+    const dia15 = painel.querySelector('[aria-label^="15 de"]') as HTMLElement;
+    expect(dia15).toBeTruthy();
+    await usuario.click(dia15);
+
+    expect(aoMudar).toHaveBeenCalled();
+    const valor = aoMudar.mock.calls[0][0];
+    expect(valor).toMatch(/^\d{4}-\d{2}-15$/);
+    // E o campo mostra no formato pedido, que é outra coisa.
+    expect(screen.getByRole("combobox")).toHaveTextContent(/15\/\d{2}\/\d{4}/);
+  });
+});