@1doc/1ds-react 2.13.0 → 2.15.0

package/src/teste/PedidosMatheus2.test.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Avatar from "../components/Avatar/Avatar";
+import Dropdown from "../components/Dropdown/Dropdown";
+import EmptyState from "../components/EmptyState/EmptyState";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+import { lerArquivo } from "./lerArquivo";
+
+describe("Avatar · fallback e name", () => {
+  it("a foto que falha volta para as iniciais do name", () => {
+    const onError = vi.fn();
+    const { container } = render(<Avatar src="/quebrada.png" name="Cris Lima" onError={onError} />);
+    fireEvent.error(container.querySelector("img")!);
+    expect(container.querySelector("img")).toBeNull();
+    expect(container.textContent).toBe("CL");
+    expect(container.firstElementChild).toHaveClass("umds-avatar--letter");
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem name, a falha mostra o children", () => {
+    const { container } = render(<Avatar src="/quebrada.png">ML</Avatar>);
+    fireEvent.error(container.querySelector("img")!);
+    expect(container.textContent).toBe("ML");
+  });
+
+  it("um src novo tenta a foto de novo", () => {
+    const { container, rerender } = render(<Avatar src="/quebrada.png" name="Cris Lima" />);
+    fireEvent.error(container.querySelector("img")!);
+    rerender(<Avatar src="/boa.png" name="Cris Lima" />);
+    expect(container.querySelector("img")).toHaveAttribute("src", "/boa.png");
+  });
+
+  it("name gera as iniciais (primeiro e último nome) e o nome acessível", () => {
+    const { container } = render(<Avatar name="Matheus de Souza" />);
+    expect(container.textContent).toBe("MS");
+    expect(container.firstElementChild).toHaveAttribute("aria-label", "Matheus de Souza");
+    expect(container.firstElementChild).toHaveAttribute("role", "img");
+  });
+});
+
+describe("Dropdown · onSelect no item", () => {
+  it("chama a ação do item com os campos próprios, e depois o onSelect do Dropdown", async () => {
+    const ordem: string[] = [];
+    const doItem = vi.fn((item) => ordem.push("item:" + item.command));
+    const doMenu = vi.fn(() => ordem.push("menu"));
+    render(
+      <Dropdown ariaLabel="Ações" onSelect={doMenu} items={[{ key: "a", label: "Assinar", command: "assinar", onSelect: doItem }]}>
+        <button type="button">Abrir</button>
+      </Dropdown>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Abrir" }));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Assinar" }));
+    expect(ordem).toEqual(["item:assinar", "menu"]);
+  });
+});
+
+describe("ListItem · variant e li", () => {
+  it("variant primary marca a classe sem aria-current", () => {
+    render(<ul><ListItem variant="primary" href="#c" title="Circular" /></ul>);
+    const link = screen.getByRole("link", { name: "Circular" });
+    expect(link).toHaveClass("umds-list-item--primary");
+    expect(link).not.toHaveAttribute("aria-current");
+  });
+
+  it("liClassName e liStyle vão para o li", () => {
+    const { container } = render(
+      <ul><ListItem title="Memorando" liClassName="entra" liStyle={{ "--ordem": 2 } as any} onClick={() => {}} /></ul>,
+    );
+    const li = container.querySelector("li")!;
+    expect(li).toHaveClass("umds-list__item");
+    expect(li).toHaveClass("entra");
+    expect(li.style.getPropertyValue("--ordem")).toBe("2");
+  });
+});
+
+describe("EmptyState · fill e List · emptyFill", () => {
+  it("fill escreve a classe; List repassa emptyFill", () => {
+    const { container } = render(
+      <>
+        <EmptyState title="Vazio" fill />
+        <List ariaLabel="Docs" isEmpty emptyFill />
+      </>,
+    );
+    expect(container.querySelector(".umds-empty-state--fill")).not.toBeNull();
+    expect(container.querySelector(".umds-list--empty-fill .umds-empty-state--fill")).not.toBeNull();
+  });
+});
+
+describe("AppShell e StatCard · CSS", () => {
+  it("o AppShell dá a cor de texto do tema a quem herda", async () => {
+    const css = (await lerArquivo("../core/src/components/AppShell/AppShell.css")).replace(/\r\n/g, "\n");
+    const bloco = css.slice(css.indexOf(".umds-app-shell {"), css.indexOf("}", css.indexOf(".umds-app-shell {")));
+    expect(bloco).toContain("color: var(--umds-semantic-color-neutral-dark-pure)");
+  });
+
+  it("a StatCard com segunda medida empilha em largura pequena", async () => {
+    const css = (await lerArquivo("../core/src/components/StatCard/StatCard.css")).replace(/\r\n/g, "\n");
+    expect(css).toContain("container-type: inline-size");
+    expect(css).toMatch(/@container \(max-width: 240px\)/);
+  });
+});

package/src/teste/SegmentedControlSuperficie.test.tsx

@@ -37,7 +37,7 @@ describe("SegmentedControl · variant surface", () => {
     const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
     expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
     expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
-    expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+    expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-bottom-md\)/);
     expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
     expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
   });

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;