@etus/ui 0.1.0

package/src/components/primitives/Avatar/AvatarGroup.test.tsx

@@ -0,0 +1,1377 @@
+// Avatar/AvatarGroup.test.tsx
+import { fireEvent, render, screen } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Avatar, AvatarFallback, AvatarImage } from "./Avatar"
+import { AvatarAddButton } from "./AvatarAddButton"
+import { AvatarGroup } from "./AvatarGroup"
+import { AvatarLabelGroup, getInitials } from "./AvatarLabelGroup"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("AvatarGroup", () => {
+  describe("Rendering", () => {
+    it("renders children avatars", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar data-testid="avatar-2">
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar data-testid="avatar-3">
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toBeInTheDocument()
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.getByText("A3")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>AB</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveAttribute("data-slot", "avatar-group")
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <AvatarGroup className="custom-class" data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>AB</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("custom-class")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <AvatarGroup data-custom="value" data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>AB</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("has role=group for accessibility", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>AB</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveAttribute("role", "group")
+    })
+  })
+
+  // ============================================
+  // MAX PROP TESTS
+  // ============================================
+  describe("Max Prop", () => {
+    it("shows +N indicator when max is exceeded", () => {
+      render(
+        <AvatarGroup max={2}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A4</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.queryByText("A3")).not.toBeInTheDocument()
+      expect(screen.queryByText("A4")).not.toBeInTheDocument()
+      expect(screen.getByText("+2")).toBeInTheDocument()
+    })
+
+    it("does not show +N when max equals total children", () => {
+      render(
+        <AvatarGroup max={3}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.getByText("A3")).toBeInTheDocument()
+      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
+    })
+
+    it("does not show +N when max is greater than total children", () => {
+      render(
+        <AvatarGroup max={10}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
+    })
+
+    it("shows all avatars when max is not specified", () => {
+      render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A4</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A5</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.getByText("A3")).toBeInTheDocument()
+      expect(screen.getByText("A4")).toBeInTheDocument()
+      expect(screen.getByText("A5")).toBeInTheDocument()
+      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
+    })
+
+    it("shows +1 when one avatar is hidden", () => {
+      render(
+        <AvatarGroup max={2}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("+1")).toBeInTheDocument()
+    })
+
+    it("calculates correct remainder count", () => {
+      render(
+        <AvatarGroup max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A4</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A5</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("+4")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS - NEGATIVE SPACING
+  // ============================================
+  describe("Size-Specific Spacing", () => {
+    it("applies -space-x-1 for xs size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="xs">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-1")
+    })
+
+    it("applies -space-x-2 for sm size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="sm">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-2")
+    })
+
+    it("applies -space-x-3 for default size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="default">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
+    })
+
+    it("applies -space-x-3 for lg size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="lg">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
+    })
+
+    it("applies -space-x-4 for xl size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="xl">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-4")
+    })
+
+    it("applies -space-x-4 for 2xl size", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" size="2xl">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-4")
+    })
+
+    it("uses default spacing (-space-x-3) when size not specified", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
+    })
+  })
+
+  // ============================================
+  // SIZE PROP APPLIED TO CHILDREN
+  // ============================================
+  describe("Size Applied to Children", () => {
+    it("applies size to child avatars", () => {
+      render(
+        <AvatarGroup size="lg">
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar data-testid="avatar-2">
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-lg)]")
+      expect(screen.getByTestId("avatar-2")).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+
+    it("applies xs size to child avatars", () => {
+      render(
+        <AvatarGroup size="xs">
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-xs)]")
+    })
+
+    it("applies 2xl size to child avatars", () => {
+      render(
+        <AvatarGroup size="2xl">
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-2xl)]")
+    })
+
+    it("applies size to remainder indicator avatar", () => {
+      render(
+        <AvatarGroup max={1} size="lg">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      // Find the +1 fallback and check its parent avatar
+      const remainderFallback = screen.getByText("+1")
+      const remainderAvatar = remainderFallback.closest('[data-slot="avatar"]')
+      expect(remainderAvatar).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+  })
+
+  // ============================================
+  // BORDERED PROP TESTS
+  // ============================================
+  describe("Bordered Prop", () => {
+    it("applies ring-2 ring-background by default (bordered=true)", () => {
+      render(
+        <AvatarGroup>
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-2")
+      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-background")
+    })
+
+    it("applies ring to all child avatars when bordered=true", () => {
+      render(
+        <AvatarGroup bordered>
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar data-testid="avatar-2">
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-2")
+      expect(screen.getByTestId("avatar-2")).toHaveClass("ring-2")
+    })
+
+    it("does not apply ring when bordered=false", () => {
+      render(
+        <AvatarGroup bordered={false}>
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).not.toHaveClass("ring-2")
+    })
+
+    it("applies ring to remainder indicator when bordered=true", () => {
+      render(
+        <AvatarGroup bordered max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const remainderFallback = screen.getByText("+1")
+      const remainderAvatar = remainderFallback.closest('[data-slot="avatar"]')
+      expect(remainderAvatar).toHaveClass("ring-2")
+      expect(remainderAvatar).toHaveClass("ring-background")
+    })
+  })
+
+  // ============================================
+  // REMAINDER INDICATOR STYLING
+  // ============================================
+  describe("Remainder Indicator Styling", () => {
+    it("has bg-muted background", () => {
+      render(
+        <AvatarGroup max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const remainderFallback = screen.getByText("+1")
+      expect(remainderFallback).toHaveClass("bg-muted")
+    })
+
+    it("has muted foreground text color", () => {
+      render(
+        <AvatarGroup max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const remainderFallback = screen.getByText("+1")
+      expect(remainderFallback).toHaveClass("text-muted-foreground")
+    })
+
+    it("has text-xs for compact display", () => {
+      render(
+        <AvatarGroup max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const remainderFallback = screen.getByText("+1")
+      expect(remainderFallback).toHaveClass("text-xs")
+    })
+
+    it("has font-medium for readability", () => {
+      render(
+        <AvatarGroup max={1}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const remainderFallback = screen.getByText("+1")
+      expect(remainderFallback).toHaveClass("font-medium")
+    })
+  })
+
+  // ============================================
+  // FLEXBOX LAYOUT TESTS
+  // ============================================
+  describe("Layout", () => {
+    it("uses flexbox layout", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveClass("flex")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles single child", () => {
+      render(
+        <AvatarGroup>
+          <Avatar data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toBeInTheDocument()
+    })
+
+    it("handles max=0", () => {
+      render(
+        <AvatarGroup max={0}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.queryByText("A1")).not.toBeInTheDocument()
+      expect(screen.queryByText("A2")).not.toBeInTheDocument()
+      expect(screen.getByText("+2")).toBeInTheDocument()
+    })
+
+    it("handles non-Avatar children gracefully", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <span data-testid="non-avatar">Text</span>
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByTestId("non-avatar")).toBeInTheDocument()
+    })
+
+    it("preserves child avatar className", () => {
+      render(
+        <AvatarGroup>
+          <Avatar className="custom-avatar-class" data-testid="avatar-1">
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-1")).toHaveClass("custom-avatar-class")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with max exceeded", async () => {
+      const { container } = render(
+        <AvatarGroup max={2}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <AvatarGroup size="xs">
+            <Avatar><AvatarFallback>XS</AvatarFallback></Avatar>
+          </AvatarGroup>
+          <AvatarGroup size="sm">
+            <Avatar><AvatarFallback>SM</AvatarFallback></Avatar>
+          </AvatarGroup>
+          <AvatarGroup size="default">
+            <Avatar><AvatarFallback>DF</AvatarFallback></Avatar>
+          </AvatarGroup>
+          <AvatarGroup size="lg">
+            <Avatar><AvatarFallback>LG</AvatarFallback></Avatar>
+          </AvatarGroup>
+          <AvatarGroup size="xl">
+            <Avatar><AvatarFallback>XL</AvatarFallback></Avatar>
+          </AvatarGroup>
+          <AvatarGroup size="2xl">
+            <Avatar><AvatarFallback>2X</AvatarFallback></Avatar>
+          </AvatarGroup>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has accessible label", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group">
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("avatar-group")).toHaveAttribute("aria-label")
+    })
+
+    it("has descriptive label when max is exceeded", () => {
+      render(
+        <AvatarGroup data-testid="avatar-group" max={2}>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A3</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A4</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const ariaLabel = screen.getByTestId("avatar-group").getAttribute("aria-label")
+      expect(ariaLabel).toContain("showing 2 of 4")
+    })
+  })
+
+  // ============================================
+  // WITH AVATAR IMAGES
+  // ============================================
+  describe("With AvatarImage", () => {
+    it("renders avatars with images", () => {
+      render(
+        <AvatarGroup>
+          <Avatar data-testid="avatar-1">
+            <AvatarImage alt="User 1" src="https://example.com/1.jpg" />
+            <AvatarFallback>U1</AvatarFallback>
+          </Avatar>
+          <Avatar data-testid="avatar-2">
+            <AvatarImage alt="User 2" src="https://example.com/2.jpg" />
+            <AvatarFallback>U2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      // Fallbacks show in JSDOM since images don't load
+      expect(screen.getByText("U1")).toBeInTheDocument()
+      expect(screen.getByText("U2")).toBeInTheDocument()
+    })
+
+    it("has no violations with avatar images", async () => {
+      const { container } = render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarImage alt="User 1" src="https://example.com/1.jpg" />
+            <AvatarFallback>U1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage alt="User 2" src="https://example.com/2.jpg" />
+            <AvatarFallback>U2</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+// ============================================
+// AVATAR LABEL GROUP TESTS
+// ============================================
+describe("AvatarLabelGroup", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders avatar with name label", () => {
+      render(
+        <AvatarLabelGroup
+          data-testid="avatar-label-group"
+          name="John Doe"
+        />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toBeInTheDocument()
+      expect(screen.getByText("John Doe")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <AvatarLabelGroup
+          data-testid="avatar-label-group"
+          name="John Doe"
+        />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveAttribute(
+        "data-slot",
+        "avatar-label-group"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <AvatarLabelGroup
+          className="custom-class"
+          data-testid="avatar-label-group"
+          name="John Doe"
+        />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveClass("custom-class")
+    })
+
+    it("renders with description", () => {
+      render(
+        <AvatarLabelGroup
+          description="Software Engineer"
+          name="John Doe"
+        />
+      )
+      expect(screen.getByText("John Doe")).toBeInTheDocument()
+      expect(screen.getByText("Software Engineer")).toBeInTheDocument()
+    })
+
+    it("description is optional", () => {
+      render(
+        <AvatarLabelGroup
+          name="John Doe"
+        />
+      )
+      expect(screen.getByText("John Doe")).toBeInTheDocument()
+      expect(screen.queryByText("Software Engineer")).not.toBeInTheDocument()
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <AvatarLabelGroup
+          data-custom="value"
+          data-testid="avatar-label-group"
+          name="John Doe"
+        />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveAttribute("data-custom", "value")
+    })
+  })
+
+  // ============================================
+  // INITIALS FALLBACK TESTS
+  // ============================================
+  describe("Initials Fallback", () => {
+    it("shows fallback initials when no src provided", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" />
+      )
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+
+    it("generates correct initials from single name", () => {
+      expect(getInitials("John")).toBe("J")
+    })
+
+    it("generates correct initials from two-word name", () => {
+      expect(getInitials("John Doe")).toBe("JD")
+    })
+
+    it("generates correct initials from three-word name (takes first two)", () => {
+      expect(getInitials("John Michael Doe")).toBe("JM")
+    })
+
+    it("uppercases initials", () => {
+      expect(getInitials("john doe")).toBe("JD")
+    })
+
+    it("limits initials to two characters", () => {
+      expect(getInitials("A B C D")).toBe("AB")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies xs size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="xs" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-xs)]")
+    })
+
+    it("applies sm size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="sm" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-sm)]")
+    })
+
+    it("applies default size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="default" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+
+    it("applies lg size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="lg" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+
+    it("applies xl size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="xl" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-xl)]")
+    })
+
+    it("applies 2xl size to avatar", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" size="2xl" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-2xl)]")
+    })
+
+    it("uses default size when not specified", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" />
+      )
+      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
+      expect(avatar).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+  })
+
+  // ============================================
+  // STATUS INDICATOR TESTS
+  // ============================================
+  describe("Status Indicator", () => {
+    it("renders with online status", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" status="online" />
+      )
+      const status = screen.getByRole("status")
+      expect(status).toBeInTheDocument()
+      expect(status).toHaveAttribute("aria-label", "Online")
+    })
+
+    it("renders with offline status", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" status="offline" />
+      )
+      const status = screen.getByRole("status")
+      expect(status).toHaveAttribute("aria-label", "Offline")
+    })
+
+    it("renders with busy status", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" status="busy" />
+      )
+      const status = screen.getByRole("status")
+      expect(status).toHaveAttribute("aria-label", "Busy")
+    })
+
+    it("renders with away status", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" status="away" />
+      )
+      const status = screen.getByRole("status")
+      expect(status).toHaveAttribute("aria-label", "Away")
+    })
+
+    it("does not render status when not provided", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" />
+      )
+      expect(screen.queryByRole("status")).not.toBeInTheDocument()
+    })
+
+    it("status has correct data-slot", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" status="online" />
+      )
+      const status = screen.getByRole("status")
+      expect(status).toHaveAttribute("data-slot", "avatar-status")
+    })
+  })
+
+  // ============================================
+  // IMAGE TESTS
+  // ============================================
+  describe("With Image", () => {
+    it("renders with avatar image", () => {
+      render(
+        <AvatarLabelGroup
+          alt="John's avatar"
+          name="John Doe"
+          src="https://example.com/avatar.jpg"
+        />
+      )
+      // In JSDOM, image won't load so fallback shows
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+
+    it("uses name as alt text when alt not provided", () => {
+      const { container } = render(
+        <AvatarLabelGroup
+          name="John Doe"
+          src="https://example.com/avatar.jpg"
+        />
+      )
+      // In JSDOM, the Radix Avatar image is created but may not be in DOM until loaded
+      // Check that the component renders correctly with fallback
+      expect(screen.getByText("JD")).toBeInTheDocument()
+      // Verify an Avatar exists in the container
+      const avatar = container.querySelector('[data-slot="avatar"]')
+      expect(avatar).toBeInTheDocument()
+    })
+
+    it("uses provided alt text when specified", () => {
+      const { container } = render(
+        <AvatarLabelGroup
+          alt="Custom alt text"
+          name="John Doe"
+          src="https://example.com/avatar.jpg"
+        />
+      )
+      // In JSDOM, the Radix Avatar image is created but may not be in DOM until loaded
+      // Check that the component renders correctly with fallback
+      expect(screen.getByText("JD")).toBeInTheDocument()
+      // Verify an Avatar exists in the container
+      const avatar = container.querySelector('[data-slot="avatar"]')
+      expect(avatar).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // LAYOUT TESTS
+  // ============================================
+  describe("Layout", () => {
+    it("uses flexbox layout", () => {
+      render(
+        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveClass("flex")
+    })
+
+    it("centers items vertically", () => {
+      render(
+        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveClass("items-center")
+    })
+
+    it("has gap-3 between avatar and text", () => {
+      render(
+        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
+      )
+      expect(screen.getByTestId("avatar-label-group")).toHaveClass("gap-3")
+    })
+
+    it("name has correct text styling", () => {
+      render(
+        <AvatarLabelGroup name="John Doe" />
+      )
+      const name = screen.getByText("John Doe")
+      expect(name).toHaveClass("text-sm")
+      expect(name).toHaveClass("font-medium")
+      expect(name).toHaveClass("text-foreground")
+    })
+
+    it("description has correct text styling", () => {
+      render(
+        <AvatarLabelGroup description="Software Engineer" name="John Doe" />
+      )
+      const description = screen.getByText("Software Engineer")
+      expect(description).toHaveClass("text-sm")
+      expect(description).toHaveClass("text-muted-foreground")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <AvatarLabelGroup description="Software Engineer" name="John Doe" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with status indicator", async () => {
+      const { container } = render(
+        <AvatarLabelGroup name="John Doe" status="online" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <AvatarLabelGroup name="XS User" size="xs" />
+          <AvatarLabelGroup name="SM User" size="sm" />
+          <AvatarLabelGroup name="Default User" size="default" />
+          <AvatarLabelGroup name="LG User" size="lg" />
+          <AvatarLabelGroup name="XL User" size="xl" />
+          <AvatarLabelGroup name="2XL User" size="2xl" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with image", async () => {
+      const { container } = render(
+        <AvatarLabelGroup
+          alt="John's avatar"
+          name="John Doe"
+          src="https://example.com/avatar.jpg"
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+// ============================================
+// AVATAR ADD BUTTON TESTS
+// ============================================
+describe("AvatarAddButton", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders add button", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveAttribute(
+        "data-slot",
+        "avatar-add-button"
+      )
+    })
+
+    it("has accessible label (aria-label)", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveAttribute(
+        "aria-label",
+        "Add user"
+      )
+    })
+
+    it("is a button element with type button", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      const button = screen.getByTestId("add-button")
+      expect(button.tagName).toBe("BUTTON")
+      expect(button).toHaveAttribute("type", "button")
+    })
+
+    it("renders plus icon", () => {
+      const { container } = render(<AvatarAddButton />)
+      const svgIcon = container.querySelector("svg")
+      expect(svgIcon).toBeInTheDocument()
+    })
+
+    it("supports custom className", () => {
+      render(<AvatarAddButton className="custom-class" data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("custom-class")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<AvatarAddButton data-custom="value" data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveAttribute("data-custom", "value")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies xs size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="xs" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-xs)]")
+    })
+
+    it("applies sm size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="sm" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-sm)]")
+    })
+
+    it("applies default size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="default" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+
+    it("applies lg size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="lg" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+
+    it("applies xl size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="xl" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-xl)]")
+    })
+
+    it("applies 2xl size", () => {
+      render(<AvatarAddButton data-testid="add-button" size="2xl" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-2xl)]")
+    })
+
+    it("uses default size when not specified", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+
+    it("applies correct icon size for xs", () => {
+      const { container } = render(<AvatarAddButton size="xs" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-3")
+    })
+
+    it("applies correct icon size for sm", () => {
+      const { container } = render(<AvatarAddButton size="sm" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-3.5")
+    })
+
+    it("applies correct icon size for default", () => {
+      const { container } = render(<AvatarAddButton size="default" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-4")
+    })
+
+    it("applies correct icon size for lg", () => {
+      const { container } = render(<AvatarAddButton size="lg" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-5")
+    })
+
+    it("applies correct icon size for xl", () => {
+      const { container } = render(<AvatarAddButton size="xl" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-6")
+    })
+
+    it("applies correct icon size for 2xl", () => {
+      const { container } = render(<AvatarAddButton size="2xl" />)
+      const icon = container.querySelector("svg")
+      expect(icon).toHaveClass("size-7")
+    })
+  })
+
+  // ============================================
+  // STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has dashed border styling", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      const button = screen.getByTestId("add-button")
+      expect(button).toHaveClass("border-2")
+      expect(button).toHaveClass("border-dashed")
+      expect(button).toHaveClass("border-muted-foreground/50")
+    })
+
+    it("has muted background", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("bg-muted")
+    })
+
+    it("has muted foreground text color", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("text-muted-foreground")
+    })
+
+    it("has hover state classes", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      const button = screen.getByTestId("add-button")
+      expect(button).toHaveClass("hover:border-primary")
+      expect(button).toHaveClass("hover:bg-primary/10")
+      expect(button).toHaveClass("hover:text-primary")
+    })
+
+    it("has focus ring classes", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      const button = screen.getByTestId("add-button")
+      expect(button).toHaveClass("focus-visible:ring-2")
+      expect(button).toHaveClass("focus-visible:ring-ring")
+      expect(button).toHaveClass("focus-visible:ring-offset-2")
+    })
+
+    it("is rounded-full for circular shape", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("rounded-full")
+    })
+
+    it("has transition-colors for smooth hover", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("transition-colors")
+    })
+
+    it("has cursor-pointer", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveClass("cursor-pointer")
+    })
+  })
+
+  // ============================================
+  // INTERACTIVITY TESTS
+  // ============================================
+  describe("Interactivity", () => {
+    it("is focusable", () => {
+      render(<AvatarAddButton data-testid="add-button" />)
+      const button = screen.getByTestId("add-button")
+      button.focus()
+      expect(document.activeElement).toBe(button)
+    })
+
+    it("handles click events", () => {
+      const handleClick = vi.fn()
+      render(<AvatarAddButton data-testid="add-button" onClick={handleClick} />)
+      fireEvent.click(screen.getByTestId("add-button"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("can be disabled", () => {
+      render(<AvatarAddButton disabled data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toBeDisabled()
+    })
+
+    it("does not fire click when disabled", () => {
+      const handleClick = vi.fn()
+      render(<AvatarAddButton disabled data-testid="add-button" onClick={handleClick} />)
+      fireEvent.click(screen.getByTestId("add-button"))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // INTEGRATION WITH AVATAR GROUP
+  // ============================================
+  describe("Integration with AvatarGroup", () => {
+    it("renders at end of AvatarGroup", () => {
+      render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>A2</AvatarFallback>
+          </Avatar>
+          <AvatarAddButton data-testid="add-button" />
+        </AvatarGroup>
+      )
+      expect(screen.getByText("A1")).toBeInTheDocument()
+      expect(screen.getByText("A2")).toBeInTheDocument()
+      expect(screen.getByTestId("add-button")).toBeInTheDocument()
+    })
+
+    it("maintains circular shape in group context", () => {
+      render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <AvatarAddButton data-testid="add-button" />
+        </AvatarGroup>
+      )
+      expect(screen.getByTestId("add-button")).toHaveClass("rounded-full")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(<AvatarAddButton />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <AvatarAddButton size="xs" />
+          <AvatarAddButton size="sm" />
+          <AvatarAddButton size="default" />
+          <AvatarAddButton size="lg" />
+          <AvatarAddButton size="xl" />
+          <AvatarAddButton size="2xl" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when disabled", async () => {
+      const { container } = render(<AvatarAddButton disabled />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations in AvatarGroup context", async () => {
+      const { container } = render(
+        <AvatarGroup>
+          <Avatar>
+            <AvatarFallback>A1</AvatarFallback>
+          </Avatar>
+          <AvatarAddButton />
+        </AvatarGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("supports custom aria-label", () => {
+      render(<AvatarAddButton aria-label="Add team member" data-testid="add-button" />)
+      expect(screen.getByTestId("add-button")).toHaveAttribute(
+        "aria-label",
+        "Add team member"
+      )
+    })
+  })
+})