@etus/ui 0.1.0

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

@@ -0,0 +1,657 @@
+// Thumbnail/Thumbnail.test.tsx
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Thumbnail } from "./Thumbnail"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Thumbnail", () => {
+  describe("Rendering", () => {
+    it("renders correctly with required props", () => {
+      render(<Thumbnail alt="Test image" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toBeInTheDocument()
+    })
+
+    it("renders image with correct src", () => {
+      render(<Thumbnail alt="Test image" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveAttribute("src", "/test.jpg")
+    })
+
+    it("renders image with correct alt text", () => {
+      render(<Thumbnail alt="Test image description" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveAttribute("alt", "Test image description")
+    })
+
+    it("renders with custom className", () => {
+      render(<Thumbnail alt="Test" className="custom-class" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute on wrapper", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveAttribute("data-slot", "thumbnail")
+    })
+
+    it("has data-slot attribute on image", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveAttribute("data-slot", "thumbnail-image")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<Thumbnail alt="Test" data-custom="value" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("image has object-cover class", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveClass("object-cover")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies xs size classes (40px)", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" size="xs" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-xs-width)]")
+    })
+
+    it("applies sm size classes (56px)", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" size="sm" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-sm-width)]")
+    })
+
+    it("applies default size classes (80px)", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" size="default" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-default-width)]")
+    })
+
+    it("applies lg size classes (120px)", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" size="lg" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-lg-width)]")
+    })
+
+    it("applies xl size classes (160px)", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" size="xl" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-xl-width)]")
+    })
+
+    it("uses default size when not specified", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("w-[var(--thumbnail-size-default-width)]")
+    })
+  })
+
+  // ============================================
+  // ASPECT RATIO TESTS
+  // ============================================
+  describe("Aspect Ratio Variants", () => {
+    it("applies square aspect ratio (1/1)", () => {
+      render(<Thumbnail alt="Test" aspectRatio="square" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("aspect-square")
+    })
+
+    it("applies video aspect ratio (16/9)", () => {
+      render(<Thumbnail alt="Test" aspectRatio="video" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("aspect-video")
+    })
+
+    it("applies wide aspect ratio (4/3)", () => {
+      render(<Thumbnail alt="Test" aspectRatio="wide" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("aspect-[4/3]")
+    })
+
+    it("uses square aspect ratio by default", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("aspect-square")
+    })
+  })
+
+  // ============================================
+  // ROUNDED VARIANT TESTS
+  // ============================================
+  describe("Rounded Variants", () => {
+    it("applies no rounding with rounded=none", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" rounded="none" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-none)]")
+    })
+
+    it("applies small rounding with rounded=sm", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" rounded="sm" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-sm)]")
+    })
+
+    it("applies default rounding with rounded=default", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" rounded="default" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-default)]")
+    })
+
+    it("applies large rounding with rounded=lg", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" rounded="lg" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-lg)]")
+    })
+
+    it("applies full rounding with rounded=full", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" rounded="full" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-full)]")
+    })
+
+    it("uses default rounding when not specified", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("rounded-[var(--thumbnail-rounded-default)]")
+    })
+  })
+
+  // ============================================
+  // FALLBACK TESTS
+  // ============================================
+  describe("Fallback", () => {
+    it("shows fallback when image fails to load", async () => {
+      render(<Thumbnail alt="Test" fallback={<span>Error</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.error(img)
+
+      await waitFor(() => {
+        expect(screen.getByText("Error")).toBeInTheDocument()
+      })
+    })
+
+    it("fallback has data-slot attribute", async () => {
+      render(<Thumbnail alt="Test" fallback={<span>Error</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.error(img)
+
+      await waitFor(() => {
+        const fallbackContainer = document.querySelector('[data-slot="image-fallback"]')
+        expect(fallbackContainer).toBeInTheDocument()
+      })
+    })
+
+    it("does not show fallback when image loads successfully", () => {
+      render(<Thumbnail alt="Test" fallback={<span>Error</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.load(img)
+
+      expect(screen.queryByText("Error")).not.toBeInTheDocument()
+    })
+
+    it("hides image when fallback is shown", async () => {
+      render(<Thumbnail alt="Test" fallback={<span>Error</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.error(img)
+
+      await waitFor(() => {
+        expect(img).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // PLACEHOLDER TESTS
+  // ============================================
+  describe("Placeholder", () => {
+    it("renders placeholder while loading", () => {
+      render(<Thumbnail alt="Test" placeholder={<span>Loading...</span>} src="/test.jpg" />)
+      expect(screen.getByText("Loading...")).toBeInTheDocument()
+    })
+
+    it("hides placeholder after image loads", async () => {
+      render(<Thumbnail alt="Test" placeholder={<span>Loading...</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.load(img)
+
+      await waitFor(() => {
+        expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+      })
+    })
+
+    it("shows default skeleton when no placeholder provided", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const skeleton = document.querySelector('[data-slot="image-skeleton"]')
+      expect(skeleton).toBeInTheDocument()
+    })
+
+    it("hides default skeleton after image loads", async () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.load(img)
+
+      await waitFor(() => {
+        const skeleton = document.querySelector('[data-slot="image-skeleton"]')
+        expect(skeleton).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // CLICK HANDLER TESTS
+  // ============================================
+  describe("Click Handler", () => {
+    it("calls onClick when clicked", () => {
+      const handleClick = vi.fn()
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />)
+
+      fireEvent.click(screen.getByTestId("thumbnail"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not call onClick when disabled", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail disabled alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />
+      )
+
+      fireEvent.click(screen.getByTestId("thumbnail"))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+
+    it("adds cursor-pointer when onClick is provided", () => {
+      const handleClick = vi.fn()
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />)
+
+      expect(screen.getByTestId("thumbnail")).toHaveClass("cursor-pointer")
+    })
+
+    it("adds button role when onClick is provided", () => {
+      const handleClick = vi.fn()
+      render(<Thumbnail alt="Test" src="/test.jpg" onClick={handleClick} />)
+
+      expect(screen.getByRole("button")).toBeInTheDocument()
+    })
+
+    it("supports keyboard activation with Enter key", () => {
+      const handleClick = vi.fn()
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />)
+
+      fireEvent.keyDown(screen.getByTestId("thumbnail"), { key: "Enter" })
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("supports keyboard activation with Space key", () => {
+      const handleClick = vi.fn()
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />)
+
+      fireEvent.keyDown(screen.getByTestId("thumbnail"), { key: " " })
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not activate with keyboard when disabled", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail disabled alt="Test" data-testid="thumbnail" src="/test.jpg" onClick={handleClick} />
+      )
+
+      fireEvent.keyDown(screen.getByTestId("thumbnail"), { key: "Enter" })
+      fireEvent.keyDown(screen.getByTestId("thumbnail"), { key: " " })
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // SELECTED STATE TESTS
+  // ============================================
+  describe("Selected State", () => {
+    it("applies selected styling when selected=true", () => {
+      render(<Thumbnail selected alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("ring-2")
+      expect(screen.getByTestId("thumbnail")).toHaveClass("ring-primary")
+    })
+
+    it("does not apply selected styling by default", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).not.toHaveClass("ring-2")
+    })
+
+    it("applies aria-pressed when interactive and selected", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail selected alt="Test" src="/test.jpg" onClick={handleClick} />
+      )
+      expect(screen.getByRole("button")).toHaveAttribute("aria-pressed", "true")
+    })
+
+    it("applies aria-pressed=false when interactive and not selected", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail alt="Test" selected={false} src="/test.jpg" onClick={handleClick} />
+      )
+      expect(screen.getByRole("button")).toHaveAttribute("aria-pressed", "false")
+    })
+  })
+
+  // ============================================
+  // DISABLED STATE TESTS
+  // ============================================
+  describe("Disabled State", () => {
+    it("applies disabled styling when disabled=true", () => {
+      render(<Thumbnail disabled alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("opacity-50")
+    })
+
+    it("applies cursor-not-allowed when disabled", () => {
+      render(<Thumbnail disabled alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("cursor-not-allowed")
+    })
+
+    it("does not apply disabled styling by default", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).not.toHaveClass("opacity-50")
+    })
+
+    it("applies aria-disabled when disabled", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail disabled alt="Test" src="/test.jpg" onClick={handleClick} />
+      )
+      expect(screen.getByRole("button")).toHaveAttribute("aria-disabled", "true")
+    })
+
+    it("disables pointer events when disabled", () => {
+      render(<Thumbnail disabled alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("pointer-events-none")
+    })
+  })
+
+  // ============================================
+  // COMBINED VARIANT TESTS
+  // ============================================
+  describe("Combined Variants", () => {
+    it("combines size and aspect ratio", () => {
+      render(
+        <Thumbnail
+          alt="Test"
+          aspectRatio="video"
+          data-testid="thumbnail"
+          size="lg"
+          src="/test.jpg"
+        />
+      )
+      const thumbnail = screen.getByTestId("thumbnail")
+      expect(thumbnail).toHaveClass("w-[var(--thumbnail-size-lg-width)]")
+      expect(thumbnail).toHaveClass("aspect-video")
+    })
+
+    it("combines size and rounded", () => {
+      render(
+        <Thumbnail
+          alt="Test"
+          data-testid="thumbnail"
+          rounded="lg"
+          size="sm"
+          src="/test.jpg"
+        />
+      )
+      const thumbnail = screen.getByTestId("thumbnail")
+      expect(thumbnail).toHaveClass("w-[var(--thumbnail-size-sm-width)]")
+      expect(thumbnail).toHaveClass("rounded-[var(--thumbnail-rounded-lg)]")
+    })
+
+    it("combines selected and interactive states", () => {
+      const handleClick = vi.fn()
+      render(
+        <Thumbnail
+          selected
+          alt="Test"
+          data-testid="thumbnail"
+          src="/test.jpg"
+          onClick={handleClick}
+        />
+      )
+      const thumbnail = screen.getByTestId("thumbnail")
+      expect(thumbnail).toHaveClass("cursor-pointer")
+      expect(thumbnail).toHaveClass("ring-2")
+      expect(thumbnail).toHaveClass("ring-primary")
+    })
+
+    it("combines all variants", () => {
+      render(
+        <Thumbnail
+          selected
+          alt="Test"
+          aspectRatio="wide"
+          data-testid="thumbnail"
+          rounded="full"
+          size="xl"
+          src="/test.jpg"
+        />
+      )
+      const thumbnail = screen.getByTestId("thumbnail")
+      expect(thumbnail).toHaveClass("w-[var(--thumbnail-size-xl-width)]")
+      expect(thumbnail).toHaveClass("aspect-[4/3]")
+      expect(thumbnail).toHaveClass("rounded-[var(--thumbnail-rounded-full)]")
+      expect(thumbnail).toHaveClass("ring-2")
+    })
+  })
+
+  // ============================================
+  // BASE STYLING TESTS
+  // ============================================
+  describe("Base Styling", () => {
+    it("has relative positioning", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("relative")
+    })
+
+    it("has overflow-hidden", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("overflow-hidden")
+    })
+
+    it("has inline-block display", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("inline-block")
+    })
+
+    it("has background color for placeholder", () => {
+      render(<Thumbnail alt="Test" data-testid="thumbnail" src="/test.jpg" />)
+      expect(screen.getByTestId("thumbnail")).toHaveClass("bg-[color:var(--thumbnail-root-bg)]")
+    })
+  })
+
+  // ============================================
+  // IMAGE LOADING STATES TESTS
+  // ============================================
+  describe("Image Loading States", () => {
+    it("image starts with opacity-0 while loading", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveClass("opacity-0")
+    })
+
+    it("image transitions to opacity-100 after load", async () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+
+      const img = screen.getByRole("img")
+      fireEvent.load(img)
+
+      await waitFor(() => {
+        expect(img).toHaveClass("opacity-100")
+      })
+    })
+
+    it("resets loading state when src changes", () => {
+      const { rerender } = render(<Thumbnail alt="Test" src="/test1.jpg" />)
+      const img1 = screen.getByRole("img")
+      fireEvent.load(img1)
+
+      expect(img1).toHaveClass("opacity-100")
+
+      rerender(<Thumbnail alt="Test" src="/test2.jpg" />)
+
+      // When src changes, ImageInner remounts, so we need to get the new img element
+      // It starts with opacity-0
+      const img2 = screen.getByRole("img")
+      expect(img2).toHaveClass("opacity-0")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("requires alt text for images", () => {
+      render(<Thumbnail alt="Description" src="/test.jpg" />)
+      expect(screen.getByAltText("Description")).toBeInTheDocument()
+    })
+
+    it("has no accessibility violations with basic thumbnail", async () => {
+      const { container } = render(<Thumbnail alt="A11y" src="/test.jpg" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <Thumbnail alt="xs" size="xs" src="/xs.jpg" />
+          <Thumbnail alt="sm" size="sm" src="/sm.jpg" />
+          <Thumbnail alt="default" size="default" src="/default.jpg" />
+          <Thumbnail alt="lg" size="lg" src="/lg.jpg" />
+          <Thumbnail alt="xl" size="xl" src="/xl.jpg" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with all aspect ratios", async () => {
+      const { container } = render(
+        <div>
+          <Thumbnail alt="Square" aspectRatio="square" src="/sq.jpg" />
+          <Thumbnail alt="Video" aspectRatio="video" src="/vid.jpg" />
+          <Thumbnail alt="Wide" aspectRatio="wide" src="/wide.jpg" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with all rounded variants", async () => {
+      const { container } = render(
+        <div>
+          <Thumbnail alt="None" rounded="none" src="/none.jpg" />
+          <Thumbnail alt="Sm" rounded="sm" src="/sm.jpg" />
+          <Thumbnail alt="Default" rounded="default" src="/def.jpg" />
+          <Thumbnail alt="Lg" rounded="lg" src="/lg.jpg" />
+          <Thumbnail alt="Full" rounded="full" src="/full.jpg" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with interactive thumbnail", async () => {
+      const { container } = render(
+         
+        <Thumbnail alt="Clickable" src="/click.jpg" onClick={() => { /* noop */ }} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with selected state", async () => {
+      const { container } = render(
+         
+        <Thumbnail selected alt="Selected" src="/sel.jpg" onClick={() => { /* noop */ }} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with disabled state", async () => {
+      const { container } = render(
+         
+        <Thumbnail disabled alt="Disabled" src="/dis.jpg" onClick={() => { /* noop */ }} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with fallback", async () => {
+      const { container } = render(
+        <Thumbnail alt="Fallback" fallback={<span>Error</span>} src="/err.jpg" />
+      )
+      const img = screen.getByRole("img")
+      fireEvent.error(img)
+      
+      await waitFor(() => {
+        expect(screen.getByText("Error")).toBeInTheDocument()
+      })
+      
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with placeholder", async () => {
+      const { container } = render(
+        <Thumbnail alt="Placeholder" placeholder={<span>Loading</span>} src="/load.jpg" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("interactive thumbnail is focusable", () => {
+      render(<Thumbnail alt="Focus" src="/focus.jpg" onClick={() => { /* noop */ }} />)
+      const thumb = screen.getByRole("button")
+      thumb.focus()
+      expect(thumb).toHaveFocus()
+    })
+
+    it("non-interactive thumbnail is not focusable", () => {
+      render(<Thumbnail alt="NoFocus" src="/nofocus.jpg" />)
+      const thumb = document.querySelector<HTMLElement>('[data-slot="thumbnail"]')
+      if (thumb) thumb.focus()
+      expect(thumb).not.toHaveFocus()
+    })
+
+    it("disabled thumbnail is not focusable", () => {
+      render(<Thumbnail disabled alt="Disabled" src="/dis.jpg" onClick={() => { /* noop */ }} />)
+      const thumb = screen.getByRole("button")
+      expect(thumb).toHaveAttribute("tabIndex", "-1")
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTES TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot=thumbnail on root", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const root = document.querySelector('[data-slot="thumbnail"]')
+      expect(root).toBeInTheDocument()
+    })
+
+    it("has data-slot=thumbnail-image on image", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      expect(img).toHaveAttribute("data-slot", "thumbnail-image")
+    })
+
+    it("has data-slot=thumbnail-fallback on fallback container", async () => {
+      render(<Thumbnail alt="Test" fallback={<span>Error</span>} src="/test.jpg" />)
+      const img = screen.getByRole("img")
+      fireEvent.error(img)
+
+      await waitFor(() => {
+        const fallback = document.querySelector('[data-slot="image-fallback"]')
+        expect(fallback).toBeInTheDocument()
+      })
+    })
+
+    it("has data-slot=thumbnail-skeleton on default skeleton", () => {
+      render(<Thumbnail alt="Test" src="/test.jpg" />)
+      const skeleton = document.querySelector('[data-slot="image-skeleton"]')
+      expect(skeleton).toBeInTheDocument()
+    })
+  })
+})