@1doc/1ds-react 2.8.0 → 2.10.0

package/src/teste/BadgeTag.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import Tag from "../components/Tag/Tag";
+
+const raiz = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("Badge compacto, novidade e colado", () => {
+  it("size 2xs escreve a classe; sem size continua md", () => {
+    const { container } = render(
+      <>
+        <Badge size="2xs">A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--2xs");
+    expect(container.children[1]).toHaveClass("umds-badge--md");
+  });
+
+  it("variant new escreve a classe da variante", () => {
+    const { container } = render(<Badge variant="new">Novidade</Badge>);
+    expect(raiz(container)).toHaveClass("umds-badge--new");
+  });
+
+  it("attached escreve o modificador; sem ele não há", () => {
+    const { container } = render(
+      <>
+        <Badge attached>A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached");
+  });
+});
+
+describe("Tag compacta, soft, pílula e novidade", () => {
+  it("size xs escreve a classe e sm continua", () => {
+    const { container } = render(
+      <>
+        <Tag label="a" size="xs" />
+        <Tag label="b" size="sm" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-tag--xs");
+    expect(container.children[1]).toHaveClass("umds-tag--sm");
+  });
+
+  it("appearance soft e pill escrevem as classes", () => {
+    const { container } = render(<Tag label="SOBR" appearance="soft" variant="primary" pill />);
+    expect(raiz(container)).toHaveClass("umds-tag--soft", "umds-tag--primary", "umds-tag--pill");
+  });
+
+  it("sem pill não há a classe; padrão segue outlined", () => {
+    const { container } = render(<Tag label="x" />);
+    expect(raiz(container)).toHaveClass("umds-tag--outlined");
+    expect(raiz(container)).not.toHaveClass("umds-tag--pill");
+  });
+
+  it("variant new escreve a classe", () => {
+    const { container } = render(<Tag label="Dado simulado" variant="new" appearance="soft" />);
+    expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
+  });
+});
+
+describe("Badge attachedSide", () => {
+  it("right escreve o modificador do canto direito; left e o padrão não", () => {
+    const { container } = render(
+      <>
+        <Badge attached attachedSide="right">A</Badge>
+        <Badge attached attachedSide="left">B</Badge>
+        <Badge attached>C</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached", "umds-badge--attached-right");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached-right");
+    expect(container.children[2]).not.toHaveClass("umds-badge--attached-right");
+  });
+
+  it("attachedSide sem attached não faz nada", () => {
+    const { container } = render(<Badge attachedSide="right">A</Badge>);
+    expect(raiz(container)).not.toHaveClass("umds-badge--attached-right");
+    expect(raiz(container)).not.toHaveClass("umds-badge--attached");
+  });
+});

package/src/teste/BoxItemFlex.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+
+describe("Box como item flex e com `as`", () => {
+  it("sem `as` continua um div", () => {
+    const { container } = render(<Box padding="md">x</Box>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  for (const tag of ["div", "span", "ul", "ol", "li", "section", "nav", "header", "footer", "form"]) {
+    it(`as="${tag}" renderiza <${tag}> e só ele`, () => {
+      const { container } = render(<Box as={tag as any}>x</Box>);
+      expect(container.firstElementChild?.tagName).toBe(tag.toUpperCase());
+      expect(container.children).toHaveLength(1);
+    });
+  }
+
+  it("ul e ol mantêm a semântica de lista (role=list)", () => {
+    render(
+      <>
+        <Box as="ul" aria-label="Itens">
+          <Box as="li">a</Box>
+        </Box>
+        <Box as="ol" aria-label="Passos">
+          <Box as="li">b</Box>
+        </Box>
+      </>,
+    );
+    expect(screen.getByRole("list", { name: "Itens" }).tagName).toBe("UL");
+    expect(screen.getByRole("list", { name: "Passos" }).tagName).toBe("OL");
+  });
+
+  it("nav com aria-label vira região de navegação nomeada", () => {
+    render(
+      <Box as="nav" aria-label="Atalhos">
+        x
+      </Box>,
+    );
+    expect(screen.getByRole("navigation", { name: "Atalhos" })).toBeInTheDocument();
+  });
+
+  it("as=form chama onSubmit", () => {
+    const aoEnviar = vi.fn((e: Event) => e.preventDefault());
+    const { container } = render(
+      <Box as="form" onSubmit={aoEnviar}>
+        <button type="submit">Enviar</button>
+      </Box>,
+    );
+    fireEvent.submit(container.querySelector("form") as HTMLFormElement);
+    expect(aoEnviar).toHaveBeenCalledTimes(1);
+  });
+
+  it("escreve as classes de item flex", () => {
+    const { container } = render(
+      <Box grow shrink="0" basis="50" minWidth="auto" overflow="hidden" overflowX="auto" overflowY="scroll" fullHeight fullWidth>
+        x
+      </Box>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    for (const c of [
+      "umds-box--grow",
+      "umds-box--shrink-0",
+      "umds-box--basis-50",
+      "umds-box--min-w-auto",
+      "umds-box--overflow-hidden",
+      "umds-box--overflow-x-auto",
+      "umds-box--overflow-y-scroll",
+      "umds-box--full-height",
+      "umds-box--full",
+    ]) {
+      expect(el).toHaveClass(c);
+    }
+  });
+
+  it("sem as props de item não escreve nenhuma classe delas", () => {
+    const { container } = render(<Box padding="md">x</Box>);
+    const classes = (container.firstElementChild as HTMLElement).className;
+    expect(classes).not.toMatch(/grow|shrink|basis|min-w|overflow|full-height/);
+  });
+});

package/src/teste/BoxLayout.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+
+describe("Box de layout", () => {
+  it("sem props de layout não vira flex", () => {
+    const { container } = render(
+      <Box padding="md" bordered>
+        x
+      </Box>,
+    );
+    expect(container.firstElementChild).not.toHaveClass("umds-box--flex");
+  });
+
+  it("com direction, gap, align, justify e wrap vira flex", () => {
+    const { container } = render(
+      <Box direction="horizontal" gap="xxxs" align="center" justify="between" wrap padding="md">
+        x
+      </Box>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    for (const c of [
+      "umds-box--flex",
+      "umds-box--horizontal",
+      "umds-box--gap-xxxs",
+      "umds-box--align-center",
+      "umds-box--justify-between",
+      "umds-box--wrap",
+      "umds-box--p-md",
+    ]) {
+      expect(el).toHaveClass(c);
+    }
+  });
+
+  it("só com gap vira flex vertical", () => {
+    const { container } = render(<Box gap="xs">x</Box>);
+    expect(container.firstElementChild).toHaveClass("umds-box--flex", "umds-box--vertical");
+  });
+
+  it("repassa id, role, aria-label e style", () => {
+    render(
+      <Box id="r" role="region" aria-label="Resumo" style={{ marginTop: 4 }}>
+        x
+      </Box>,
+    );
+    const el = screen.getByRole("region", { name: "Resumo" });
+    expect(el.id).toBe("r");
+    expect(el.style.marginTop).toBe("4px");
+  });
+});

package/src/teste/Button.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Button from "../components/Button/Button";
+
+describe("Button: variante neutral-text e tamanho xs", () => {
+  it("neutral-text escreve a classe da variante", () => {
+    render(<Button variant="neutral-text">Simular</Button>);
+    expect(screen.getByRole("button", { name: "Simular" })).toHaveClass("umds-button--neutral-text");
+  });
+
+  it("neutral continua sendo o contornado cinza", () => {
+    render(<Button variant="neutral">Ordenar</Button>);
+    const botao = screen.getByRole("button", { name: "Ordenar" });
+    expect(botao).toHaveClass("umds-button--neutral");
+    expect(botao).not.toHaveClass("umds-button--neutral-text");
+  });
+
+  it("size xs escreve a classe e o botão sem size continua md", () => {
+    render(
+      <>
+        <Button size="xs">Resolver</Button>
+        <Button>Padrão</Button>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "Resolver" })).toHaveClass("umds-button--xs");
+    expect(screen.getByRole("button", { name: "Padrão" })).toHaveClass("umds-button--md");
+  });
+
+  it("no xs o ícone usa o tamanho sm do Icon (o CSS do botão o reduz)", () => {
+    const { container } = render(
+      <Button size="xs" startIcon={faPlus}>
+        Novo
+      </Button>,
+    );
+    expect(container.querySelector(".umds-icon")).toHaveClass("umds-icon--sm");
+    expect(container.querySelector(".umds-icon--xs")).toBeNull();
+  });
+});

package/src/teste/Calendar.test.tsx

@@ -0,0 +1,282 @@
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Calendar from "../components/Calendar/Calendar";
+
+const HOJE = "2026-05-15";
+const EVENTOS = [
+  { id: "a", date: "2026-05-04", title: "Proc. Administrativo 002/2020", color: "--umds-primitive-blue-pure" },
+  { id: "b", date: "2026-05-11", title: "Protocolo 005/2020", color: "--umds-primitive-green-pure", time: "09:00" },
+  { id: "c", date: "2026-05-11", title: "Ofício 001/2020", color: "--umds-primitive-red-pure", time: "08:00" },
+  { id: "d1", date: "2026-05-20", title: "Reunião 1" },
+  { id: "d2", date: "2026-05-20", title: "Reunião 2" },
+  { id: "d3", date: "2026-05-20", title: "Reunião 3" },
+  { id: "d4", date: "2026-05-20", title: "Reunião 4" },
+  { id: "d5", date: "2026-05-20", title: "Reunião 5" },
+];
+
+const celula = (container: HTMLElement, iso: string) => container.querySelector(`[data-date="${iso}"]`) as HTMLElement;
+
+describe("Calendar", () => {
+  it("é uma grade nomeada pelo mês, com sete cabeçalhos de dia", () => {
+    render(<Calendar today={HOJE} defaultDate={HOJE} />);
+    expect(screen.getByRole("grid", { name: "Maio 2026" })).toBeInTheDocument();
+    const cabecalhos = screen.getAllByRole("columnheader");
+    expect(cabecalhos).toHaveLength(7);
+    expect(cabecalhos[0]).toHaveAccessibleName("Domingo");
+    expect(screen.getByText("Maio 2026")).toBeInTheDocument();
+  });
+
+  it("o mês de maio de 2026 ocupa seis semanas inteiras; dias de fora ganham a classe", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} />);
+    expect(container.querySelectorAll('[role="gridcell"]')).toHaveLength(42);
+    expect(celula(container, "2026-04-26")).toHaveClass("umds-calendar__cell--outside");
+    expect(celula(container, "2026-05-15")).not.toHaveClass("umds-calendar__cell--outside");
+  });
+
+  it("hoje é marcado com aria-current", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} />);
+    expect(celula(container, HOJE)).toHaveAttribute("aria-current", "date");
+    expect(celula(container, "2026-05-16")).not.toHaveAttribute("aria-current");
+  });
+
+  it("cada dia tem nome acessível com a data e a contagem de eventos", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} />);
+    expect(celula(container, "2026-05-11")).toHaveAttribute("aria-label", "segunda-feira, 11 de maio de 2026, 2 eventos");
+    expect(celula(container, "2026-05-04")).toHaveAttribute("aria-label", "segunda-feira, 4 de maio de 2026, 1 evento");
+    expect(celula(container, "2026-05-12")).toHaveAttribute("aria-label", "terça-feira, 12 de maio de 2026, sem eventos");
+  });
+
+  it("dayLabel troca o nome do dia", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} dayLabel={(iso, n) => `${iso}:${n}`} events={EVENTOS} />);
+    expect(celula(container, "2026-05-11")).toHaveAttribute("aria-label", "2026-05-11:2");
+  });
+
+  it("os eventos caem no dia certo, em ordem de horário, com a cor do dado", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} />);
+    const dia = celula(container, "2026-05-11");
+    const chips = within(dia).getAllByRole("button");
+    expect(chips).toHaveLength(2);
+    expect(chips[0]).toHaveTextContent("08:00");
+    expect(chips[0]).toHaveTextContent("Ofício 001/2020");
+    expect((chips[0] as HTMLElement).style.borderLeftColor).toBe("var(--umds-primitive-red-pure)");
+  });
+
+  it("evento sem cor usa o primário", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} />);
+    const chip = within(celula(container, "2026-05-20")).getAllByRole("button")[0] as HTMLElement;
+    expect(chip.style.borderLeftColor).toBe("var(--umds-semantic-color-primary-pure)");
+  });
+
+  it("passou de maxVisible: mostra três e um +N, que avisa com os escondidos", async () => {
+    const usuario = userEvent.setup();
+    const aoVerMais = vi.fn();
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} onMoreClick={aoVerMais} />);
+    const dia = celula(container, "2026-05-20");
+    expect(within(dia).getAllByText(/Reunião/)).toHaveLength(3);
+    const mais = within(dia).getByRole("button", { name: "2 eventos a mais em 20 de maio" });
+    expect(mais).toHaveTextContent("+2");
+    await usuario.click(mais);
+    expect(aoVerMais).toHaveBeenCalledTimes(1);
+    expect(aoVerMais.mock.calls[0][0]).toBe("2026-05-20");
+    expect(aoVerMais.mock.calls[0][1].map((e: any) => e.id)).toEqual(["d4", "d5"]);
+  });
+
+  it("maxVisible muda o corte", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} maxVisible={1} />);
+    expect(within(celula(container, "2026-05-20")).getAllByText(/Reunião/)).toHaveLength(1);
+    expect(within(celula(container, "2026-05-20")).getByText("+4")).toBeInTheDocument();
+  });
+
+  it("clicar no evento avisa com o evento e não clica no dia", async () => {
+    const usuario = userEvent.setup();
+    const aoEvento = vi.fn();
+    const aoDia = vi.fn();
+    render(<Calendar today={HOJE} defaultDate={HOJE} events={EVENTOS} onEventClick={aoEvento} onDayClick={aoDia} />);
+    await usuario.click(screen.getByRole("button", { name: /Proc\. Administrativo 002\/2020/ }));
+    expect(aoEvento).toHaveBeenCalledWith(expect.objectContaining({ id: "a" }));
+    expect(aoDia).not.toHaveBeenCalled();
+  });
+
+  it("clicar no dia avisa com o ISO", async () => {
+    const usuario = userEvent.setup();
+    const aoDia = vi.fn();
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} onDayClick={aoDia} />);
+    await usuario.click(celula(container, "2026-05-12"));
+    expect(aoDia).toHaveBeenCalledWith("2026-05-12");
+  });
+
+  it("anterior, próximo e hoje navegam e avisam em onDateChange", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Calendar today={HOJE} defaultDate={HOJE} onDateChange={aoMudar} />);
+    await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+    expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+    expect(aoMudar).toHaveBeenLastCalledWith("2026-06-15");
+    await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+    await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+    expect(screen.getByText("Abril 2026")).toBeInTheDocument();
+    await usuario.click(screen.getByRole("button", { name: "Hoje" }));
+    expect(screen.getByText("Maio 2026")).toBeInTheDocument();
+    expect(aoMudar).toHaveBeenLastCalledWith(HOJE);
+  });
+
+  it("só um dia entra na ordem de Tab (hoje), com os eventos dele", () => {
+    const { container } = render(<Calendar today="2026-05-11" defaultDate="2026-05-11" events={EVENTOS} />);
+    const comTab = [...container.querySelectorAll('[role="gridcell"]')].filter((c) => c.getAttribute("tabindex") === "0");
+    expect(comTab).toHaveLength(1);
+    expect(comTab[0]).toHaveAttribute("data-date", "2026-05-11");
+    const chipsComTab = [...container.querySelectorAll(".umds-calendar__event")].filter((c) => c.getAttribute("tabindex") === "0");
+    expect(chipsComTab).toHaveLength(2);
+  });
+
+  it("setas movem o foco entre os dias; Home, End e Enter", async () => {
+    const usuario = userEvent.setup();
+    const aoDia = vi.fn();
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} onDayClick={aoDia} />);
+    celula(container, HOJE).focus();
+    await usuario.keyboard("{ArrowRight}");
+    expect(celula(container, "2026-05-16")).toHaveFocus();
+    await usuario.keyboard("{ArrowDown}");
+    expect(celula(container, "2026-05-23")).toHaveFocus();
+    await usuario.keyboard("{ArrowLeft}{ArrowUp}");
+    expect(celula(container, "2026-05-15")).toHaveFocus();
+    await usuario.keyboard("{Home}");
+    expect(celula(container, "2026-05-10")).toHaveFocus();
+    await usuario.keyboard("{End}");
+    expect(celula(container, "2026-05-16")).toHaveFocus();
+    await usuario.keyboard("{Enter}");
+    expect(aoDia).toHaveBeenCalledWith("2026-05-16");
+  });
+
+  it("a seta que sai do mês troca de mês e leva o foco", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<Calendar today={HOJE} defaultDate="2026-05-30" />);
+    celula(container, "2026-05-30").focus();
+    await usuario.keyboard("{ArrowRight}{ArrowRight}");
+    expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+    expect(celula(container, "2026-06-01")).toHaveFocus();
+  });
+
+  it("PageDown e PageUp trocam de mês", async () => {
+    const usuario = userEvent.setup();
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} />);
+    celula(container, HOJE).focus();
+    await usuario.keyboard("{PageDown}");
+    expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+    expect(celula(container, "2026-06-15")).toHaveFocus();
+    await usuario.keyboard("{PageUp}{PageUp}");
+    expect(screen.getByText("Abril 2026")).toBeInTheDocument();
+  });
+
+  it("a visão de semana mostra sete dias, todos os eventos, e avisa em onViewChange", async () => {
+    const usuario = userEvent.setup();
+    const aoVisao = vi.fn();
+    const { container } = render(<Calendar today="2026-05-20" defaultDate="2026-05-20" events={EVENTOS} onViewChange={aoVisao} />);
+    await usuario.click(screen.getByRole("radio", { name: "Semana" }));
+    expect(aoVisao).toHaveBeenCalledWith("week");
+    expect(container.querySelectorAll('[role="gridcell"]')).toHaveLength(7);
+    expect(within(celula(container, "2026-05-20")).getAllByText(/Reunião/)).toHaveLength(5);
+    expect(screen.queryByText("+2")).toBeNull();
+    expect(container.querySelector(".umds-calendar--week")).not.toBeNull();
+  });
+
+  it("na semana, anterior e próximo andam sete dias", async () => {
+    const usuario = userEvent.setup();
+    const aoMudar = vi.fn();
+    render(<Calendar today="2026-05-20" defaultDate="2026-05-20" defaultView="week" onDateChange={aoMudar} />);
+    await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+    expect(aoMudar).toHaveBeenLastCalledWith("2026-05-27");
+    await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+    await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+    expect(aoMudar).toHaveBeenLastCalledWith("2026-05-13");
+  });
+
+  it("weekStartsOn=1 começa a semana na segunda", () => {
+    render(<Calendar today={HOJE} defaultDate={HOJE} weekStartsOn={1} />);
+    expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Segunda-feira");
+  });
+
+  it("controlado: date e view mandam", () => {
+    function Pai() {
+      const [data, setData] = useState("2026-08-10");
+      return <Calendar today={HOJE} date={data} onDateChange={setData} view="month" />;
+    }
+    render(<Pai />);
+    expect(screen.getByText("Agosto 2026")).toBeInTheDocument();
+  });
+
+  it("locale e textos por prop (inglês)", () => {
+    render(
+      <Calendar
+        today={HOJE}
+        defaultDate={HOJE}
+        locale="en-US"
+        previousLabel="Previous"
+        nextLabel="Next"
+        todayLabel="Today"
+        monthLabel="Month"
+        weekLabel="Week"
+        viewLabel="View"
+      />,
+    );
+    expect(screen.getByText("May 2026")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Previous" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Today" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Week" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "View" })).toBeInTheDocument();
+    expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Sunday");
+  });
+
+  it("moreLabel e moreAriaLabel traduzem o +N", () => {
+    render(
+      <Calendar
+        today={HOJE}
+        defaultDate={HOJE}
+        events={EVENTOS}
+        locale="en-US"
+        moreLabel="{count} more"
+        moreAriaLabel="{count} more events on {date}"
+      />,
+    );
+    expect(screen.getByRole("button", { name: "2 more events on May 20" })).toHaveTextContent("2 more");
+  });
+
+  it("hideViewSwitcher esconde o seletor; os slots do cabeçalho aparecem", () => {
+    render(
+      <Calendar
+        today={HOJE}
+        defaultDate={HOJE}
+        hideViewSwitcher
+        headerStart={<span data-testid="filtro">Todos os documentos</span>}
+        headerEnd={<span data-testid="legenda">Legenda</span>}
+      />,
+    );
+    expect(screen.queryByRole("radio")).toBeNull();
+    expect(screen.getByTestId("filtro")).toBeInTheDocument();
+    expect(screen.getByTestId("legenda")).toBeInTheDocument();
+  });
+
+  it("selectedDate marca o dia", () => {
+    const { container } = render(<Calendar today={HOJE} defaultDate={HOJE} selectedDate="2026-05-12" />);
+    expect(celula(container, "2026-05-12")).toHaveAttribute("aria-selected", "true");
+    expect(celula(container, "2026-05-12")).toHaveClass("umds-calendar__cell--selected");
+  });
+
+  it("evento com Date e com data-hora entra no dia", () => {
+    const { container } = render(
+      <Calendar
+        today={HOJE}
+        defaultDate={HOJE}
+        events={[
+          { date: new Date(2026, 4, 12), title: "Com Date" },
+          { date: "2026-05-13T10:30:00", title: "Com hora" },
+        ]}
+      />,
+    );
+    expect(within(celula(container, "2026-05-12")).getByText("Com Date")).toBeInTheDocument();
+    expect(within(celula(container, "2026-05-13")).getByText("Com hora")).toBeInTheDocument();
+  });
+});

package/src/teste/CalendarCabecalho.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Calendar from "../components/Calendar/Calendar";
+
+describe("Calendar · cabeçalho", () => {
+  it("headerStart e headerEnd (React: props com nó) chegam ao cabeçalho", () => {
+    render(<Calendar events={[]} defaultDate="2026-10-08" headerStart={<span>Todos os documentos</span>} headerEnd={<span>Legenda</span>} />);
+    expect(screen.getByText("Todos os documentos")).toBeInTheDocument();
+    expect(screen.getByText("Legenda")).toBeInTheDocument();
+  });
+});

package/src/teste/ChipsXs.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Chips from "../components/Chips/Chips";
+
+const raiz = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("Chips · xs e × em círculo", () => {
+  it("size xs escreve a classe; sem size continua md", () => {
+    const { container } = render(
+      <>
+        <Chips label="a" size="xs" />
+        <Chips label="b" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-chip--xs");
+    expect(container.children[1]).toHaveClass("umds-chip--md");
+  });
+
+  it("circularRemove com removable escreve a classe do círculo", () => {
+    const { container } = render(<Chips label="Marcador" removable circularRemove />);
+    expect(raiz(container)).toHaveClass("umds-chip--remove-circle");
+  });
+
+  it("circularRemove sem removable não escreve a classe (não há ×)", () => {
+    const { container } = render(<Chips label="Marcador" circularRemove />);
+    expect(raiz(container)).not.toHaveClass("umds-chip--remove-circle");
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("o × em círculo continua sendo o mesmo botão, com o mesmo nome e o mesmo clique", () => {
+    const aoRemover = vi.fn();
+    render(<Chips label="Urgente" size="xs" removable circularRemove onRemove={aoRemover} />);
+    fireEvent.click(screen.getByRole("button", { name: "Remover Urgente" }));
+    expect(aoRemover).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem circularRemove o chip removível é o de antes", () => {
+    const { container } = render(<Chips label="x" removable />);
+    expect(raiz(container)).not.toHaveClass("umds-chip--remove-circle");
+  });
+});