@moontra/moonui 5.0.0 → 5.1.0

package/src/components/ui/__tests__/toast.test.tsx

@@ -1,177 +1,252 @@
 import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { 
-  Toast, 
-  ToastProvider, 
+import {
+  Toast,
+  ToastProvider,
+  ToastViewport,
   ToastTitle,
-  ToastDescription, 
-  ToastAction, 
-  ToastClose, 
+  ToastDescription,
+  ToastAction,
+  ToastClose,
   useToast,
+  toast,
   Toaster
 } from '../toast'
 
+// GERÇEK API NOTLARI (kaynak: ../toast.tsx — `@radix-ui/react-toast` üzerine kurulu)
+//
+// 1) Toast prop tabanlı değil BİLEŞİK (compound) bir API'dir:
+//    <Toast><ToastTitle/><ToastDescription/><ToastAction/><ToastClose/></Toast>.
+//    `title` / `description` / `action` / `onClose` prop'ları YOKTUR.
+// 2) Radix Toast Root, Provider'ın viewport'u bağlanana kadar HİÇBİR ŞEY render etmez
+//    (`if (!context.viewport) return null`) ve içeriğini viewport'a portal'lar.
+//    Bu yüzden her render'da `<ToastViewport />` zorunludur.
+// 3) `toastVariants` CVA'sındaki gerçek varyantlar: default | destructive | success |
+//    warning | info. (`primary`, `secondary`, `caution` yoktur; success/warning/info
+//    yumuşak arka planlar kullanır: bg-green-50 / bg-orange-50 / bg-blue-50.)
+// 4) `ToastAction` Radix tarafında zorunlu `altText` ister (yoksa `altText.trim()` patlar).
+// 5) `toast()` / `useToast()` modül düzeyinde TEK bir store paylaşır; `dismiss` yalnızca
+//    `open` bayrağını düşürür (kayıt store'da kalır, kaldırma çok uzun bir gecikmeye bağlıdır).
+//    Bu yüzden store testleri kimlik (id) üzerinden yazıldı, mutlak sayı üzerinden değil.
+
 // Mock icons for testing
 jest.mock('lucide-react', () => ({
   X: (props: React.ComponentProps<'div'>) => <div data-testid="x-icon" {...props} />,
 }))
 
-// Test wrapper component for useToast hook
+beforeAll(() => {
+  // jsdom Pointer Capture API'sini uygulamaz; Radix Toast'un swipe handler'ı çağırır.
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false
+    Element.prototype.setPointerCapture = () => undefined
+    Element.prototype.releasePointerCapture = () => undefined
+  }
+})
+
+// Test wrapper: Radix, viewport olmadan toast render etmez (bkz. not 2)
 const TestToastWrapper = ({ children }: { children: React.ReactNode }) => (
-  <ToastProvider>{children}</ToastProvider>
+  <ToastProvider>
+    {children}
+    <ToastViewport />
+  </ToastProvider>
 )
 
+// useToast store'unu gözlemleyen yardımcı bileşen
+const StoreProbe = () => {
+  const { toasts } = useToast()
+  return (
+    <div>
+      <span data-testid="toast-count">{toasts.length}</span>
+      <span data-testid="open-toast-ids">
+        {toasts.filter((t) => t.open).map((t) => t.id).join(',')}
+      </span>
+      <span data-testid="all-toast-ids">{toasts.map((t) => t.id).join(',')}</span>
+    </div>
+  )
+}
+
 describe('Toast Components', () => {
   describe('Toast Component', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
         render(
           <TestToastWrapper>
-            <Toast />
+            <Toast data-testid="toast">
+              <ToastClose />
+            </Toast>
           </TestToastWrapper>
         )
-        
-        const toast = screen.getByRole('button', { name: /kapat/i })
-        expect(toast).toBeInTheDocument()
+
+        const toastElement = screen.getByTestId('toast')
+        expect(toastElement).toBeInTheDocument()
+        // Radix Root bir <li> üretir ve açık durumu data-state ile yayınlar
+        expect(toastElement.tagName).toBe('LI')
+        expect(toastElement).toHaveAttribute('data-state', 'open')
+        // Viewport'a portal'lanır
+        expect(toastElement.closest('ol')).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
+      })
+
+      it('renders nothing without a viewport', () => {
+        // Radix sözleşmesi: viewport bağlanmadan portal açılmaz
+        render(
+          <ToastProvider>
+            <Toast data-testid="toast">
+              <ToastTitle>Görünmez</ToastTitle>
+            </Toast>
+          </ToastProvider>
+        )
+
+        expect(screen.queryByTestId('toast')).not.toBeInTheDocument()
+        expect(screen.queryByText('Görünmez')).not.toBeInTheDocument()
       })
 
       it('renders with title', () => {
         render(
           <TestToastWrapper>
-            <Toast title="Test Title" />
+            <Toast>
+              <ToastTitle>Test Title</ToastTitle>
+            </Toast>
           </TestToastWrapper>
         )
-        
+
         expect(screen.getByText('Test Title')).toBeInTheDocument()
       })
 
       it('renders with description', () => {
         render(
           <TestToastWrapper>
-            <Toast description="Test Description" />
+            <Toast>
+              <ToastDescription>Test Description</ToastDescription>
+            </Toast>
           </TestToastWrapper>
         )
-        
+
         expect(screen.getByText('Test Description')).toBeInTheDocument()
       })
 
       it('applies custom className', () => {
         const { container } = render(
-          <ToastProvider>
+          <TestToastWrapper>
             <Toast className="custom-toast" />
-          </ToastProvider>
+          </TestToastWrapper>
         )
-        
+
         expect(container.querySelector('.custom-toast')).toBeInTheDocument()
       })
 
       it('has correct displayName', () => {
-        expect((Toast as any).displayName || 'Toast').toBe('Toast')
+        expect(Toast.displayName).toBe('Toast')
       })
     })
 
     describe('Variants', () => {
-      it('renders primary variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="primary" />
-          </ToastProvider>
-        )
-        
-        expect(container.querySelector('[class*="bg-primary"]')).toBeInTheDocument()
-      })
-
-      it('renders secondary variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="secondary" />
-          </ToastProvider>
+      // toastVariants CVA'sındaki gerçek varyantlar ve ürettikleri sınıflar
+      const variants = [
+        { variant: 'default', classes: ['bg-background', 'text-foreground'] },
+        { variant: 'destructive', classes: ['bg-destructive', 'text-destructive-foreground'] },
+        { variant: 'success', classes: ['bg-green-50', 'text-green-900', 'border-green-200'] },
+        { variant: 'warning', classes: ['bg-orange-50', 'text-orange-900', 'border-orange-200'] },
+        { variant: 'info', classes: ['bg-blue-50', 'text-blue-900', 'border-blue-200'] },
+      ] as const
+
+      variants.forEach(({ variant, classes }) => {
+        it(`renders ${variant} variant correctly`, () => {
+          render(
+            <TestToastWrapper>
+              <Toast variant={variant} data-testid="toast" />
+            </TestToastWrapper>
+          )
+
+          const toastElement = screen.getByTestId('toast')
+          classes.forEach((cls) => expect(toastElement).toHaveClass(cls))
+        })
+      })
+
+      it('keeps the base layout classes for every variant', () => {
+        render(
+          <TestToastWrapper>
+            <Toast variant="success" data-testid="toast" />
+          </TestToastWrapper>
         )
-        
-        expect(container.querySelector('[class*="bg-secondary"]')).toBeInTheDocument()
-      })
 
-      it('renders success variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="success" />
-          </ToastProvider>
-        )
-        
-        expect(container.querySelector('[class*="bg-success"]')).toBeInTheDocument()
+        const toastElement = screen.getByTestId('toast')
+        expect(toastElement).toHaveClass('moonui-theme')
+        expect(toastElement).toHaveClass('group')
+        expect(toastElement).toHaveClass('rounded-md')
+        expect(toastElement).toHaveClass('shadow-sm')
       })
+    })
 
-      it('renders caution variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="caution" />
-          </ToastProvider>
+    describe('Actions', () => {
+      it('renders action element', () => {
+        render(
+          <TestToastWrapper>
+            <Toast>
+              <ToastAction altText="Try again" data-testid="toast-action">
+                Action
+              </ToastAction>
+            </Toast>
+          </TestToastWrapper>
         )
-        
-        expect(container.querySelector('[class*="bg-warning"]')).toBeInTheDocument()
-      })
 
-      it('renders destructive variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="destructive" />
-          </ToastProvider>
-        )
-        
-        expect(container.querySelector('[class*="bg-destructive"]')).toBeInTheDocument()
+        expect(screen.getByTestId('toast-action')).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
       })
 
-      it('renders info variant correctly', () => {
-        const { container } = render(
-          <ToastProvider>
-            <Toast variant="info" />
-          </ToastProvider>
-        )
-        
-        expect(container.querySelector('[class*="bg-info"]')).toBeInTheDocument()
-      })
-    })
+      it('handles action button click', async () => {
+        const onClick = jest.fn()
+        const user = userEvent.setup()
 
-    describe('Actions', () => {
-      it('renders action element', () => {
-        const action = <button data-testid="toast-action">Action</button>
         render(
           <TestToastWrapper>
-            <Toast action={action} />
+            <Toast>
+              <ToastAction altText="Try again" onClick={onClick}>
+                Action
+              </ToastAction>
+            </Toast>
           </TestToastWrapper>
         )
-        
-        expect(screen.getByTestId('toast-action')).toBeInTheDocument()
+
+        await user.click(screen.getByRole('button', { name: 'Action' }))
+
+        expect(onClick).toHaveBeenCalled()
       })
 
       it('handles close button click', async () => {
-        const onClose = jest.fn()
+        const onOpenChange = jest.fn()
         const user = userEvent.setup()
-        
+
         render(
           <TestToastWrapper>
-            <Toast id="test-toast" onClose={onClose} />
+            <Toast data-testid="toast" onOpenChange={onOpenChange}>
+              <ToastClose />
+            </Toast>
           </TestToastWrapper>
         )
-        
-        const closeButton = screen.getByRole('button', { name: /kapat/i })
+
+        const closeButton = screen.getByRole('button', { name: /close/i })
         await user.click(closeButton)
-        
-        expect(onClose).toHaveBeenCalled()
+
+        // Kapatma Radix üzerinden yürür: açık durum düşer ve toast DOM'dan kalkar
+        expect(onOpenChange).toHaveBeenCalledWith(false)
+        await waitFor(() => {
+          expect(screen.queryByTestId('toast')).not.toBeInTheDocument()
+        })
       })
     })
 
     describe('HTML Attributes', () => {
       it('passes through HTML attributes', () => {
-        const { container } = render(
+        render(
           <TestToastWrapper>
             <Toast data-testid="toast" aria-label="Custom toast" />
           </TestToastWrapper>
         )
-        
-        const toast = container.querySelector('[data-testid="toast"]')
-        expect(toast).toHaveAttribute('aria-label', 'Custom toast')
+
+        const toastElement = screen.getByTestId('toast')
+        expect(toastElement).toHaveAttribute('aria-label', 'Custom toast')
       })
     })
   })
@@ -184,18 +259,20 @@ describe('Toast Components', () => {
             <div data-testid="child">Child Content</div>
           </ToastProvider>
         )
-        
+
         expect(screen.getByTestId('child')).toBeInTheDocument()
       })
 
       it('renders toast container', () => {
-        const { container } = render(
+        render(
           <ToastProvider>
             <div>Content</div>
+            <ToastViewport />
           </ToastProvider>
         )
-        
-        const toastContainer = container.querySelector('[aria-label="Bildirimler"]')
+
+        // Radix viewport'u erişilebilir bir bölge olarak yayınlar (varsayılan etiket: "Notifications (F8)")
+        const toastContainer = screen.getByRole('region', { name: /notifications/i })
         expect(toastContainer).toBeInTheDocument()
       })
     })
@@ -203,45 +280,82 @@ describe('Toast Components', () => {
     describe('Toast Management', () => {
       it('renders toasts in provider', () => {
         render(
-          <ToastProvider>
-            <Toast title="Test Toast" />
-          </ToastProvider>
+          <TestToastWrapper>
+            <Toast>
+              <ToastTitle>Test Toast</ToastTitle>
+            </Toast>
+          </TestToastWrapper>
         )
-        
+
         expect(screen.getByText('Test Toast')).toBeInTheDocument()
       })
 
       it('renders multiple toasts', () => {
         render(
-          <ToastProvider>
-            <Toast title="Toast 1" />
-            <Toast title="Toast 2" />
-          </ToastProvider>
+          <TestToastWrapper>
+            <Toast>
+              <ToastTitle>Toast 1</ToastTitle>
+            </Toast>
+            <Toast>
+              <ToastTitle>Toast 2</ToastTitle>
+            </Toast>
+          </TestToastWrapper>
         )
-        
+
         expect(screen.getByText('Toast 1')).toBeInTheDocument()
         expect(screen.getByText('Toast 2')).toBeInTheDocument()
       })
     })
   })
 
+  describe('ToastViewport Component', () => {
+    describe('Basic Rendering', () => {
+      it('renders an ordered list with the positioning classes', () => {
+        const { container } = render(
+          <ToastProvider>
+            <ToastViewport />
+          </ToastProvider>
+        )
+
+        const viewport = container.querySelector('ol') as HTMLElement
+        expect(viewport).toBeInTheDocument()
+        expect(viewport).toHaveClass('fixed')
+        expect(viewport).toHaveClass('z-[100]')
+      })
+
+      it('applies custom className', () => {
+        const { container } = render(
+          <ToastProvider>
+            <ToastViewport className="custom-viewport" />
+          </ToastProvider>
+        )
+
+        expect(container.querySelector('.custom-viewport')).toBeInTheDocument()
+      })
+
+      it('has correct displayName', () => {
+        expect(ToastViewport.displayName).toBe('ToastViewport')
+      })
+    })
+  })
+
   describe('ToastTitle Component', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
         render(<ToastTitle>Title Content</ToastTitle>)
-        
+
         expect(screen.getByText('Title Content')).toBeInTheDocument()
       })
 
       it('applies custom className', () => {
         render(<ToastTitle className="custom-title">Title</ToastTitle>)
-        
+
         expect(screen.getByText('Title')).toHaveClass('custom-title')
       })
 
       it('passes through HTML attributes', () => {
         render(<ToastTitle data-testid="toast-title">Title</ToastTitle>)
-        
+
         expect(screen.getByTestId('toast-title')).toBeInTheDocument()
       })
     })
@@ -251,19 +365,19 @@ describe('Toast Components', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
         render(<ToastDescription>Description Content</ToastDescription>)
-        
+
         expect(screen.getByText('Description Content')).toBeInTheDocument()
       })
 
       it('applies custom className', () => {
         render(<ToastDescription className="custom-desc">Description</ToastDescription>)
-        
+
         expect(screen.getByText('Description')).toHaveClass('custom-desc')
       })
 
       it('passes through HTML attributes', () => {
         render(<ToastDescription data-testid="toast-desc">Description</ToastDescription>)
-        
+
         expect(screen.getByTestId('toast-desc')).toBeInTheDocument()
       })
     })
@@ -272,29 +386,51 @@ describe('Toast Components', () => {
   describe('ToastAction Component', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
-        render(<ToastAction>Action</ToastAction>)
-        
+        render(<ToastAction altText="Retry the failed action">Action</ToastAction>)
+
         expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
       })
 
+      it('exposes altText to the screen reader announcement', () => {
+        render(<ToastAction altText="Retry the failed action">Action</ToastAction>)
+
+        // Radix, aksiyonun sesli duyuruda nasıl okunacağını bu veri özniteliğinden alır
+        expect(screen.getByRole('button')).toHaveAttribute(
+          'data-radix-toast-announce-alt',
+          'Retry the failed action'
+        )
+      })
+
       it('applies custom className', () => {
-        render(<ToastAction className="custom-action">Action</ToastAction>)
-        
+        render(
+          <ToastAction altText="Retry" className="custom-action">
+            Action
+          </ToastAction>
+        )
+
         expect(screen.getByRole('button')).toHaveClass('custom-action')
       })
 
       it('handles click events', async () => {
         const onClick = jest.fn()
-        
-        render(<ToastAction onClick={onClick}>Action</ToastAction>)
-        
+
+        render(
+          <ToastAction altText="Retry" onClick={onClick}>
+            Action
+          </ToastAction>
+        )
+
         fireEvent.click(screen.getByRole('button'))
         expect(onClick).toHaveBeenCalled()
       })
 
       it('passes through HTML attributes', () => {
-        render(<ToastAction data-testid="toast-action">Action</ToastAction>)
-        
+        render(
+          <ToastAction altText="Retry" data-testid="toast-action">
+            Action
+          </ToastAction>
+        )
+
         expect(screen.getByTestId('toast-action')).toBeInTheDocument()
       })
     })
@@ -304,58 +440,205 @@ describe('Toast Components', () => {
     describe('Basic Rendering', () => {
       it('renders correctly with default props', () => {
         render(<ToastClose />)
-        
-        expect(screen.getByRole('button', { name: /kapat/i })).toBeInTheDocument()
+
+        // İkon-only düğmenin erişilebilir bir ismi olmalı (WCAG 4.1.2)
+        expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
         expect(screen.getByTestId('x-icon')).toBeInTheDocument()
       })
 
       it('applies custom className', () => {
         render(<ToastClose className="custom-close" />)
-        
+
         expect(screen.getByRole('button')).toHaveClass('custom-close')
       })
 
       it('handles click events', async () => {
         const onClick = jest.fn()
-        
+
         render(<ToastClose onClick={onClick} />)
-        
+
         fireEvent.click(screen.getByRole('button'))
         expect(onClick).toHaveBeenCalled()
       })
 
       it('passes through HTML attributes', () => {
         render(<ToastClose data-testid="toast-close" />)
-        
+
         expect(screen.getByTestId('toast-close')).toBeInTheDocument()
+        expect(screen.getByTestId('toast-close')).toHaveAttribute('toast-close', '')
       })
     })
   })
 
   describe('useToast Hook', () => {
     describe('Context Usage', () => {
+      // NOT: store modül düzeyinde paylaşıldığından bu blok, store'a yazan
+      // testlerden ÖNCE gelir (boş başlangıç durumunu ölçer).
       it('works correctly within ToastProvider', () => {
         const TestComponent = () => {
           const { toasts } = useToast()
           return <div data-testid="toast-count">{toasts.length}</div>
         }
-        
+
         render(
           <ToastProvider>
             <TestComponent />
+            <ToastViewport />
           </ToastProvider>
         )
-        
+
         expect(screen.getByTestId('toast-count')).toHaveTextContent('0')
       })
     })
+
+    describe('Store Behaviour', () => {
+      it('adds a toast to the store and renders it through Toaster', async () => {
+        render(
+          <div>
+            <StoreProbe />
+            <Toaster />
+          </div>
+        )
+
+        let created: ReturnType<typeof toast>
+        act(() => {
+          created = toast({ title: 'Store Toast', description: 'Store description' })
+        })
+
+        await waitFor(() => {
+          expect(screen.getByTestId('open-toast-ids')).toHaveTextContent(created!.id)
+        })
+        expect(screen.getByText('Store Toast')).toBeInTheDocument()
+        expect(screen.getByText('Store description')).toBeInTheDocument()
+      })
+
+      it('returns id, dismiss and update handles', () => {
+        render(<StoreProbe />)
+
+        let created: ReturnType<typeof toast>
+        act(() => {
+          created = toast({ title: 'Handle Toast' })
+        })
+
+        expect(typeof created!.id).toBe('string')
+        expect(created!.id.length).toBeGreaterThan(0)
+        expect(typeof created!.dismiss).toBe('function')
+        expect(typeof created!.update).toBe('function')
+        expect(screen.getByTestId('all-toast-ids')).toHaveTextContent(created!.id)
+      })
+
+      it('dismiss() hides the toast but keeps it in the store', async () => {
+        render(
+          <div>
+            <StoreProbe />
+            <Toaster />
+          </div>
+        )
+
+        let created: ReturnType<typeof toast>
+        act(() => {
+          created = toast({ title: 'Dismiss Toast' })
+        })
+
+        await waitFor(() => {
+          expect(screen.getByText('Dismiss Toast')).toBeInTheDocument()
+        })
+
+        act(() => {
+          created!.dismiss()
+        })
+
+        await waitFor(() => {
+          expect(screen.queryByText('Dismiss Toast')).not.toBeInTheDocument()
+        })
+        // open listesinden düşer ama kayıt store'da kalır (kaldırma gecikmeye bağlıdır)
+        expect(screen.getByTestId('open-toast-ids')).not.toHaveTextContent(created!.id)
+        expect(screen.getByTestId('all-toast-ids')).toHaveTextContent(created!.id)
+      })
+
+      it('update() changes the rendered toast content', async () => {
+        render(
+          <div>
+            <StoreProbe />
+            <Toaster />
+          </div>
+        )
+
+        let created: ReturnType<typeof toast>
+        act(() => {
+          created = toast({ title: 'Before Update' })
+        })
+
+        await waitFor(() => {
+          expect(screen.getByText('Before Update')).toBeInTheDocument()
+        })
+
+        act(() => {
+          created!.update({ id: created!.id, title: 'After Update' })
+        })
+
+        await waitFor(() => {
+          expect(screen.getByText('After Update')).toBeInTheDocument()
+        })
+        expect(screen.queryByText('Before Update')).not.toBeInTheDocument()
+      })
+
+      it('dismisses every toast when dismiss() is called without an id', async () => {
+        const DismissAll = () => {
+          const { dismiss } = useToast()
+          return <button onClick={() => dismiss()}>dismiss all</button>
+        }
+
+        render(
+          <div>
+            <StoreProbe />
+            <DismissAll />
+            <Toaster />
+          </div>
+        )
+
+        act(() => {
+          toast({ title: 'Bulk One' })
+          toast({ title: 'Bulk Two' })
+        })
+
+        await waitFor(() => {
+          expect(screen.getByText('Bulk One')).toBeInTheDocument()
+        })
+
+        fireEvent.click(screen.getByRole('button', { name: 'dismiss all' }))
+
+        await waitFor(() => {
+          expect(screen.getByTestId('open-toast-ids')).toHaveTextContent('')
+        })
+        expect(screen.queryByText('Bulk One')).not.toBeInTheDocument()
+        expect(screen.queryByText('Bulk Two')).not.toBeInTheDocument()
+      })
+
+      // NOT: store paylaşıldığı için sınır testi en sonda durur (5'e kırpma
+      // önceki testlerden kalan kayıtları da eler).
+      it('caps the store at the toast limit', async () => {
+        render(<StoreProbe />)
+
+        act(() => {
+          for (let i = 1; i <= 6; i++) {
+            toast({ title: `Limit ${i}` })
+          }
+        })
+
+        await waitFor(() => {
+          expect(screen.getByTestId('toast-count')).toHaveTextContent('5')
+        })
+      })
+    })
   })
 
   describe('Toaster Component', () => {
     it('renders Toaster component', () => {
-      render(<Toaster><div>Test content</div></Toaster>)
-      // Toaster should render without errors
-      expect(document.body).toBeInTheDocument()
+      render(<Toaster />)
+
+      // Toaster kendi provider + viewport'unu kurar
+      expect(screen.getByRole('region', { name: /notifications/i })).toBeInTheDocument()
     })
   })
 
@@ -363,30 +646,38 @@ describe('Toast Components', () => {
     it('renders complete toast with all components', () => {
       render(
         <TestToastWrapper>
-          <Toast
-            title="Complete Toast"
-            description="This is a complete toast"
-            variant="success"
-            action={<ToastAction>Retry</ToastAction>}
-          />
+          <Toast variant="success">
+            <div className="grid gap-1">
+              <ToastTitle>Complete Toast</ToastTitle>
+              <ToastDescription>This is a complete toast</ToastDescription>
+            </div>
+            <ToastAction altText="Retry the failed action">Retry</ToastAction>
+            <ToastClose />
+          </Toast>
         </TestToastWrapper>
       )
-      
+
       expect(screen.getByText('Complete Toast')).toBeInTheDocument()
       expect(screen.getByText('This is a complete toast')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /kapat/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
     })
 
     it('handles multiple toasts', () => {
       render(
         <TestToastWrapper>
-          <Toast title="Toast 1" />
-          <Toast title="Toast 2" />
-          <Toast title="Toast 3" />
+          <Toast>
+            <ToastTitle>Toast 1</ToastTitle>
+          </Toast>
+          <Toast>
+            <ToastTitle>Toast 2</ToastTitle>
+          </Toast>
+          <Toast>
+            <ToastTitle>Toast 3</ToastTitle>
+          </Toast>
         </TestToastWrapper>
       )
-      
+
       expect(screen.getByText('Toast 1')).toBeInTheDocument()
       expect(screen.getByText('Toast 2')).toBeInTheDocument()
       expect(screen.getByText('Toast 3')).toBeInTheDocument()
@@ -394,46 +685,57 @@ describe('Toast Components', () => {
   })
 
   describe('Edge Cases', () => {
-    it('handles toast without id', () => {
+    it('handles a toast without any children', () => {
       render(
         <TestToastWrapper>
-          <Toast title="No ID Toast" />
+          <Toast data-testid="toast" />
         </TestToastWrapper>
       )
-      
-      expect(screen.getByText('No ID Toast')).toBeInTheDocument()
+
+      expect(screen.getByTestId('toast')).toBeInTheDocument()
+      expect(screen.getByTestId('toast')).toBeEmptyDOMElement()
     })
 
     it('handles empty toast content', () => {
       render(
         <TestToastWrapper>
-          <Toast />
+          <Toast>
+            <ToastClose />
+          </Toast>
         </TestToastWrapper>
       )
-      
-      expect(screen.getByRole('button', { name: /kapat/i })).toBeInTheDocument()
+
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
     })
 
-    it('handles null/undefined props', () => {
+    it('handles null/undefined children', () => {
       render(
         <TestToastWrapper>
-          <Toast title={null} description={undefined} />
+          <Toast>
+            {null}
+            {undefined}
+            <ToastClose />
+          </Toast>
         </TestToastWrapper>
       )
-      
-      expect(screen.getByRole('button', { name: /kapat/i })).toBeInTheDocument()
+
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
     })
 
     it('handles complex nested content', () => {
       render(
         <TestToastWrapper>
-          <Toast
-            title={<span>Complex <strong>Title</strong></span>}
-            description={<div>Complex <em>Description</em></div>}
-          />
+          <Toast>
+            <ToastTitle>
+              <span>Complex <strong>Title</strong></span>
+            </ToastTitle>
+            <ToastDescription>
+              <div>Complex <em>Description</em></div>
+            </ToastDescription>
+          </Toast>
         </TestToastWrapper>
       )
-      
+
       expect(screen.getAllByText('Complex')).toHaveLength(2)
       expect(screen.getByText('Title')).toBeInTheDocument()
       expect(screen.getByText('Description')).toBeInTheDocument()
@@ -444,11 +746,11 @@ describe('Toast Components', () => {
         <div>
           <ToastTitle data-testid="title" aria-label="Title">Title</ToastTitle>
           <ToastDescription data-testid="desc" aria-label="Description">Description</ToastDescription>
-          <ToastAction data-testid="action" aria-label="Action">Action</ToastAction>
+          <ToastAction altText="Retry" data-testid="action" aria-label="Action">Action</ToastAction>
           <ToastClose data-testid="close" aria-label="Close" />
         </div>
       )
-      
+
       expect(screen.getByTestId('title')).toHaveAttribute('aria-label', 'Title')
       expect(screen.getByTestId('desc')).toHaveAttribute('aria-label', 'Description')
       expect(screen.getByTestId('action')).toHaveAttribute('aria-label', 'Action')