@1doc/1ds-react 0.0.1 → 2.7.1

package/src/teste/Kanban.test.tsx

@@ -0,0 +1,333 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import Kanban from "../components/Kanban/Kanban";
+import type {
+  KanbanColumnData,
+  KanbanCardMove,
+} from "../components/Kanban/Kanban";
+
+/**
+ * O Kanban tem três caminhos até o mesmo `onCardMove` — arrastar, teclado e
+ * (sem cartão pego) navegação de foco. Nenhum deles aparece numa foto. O que
+ * precisa ficar guardado:
+ *
+ *  - o PAYLOAD: `toIndex` é a posição final, já descontada a saída do cartão
+ *    da origem. Errar isso por um é o bug clássico de lista ordenável;
+ *  - Esc cancela sem chamar ninguém, e o cartão volta;
+ *  - o quadro é UMA parada de Tab (roving tabindex);
+ *  - cada passo do teclado é anunciado na região aria-live.
+ */
+
+const COLUNAS: KanbanColumnData[] = [
+  {
+    id: "todo",
+    title: "A fazer",
+    cards: [
+      { id: "a", title: "Cartão A" },
+      { id: "b", title: "Cartão B" },
+      { id: "c", title: "Cartão C" },
+    ],
+  },
+  {
+    id: "doing",
+    title: "Em andamento",
+    wipLimit: 1,
+    cards: [{ id: "d", title: "Cartão D" }],
+  },
+  { id: "done", title: "Concluído", cards: [] },
+];
+
+/** O mesmo `splice` que a documentação manda o consumidor fazer. */
+function aplicar(colunas: KanbanColumnData[], mov: KanbanCardMove) {
+  const copia = colunas.map((c) => ({ ...c, cards: c.cards.slice() }));
+  const origem = copia.find((c) => c.id === mov.fromColumnId)!;
+  const [cartao] = origem.cards.splice(mov.fromIndex, 1);
+  copia.find((c) => c.id === mov.toColumnId)!.cards.splice(mov.toIndex, 0, cartao);
+  return copia;
+}
+
+/** Quadro controlado, como no consumo real. */
+function Quadro({ aoMover }: { aoMover?: (m: KanbanCardMove) => void }) {
+  const [colunas, setColunas] = useState(COLUNAS);
+  return (
+    <Kanban
+      columns={colunas}
+      onCardMove={(m) => {
+        aoMover?.(m);
+        setColunas((atual) => aplicar(atual, m));
+      }}
+    />
+  );
+}
+
+const cartao = (nome: string) => screen.getByRole("button", { name: nome });
+const coluna = (nome: string) => screen.getByRole("group", { name: nome });
+const titulosDa = (nome: string) =>
+  within(coluna(nome))
+    .queryAllByRole("button")
+    .map((el) => el.getAttribute("aria-label"));
+
+describe("Kanban · teclado", () => {
+  it("Espaço pega, seta para a direita muda a coluna, Espaço solta", async () => {
+    const usuario = userEvent.setup();
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowRight}");
+    await usuario.keyboard(" ");
+
+    expect(aoMover).toHaveBeenCalledTimes(1);
+    expect(aoMover).toHaveBeenCalledWith({
+      cardId: "a",
+      fromColumnId: "todo",
+      fromIndex: 0,
+      toColumnId: "doing",
+      toIndex: 0,
+    });
+    expect(titulosDa("Em andamento")).toEqual(["Cartão A", "Cartão D"]);
+    expect(titulosDa("A fazer")).toEqual(["Cartão B", "Cartão C"]);
+  });
+
+  it("na mesma coluna, toIndex já desconta a saída do cartão", async () => {
+    const usuario = userEvent.setup();
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowDown}{ArrowDown}");
+    await usuario.keyboard("{Enter}");
+
+    expect(aoMover).toHaveBeenCalledWith({
+      cardId: "a",
+      fromColumnId: "todo",
+      fromIndex: 0,
+      toColumnId: "todo",
+      toIndex: 2,
+    });
+    expect(titulosDa("A fazer")).toEqual(["Cartão B", "Cartão C", "Cartão A"]);
+  });
+
+  it("a prévia move o cartão na tela antes de soltar, e o foco vai junto", async () => {
+    const usuario = userEvent.setup();
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+
+    cartao("Cartão B").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowRight}{ArrowRight}");
+
+    // Ainda não soltou: nada foi pedido ao consumidor…
+    expect(aoMover).not.toHaveBeenCalled();
+    // …mas o cartão já aparece na coluna de destino, vazia até então.
+    expect(titulosDa("Concluído")).toEqual(["Cartão B"]);
+    await waitFor(() => expect(cartao("Cartão B")).toHaveFocus());
+  });
+
+  it("Esc cancela: ninguém é chamado e o cartão volta", async () => {
+    const usuario = userEvent.setup();
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowRight}");
+    expect(titulosDa("Em andamento")).toContain("Cartão A");
+
+    await usuario.keyboard("{Escape}");
+
+    expect(aoMover).not.toHaveBeenCalled();
+    expect(titulosDa("A fazer")).toEqual(["Cartão A", "Cartão B", "Cartão C"]);
+    expect(screen.getByText(/Movimento cancelado/)).toBeInTheDocument();
+  });
+
+  it("anuncia pegar, mover (com o limite de WIP) e soltar", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<Quadro />);
+    const regiao = container.querySelector('[aria-live="assertive"]')!;
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    expect(regiao).toHaveTextContent(
+      "Cartão Cartão A pego. Coluna A fazer, posição 1 de 3.",
+    );
+
+    await usuario.keyboard("{ArrowRight}");
+    expect(regiao).toHaveTextContent(
+      "Coluna Em andamento, posição 1 de 2. Limite de 1 cartões excedido.",
+    );
+
+    await usuario.keyboard(" ");
+    expect(regiao).toHaveTextContent("Cartão Cartão A solto.");
+  });
+});
+
+describe("Kanban · pego", () => {
+  it("o cartão pego se marca com aria-pressed e larga as instruções", async () => {
+    const usuario = userEvent.setup();
+    render(<Quadro />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+
+    expect(cartao("Cartão A")).toHaveAttribute("aria-pressed", "true");
+    expect(cartao("Cartão A").getAttribute("aria-describedby")).not.toMatch(
+      /instrucoes/,
+    );
+    expect(cartao("Cartão B")).not.toHaveAttribute("aria-pressed");
+    expect(cartao("Cartão B").getAttribute("aria-describedby")).toMatch(
+      /instrucoes/,
+    );
+  });
+
+  it("bater na borda é anunciado, mesmo repetindo", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<Quadro />);
+    const regiao = container.querySelector('[aria-live="assertive"]')!;
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowUp}");
+    const primeira = regiao.textContent;
+    expect(primeira).toMatch(/^Início da coluna\. Coluna A fazer, posição 1 de 3\./);
+
+    // Mesmo texto de novo: o DOM precisa mudar, senão o leitor fica mudo.
+    await usuario.keyboard("{ArrowUp}");
+    expect(regiao.textContent).not.toBe(primeira);
+    expect(regiao.textContent?.trim()).toBe(primeira?.trim());
+  });
+
+  it("focar outro cartão cancela o movimento em vez de travar o quadro", async () => {
+    const usuario = userEvent.setup();
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard(" ");
+    await usuario.keyboard("{ArrowRight}");
+    expect(titulosDa("Em andamento")).toContain("Cartão A");
+
+    await usuario.click(cartao("Cartão C"));
+
+    expect(aoMover).not.toHaveBeenCalled();
+    expect(titulosDa("A fazer")).toEqual(["Cartão A", "Cartão B", "Cartão C"]);
+    expect(cartao("Cartão A")).not.toHaveAttribute("aria-pressed");
+  });
+
+  it("atalhos com Alt, Ctrl e Cmd não são engolidos", async () => {
+    const usuario = userEvent.setup();
+    render(<Quadro />);
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard("{Alt>}{ArrowDown}{/Alt}");
+    expect(cartao("Cartão A")).toHaveFocus();
+  });
+});
+
+describe("Kanban · foco", () => {
+  it("o quadro é uma parada só de Tab, e as setas passam o foco", async () => {
+    const usuario = userEvent.setup();
+    render(<Quadro />);
+
+    const focaveis = screen
+      .getAllByRole("button")
+      .filter((el) => el.getAttribute("tabindex") === "0");
+    expect(focaveis).toHaveLength(1);
+    expect(focaveis[0]).toHaveAccessibleName("Cartão A");
+
+    cartao("Cartão A").focus();
+    await usuario.keyboard("{ArrowDown}");
+    await waitFor(() => expect(cartao("Cartão B")).toHaveFocus());
+
+    // Seta para o lado leva à coluna vizinha, na posição mais próxima.
+    await usuario.keyboard("{ArrowRight}");
+    await waitFor(() => expect(cartao("Cartão D")).toHaveFocus());
+    expect(cartao("Cartão D")).toHaveAttribute("tabindex", "0");
+    expect(cartao("Cartão A")).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("Enter abre o cartão sem mover", async () => {
+    const usuario = userEvent.setup();
+    const aoAbrir = vi.fn();
+    const aoMover = vi.fn();
+    render(
+      <Kanban columns={COLUNAS} onCardClick={aoAbrir} onCardMove={aoMover} />,
+    );
+
+    cartao("Cartão C").focus();
+    await usuario.keyboard("{Enter}");
+
+    expect(aoAbrir).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "c" }),
+      "todo",
+    );
+    expect(aoMover).not.toHaveBeenCalled();
+  });
+});
+
+describe("Kanban · arrastar", () => {
+  /**
+   * No jsdom toda caixa mede zero, então o ponteiro cai sempre "depois" do
+   * último cartão: o destino é o fim da coluna. Basta para guardar o payload.
+   */
+  it("soltar noutra coluna entrega origem e destino", () => {
+    const aoMover = vi.fn();
+    const { container } = render(<Quadro aoMover={aoMover} />);
+    const dados = { setData: vi.fn(), effectAllowed: "", dropEffect: "" };
+    const listaConcluido = within(coluna("Concluído")).getByRole("list");
+
+    fireEvent.dragStart(cartao("Cartão B"), { dataTransfer: dados });
+    fireEvent.dragOver(listaConcluido, { dataTransfer: dados, clientY: 10 });
+    fireEvent.drop(listaConcluido, { dataTransfer: dados, clientY: 10 });
+
+    expect(dados.setData).toHaveBeenCalledWith("text/plain", "b");
+    expect(aoMover).toHaveBeenCalledWith({
+      cardId: "b",
+      fromColumnId: "todo",
+      fromIndex: 1,
+      toColumnId: "done",
+      toIndex: 0,
+    });
+    expect(titulosDa("Concluído")).toEqual(["Cartão B"]);
+    expect(container.querySelector(".umds-kanban__indicator")).toBeNull();
+  });
+
+  it("soltar onde o cartão já está não chama ninguém", () => {
+    const aoMover = vi.fn();
+    render(<Quadro aoMover={aoMover} />);
+    const dados = { setData: vi.fn(), effectAllowed: "", dropEffect: "" };
+    const listaAndamento = within(coluna("Em andamento")).getByRole("list");
+
+    // D é o único (e último) de "Em andamento": soltar no fim é ficar parado.
+    fireEvent.dragStart(cartao("Cartão D"), { dataTransfer: dados });
+    fireEvent.dragOver(listaAndamento, { dataTransfer: dados, clientY: 10 });
+    fireEvent.drop(listaAndamento, { dataTransfer: dados, clientY: 10 });
+
+    expect(aoMover).not.toHaveBeenCalled();
+  });
+});
+
+describe("Kanban · colunas", () => {
+  it("coluna vazia avisa, e o limite de WIP é dito por extenso", () => {
+    render(<Kanban columns={COLUNAS} />);
+    expect(within(coluna("Concluído")).getByText("Nenhum cartão")).toBeInTheDocument();
+    expect(
+      within(coluna("Em andamento")).getByText("1 de 1 cartões, limite atingido"),
+    ).toBeInTheDocument();
+  });
+
+  it("com onAddCard, cada coluna ganha o botão de adicionar", async () => {
+    const usuario = userEvent.setup();
+    const aoAdicionar = vi.fn();
+    render(<Kanban columns={COLUNAS} onAddCard={aoAdicionar} />);
+
+    await usuario.click(
+      within(coluna("Concluído")).getByRole("button", { name: /Adicionar cartão/ }),
+    );
+    expect(aoAdicionar).toHaveBeenCalledWith("done");
+  });
+});

package/src/teste/MultiSelect.test.tsx

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+
+/**
+ * O `MultiSelect` acumula estado que o olho não confere: o que está marcado, o
+ * que a busca filtrou, e o que sai no `onChange`. Escolher duas vezes a mesma
+ * opção tem de DESMARCAR, e é o caso que quebra quando alguém troca um `push`
+ * por um `concat` sem olhar.
+ */
+
+const OPCOES = [
+  { label: "Recursos Humanos", value: "rh" },
+  { label: "Financeiro", value: "fin" },
+  { label: "Tecnologia", value: "ti" },
+];
+
+describe("MultiSelect · seleção e busca", () => {
+  it("escolher duas opções devolve as duas, na ordem", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<MultiSelect label="Setores" options={OPCOES} onChange={aoMudar} />);
+
+    await usuario.click(screen.getByRole("combobox"));
+    await usuario.click(screen.getByRole("option", { name: /Financeiro/ }));
+    await usuario.click(screen.getByRole("option", { name: /Tecnologia/ }));
+
+    expect(aoMudar).toHaveBeenLastCalledWith(["fin", "ti"]);
+  });
+
+  it("clicar na opção já marcada desmarca", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(
+      <MultiSelect
+        label="Setores"
+        options={OPCOES}
+        defaultValue={["fin"]}
+        onChange={aoMudar}
+      />,
+    );
+
+    await usuario.click(screen.getByRole("combobox"));
+    await usuario.click(screen.getByRole("option", { name: /Financeiro/ }));
+
+    expect(aoMudar).toHaveBeenLastCalledWith([]);
+  });
+
+  it("a opção marcada se anuncia como selecionada", async () => {
+    const usuario = userEvent.setup();
+    render(<MultiSelect label="Setores" options={OPCOES} defaultValue={["ti"]} />);
+
+    await usuario.click(screen.getByRole("combobox"));
+
+    expect(screen.getByRole("option", { name: /Tecnologia/ })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("option", { name: /Financeiro/ })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  it("a lista se anuncia como múltipla escolha", async () => {
+    const usuario = userEvent.setup();
+    render(<MultiSelect label="Setores" options={OPCOES} />);
+
+    await usuario.click(screen.getByRole("combobox"));
+    expect(screen.getByRole("listbox")).toHaveAttribute("aria-multiselectable", "true");
+  });
+});

package/src/teste/Podium.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import Podium from "../components/Podium/Podium";
+
+/**
+ * O que a foto da esteira visual não prova é a ORDEM: o pódio desenha 2º, 1º,
+ * 3º, mas o DOM (e portanto o leitor de tela) precisa seguir 1º, 2º, 3º. Se
+ * alguém "simplificar" reordenando o array no componente em vez de posicionar
+ * pelo grid, a foto continua igual e estes testes caem.
+ */
+
+const RANKING = [
+  { id: 1, name: "Ana Paula Ribeiro", value: 128 },
+  { id: 2, name: "Moacir Antunes", value: 114 },
+  { id: 3, name: "Juliana Castro", value: 97 },
+  { id: 4, name: "Carlos Mendes", value: 80 },
+  { id: 5, name: "Beatriz Lima", value: 64 },
+];
+
+describe("Podium · ordem de leitura", () => {
+  it("o DOM segue 1º, 2º, 3º com a frase acessível completa", () => {
+    render(<Podium items={RANKING} unit="pontos" />);
+    const podio = screen.getByRole("list", { name: "Pódio" });
+    const lugares = within(podio).getAllByRole("listitem");
+    expect(lugares).toHaveLength(3);
+    expect(lugares[0]).toHaveTextContent("1º lugar: Ana Paula Ribeiro, 128 pontos");
+    expect(lugares[1]).toHaveTextContent("2º lugar: Moacir Antunes, 114 pontos");
+    expect(lugares[2]).toHaveTextContent("3º lugar: Juliana Castro, 97 pontos");
+  });
+
+  it("a posição visual sai da classe do lugar, não da ordem do array", () => {
+    render(<Podium items={RANKING} />);
+    const lugares = within(screen.getByRole("list", { name: "Pódio" })).getAllByRole("listitem");
+    expect(lugares[0]).toHaveClass("umds-podium__place--1");
+    expect(lugares[1]).toHaveClass("umds-podium__place--2");
+    expect(lugares[2]).toHaveClass("umds-podium__place--3");
+  });
+});
+
+describe("Podium · demais colocações", () => {
+  it("sem showRest, do 4º em diante não aparece", () => {
+    render(<Podium items={RANKING} />);
+    expect(screen.getAllByRole("list")).toHaveLength(1);
+    expect(screen.queryByText(/Carlos Mendes/)).toBeNull();
+  });
+
+  it("com showRest, a lista continua a contagem a partir do 4º", () => {
+    render(<Podium items={RANKING} unit="pontos" showRest restTitle="Demais" />);
+    const resto = screen.getByRole("list", { name: "Demais" });
+    const linhas = within(resto).getAllByRole("listitem");
+    expect(linhas).toHaveLength(2);
+    expect(linhas[0]).toHaveTextContent("4º lugar: Carlos Mendes, 80 pontos");
+    expect(linhas[1]).toHaveTextContent("5º lugar: Beatriz Lima, 64 pontos");
+  });
+});
+
+describe("Podium · título da lista", () => {
+  it("restTitle é um cabeçalho de verdade, h3 por padrão", () => {
+    render(<Podium items={RANKING} showRest restTitle="Demais" />);
+    expect(screen.getByRole("heading", { level: 3, name: "Demais" })).toBeInTheDocument();
+  });
+
+  it("restTitleAs troca o nível", () => {
+    render(<Podium items={RANKING} showRest restTitle="Demais" restTitleAs="h2" />);
+    expect(screen.getByRole("heading", { level: 2, name: "Demais" })).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { level: 3 })).toBeNull();
+  });
+});
+
+describe("Podium · casos de borda", () => {
+  it("menos de três itens não quebra e não inventa lugar vazio", () => {
+    render(<Podium items={RANKING.slice(0, 2)} />);
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+  });
+
+  it("lista vazia mostra o emptyText e nenhuma lista", () => {
+    render(<Podium items={[]} emptyText="Sem ranking ainda." />);
+    expect(screen.queryByRole("list")).toBeNull();
+    expect(screen.getByText("Sem ranking ainda.")).toBeInTheDocument();
+  });
+
+  it("valueLabel vence valueFormatter, que vence o valor cru", () => {
+    render(
+      <Podium
+        items={[
+          { id: 1, name: "A", value: 1000 },
+          { id: 2, name: "B", value: 0, valueLabel: "Sem empenho" },
+        ]}
+        valueFormatter={(v) => `R$ ${v}`}
+        positionLabel={(p) => `Place ${p}`}
+      />,
+    );
+    const lugares = screen.getAllByRole("listitem");
+    expect(lugares[0]).toHaveTextContent("Place 1: A, R$ 1000");
+    expect(lugares[1]).toHaveTextContent("Place 2: B, Sem empenho");
+  });
+
+  it("parte vazia não deixa vírgula solta na frase acessível", () => {
+    render(<Podium items={[{ id: 1, name: "", value: 120 }]} unit="pontos" />);
+    expect(screen.getByRole("listitem")).toHaveTextContent("1º lugar: 120 pontos");
+  });
+
+  it("iniciais saem da primeira e da última palavra quando não há initials", () => {
+    const { container } = render(<Podium items={[{ id: 1, name: "ana paula ribeiro", value: 1 }]} />);
+    expect(container.querySelector(".umds-avatar")).toHaveTextContent("AR");
+  });
+});