@1doc/1ds-react 2.12.2 → 2.14.0

package/src/teste/PedidosMatheus.test.tsx

@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Button from "../components/Button/Button";
+import Counter from "../components/Counter/Counter";
+import Dropdown from "../components/Dropdown/Dropdown";
+import ListItem from "../components/List/ListItem";
+import StatCard from "../components/StatCard/StatCard";
+
+describe("Counter", () => {
+  it("sem animação mostra o valor final formatado em pt-BR", () => {
+    const { container } = render(<Counter value={1284} disableAnimation />);
+    expect(container.querySelector(".umds-counter__numero")).toHaveTextContent("1.284");
+    expect(container.querySelector(".umds-counter__numero")).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("1.284");
+  });
+
+  it("casas decimais seguem o value; prefixo e sufixo entram no texto", () => {
+    const { container } = render(
+      <>
+        <Counter value={22.31} suffix="%" disableAnimation />
+        <Counter value={15890.5} prefix="R$ " decimals={2} disableAnimation />
+      </>,
+    );
+    const leituras = container.querySelectorAll(".umds-counter__leitura");
+    expect(leituras[0]).toHaveTextContent("22,31%");
+    expect(leituras[1].textContent).toBe("R$ 15.890,50");
+  });
+
+  it("conta do from até o valor e termina no valor exato", async () => {
+    vi.useFakeTimers();
+    const { container } = render(<Counter value={500} duration={100} />);
+    const numero = () => container.querySelector(".umds-counter__numero")!.textContent;
+    expect(numero()).toBe("0");
+    await act(async () => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(numero()).toBe("500");
+    // A reserva e a leitura já nascem com o valor final.
+    expect(container.querySelector(".umds-counter__leitura")).toHaveTextContent("500");
+    vi.useRealTimers();
+  });
+});
+
+describe("ListItem · actions", () => {
+  it("as ações ficam no li, fora do elemento clicável", () => {
+    const { container } = render(
+      <ul>
+        <ListItem href="#doc" title="Memorando" actions={<button type="button">Mais</button>} />
+      </ul>,
+    );
+    const acao = screen.getByRole("button", { name: "Mais" });
+    expect(acao.closest("a")).toBeNull();
+    expect(acao.parentElement).toHaveClass("umds-list-item__actions");
+    expect(container.querySelector("li > a")).toHaveAttribute("href", "#doc");
+  });
+});
+
+describe("Button · href", () => {
+  it("com href é um link; desabilitado volta a ser botão", () => {
+    render(
+      <>
+        <Button href="#inbox">Inbox</Button>
+        <Button href="#cal" target="_blank">Calendário</Button>
+        <Button href="#fila" disabled>Fila</Button>
+      </>,
+    );
+    expect(screen.getByRole("link", { name: "Inbox" })).toHaveAttribute("href", "#inbox");
+    expect(screen.getByRole("link", { name: "Calendário" })).toHaveAttribute("rel", "noopener noreferrer");
+    expect(screen.getByRole("button", { name: "Fila" })).toBeDisabled();
+  });
+
+  it("loading segura a navegação do link", () => {
+    render(<Button href="#inbox" loading loadingPosition="start">Inbox</Button>);
+    const link = screen.getByRole("link", { name: "Inbox" });
+    const evento = new MouseEvent("click", { bubbles: true, cancelable: true });
+    link.dispatchEvent(evento);
+    expect(evento.defaultPrevented).toBe(true);
+  });
+});
+
+describe("Dropdown · href", () => {
+  it("item com href vira <a role=menuitem>, e o onSelect continua", async () => {
+    const onSelect = vi.fn();
+    render(
+      <Dropdown
+        ariaLabel="Ações"
+        onSelect={onSelect}
+        items={[
+          { key: "assinar", label: "Assinar", href: "#assinar" },
+          { key: "arquivar", label: "Arquivar" },
+        ]}
+      >
+        <button type="button">Abrir</button>
+      </Dropdown>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+    const assinar = await screen.findByRole("menuitem", { name: "Assinar" });
+    expect(assinar.tagName).toBe("A");
+    expect(assinar).toHaveAttribute("href", "#assinar");
+    expect(screen.getByRole("menuitem", { name: "Arquivar" }).tagName).toBe("BUTTON");
+    fireEvent.click(assinar);
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: "assinar" }));
+  });
+});
+
+describe("StatCard · loading e secondaryTone", () => {
+  it("loading troca os números por Skeleton e marca aria-busy", () => {
+    const { container } = render(
+      <StatCard value="22,31%" label="Qualidade" secondaryValue="14,11%" trendLabel="+2%" trend="up" loading />,
+    );
+    const cartao = container.querySelector(".umds-stat-card")!;
+    expect(cartao).toHaveAttribute("aria-busy", "true");
+    expect(cartao.textContent).not.toContain("22,31%");
+    expect(cartao.textContent).not.toContain("14,11%");
+    expect(cartao.textContent).not.toContain("+2%");
+    expect(cartao.textContent).toContain("Qualidade");
+  });
+
+  it("secondaryTone escreve a classe; default não", () => {
+    const { container } = render(
+      <>
+        <StatCard value="1" secondaryValue="2" secondaryTone="positive" />
+        <StatCard value="1" secondaryValue="2" secondaryTone="default" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-stat-card--secundario-positive");
+    expect(container.children[1].className).not.toContain("secundario-");
+  });
+});

package/src/teste/StatCardTamanhoSm.test.tsx

@@ -33,6 +33,15 @@ describe("StatCard · size", () => {
     expect(container.firstElementChild).toHaveClass("umds-stat-card--sm", "umds-stat-card--rotulo-topo");
   });
 
+  it("a segunda medida tem o mesmo tamanho e peso do número, no sm e no rótulo no topo", () => {
+    const sm = bloco(".umds-stat-card.umds-stat-card--sm .umds-stat-card__valor-secundario");
+    expect(sm).toMatch(/font-size:\s*1\.125rem/);
+    expect(sm).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+    const topo = bloco(".umds-stat-card--rotulo-topo .umds-stat-card__valor-secundario");
+    expect(topo).toMatch(/font-size:\s*var\(--umds-primitive-font-size-lg\)/);
+    expect(topo).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-extrabold\)/);
+  });
+
   it("o número continua antes do rótulo no HTML", () => {
     const { container } = render(<StatCard value={44} label="Não lidos" size="sm" />);
     const valor = container.querySelector(".umds-stat-card__valor") as HTMLElement;