@tangle-network/ui 11.51.7 → 11.51.9

package/src/primitives/pagination-alert.test.tsx

@@ -1,180 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import type * as React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { Alert, AlertDescription, AlertTitle } from "./alert";
-import { Pagination, pageSlots } from "./pagination";
-
-const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
-
-describe("pageSlots", () => {
-  it("lists every page when they fit", () => {
-    expect(pageSlots(0, 1)).toEqual([0]);
-    expect(pageSlots(3, 7)).toEqual([0, 1, 2, 3, 4, 5, 6]);
-  });
-
-  it("keeps the same number of slots as the current page moves", () => {
-    expect(pageSlots(0, 10)).toEqual([0, 1, 2, 3, 4, "gap-end", 9]);
-    expect(pageSlots(5, 10)).toEqual([0, "gap-start", 4, 5, 6, "gap-end", 9]);
-    expect(pageSlots(9, 10)).toEqual([0, "gap-start", 5, 6, 7, 8, 9]);
-    for (let page = 0; page < 40; page++) expect(pageSlots(page, 40)).toHaveLength(7);
-  });
-
-  it("clamps a page outside the range", () => {
-    expect(pageSlots(-3, 10)).toEqual(pageSlots(0, 10));
-    expect(pageSlots(99, 10)).toEqual(pageSlots(9, 10));
-  });
-});
-
-describe("Pagination", () => {
-  it("renders nothing for a single page", () => {
-    const { container } = render(<Pagination page={0} pageCount={1} onPageChange={vi.fn()} />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it("marks the current page and moves with previous, next and a number", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(<Pagination page={4} pageCount={12} onPageChange={onPageChange} />);
-
-    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeInTheDocument();
-    const current = screen.getByRole("button", { name: "Page 5" });
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(current.className).not.toMatch(PALETTE);
-
-    await user.click(screen.getByRole("button", { name: "Previous page" }));
-    await user.click(screen.getByRole("button", { name: "Next page" }));
-    await user.click(screen.getByRole("button", { name: "Page 12" }));
-    expect(onPageChange.mock.calls).toEqual([[3], [5], [11]]);
-  });
-
-  it("disables previous on the first page and next on the last", () => {
-    const { rerender } = render(<Pagination page={0} pageCount={3} onPageChange={vi.fn()} />);
-    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
-    rerender(<Pagination page={2} pageCount={3} onPageChange={vi.fn()} />);
-    expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
-  });
-
-  it("does not report the page that is already current", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(<Pagination page={1} pageCount={3} onPageChange={onPageChange} />);
-    await user.click(screen.getByRole("button", { name: "Page 2" }));
-    expect(onPageChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("Pagination link mode", () => {
-  const hrefFor = (page: number) => `?page=${page + 1}`;
-
-  it("renders links to one-based URLs from zero-based pages", () => {
-    render(<Pagination page={4} pageCount={12} hrefFor={hrefFor} />);
-
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Previous page" })).toHaveAttribute("href", "?page=4");
-    expect(screen.getByRole("link", { name: "Next page" })).toHaveAttribute("href", "?page=6");
-    expect(screen.getByRole("link", { name: "Page 1" })).toHaveAttribute("href", "?page=1");
-    expect(screen.getByRole("link", { name: "Page 12" })).toHaveAttribute("href", "?page=12");
-
-    const current = screen.getByRole("link", { name: "Page 5" });
-    expect(current.tagName).toBe("A");
-    expect(current).toHaveAttribute("href", "?page=5");
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(screen.getByRole("link", { name: "Page 4" })).not.toHaveAttribute("aria-current");
-  });
-
-  it("renders a disabled previous or next as a span without an href", () => {
-    const { rerender } = render(<Pagination page={0} pageCount={3} hrefFor={hrefFor} />);
-    const previous = screen.getByRole("link", { name: "Previous page" });
-    expect(previous.tagName).toBe("SPAN");
-    expect(previous).toHaveAttribute("aria-disabled", "true");
-    expect(previous).not.toHaveAttribute("href");
-    expect(previous.className).toContain("aria-disabled:opacity-50");
-    expect(screen.getByRole("link", { name: "Next page" })).toHaveAttribute("href", "?page=2");
-
-    rerender(<Pagination page={2} pageCount={3} hrefFor={hrefFor} />);
-    const next = screen.getByRole("link", { name: "Next page" });
-    expect(next.tagName).toBe("SPAN");
-    expect(next).toHaveAttribute("aria-disabled", "true");
-    expect(next).not.toHaveAttribute("href");
-  });
-
-  it("renders each enabled control with a custom link component", () => {
-    const received: string[] = [];
-    const RouterLink = ({ href, ...props }: React.ComponentProps<"a">) => {
-      received.push(href ?? "");
-      return <a data-router-link="" href={href} {...props} />;
-    };
-    render(<Pagination page={1} pageCount={3} hrefFor={hrefFor} linkComponent={RouterLink} />);
-
-    expect(received).toEqual(["?page=1", "?page=1", "?page=2", "?page=3", "?page=3"]);
-    const current = screen.getByRole("link", { name: "Page 2" });
-    expect(current).toHaveAttribute("data-router-link");
-    expect(current).toHaveAttribute("aria-current", "page");
-  });
-
-  it("reports a plain click on another page and ignores the current page and new-tab clicks", async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    render(
-      <Pagination
-        page={1}
-        pageCount={3}
-        hrefFor={hrefFor}
-        linkComponent={({ onClick, ...props }: React.ComponentProps<"a">) => (
-          <a
-            {...props}
-            onClick={(event) => {
-              onClick?.(event);
-              event.preventDefault();
-            }}
-          />
-        )}
-        onPageChange={onPageChange}
-      />,
-    );
-
-    await user.click(screen.getByRole("link", { name: "Next page" }));
-    await user.click(screen.getByRole("link", { name: "Page 2" }));
-    await user.keyboard("{Meta>}");
-    await user.click(screen.getByRole("link", { name: "Page 1" }));
-    await user.keyboard("{/Meta}");
-    expect(onPageChange.mock.calls).toEqual([[2]]);
-  });
-
-  it("requires onPageChange or hrefFor, and a link component only with hrefFor", () => {
-    const rejected = [
-      // @ts-expect-error neither onPageChange nor hrefFor
-      () => <Pagination page={0} pageCount={2} />,
-      // @ts-expect-error linkComponent without hrefFor
-      () => <Pagination page={0} pageCount={2} onPageChange={vi.fn()} linkComponent="a" />,
-    ];
-    expect(rejected).toHaveLength(2);
-  });
-});
-
-describe("Alert", () => {
-  it("paints a tone from the matched Brand status triple", () => {
-    render(
-      <Alert tone="warning">
-        <AlertTitle>Policy is changing</AlertTitle>
-        <AlertDescription>Seats above the limit are removed next cycle.</AlertDescription>
-      </Alert>,
-    );
-    const alert = screen.getByRole("alert");
-    expect(alert.className).toContain("bg-[var(--surface-warning-bg)]");
-    expect(alert.className).toContain("text-[var(--surface-warning-text)]");
-    expect(alert.className).not.toMatch(PALETTE);
-  });
-
-  it("uses role status for quiet tones and keeps an explicit role", () => {
-    const { rerender } = render(<Alert tone="info">Saved</Alert>);
-    expect(screen.getByRole("status")).toHaveTextContent("Saved");
-    rerender(
-      <Alert tone="neutral" role="note">
-        Note
-      </Alert>,
-    );
-    expect(screen.getByRole("note")).toHaveAttribute("data-tone", "neutral");
-  });
-});

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.test.tsx

@@ -1,165 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { beforeAll, describe, expect, it, vi } from "vitest";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "./context-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { Slider } from "./slider";
-
-const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
-
-describe("Popover", () => {
-  it("opens from its trigger on a token surface and closes on Escape", async () => {
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Filters</PopoverTrigger>
-        <PopoverContent>Only failed runs</PopoverContent>
-      </Popover>,
-    );
-    await user.click(screen.getByRole("button", { name: "Filters" }));
-    const content = await screen.findByRole("dialog");
-    expect(content).toHaveTextContent("Only failed runs");
-    expect(content.className).toContain("bg-card");
-    expect(content.className).not.toMatch(PALETTE);
-    await user.keyboard("{Escape}");
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-});
-
-describe("Collapsible", () => {
-  it("reports its expanded state on the trigger", async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible>
-        <CollapsibleTrigger>Details</CollapsibleTrigger>
-        <CollapsibleContent>Hidden body</CollapsibleContent>
-      </Collapsible>,
-    );
-    const trigger = screen.getByRole("button", { name: "Details" });
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-    expect(screen.queryByText("Hidden body")).toBeNull();
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-    expect(screen.getByText("Hidden body")).toBeVisible();
-  });
-});
-
-describe("AlertDialog", () => {
-  it("focuses Cancel on open so a destructive action is never under Enter", async () => {
-    const user = userEvent.setup();
-    const onDelete = vi.fn();
-    render(
-      <AlertDialog>
-        <AlertDialogTrigger>Delete project</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
-          <AlertDialogDescription>Its sandboxes stop.</AlertDialogDescription>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction tone="destructive" onClick={onDelete}>
-            Delete
-          </AlertDialogAction>
-        </AlertDialogContent>
-      </AlertDialog>,
-    );
-    await user.click(screen.getByRole("button", { name: "Delete project" }));
-    const dialog = await screen.findByRole("alertdialog", { name: "Delete this project?" });
-    expect(dialog).toHaveAccessibleDescription("Its sandboxes stop.");
-    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus();
-    const action = screen.getByRole("button", { name: "Delete" });
-    expect(action.className).toContain("bg-destructive");
-    await user.click(action);
-    expect(onDelete).toHaveBeenCalledOnce();
-    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
-  });
-});
-
-describe("ContextMenu", () => {
-  it("opens on contextmenu and runs the chosen item", async () => {
-    const onRename = vi.fn();
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>File row</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onSelect={onRename}>Rename</ContextMenuItem>
-          <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>,
-    );
-    fireEvent.contextMenu(screen.getByText("File row"));
-    const menu = await screen.findByRole("menu");
-    expect(menu.className).toContain("bg-card");
-    expect(screen.getByRole("menuitem", { name: "Delete" }).className).toContain("text-destructive");
-    fireEvent.click(screen.getByRole("menuitem", { name: "Rename" }));
-    expect(onRename).toHaveBeenCalledOnce();
-  });
-
-  it("portals submenu content out of the clipped parent menu", async () => {
-    const user = userEvent.setup();
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>File row</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
-            <ContextMenuSubContent>
-              <ContextMenuItem>Archive</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-        </ContextMenuContent>
-      </ContextMenu>,
-    );
-    fireEvent.contextMenu(screen.getByText("File row"));
-    const parent = await screen.findByRole("menu");
-    await user.hover(screen.getByRole("menuitem", { name: "Move to" }));
-    await user.keyboard("{ArrowRight}");
-    const archive = await screen.findByRole("menuitem", { name: "Archive" });
-    expect(parent.contains(archive)).toBe(false);
-  });
-});
-
-describe("Slider", () => {
-  beforeAll(() => {
-    // Radix measures the thumb with ResizeObserver, which jsdom lacks.
-    globalThis.ResizeObserver ??= class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
-  });
-
-  it("renders one labelled thumb per value", () => {
-    render(<Slider defaultValue={[20, 80]} thumbLabels={["Minimum", "Maximum"]} />);
-    const thumbs = screen.getAllByRole("slider");
-    expect(thumbs).toHaveLength(2);
-    expect(thumbs[0]).toHaveAccessibleName("Minimum");
-    expect(thumbs[1]).toHaveAttribute("aria-valuenow", "80");
-  });
-
-  it("moves with the keyboard and reports the value", async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(<Slider aria-label="Budget" defaultValue={[50]} step={10} onValueChange={onValueChange} />);
-    expect(screen.getByRole("slider")).toHaveAccessibleName("Budget");
-    screen.getByRole("slider").focus();
-    await user.keyboard("{ArrowRight}");
-    expect(onValueChange).toHaveBeenLastCalledWith([60]);
-  });
-});

package/src/primitives/radio-group.test.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Label } from "./label";
-import { RadioGroup, RadioGroupItem } from "./radio-group";
-
-afterEach(cleanup);
-
-describe("RadioGroup", () => {
-  it("chooses one item by click or arrow key and reports its value", async () => {
-    const onValueChange = vi.fn();
-    render(
-      <RadioGroup aria-label="Plan" defaultValue="basic" onValueChange={onValueChange}>
-        <div><RadioGroupItem id="basic" value="basic" /><Label htmlFor="basic">Basic</Label></div>
-        <div><RadioGroupItem id="pro" value="pro" /><Label htmlFor="pro">Pro</Label></div>
-      </RadioGroup>,
-    );
-    expect(screen.getByRole("radiogroup", { name: "Plan" })).toBeTruthy();
-    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "true");
-    await userEvent.click(screen.getByText("Pro"));
-    expect(onValueChange).toHaveBeenLastCalledWith("pro");
-    expect(screen.getByRole("radio", { name: "Pro" })).toHaveAttribute("aria-checked", "true");
-    expect(screen.getByRole("radio", { name: "Basic" })).toHaveAttribute("aria-checked", "false");
-  });
-});