@12-apps/ui 1.4.1 → 1.5.1

package/src/__tests__/user-avatar.test.tsx

@@ -1,195 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { UserAvatar, UserMenu } from "../user-avatar";
-
-describe("UserAvatar", () => {
-  it("should render with image when src is provided", () => {
-    const { container } = render(
-      <UserAvatar
-        src="https://example.com/avatar.jpg"
-        name="John Doe"
-      />
-    );
-
-    // Avatar uses Fade animation, so query directly
-    const img = container.querySelector('img.MuiAvatar-img');
-    expect(img).toHaveAttribute("src", "https://example.com/avatar.jpg");
-    expect(img).toHaveAttribute("alt", "John Doe");
-  });
-
-  it("should render initials when no src is provided", () => {
-    render(<UserAvatar name="John Doe" />);
-
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-
-  it("should render single initial for single-word name", () => {
-    render(<UserAvatar name="John" />);
-
-    expect(screen.getByText("JO")).toBeInTheDocument();
-  });
-
-  it("should render question mark when no name or src", () => {
-    render(<UserAvatar />);
-
-    expect(screen.getByText("?")).toBeInTheDocument();
-  });
-
-  it("should render initials from first and last name", () => {
-    render(<UserAvatar name="John Michael Doe" />);
-
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-
-  it("should apply size lg", () => {
-    const { container } = render(<UserAvatar name="John" size="lg" />);
-
-    // Avatar size "lg" is 48x48 per UI package Avatar
-    const avatar = container.querySelector('.MuiAvatar-root');
-    expect(avatar).toBeInTheDocument();
-  });
-
-  it("should use default size md", () => {
-    const { container } = render(<UserAvatar name="John" />);
-
-    // Avatar default size "md" is 40x40 per UI package Avatar
-    const avatar = container.querySelector('.MuiAvatar-root');
-    expect(avatar).toBeInTheDocument();
-  });
-
-  it("should call onClick when clicked", () => {
-    const handleClick = vi.fn();
-    const { container } = render(
-      <UserAvatar name="John" onClick={handleClick} />
-    );
-
-    const avatar = container.querySelector('.MuiAvatar-root') as HTMLElement;
-    fireEvent.click(avatar);
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should have button role when onClick is provided", () => {
-    const handleClick = vi.fn();
-    const { container } = render(
-      <UserAvatar name="John" onClick={handleClick} />
-    );
-
-    const avatar = container.querySelector('.MuiAvatar-root');
-    expect(avatar).toHaveAttribute("role", "button");
-    expect(avatar).toHaveAttribute("tabIndex", "0");
-  });
-
-  it("should not have button role when onClick is not provided", () => {
-    const { container } = render(<UserAvatar name="John" />);
-
-    const avatar = container.querySelector('.MuiAvatar-root');
-    expect(avatar).not.toHaveAttribute("role", "button");
-  });
-
-  it("should be interactive when onClick is provided", () => {
-    const handleClick = vi.fn();
-    const { container } = render(
-      <UserAvatar name="John" onClick={handleClick} />
-    );
-
-    const avatar = container.querySelector('.MuiAvatar-root');
-    // Interactive avatars have cursor: pointer style and hover effects
-    expect(avatar).toHaveAttribute("tabIndex", "0");
-  });
-
-  it("should handle null src gracefully", () => {
-    render(<UserAvatar src={null} name="John Doe" />);
-
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-
-  it("should handle null name gracefully", () => {
-    render(<UserAvatar name={null} />);
-
-    expect(screen.getByText("?")).toBeInTheDocument();
-  });
-
-  it("should render image with fallback alt text", () => {
-    const { container } = render(<UserAvatar src="https://example.com/avatar.jpg" />);
-
-    // Avatar uses Fade animation, so query directly
-    const img = container.querySelector('img.MuiAvatar-img');
-    expect(img).toHaveAttribute("alt", "User avatar");
-  });
-});
-
-describe("UserMenu", () => {
-  const mockUser = {
-    name: "John Doe",
-    email: "john@example.com",
-    image: "https://example.com/avatar.jpg",
-  };
-
-  it("should render user name and email", () => {
-    render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
-
-    expect(screen.getByText("John Doe")).toBeInTheDocument();
-    expect(screen.getByText("john@example.com")).toBeInTheDocument();
-  });
-
-  it("should render user avatar with image", () => {
-    const { container } = render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
-
-    // Avatar uses Fade animation, so query directly
-    const img = container.querySelector('img.MuiAvatar-img');
-    expect(img).toHaveAttribute("src", mockUser.image);
-  });
-
-  it("should render sign out button", () => {
-    render(<UserMenu user={mockUser} onSignOut={vi.fn()} />);
-
-    expect(screen.getByText("Sign out")).toBeInTheDocument();
-  });
-
-  it("should call onSignOut when sign out button is clicked", () => {
-    const handleSignOut = vi.fn();
-    render(<UserMenu user={mockUser} onSignOut={handleSignOut} />);
-
-    const signOutButton = screen.getByText("Sign out");
-    fireEvent.click(signOutButton);
-
-    expect(handleSignOut).toHaveBeenCalledTimes(1);
-  });
-
-  it("should render default name when name is null", () => {
-    const userWithoutName = {
-      ...mockUser,
-      name: null,
-    };
-
-    render(<UserMenu user={userWithoutName} onSignOut={vi.fn()} />);
-
-    expect(screen.getByText("User")).toBeInTheDocument();
-  });
-
-  it("should render avatar with initials when no image", () => {
-    const userWithoutImage = {
-      name: "John Doe",
-      email: "john@example.com",
-      image: null,
-    };
-
-    render(<UserMenu user={userWithoutImage} onSignOut={vi.fn()} />);
-
-    expect(screen.getByText("JD")).toBeInTheDocument();
-  });
-
-  it("should handle empty user object gracefully", () => {
-    const emptyUser = {
-      name: null,
-      email: null,
-      image: null,
-    };
-
-    render(<UserMenu user={emptyUser} onSignOut={vi.fn()} />);
-
-    expect(screen.getByText("User")).toBeInTheDocument();
-    expect(screen.getByText("?")).toBeInTheDocument();
-  });
-});

package/src/__tests__/viewport.test.ts

@@ -1,50 +0,0 @@
-/**
- * Viewport helpers: full-height surfaces must be pinned to the DYNAMIC viewport,
- * because iOS resolves `100vh` against the large viewport and parks the bottom of
- * a fixed panel (the submit row) underneath the browser toolbar.
- */
-import { describe, expect, it } from "vitest";
-
-import {
-  DYNAMIC_VIEWPORT_HEIGHT,
-  VIEWPORT_HEIGHT_FALLBACK,
-  dynamicViewportHeight,
-  safeAreaBottom,
-} from "../utils/viewport";
-
-const SUPPORTS_DVH = `@supports (height: ${DYNAMIC_VIEWPORT_HEIGHT})`;
-
-describe("dynamicViewportHeight", () => {
-  it("emits the vh fallback up front and upgrades to dvh under @supports", () => {
-    const styles = dynamicViewportHeight("height");
-
-    expect(styles.height).toBe(VIEWPORT_HEIGHT_FALLBACK);
-    expect(styles[SUPPORTS_DVH]).toEqual({ height: DYNAMIC_VIEWPORT_HEIGHT });
-  });
-
-  it("pins every requested property, so maxHeight can't re-clamp to 100vh", () => {
-    const styles = dynamicViewportHeight("height", "maxHeight");
-
-    expect(styles.height).toBe(VIEWPORT_HEIGHT_FALLBACK);
-    expect(styles.maxHeight).toBe(VIEWPORT_HEIGHT_FALLBACK);
-    expect(styles[SUPPORTS_DVH]).toEqual({
-      height: DYNAMIC_VIEWPORT_HEIGHT,
-      maxHeight: DYNAMIC_VIEWPORT_HEIGHT,
-    });
-  });
-
-  it("defaults to `height` when called with no properties", () => {
-    expect(dynamicViewportHeight()).toEqual(dynamicViewportHeight("height"));
-  });
-});
-
-describe("safeAreaBottom", () => {
-  it("keeps the base padding as the fallback and adds the inset on top", () => {
-    const styles = safeAreaBottom(16);
-
-    expect(styles.paddingBottom).toBe("16px");
-    expect(styles["@supports (padding: max(0px))"]).toEqual({
-      paddingBottom: "max(16px, calc(16px + env(safe-area-inset-bottom)))",
-    });
-  });
-});

package/src/components/command/__tests__/command.test.tsx

@@ -1,112 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import { Command } from "../../form/Command/Command";
-import type { CommandItem } from "../../form/Command/Command.types";
-
-const items: CommandItem[] = [
-  { id: "new-file", label: "New File", category: "File" },
-  { id: "open-file", label: "Open File", category: "File" },
-  { id: "settings", label: "Settings", category: "Preferences" },
-];
-
-function renderCommand(props: Partial<React.ComponentProps<typeof Command>> = {}) {
-  return render(
-    <Command
-      open
-      items={items}
-      autoFocus={false}
-      dataTestId="command"
-      {...props}
-    />,
-  );
-}
-
-describe("Command (REUSE — form/Command primitive)", () => {
-  it("renders items grouped into sections via category when showCategories is on", () => {
-    renderCommand({ showCategories: true });
-
-    // Category headings rendered as group containers.
-    expect(screen.getByTestId("command-group-File")).toBeInTheDocument();
-    expect(screen.getByTestId("command-group-Preferences")).toBeInTheDocument();
-
-    // All items present.
-    expect(screen.getByTestId("command-item-new-file")).toBeInTheDocument();
-    expect(screen.getByTestId("command-item-open-file")).toBeInTheDocument();
-    expect(screen.getByTestId("command-item-settings")).toBeInTheDocument();
-
-    // The File group contains both file items.
-    const fileGroup = screen.getByTestId("command-group-File");
-    expect(fileGroup).toHaveTextContent("New File");
-    expect(fileGroup).toHaveTextContent("Open File");
-  });
-
-  it("moves the visible highlight down with ArrowDown", () => {
-    renderCommand();
-    const input = screen.getByTestId("command-input");
-
-    // First item highlighted by default.
-    expect(screen.getByTestId("command-item-new-file")).toHaveClass(
-      "Mui-selected",
-    );
-
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-
-    // Highlight advances to the second item.
-    expect(screen.getByTestId("command-item-open-file")).toHaveClass(
-      "Mui-selected",
-    );
-    expect(screen.getByTestId("command-item-new-file")).not.toHaveClass(
-      "Mui-selected",
-    );
-  });
-
-  it("moves the visible highlight up with ArrowUp", () => {
-    renderCommand();
-    const input = screen.getByTestId("command-input");
-
-    // Move down twice, then up once → land on the second item.
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-    fireEvent.keyDown(input, { key: "ArrowUp" });
-
-    expect(screen.getByTestId("command-item-open-file")).toHaveClass(
-      "Mui-selected",
-    );
-    expect(screen.getByTestId("command-item-settings")).not.toHaveClass(
-      "Mui-selected",
-    );
-  });
-
-  it("calls onSelect with the highlighted item on Enter", () => {
-    const onSelect = vi.fn();
-    renderCommand({ onSelect, closeOnSelect: false });
-    const input = screen.getByTestId("command-input");
-
-    fireEvent.keyDown(input, { key: "ArrowDown" });
-    fireEvent.keyDown(input, { key: "Enter" });
-
-    expect(onSelect).toHaveBeenCalledTimes(1);
-    expect(onSelect).toHaveBeenCalledWith(
-      expect.objectContaining({ id: "open-file" }),
-    );
-  });
-
-  it("calls onOpenChange(false) on Escape", () => {
-    const onOpenChange = vi.fn();
-    renderCommand({ onOpenChange });
-    const input = screen.getByTestId("command-input");
-
-    fireEvent.keyDown(input, { key: "Escape" });
-
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("renders the empty message when there are no items", () => {
-    renderCommand({ items: [], emptyMessage: "Nothing here" });
-
-    expect(screen.getByTestId("command-empty")).toHaveTextContent(
-      "Nothing here",
-    );
-  });
-});