@etus/ui 0.1.0

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

@@ -0,0 +1,1311 @@
+// Avatar/Avatar.test.tsx
+import { render, screen } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it } from "vitest"
+
+import { Avatar, AvatarFallback, AvatarImage } from "./Avatar"
+import { AvatarBadge } from "./AvatarBadge"
+import { AvatarLabelGroupSkeleton, AvatarSkeleton } from "./AvatarSkeleton"
+import { AvatarStatus } from "./AvatarStatus"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Avatar", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <Avatar className="custom-class" data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveAttribute("data-slot", "avatar")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <Avatar data-custom="value" data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveAttribute("data-custom", "value")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies xs size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="xs">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-xs)]")
+    })
+
+    it("applies sm size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="sm">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-sm)]")
+    })
+
+    it("applies default size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="default">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+
+    it("applies lg size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="lg">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+
+    it("applies xl size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="xl">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-xl)]")
+    })
+
+    it("applies 2xl size classes", () => {
+      render(
+        <Avatar data-testid="avatar" size="2xl">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-2xl)]")
+    })
+
+    it("uses default size when not specified", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+  })
+
+  // ============================================
+  // SHAPE VARIANT TESTS
+  // ============================================
+  describe("Shape Variants", () => {
+    it("applies circle shape classes (default)", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("rounded-[var(--avatar-radius-circle)]")
+    })
+
+    it("applies circle shape classes explicitly", () => {
+      render(
+        <Avatar data-testid="avatar" shape="circle">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("rounded-[var(--avatar-radius-circle)]")
+    })
+
+    it("applies square shape classes", () => {
+      render(
+        <Avatar data-testid="avatar" shape="square">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("rounded-[var(--avatar-radius-square)]")
+    })
+  })
+
+  // ============================================
+  // BORDERED VARIANT TESTS
+  // ============================================
+  describe("Bordered Variant", () => {
+    it("applies bordered classes when bordered=true", () => {
+      render(
+        <Avatar bordered data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("ring-2")
+      expect(screen.getByTestId("avatar")).toHaveClass("ring-background")
+    })
+
+    it("does not apply bordered classes by default", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).not.toHaveClass("ring-2")
+    })
+  })
+
+  // ============================================
+  // COMBINED VARIANT TESTS
+  // ============================================
+  describe("Combined Variants", () => {
+    it("combines size and shape variants", () => {
+      render(
+        <Avatar data-testid="avatar" shape="square" size="lg">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const avatar = screen.getByTestId("avatar")
+      expect(avatar).toHaveClass("size-[var(--avatar-size-lg)]")
+      expect(avatar).toHaveClass("rounded-[var(--avatar-radius-square)]")
+    })
+
+    it("combines small size with circle shape", () => {
+      render(
+        <Avatar data-testid="avatar" shape="circle" size="sm">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const avatar = screen.getByTestId("avatar")
+      expect(avatar).toHaveClass("size-[var(--avatar-size-sm)]")
+      expect(avatar).toHaveClass("rounded-[var(--avatar-radius-circle)]")
+    })
+  })
+
+  // ============================================
+  // AVATAR IMAGE TESTS
+  // ============================================
+  describe("AvatarImage", () => {
+    it("renders AvatarImage component without errors", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarImage alt="User" src="https://example.com/avatar.jpg" />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toBeInTheDocument()
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+
+    it("accepts alt prop", () => {
+      render(
+        <Avatar>
+          <AvatarImage alt="User profile" src="https://example.com/avatar.jpg" />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+
+    it("accepts custom className", () => {
+      render(
+        <Avatar>
+          <AvatarImage
+            alt="User"
+            className="custom-image-class"
+            src="https://example.com/avatar.jpg"
+          />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // AVATAR FALLBACK TESTS
+  // ============================================
+  describe("AvatarFallback", () => {
+    it("renders fallback content", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-fallback"]')).toBeInTheDocument()
+    })
+
+    it("applies custom className to fallback", () => {
+      render(
+        <Avatar>
+          <AvatarFallback className="custom-fallback-class">AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-fallback"]')).toHaveClass("custom-fallback-class")
+    })
+
+    it("centers content with flexbox", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = document.querySelector('[data-slot="avatar-fallback"]')
+      expect(fallback).toHaveClass("flex")
+      expect(fallback).toHaveClass("items-center")
+      expect(fallback).toHaveClass("justify-center")
+    })
+
+    it("has muted background", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-fallback"]')).toHaveClass("bg-[color:var(--avatar-fallback-bg-default)]")
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("avatar has data-slot", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveAttribute("data-slot", "avatar")
+    })
+
+    it("image component is rendered in DOM (hidden until loaded)", () => {
+      render(
+        <Avatar>
+          <AvatarImage alt="User" src="https://example.com/avatar.jpg" />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByText("AB")).toBeInTheDocument()
+    })
+
+    it("fallback has data-slot", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-fallback"]')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations with fallback", async () => {
+      const { container } = render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with image", async () => {
+      const { container } = render(
+        <Avatar>
+          <AvatarImage alt="User profile" src="https://example.com/avatar.jpg" />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <Avatar size="xs"><AvatarFallback>XS</AvatarFallback></Avatar>
+          <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
+          <Avatar size="default"><AvatarFallback>DF</AvatarFallback></Avatar>
+          <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
+          <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
+          <Avatar size="2xl"><AvatarFallback>2X</AvatarFallback></Avatar>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all shape variants", async () => {
+      const { container } = render(
+        <div>
+          <Avatar shape="circle"><AvatarFallback>CI</AvatarFallback></Avatar>
+          <Avatar shape="square"><AvatarFallback>SQ</AvatarFallback></Avatar>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  // ============================================
+  // INTERACTIVE STATES TESTS
+  // ============================================
+  describe("Interactive States", () => {
+    it("applies interactive classes when interactive=true", () => {
+      render(
+        <Avatar interactive data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("cursor-pointer")
+      expect(screen.getByTestId("avatar")).toHaveClass("transition-transform")
+    })
+
+    it("applies hover scale when interactive", () => {
+      render(
+        <Avatar interactive data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("hover:scale-105")
+    })
+
+    it("applies focus ring when interactive", () => {
+      render(
+        <Avatar interactive data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("focus-visible:outline-none")
+      expect(screen.getByTestId("avatar")).toHaveClass("focus-visible:ring-4")
+    })
+
+    it("does not apply interactive classes by default", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).not.toHaveClass("cursor-pointer")
+    })
+  })
+
+  // ============================================
+  // CONTRAST BORDER TESTS
+  // ============================================
+  describe("Contrast Border", () => {
+    it("applies contrast border by default", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:/)
+    })
+
+    it("does not apply contrast border when contrastBorder=false", () => {
+      render(
+        <Avatar contrastBorder={false} data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).not.toMatch(/after:border/)
+    })
+
+    it("applies 0.5px border for xs size", () => {
+      render(
+        <Avatar data-testid="avatar" size="xs">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:border-\[0\.5px\]/)
+    })
+
+    it("applies 0.5px border for sm size", () => {
+      render(
+        <Avatar data-testid="avatar" size="sm">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:border-\[0\.5px\]/)
+    })
+
+    it("applies 0.75px border for default size", () => {
+      render(
+        <Avatar data-testid="avatar" size="default">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:border-\[0\.75px\]/)
+    })
+
+    it("applies 0.75px border for lg size", () => {
+      render(
+        <Avatar data-testid="avatar" size="lg">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:border-\[0\.75px\]/)
+    })
+
+    it("applies rounded-full for circle shape contrast border", () => {
+      render(
+        <Avatar data-testid="avatar" shape="circle">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:rounded-full/)
+    })
+
+    it("applies rounded-md for square shape contrast border", () => {
+      render(
+        <Avatar data-testid="avatar" shape="square">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar").className).toMatch(/after:rounded-md/)
+    })
+
+    it("combines square shape with correct border width", () => {
+      render(
+        <Avatar data-testid="avatar" shape="square" size="xs">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      const className = screen.getByTestId("avatar").className
+      expect(className).toMatch(/after:rounded-md/)
+      expect(className).toMatch(/after:border-\[0\.5px\]/)
+    })
+  })
+
+  // ============================================
+  // BASE STYLING TESTS
+  // ============================================
+  describe("Base Styling", () => {
+    it("has overflow hidden", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("overflow-hidden")
+    })
+
+    it("uses flexbox layout", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("flex")
+    })
+
+    it("has shrink-0 to prevent shrinking", () => {
+      render(
+        <Avatar data-testid="avatar">
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      )
+      expect(screen.getByTestId("avatar")).toHaveClass("shrink-0")
+    })
+  })
+})
+
+// ============================================
+// AVATAR STATUS TESTS
+// ============================================
+describe("AvatarStatus", () => {
+  describe("Rendering", () => {
+    it("renders status indicator", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveAttribute("data-slot", "avatar-status")
+    })
+
+    it("applies custom className", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus className="custom-class" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("custom-class")
+    })
+  })
+
+  describe("Status Colors", () => {
+    it("applies online status color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("bg-success")
+    })
+
+    it("applies offline status color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="offline" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("bg-muted")
+    })
+
+    it("applies busy status color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="busy" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("bg-destructive")
+    })
+
+    it("applies away status color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="away" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("bg-warning")
+    })
+
+    it("defaults to offline status", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("bg-muted")
+    })
+  })
+
+  describe("Size Variants", () => {
+    it("applies xs size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="xs" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-1.5")
+    })
+
+    it("applies sm size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="sm" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-2")
+    })
+
+    it("applies default size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="default" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-2.5")
+    })
+
+    it("applies lg size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="lg" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-3")
+    })
+
+    it("applies xl size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="xl" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-3.5")
+    })
+
+    it("applies 2xl size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus size="2xl" status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-4")
+    })
+
+    it("uses default size when not specified", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("size-2.5")
+    })
+  })
+
+  describe("Positioning", () => {
+    it("positions at bottom-right", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      const status = document.querySelector('[data-slot="avatar-status"]')
+      expect(status).toHaveClass("absolute")
+      expect(status).toHaveClass("bottom-0")
+      expect(status).toHaveClass("right-0")
+    })
+  })
+
+  describe("Styling", () => {
+    it("has rounded-full class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-status"]')).toHaveClass("rounded-full")
+    })
+
+    it("has ring styling", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      const status = document.querySelector('[data-slot="avatar-status"]')
+      expect(status).toHaveClass("ring-[1.5px]")
+      expect(status).toHaveClass("ring-background")
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has accessible label for online status", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/online/i)).toBeInTheDocument()
+    })
+
+    it("has accessible label for offline status", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="offline" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/offline/i)).toBeInTheDocument()
+    })
+
+    it("has accessible label for busy status", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="busy" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/busy/i)).toBeInTheDocument()
+    })
+
+    it("has accessible label for away status", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="away" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/away/i)).toBeInTheDocument()
+    })
+
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarStatus status="online" />
+        </Avatar>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all status variants", async () => {
+      const { container } = render(
+        <div>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarStatus status="online" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarStatus status="offline" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarStatus status="busy" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarStatus status="away" /></Avatar>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+// ============================================
+// AVATAR BADGE TESTS
+// ============================================
+describe("AvatarBadge", () => {
+  describe("Rendering", () => {
+    it("renders badge indicator", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="company" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveAttribute("data-slot", "avatar-badge")
+    })
+
+    it("applies custom className", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge className="custom-class" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("custom-class")
+    })
+
+    it("renders default icon for verified variant", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      const badge = document.querySelector('[data-slot="avatar-badge"]')
+      expect(badge?.querySelector("svg")).toBeInTheDocument()
+    })
+
+    it("renders default icon for company variant", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="company" />
+        </Avatar>
+      )
+      const badge = document.querySelector('[data-slot="avatar-badge"]')
+      expect(badge?.querySelector("svg")).toBeInTheDocument()
+    })
+
+    it("renders custom children instead of default icon", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified">
+            <span data-testid="custom-icon">X</span>
+          </AvatarBadge>
+        </Avatar>
+      )
+      expect(screen.getByTestId("custom-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("Variant Colors", () => {
+    it("applies company variant color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="company" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("bg-brius-500")
+    })
+
+    it("applies verified variant color", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("bg-sevends-blue-600")
+    })
+
+    it("defaults to verified variant", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("bg-sevends-blue-600")
+    })
+
+    it("applies text-base-white for both variants", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="company" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("text-base-white")
+    })
+  })
+
+  describe("Size Variants", () => {
+    it("applies xs size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="xs" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-2.5")
+    })
+
+    it("applies sm size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="sm" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-3")
+    })
+
+    it("applies default size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="default" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-3.5")
+    })
+
+    it("applies lg size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="lg" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-4")
+    })
+
+    it("applies xl size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="xl" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-[18px]")
+    })
+
+    it("applies 2xl size class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge size="2xl" variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-5")
+    })
+
+    it("uses default size when not specified", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-3.5")
+    })
+  })
+
+  describe("Positioning", () => {
+    it("positions at bottom-right with offset", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      const badge = document.querySelector('[data-slot="avatar-badge"]')
+      expect(badge).toHaveClass("absolute")
+      expect(badge).toHaveClass("-bottom-0.5")
+      expect(badge).toHaveClass("-right-0.5")
+    })
+  })
+
+  describe("Styling", () => {
+    it("has rounded-full class", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("rounded-full")
+    })
+
+    it("has ring styling", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      const badge = document.querySelector('[data-slot="avatar-badge"]')
+      expect(badge).toHaveClass("ring-[1.5px]")
+      expect(badge).toHaveClass("ring-background")
+    })
+
+    it("has flexbox centering for icon", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      const badge = document.querySelector('[data-slot="avatar-badge"]')
+      expect(badge).toHaveClass("flex")
+      expect(badge).toHaveClass("items-center")
+      expect(badge).toHaveClass("justify-center")
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has accessible label for company variant", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="company" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/company account/i)).toBeInTheDocument()
+    })
+
+    it("has accessible label for verified variant", () => {
+      render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      expect(screen.getByLabelText(/verified account/i)).toBeInTheDocument()
+    })
+
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+          <AvatarBadge variant="verified" />
+        </Avatar>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all badge variants", async () => {
+      const { container } = render(
+        <div>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge variant="company" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge variant="verified" /></Avatar>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="xs" variant="verified" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="sm" variant="verified" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="default" variant="verified" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="lg" variant="verified" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="xl" variant="verified" /></Avatar>
+          <Avatar><AvatarFallback>AB</AvatarFallback><AvatarBadge size="2xl" variant="verified" /></Avatar>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+// ============================================
+// AVATARFALLBACK COLORSCHEME TESTS
+// ============================================
+describe("AvatarFallback colorScheme", () => {
+  describe("Color Scheme Variants", () => {
+    it("applies default colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-default)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-default)]")
+    })
+
+    it("applies primary colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback colorScheme="primary" data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-primary)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-primary)]")
+    })
+
+    it("applies secondary colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback colorScheme="secondary" data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-secondary)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-secondary)]")
+    })
+
+    it("applies success colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback colorScheme="success" data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-success)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-success)]")
+    })
+
+    it("applies warning colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback colorScheme="warning" data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-warning)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-warning)]")
+    })
+
+    it("applies destructive colorScheme classes", () => {
+      render(
+        <Avatar>
+          <AvatarFallback colorScheme="destructive" data-testid="fallback">AB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByTestId("fallback")
+      expect(fallback).toHaveClass("bg-[color:var(--avatar-fallback-bg-destructive)]")
+      expect(fallback).toHaveClass("text-[color:var(--avatar-fallback-text-destructive)]")
+    })
+  })
+})
+
+// ============================================
+// AVATAR SKELETON TESTS
+// ============================================
+describe("AvatarSkeleton", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<AvatarSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<AvatarSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveAttribute("data-slot", "avatar-skeleton")
+    })
+
+    it("has animate-pulse class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("animate-pulse")
+    })
+
+    it("has bg-muted class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("bg-muted")
+    })
+  })
+
+  describe("Size Variants", () => {
+    it("applies xs size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="xs" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-xs)]")
+    })
+
+    it("applies sm size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="sm" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-sm)]")
+    })
+
+    it("applies default size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="default" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-default)]")
+    })
+
+    it("applies lg size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="lg" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+
+    it("applies xl size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="xl" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-xl)]")
+    })
+
+    it("applies 2xl size class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" size="2xl" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("size-[var(--avatar-size-2xl)]")
+    })
+  })
+
+  describe("Shape Variants", () => {
+    it("applies circle shape class by default", () => {
+      render(<AvatarSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("rounded-[var(--avatar-radius-circle)]")
+    })
+
+    it("applies square shape class", () => {
+      render(<AvatarSkeleton data-testid="skeleton" shape="square" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("rounded-[var(--avatar-radius-square)]")
+    })
+  })
+
+  describe("Custom className", () => {
+    it("applies custom className", () => {
+      render(<AvatarSkeleton className="custom-class" data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("custom-class")
+    })
+  })
+})
+
+// ============================================
+// AVATAR LABEL GROUP SKELETON TESTS
+// ============================================
+describe("AvatarLabelGroupSkeleton", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<AvatarLabelGroupSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<AvatarLabelGroupSkeleton data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveAttribute("data-slot", "avatar-label-group-skeleton")
+    })
+
+    it("renders avatar skeleton inside", () => {
+      render(<AvatarLabelGroupSkeleton data-testid="skeleton" />)
+      expect(document.querySelector('[data-slot="avatar-skeleton"]')).toBeInTheDocument()
+    })
+
+    it("renders text placeholders", () => {
+      render(<AvatarLabelGroupSkeleton data-testid="skeleton" />)
+      const skeleton = screen.getByTestId("skeleton")
+      // Should have two text placeholder divs (name and description)
+      const placeholders = skeleton.querySelectorAll("div.animate-pulse")
+      expect(placeholders.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+
+  describe("Size Variants", () => {
+    it("passes size to AvatarSkeleton", () => {
+      render(<AvatarLabelGroupSkeleton data-testid="skeleton" size="lg" />)
+      expect(document.querySelector('[data-slot="avatar-skeleton"]')).toHaveClass("size-[var(--avatar-size-lg)]")
+    })
+  })
+
+  describe("Custom className", () => {
+    it("applies custom className", () => {
+      render(<AvatarLabelGroupSkeleton className="custom-class" data-testid="skeleton" />)
+      expect(screen.getByTestId("skeleton")).toHaveClass("custom-class")
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(<AvatarLabelGroupSkeleton />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})