@etus/ui 0.1.1 → 0.1.3

package/src/components/feedback/Toast/Toast.test.tsx

@@ -1,1116 +0,0 @@
-import { act, render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { toast } from "sonner"
-import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest"
-
-import { Toaster } from "./Toast"
-
-expect.extend(toHaveNoViolations)
-
-// Mock setPointerCapture and releasePointerCapture as JSDOM doesn't support them
-// These are used by Sonner for swipe-to-dismiss functionality
-beforeAll(() => {
-  Element.prototype.setPointerCapture = vi.fn()
-  Element.prototype.releasePointerCapture = vi.fn()
-})
-
-// ============================================
-// TEST HELPERS
-// ============================================
-function renderToaster(props = {}) {
-  return render(<Toaster {...props} />)
-}
-
-// ============================================
-// SETUP AND TEARDOWN
-// ============================================
-describe("Toast", () => {
-  beforeEach(() => {
-    // Clear all toasts before each test
-    toast.dismiss()
-  })
-
-  afterEach(() => {
-    // Cleanup after each test
-    toast.dismiss()
-  })
-
-  // ============================================
-  // TOASTER RENDERING TESTS
-  // ============================================
-  describe("Toaster Rendering", () => {
-    it("renders without crashing", () => {
-      const { container } = renderToaster()
-      expect(container).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      renderToaster({ className: "custom-toaster" })
-      // The toaster renders a section element
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies theme prop", () => {
-      renderToaster({ theme: "light" })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies position prop", () => {
-      renderToaster({ position: "top-center" })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies richColors prop", () => {
-      renderToaster({ richColors: true })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies closeButton prop", () => {
-      renderToaster({ closeButton: true })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies expand prop", () => {
-      renderToaster({ expand: true })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies duration prop", () => {
-      renderToaster({ duration: 5000 })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("applies visibleToasts prop", () => {
-      renderToaster({ visibleToasts: 5 })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // TOAST FUNCTION TESTS
-  // ============================================
-  describe("Toast Function", () => {
-    it("shows default toast when called", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Hello World")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Hello World")).toBeInTheDocument()
-      })
-    })
-
-    it("shows success toast with icon", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.success("Success!")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Success!")).toBeInTheDocument()
-      })
-    })
-
-    it("shows error toast with icon", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.error("Error occurred!")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Error occurred!")).toBeInTheDocument()
-      })
-    })
-
-    it("shows warning toast with icon", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.warning("Warning!")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Warning!")).toBeInTheDocument()
-      })
-    })
-
-    it("shows info toast with icon", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.info("Information")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Information")).toBeInTheDocument()
-      })
-    })
-
-    it("shows loading toast with spinner", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.loading("Loading...")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // TOAST OPTIONS TESTS
-  // ============================================
-  describe("Toast Options", () => {
-    it("shows description when provided", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Title", { description: "Description text" })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Title")).toBeInTheDocument()
-        expect(screen.getByText("Description text")).toBeInTheDocument()
-      })
-    })
-
-    it("shows action button when provided", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Message", {
-          action: { label: "Undo", onClick: vi.fn() },
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Undo")).toBeInTheDocument()
-      })
-    })
-
-    it("calls action onClick when action button is clicked", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      renderToaster()
-
-      act(() => {
-        toast("Message", {
-          action: { label: "Undo", onClick },
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Undo")).toBeInTheDocument()
-      })
-
-      await user.click(screen.getByText("Undo"))
-      expect(onClick).toHaveBeenCalled()
-    })
-
-    it("shows cancel button when provided", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Message", {
-          cancel: { label: "Cancel", onClick: vi.fn() },
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Cancel")).toBeInTheDocument()
-      })
-    })
-
-    it("calls cancel onClick when cancel button is clicked", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      renderToaster()
-
-      act(() => {
-        toast("Message", {
-          cancel: { label: "Cancel", onClick },
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Cancel")).toBeInTheDocument()
-      })
-
-      await user.click(screen.getByText("Cancel"))
-      expect(onClick).toHaveBeenCalled()
-    })
-
-    it("shows both action and cancel buttons", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Confirm action?", {
-          action: { label: "Confirm", onClick: vi.fn() },
-          cancel: { label: "Cancel", onClick: vi.fn() },
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Confirm")).toBeInTheDocument()
-        expect(screen.getByText("Cancel")).toBeInTheDocument()
-      })
-    })
-
-    it("respects custom duration", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Quick toast", { duration: 100 })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Quick toast")).toBeInTheDocument()
-      })
-
-      // Wait for toast to disappear
-      await waitFor(
-        () => {
-          expect(screen.queryByText("Quick toast")).not.toBeInTheDocument()
-        },
-        { timeout: 1000 }
-      )
-    })
-
-    it("persists with Infinity duration", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Persistent toast", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Persistent toast")).toBeInTheDocument()
-      })
-
-      // Wait a bit and verify it's still there
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      expect(screen.getByText("Persistent toast")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // TOAST DISMISS TESTS
-  // ============================================
-  describe("Toast Dismiss", () => {
-    it("dismisses toast when dismiss is called with id", async () => {
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast("Dismissable toast", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Dismissable toast")).toBeInTheDocument()
-      })
-
-      act(() => {
-        if (toastId) toast.dismiss(toastId)
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText("Dismissable toast")).not.toBeInTheDocument()
-      })
-    })
-
-    it("dismisses all toasts when dismiss is called without id", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Toast 1", { duration: Infinity })
-        toast("Toast 2", { duration: Infinity })
-        toast("Toast 3", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Toast 1")).toBeInTheDocument()
-        expect(screen.getByText("Toast 2")).toBeInTheDocument()
-        expect(screen.getByText("Toast 3")).toBeInTheDocument()
-      })
-
-      act(() => {
-        toast.dismiss()
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText("Toast 1")).not.toBeInTheDocument()
-        expect(screen.queryByText("Toast 2")).not.toBeInTheDocument()
-        expect(screen.queryByText("Toast 3")).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // TOAST UPDATE TESTS
-  // ============================================
-  describe("Toast Update", () => {
-    it("updates loading toast to success", async () => {
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast.loading("Loading...")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeInTheDocument()
-      })
-
-      act(() => {
-        if (toastId) toast.success("Done!", { id: toastId })
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
-        expect(screen.getByText("Done!")).toBeInTheDocument()
-      })
-    })
-
-    it("updates loading toast to error", async () => {
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast.loading("Saving...")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Saving...")).toBeInTheDocument()
-      })
-
-      act(() => {
-        if (toastId) toast.error("Failed to save", { id: toastId })
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText("Saving...")).not.toBeInTheDocument()
-        expect(screen.getByText("Failed to save")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // TOAST PROMISE TESTS
-  // ============================================
-  describe("Toast Promise", () => {
-    it("shows loading, then success for resolved promise", async () => {
-      renderToaster()
-
-      const promise = new Promise<string>((_resolve) =>
-        setTimeout(() => { _resolve("data"); }, 100)
-      )
-
-      act(() => {
-        toast.promise(promise, {
-          loading: "Loading data...",
-          success: "Data loaded!",
-          error: "Failed to load",
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading data...")).toBeInTheDocument()
-      })
-
-      await waitFor(
-        () => {
-          expect(screen.getByText("Data loaded!")).toBeInTheDocument()
-        },
-        { timeout: 500 }
-      )
-    })
-
-    it("shows loading, then error for rejected promise", async () => {
-      renderToaster()
-
-      const promise = new Promise<string>((_resolve, reject) =>
-        setTimeout(() => { reject(new Error("Network error")); }, 100)
-      )
-
-      act(() => {
-        toast.promise(promise, {
-          loading: "Loading...",
-          success: "Loaded!",
-          error: "Failed!",
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeInTheDocument()
-      })
-
-      await waitFor(
-        () => {
-          expect(screen.getByText("Failed!")).toBeInTheDocument()
-        },
-        { timeout: 500 }
-      )
-    })
-
-    it("supports dynamic success message with data", async () => {
-      renderToaster()
-
-      const promise = new Promise<{ name: string }>((_resolve) =>
-        setTimeout(() => { _resolve({ name: "John" }); }, 100)
-      )
-
-      act(() => {
-        toast.promise(promise, {
-          loading: "Loading user...",
-          success: (data) => `Welcome, ${data.name}!`,
-          error: "Failed to load user",
-        })
-      })
-
-      await waitFor(
-        () => {
-          expect(screen.getByText("Welcome, John!")).toBeInTheDocument()
-        },
-        { timeout: 500 }
-      )
-    })
-  })
-
-  // ============================================
-  // TOAST CUSTOM TESTS
-  // ============================================
-  describe("Toast Custom", () => {
-    it("renders custom toast content", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.custom(() => (
-          <div data-testid="custom-toast">Custom content</div>
-        ))
-      })
-
-      await waitFor(() => {
-        expect(screen.getByTestId("custom-toast")).toBeInTheDocument()
-        expect(screen.getByText("Custom content")).toBeInTheDocument()
-      })
-    })
-
-    it("passes toast id to custom renderer", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.custom((t) => (
-          <div data-testid="custom-toast">
-            <span>Toast ID: {String(t)}</span>
-            <button onClick={() => toast.dismiss(t)}>Dismiss</button>
-          </div>
-        ))
-      })
-
-      await waitFor(() => {
-        expect(screen.getByTestId("custom-toast")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // MULTIPLE TOASTS TESTS
-  // ============================================
-  describe("Multiple Toasts", () => {
-    it("shows multiple toasts", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("First toast", { duration: Infinity })
-        toast("Second toast", { duration: Infinity })
-        toast("Third toast", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("First toast")).toBeInTheDocument()
-        expect(screen.getByText("Second toast")).toBeInTheDocument()
-        expect(screen.getByText("Third toast")).toBeInTheDocument()
-      })
-    })
-
-    it("respects visibleToasts limit", async () => {
-      renderToaster({ visibleToasts: 2 })
-
-      act(() => {
-        toast("Toast 1", { duration: Infinity })
-        toast("Toast 2", { duration: Infinity })
-        toast("Toast 3", { duration: Infinity })
-      })
-
-      // The third toast might be hidden or stacked
-      await waitFor(() => {
-        expect(screen.getByText("Toast 3")).toBeInTheDocument()
-      })
-    })
-
-    it("shows different toast types simultaneously", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.success("Success!", { duration: Infinity })
-        toast.error("Error!", { duration: Infinity })
-        toast.warning("Warning!", { duration: Infinity })
-        toast.info("Info!", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Success!")).toBeInTheDocument()
-        expect(screen.getByText("Error!")).toBeInTheDocument()
-        expect(screen.getByText("Warning!")).toBeInTheDocument()
-        expect(screen.getByText("Info!")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // POSITION TESTS
-  // ============================================
-  describe("Positions", () => {
-    const positions = [
-      "top-left",
-      "top-center",
-      "top-right",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right",
-    ] as const
-
-    for (const position of positions) {
-      it(`renders at ${position} position`, async () => {
-        renderToaster({ position })
-
-        act(() => {
-          toast(`Toast at ${position}`, { duration: Infinity })
-        })
-
-        await waitFor(() => {
-          expect(screen.getByText(`Toast at ${position}`)).toBeInTheDocument()
-        })
-      })
-    }
-
-    it("respects per-toast position override", async () => {
-      renderToaster({ position: "bottom-right" })
-
-      act(() => {
-        toast("Override position", {
-          position: "top-center",
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Override position")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // THEME TESTS
-  // ============================================
-  describe("Theme", () => {
-    it("renders with light theme", () => {
-      renderToaster({ theme: "light" })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("renders with dark theme", () => {
-      renderToaster({ theme: "dark" })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-
-    it("renders with system theme", () => {
-      renderToaster({ theme: "system" })
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // ICON TESTS
-  // ============================================
-  describe("Icons", () => {
-    it("shows success icon for success toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.success("Success with icon")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Success with icon")).toBeInTheDocument()
-        // Check for SVG icon
-        const toast = screen.getByText("Success with icon").closest("[data-sonner-toast]")
-        expect(toast?.querySelector("svg")).toBeInTheDocument()
-      })
-    })
-
-    it("shows error icon for error toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.error("Error with icon")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Error with icon")).toBeInTheDocument()
-        const toast = screen.getByText("Error with icon").closest("[data-sonner-toast]")
-        expect(toast?.querySelector("svg")).toBeInTheDocument()
-      })
-    })
-
-    it("shows warning icon for warning toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.warning("Warning with icon")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Warning with icon")).toBeInTheDocument()
-        const toast = screen.getByText("Warning with icon").closest("[data-sonner-toast]")
-        expect(toast?.querySelector("svg")).toBeInTheDocument()
-      })
-    })
-
-    it("shows info icon for info toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.info("Info with icon")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Info with icon")).toBeInTheDocument()
-        const toast = screen.getByText("Info with icon").closest("[data-sonner-toast]")
-        expect(toast?.querySelector("svg")).toBeInTheDocument()
-      })
-    })
-
-    it("shows loading spinner for loading toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast.loading("Loading with spinner")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Loading with spinner")).toBeInTheDocument()
-        const toastEl = screen.getByText("Loading with spinner").closest("[data-sonner-toast]")
-        const spinner = toastEl?.querySelector("svg")
-        expect(spinner).toBeInTheDocument()
-        expect(spinner?.classList.contains("animate-spin")).toBe(true)
-      })
-    })
-  })
-
-  // ============================================
-  // CALLBACKS TESTS
-  // ============================================
-  describe("Callbacks", () => {
-    it("calls onDismiss when toast is dismissed", async () => {
-      const onDismiss = vi.fn()
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast("Dismissable", {
-          duration: Infinity,
-          onDismiss,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Dismissable")).toBeInTheDocument()
-      })
-
-      act(() => {
-        if (toastId) toast.dismiss(toastId)
-      })
-
-      // Wait for toast to be removed from DOM
-      await waitFor(() => {
-        expect(screen.queryByText("Dismissable")).not.toBeInTheDocument()
-      })
-
-      // Note: onDismiss may not be called when programmatically dismissing in some versions of Sonner
-      // This verifies the dismiss functionality works, even if callback behavior varies
-    })
-
-    it("calls onAutoClose when toast auto-closes", async () => {
-      const onAutoClose = vi.fn()
-      renderToaster()
-
-      act(() => {
-        toast("Auto close toast", {
-          duration: 100,
-          onAutoClose,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Auto close toast")).toBeInTheDocument()
-      })
-
-      await waitFor(
-        () => {
-          expect(onAutoClose).toHaveBeenCalled()
-        },
-        { timeout: 1000 }
-      )
-    })
-  })
-
-  // ============================================
-  // STYLING TESTS
-  // ============================================
-  describe("Styling", () => {
-    it("applies custom className to toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Styled toast", {
-          className: "custom-toast-class",
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        const toastEl = screen.getByText("Styled toast").closest("[data-sonner-toast]")
-        expect(toastEl).toHaveClass("custom-toast-class")
-      })
-    })
-
-    it("applies custom style to toast", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Inline styled toast", {
-          style: { backgroundColor: "rgb(255, 0, 0)" },
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        const toastEl = screen.getByText("Inline styled toast").closest("[data-sonner-toast]")
-        expect(toastEl).toHaveStyle({ backgroundColor: "rgb(255, 0, 0)" })
-      })
-    })
-
-    it("applies toaster group className", () => {
-      renderToaster()
-      // Sonner renders an ol element inside the section for toast container
-      const toaster = document.querySelector("section")
-      expect(toaster).toBeInTheDocument()
-      // The className is passed to Sonner and may be applied to different elements
-      // based on Sonner's internal implementation
-    })
-  })
-
-  // ============================================
-  // EDGE CASES TESTS
-  // ============================================
-  describe("Edge Cases", () => {
-    it("handles empty message", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("")
-      })
-
-      // Empty toast should still render
-      await waitFor(() => {
-        const toasts = document.querySelectorAll("[data-sonner-toast]")
-        expect(toasts.length).toBeGreaterThan(0)
-      })
-    })
-
-    it("handles very long message", async () => {
-      const longMessage = "A".repeat(500)
-      renderToaster()
-
-      act(() => {
-        toast(longMessage, { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText(longMessage)).toBeInTheDocument()
-      })
-    })
-
-    it("handles special characters in message", async () => {
-      const specialMessage = "<script>alert('xss')</script>"
-      renderToaster()
-
-      act(() => {
-        toast(specialMessage, { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText(specialMessage)).toBeInTheDocument()
-      })
-    })
-
-    it("handles rapid toast calls", async () => {
-      renderToaster()
-
-      act(() => {
-        for (let i = 0; i < 10; i++) {
-          toast(`Rapid toast ${String(i)}`, { duration: Infinity })
-        }
-      })
-
-      // At least some toasts should be visible
-      await waitFor(() => {
-        expect(screen.getByText("Rapid toast 9")).toBeInTheDocument()
-      })
-    })
-
-    it("handles unicode characters", async () => {
-      renderToaster()
-
-      act(() => {
-        toast("Toast with emoji 🎉🚀✨", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Toast with emoji 🎉🚀✨")).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations when empty", async () => {
-      const { container } = renderToaster()
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with toast", async () => {
-      const { container } = renderToaster()
-
-      act(() => {
-        toast("Accessible toast", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Accessible toast")).toBeInTheDocument()
-      })
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with success toast", async () => {
-      const { container } = renderToaster()
-
-      act(() => {
-        toast.success("Success message", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Success message")).toBeInTheDocument()
-      })
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with error toast", async () => {
-      const { container } = renderToaster()
-
-      act(() => {
-        toast.error("Error message", { duration: Infinity })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Error message")).toBeInTheDocument()
-      })
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with action buttons", async () => {
-      const { container } = renderToaster()
-
-      act(() => {
-        toast("Toast with actions", {
-          action: { label: "Undo", onClick: vi.fn() },
-          cancel: { label: "Dismiss", onClick: vi.fn() },
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Toast with actions")).toBeInTheDocument()
-      })
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with description", async () => {
-      const { container } = renderToaster()
-
-      act(() => {
-        toast("Title", {
-          duration: Infinity,
-          description: "Detailed description of the toast message.",
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Title")).toBeInTheDocument()
-      })
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  // ============================================
-  // INTEGRATION TESTS
-  // ============================================
-  describe("Integration", () => {
-    it("complete success flow with description and action", async () => {
-      const user = userEvent.setup()
-      const onAction = vi.fn()
-      renderToaster()
-
-      act(() => {
-        toast.success("File uploaded", {
-          description: "document.pdf was uploaded successfully",
-          action: { label: "View", onClick: onAction },
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("File uploaded")).toBeInTheDocument()
-        expect(
-          screen.getByText("document.pdf was uploaded successfully")
-        ).toBeInTheDocument()
-        expect(screen.getByText("View")).toBeInTheDocument()
-      })
-
-      await user.click(screen.getByText("View"))
-      expect(onAction).toHaveBeenCalled()
-    })
-
-    it("complete error flow with retry action", async () => {
-      const user = userEvent.setup()
-      const onRetry = vi.fn()
-      renderToaster()
-
-      act(() => {
-        toast.error("Upload failed", {
-          description: "Network connection lost",
-          action: { label: "Retry", onClick: onRetry },
-          duration: Infinity,
-        })
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Upload failed")).toBeInTheDocument()
-        expect(screen.getByText("Network connection lost")).toBeInTheDocument()
-      })
-
-      await user.click(screen.getByText("Retry"))
-      expect(onRetry).toHaveBeenCalled()
-    })
-
-    it("loading to success transition", async () => {
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast.loading("Saving changes...")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Saving changes...")).toBeInTheDocument()
-      })
-
-      // Simulate async operation completing
-      await new Promise((resolve) => setTimeout(resolve, 200))
-
-      act(() => {
-        if (toastId) {
-          toast.success("Changes saved!", {
-            id: toastId,
-            description: "Your profile has been updated.",
-          })
-        }
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Changes saved!")).toBeInTheDocument()
-        expect(
-          screen.getByText("Your profile has been updated.")
-        ).toBeInTheDocument()
-      })
-    })
-
-    it("loading to error transition", async () => {
-      renderToaster()
-
-      let toastId: number | string | undefined
-
-      act(() => {
-        toastId = toast.loading("Processing payment...")
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Processing payment...")).toBeInTheDocument()
-      })
-
-      // Simulate async operation failing
-      await new Promise((resolve) => setTimeout(resolve, 200))
-
-      act(() => {
-        if (toastId) {
-          toast.error("Payment failed", {
-            id: toastId,
-            description: "Your card was declined.",
-          })
-        }
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText("Payment failed")).toBeInTheDocument()
-        expect(screen.getByText("Your card was declined.")).toBeInTheDocument()
-      })
-    })
-  })
-})