@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,12 +1,12 @@
 /**
  * @file Toast Component Tests
- * @description Comprehensive tests for Toast component system
+ * @description Integration tests for the Toast component system
  */
 
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import {
   Toast,
   ToastTitle,
@@ -16,609 +16,538 @@ import {
   ToastViewport,
   ToastProvider,
   Toaster,
-  ToastProps
-} from './Toast';
-import { useToast, reset } from '../../hooks/useToast';
+  useToast,
+} from './index';
+import { reset } from '../../hooks/useToast';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
 describe('Toast Component System', () => {
-  // Clear toast state before each test
   beforeEach(() => {
     reset();
   });
-    // ToastProvider component tests
-  describe('ToastProvider Component', () => {
-    it('renders provider wrapper', () => {
+
+  describe('ToastViewport', () => {
+    it('renders the viewport with default and custom classes', () => {
       renderWithProviders(
         <ToastProvider>
-          <div>Test Content</div>
+          <ToastViewport className="custom-viewport" />
         </ToastProvider>
       );
-      
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
-    });
 
-    it('renders without modifying default timeout behaviour', () => {
-      expect(() =>
-        renderWithProviders(
-          <ToastProvider>
-            <div>Test Content</div>
-          </ToastProvider>
-        )
-      ).not.toThrow();
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
+      const viewport = screen.getByTestId('toast-viewport');
+      expect(viewport).toBeInTheDocument();
+      expect(viewport).toHaveClass('fixed', 'top-0', 'z-[9999]');
+      expect(viewport).toHaveClass('custom-viewport');
     });
   });
 
-  // ToastViewport component tests
-  describe('ToastViewport Component', () => {
-    it('renders viewport container', () => {
+  describe('Toast primitives', () => {
+    it('renders title, description, action, and close controls', async () => {
+      const user = userEvent.setup();
+      const handleAction = vi.fn();
+
       renderWithProviders(
         <ToastProvider>
           <ToastViewport />
+          <Toast open>
+            <ToastTitle>Toast title</ToastTitle>
+            <ToastDescription>Toast description</ToastDescription>
+            <ToastAction altText="Undo action" onClick={handleAction}>
+              Undo
+            </ToastAction>
+            <ToastClose aria-label="Close toast" />
+          </Toast>
         </ToastProvider>
       );
-      
-      expect(screen.getByTestId('toast-viewport')).toBeInTheDocument();
-    });
 
-    it('renders with custom className', () => {
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport className="custom-viewport-class" />
-        </ToastProvider>
-      );
-      
-      const viewport = screen.getByTestId('toast-viewport');
-      expect(viewport).toHaveClass('custom-viewport-class');
+      expect(screen.getByTestId('toast-root')).toHaveClass('group');
+      expect(screen.getByTestId('toast-title')).toHaveTextContent('Toast title');
+      expect(screen.getByTestId('toast-description')).toHaveTextContent('Toast description');
+
+      await user.click(screen.getByTestId('toast-action'));
+      expect(handleAction).toHaveBeenCalledTimes(1);
+
+      expect(screen.getByTestId('toast-close')).toHaveAttribute('aria-label', 'Close toast');
     });
+  });
 
-    it('applies correct default classes', () => {
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport />
-        </ToastProvider>
-      );
-      
-      const viewport = screen.getByTestId('toast-viewport');
-      expect(viewport).toHaveClass(
-        'fixed',
-        'top-0',
-        'z-[9999]',
-        'flex',
-        'max-h-screen',
-        'w-full',
-        'flex-col-reverse',
-        'p-4',
-        'sm:bottom-0',
-        'sm:right-0',
-        'sm:top-auto',
-        'sm:flex-col',
-        'md:max-w-[420px]'
+  describe('Toaster integration', () => {
+    function ToastHarness({ onAction }: { onAction: () => void }) {
+      const { toast, toasts } = useToast();
+
+      React.useEffect(() => {
+        toast({
+          title: 'Toast title',
+          description: 'Toast description',
+          action: (
+            <ToastAction altText="Undo" onClick={onAction}>
+              Undo
+            </ToastAction>
+          ),
+        });
+      }, [toast, onAction]);
+
+      return (
+        <>
+          <Toaster />
+          <span data-testid="toast-count">{toasts.length}</span>
+          <span data-testid="toast-open">{String(toasts[0]?.open)}</span>
+        </>
       );
+    }
+
+    it('renders toast content provided by the hook', async () => {
+      renderWithProviders(<ToastHarness onAction={vi.fn()} />);
+
+      expect(await screen.findByText('Toast title')).toBeInTheDocument();
+      expect(screen.getByText('Toast description')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Undo' })).toBeInTheDocument();
+      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
     });
 
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport ref={ref} />
-        </ToastProvider>
-      );
-      
-      expect(ref.current).toBeInstanceOf(HTMLElement);
+    it('invokes the action handler when the action button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleAction = vi.fn();
+
+      renderWithProviders(<ToastHarness onAction={handleAction} />);
+
+      await user.click(await screen.findByRole('button', { name: 'Undo' }));
+      expect(handleAction).toHaveBeenCalledTimes(1);
     });
-  });
 
-  // Toaster component tests
-  describe('Toaster Component', () => {
-    it('renders toaster with provider and viewport', () => {
-      renderWithProviders(<Toaster />);
-      
-      expect(screen.getByTestId('toast-viewport')).toBeInTheDocument();
+    it('marks the toast as closed after dismissal', async () => {
+      const user = userEvent.setup();
+
+      renderWithProviders(<ToastHarness onAction={vi.fn()} />);
+
+      await screen.findByText('Toast title');
+      expect(screen.getByTestId('toast-open')).toHaveTextContent('true');
+
+      await user.click(screen.getByTestId('toast-close'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toast-open')).toHaveTextContent('false');
+      });
     });
 
-    it('renders toasts when they exist in state', () => {
-      // Create a test component that adds a toast
-      function TestComponent() {
+    it('renders multiple toasts', async () => {
+      function MultipleToastsHarness() {
         const { toast } = useToast();
-        
+
+        React.useEffect(() => {
+          toast({ title: 'Toast 1', description: 'First toast' });
+          toast({ title: 'Toast 2', description: 'Second toast' });
+          toast({ title: 'Toast 3', description: 'Third toast' });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<MultipleToastsHarness />);
+
+      expect(await screen.findByText('Toast 1')).toBeInTheDocument();
+      expect(screen.getByText('Toast 2')).toBeInTheDocument();
+      expect(screen.getByText('Toast 3')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('renders toast with variant prop', async () => {
+      function VariantToastHarness() {
+        const { toast } = useToast();
+
         React.useEffect(() => {
           toast({
-            title: 'Test Toast',
-            description: 'This is a test toast'
+            title: 'Success Toast',
+            description: 'This is a success toast',
+            variant: 'success',
           });
         }, [toast]);
-        
+
         return <Toaster />;
       }
-      
-      renderWithProviders(<TestComponent />);
-      
-      // Wait for the toast to appear
-      waitFor(() => {
-        expect(screen.getByText('Test Toast')).toBeInTheDocument();
-        expect(screen.getByText('This is a test toast')).toBeInTheDocument();
-      });
-    });
-  });
 
-  // useToast hook tests
-  describe('useToast Hook', () => {
-    it('returns toast and dismiss functions', () => {
-      function TestComponent() {
-        const { toast, dismiss } = useToast();
-        
-        return (
-          <div>
-            <button onClick={() => toast({ title: 'Test' })}>Show Toast</button>
-            <button onClick={() => dismiss()}>Dismiss</button>
-          </div>
-        );
+      renderWithProviders(<VariantToastHarness />);
+
+      expect(await screen.findByText('Success Toast')).toBeInTheDocument();
+      expect(screen.getByText('This is a success toast')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('renders toast with destructive variant', async () => {
+      function DestructiveToastHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: 'Error Toast',
+            description: 'This is an error toast',
+            variant: 'destructive',
+          });
+        }, [toast]);
+
+        return <Toaster />;
       }
-      
-      renderWithProviders(<TestComponent />);
-      
-      expect(screen.getByText('Show Toast')).toBeInTheDocument();
-      expect(screen.getByText('Dismiss')).toBeInTheDocument();
-    });
 
-    it('adds toast to state when triggered', async () => {
-      const user = userEvent.setup();
-      
-      function TestComponent() {
-        const { toast, toasts } = useToast();
-        
-        return (
-          <div>
-            <button onClick={() => toast({ title: 'Test Toast' })}>Show Toast</button>
-            <div data-testid="toast-count">{toasts.length}</div>
-          </div>
-        );
+      renderWithProviders(<DestructiveToastHarness />);
+
+      expect(await screen.findByText('Error Toast')).toBeInTheDocument();
+      const toastRoot = screen.getByTestId('toast-root');
+      expect(toastRoot).toHaveClass('group');
+    }, TEST_TIMEOUT);
+
+    it('renders toast with custom duration', async () => {
+      function CustomDurationHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: 'Custom Duration',
+            description: 'This toast has custom duration',
+            duration: 10000,
+          });
+        }, [toast]);
+
+        return <Toaster />;
       }
-      
-      renderWithProviders(<TestComponent />);
-      
-      expect(screen.getByTestId('toast-count')).toHaveTextContent('0');
-      
-      const button = screen.getByText('Show Toast');
-      await user.click(button);
-      
-      // Wait for state to update through the listener system
-      await waitFor(() => {
-        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
-      });
-    });
 
-    it('dismisses toast when dismiss is called', async () => {
-      const user = userEvent.setup();
-      
-      function TestComponent() {
-        const { toast, dismiss, toasts } = useToast();
-        
-        return (
-          <div>
-            <button onClick={() => toast({ title: 'Test Toast' })}>Show Toast</button>
-            <button onClick={() => dismiss()}>Dismiss</button>
-            <div data-testid="toast-count">{toasts.length}</div>
-          </div>
-        );
+      renderWithProviders(<CustomDurationHarness />);
+
+      expect(await screen.findByText('Custom Duration')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('renders toast without title', async () => {
+      function NoTitleHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            description: 'Toast without title',
+          });
+        }, [toast]);
+
+        return <Toaster />;
       }
-      
-      renderWithProviders(<TestComponent />);
-      
-      const showButton = screen.getByText('Show Toast');
-      await user.click(showButton);
-      
-      // Wait for toast to be added
-      await waitFor(() => {
-        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
-      });
-      
-      const dismissButton = screen.getByText('Dismiss');
-      await user.click(dismissButton);
-      
-      // Toast should be marked as closed but still in array (waiting to be removed)
-      await waitFor(() => {
-        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
-      });
-    });
-  });
 
-  // Component structure tests (testing the components exist and have correct structure)
-  describe('Component Structure', () => {
-    it('Toast component has correct display name', () => {
-      expect(Toast.displayName).toBe('Toast');
-    });
+      renderWithProviders(<NoTitleHarness />);
 
-    it('ToastTitle component has correct display name', () => {
-      expect(ToastTitle.displayName).toBe('ToastTitle');
-    });
+      expect(await screen.findByText('Toast without title')).toBeInTheDocument();
+      expect(screen.queryByTestId('toast-title')).not.toBeInTheDocument();
+    }, TEST_TIMEOUT);
 
-    it('ToastDescription component has correct display name', () => {
-      expect(ToastDescription.displayName).toBe('ToastDescription');
-    });
+    it('renders toast without description', async () => {
+      function NoDescriptionHarness() {
+        const { toast } = useToast();
 
-    it('ToastClose component has correct display name', () => {
-      expect(ToastClose.displayName).toBe('ToastClose');
-    });
+        React.useEffect(() => {
+          toast({
+            title: 'Toast without description',
+          });
+        }, [toast]);
 
-    it('ToastAction component has correct display name', () => {
-      expect(ToastAction.displayName).toBe('ToastAction');
-    });
+        return <Toaster />;
+      }
 
-    it('ToastViewport component has correct display name', () => {
-      expect(ToastViewport.displayName).toBe('ToastViewport');
-    });
-  });
+      renderWithProviders(<NoDescriptionHarness />);
 
-  // Component props tests
-  describe('Component Props', () => {
-    it('Toast component accepts className prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true} className="test-class">
-            <ToastTitle>Test</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      expect(await screen.findByText('Toast without description')).toBeInTheDocument();
+      expect(screen.queryByTestId('toast-description')).not.toBeInTheDocument();
+    }, TEST_TIMEOUT);
 
-    it('ToastTitle component accepts className prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle className="test-class">Test</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+    it('renders toast with only title and no description', async () => {
+      function TitleOnlyHarness() {
+        const { toast } = useToast();
 
-    it('ToastDescription component accepts className prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastDescription className="test-class">Test</ToastDescription>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+        React.useEffect(() => {
+          toast({
+            title: 'Title Only Toast',
+          });
+        }, [toast]);
 
-    it('ToastClose component accepts className prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastClose className="test-class" />
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+        return <Toaster />;
+      }
 
-    it('ToastAction component accepts className prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastAction className="test-class">Action</ToastAction>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      renderWithProviders(<TitleOnlyHarness />);
+
+      expect(await screen.findByText('Title Only Toast')).toBeInTheDocument();
+      expect(screen.queryByTestId('toast-description')).not.toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('renders toast with React node as title', async () => {
+      function ReactNodeTitleHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: <span data-testid="custom-title">Custom Title Node</span>,
+            description: 'Description',
+          });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<ReactNodeTitleHarness />);
+
+      expect(await screen.findByTestId('custom-title')).toBeInTheDocument();
+      expect(screen.getByText('Custom Title Node')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('renders toast with React node as description', async () => {
+      function ReactNodeDescriptionHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: 'Title',
+            description: <span data-testid="custom-desc">Custom Description Node</span>,
+          });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<ReactNodeDescriptionHarness />);
+
+      expect(await screen.findByTestId('custom-desc')).toBeInTheDocument();
+      expect(screen.getByText('Custom Description Node')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
   });
 
-  // Ref forwarding tests
-  describe('Ref Forwarding', () => {
-    it('Toast component forwards ref', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      const { container } = renderWithProviders(
+  describe('Toast Component Primitives', () => {
+    it('renders Toast with custom className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true} ref={ref}>
-            <ToastTitle>Test</ToastTitle>
+          <ToastViewport />
+          <Toast open className="custom-toast">
+            <ToastTitle>Title</ToastTitle>
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
 
-    it('ToastTitle component forwards ref', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle ref={ref}>Test</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      const toast = screen.getByTestId('toast-root');
+      expect(toast).toHaveClass('custom-toast');
+    }, TEST_TIMEOUT);
 
-    it('ToastDescription component forwards ref', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      const { container } = renderWithProviders(
+    it('renders ToastTitle with custom className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastDescription ref={ref}>Test</ToastDescription>
+          <ToastViewport />
+          <Toast open>
+            <ToastTitle className="custom-title">Title</ToastTitle>
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
 
-    it('ToastClose component forwards ref', () => {
-      const ref = React.createRef<HTMLButtonElement>();
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastClose ref={ref} />
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      const title = screen.getByTestId('toast-title');
+      expect(title).toHaveClass('custom-title');
+    }, TEST_TIMEOUT);
 
-    it('ToastAction component forwards ref', () => {
-      const ref = React.createRef<HTMLButtonElement>();
-      const { container } = renderWithProviders(
+    it('renders ToastDescription with custom className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastAction ref={ref}>Action</ToastAction>
+          <ToastViewport />
+          <Toast open>
+            <ToastDescription className="custom-desc">Description</ToastDescription>
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
-  });
 
-  // Event handling tests
-  describe('Event Handling', () => {
-    it('ToastAction component handles click events', async () => {
-      const user = userEvent.setup();
-      const handleClick = vi.fn();
-      
-      const { container } = renderWithProviders(
+      const desc = screen.getByTestId('toast-description');
+      expect(desc).toHaveClass('custom-desc');
+    }, TEST_TIMEOUT);
+
+    it('renders ToastClose with custom className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastAction onClick={handleClick}>Action</ToastAction>
+          <ToastViewport />
+          <Toast open>
+            <ToastClose className="custom-close" />
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
-  });
 
-  // Data attributes tests
-  describe('Data Attributes', () => {
-    it('Toast component handles data attributes', () => {
-      const { container } = renderWithProviders(
+      const close = screen.getByTestId('toast-close');
+      expect(close).toHaveClass('custom-close');
+    }, TEST_TIMEOUT);
+
+    it('renders ToastAction with custom className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true} data-swipe="move" data-state="open">
-            <ToastTitle>Test</ToastTitle>
+          <ToastViewport />
+          <Toast open>
+            <ToastAction className="custom-action" altText="Action">
+              Action
+            </ToastAction>
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
-  });
 
-  // Integration tests
-  describe('Integration Tests', () => {
-    it('renders complete toast with all components', () => {
-      const { container } = renderWithProviders(
+      const action = screen.getByTestId('toast-action');
+      expect(action).toHaveClass('custom-action');
+    }, TEST_TIMEOUT);
+
+    it('handles Toast close button click', async () => {
+      const user = userEvent.setup();
+      const handleClose = vi.fn();
+
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Success!</ToastTitle>
-            <ToastDescription>Your changes have been saved successfully.</ToastDescription>
-            <ToastAction>Undo</ToastAction>
+          <ToastViewport />
+          <Toast open onOpenChange={handleClose}>
+            <ToastTitle>Title</ToastTitle>
             <ToastClose />
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
 
-    it('renders multiple toasts in viewport', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <ToastViewport>
-            <Toast open={true}>
-              <ToastTitle>First Toast</ToastTitle>
-            </Toast>
-            <Toast open={true}>
-              <ToastTitle>Second Toast</ToastTitle>
-            </Toast>
-          </ToastViewport>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      const closeButton = screen.getByTestId('toast-close');
+      await user.click(closeButton);
 
-    it('handles toast with only title', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Simple Toast</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      expect(handleClose).toHaveBeenCalled();
+    }, TEST_TIMEOUT);
+
+    it('forwards refs correctly on all toast components', () => {
+      const viewportRef = React.createRef<HTMLElement>();
+      const toastRef = React.createRef<HTMLElement>();
+      const titleRef = React.createRef<HTMLElement>();
+      const descRef = React.createRef<HTMLElement>();
+      const closeRef = React.createRef<HTMLButtonElement>();
+      const actionRef = React.createRef<HTMLButtonElement>();
 
-    it('handles toast with only description', () => {
-      const { container } = renderWithProviders(
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastDescription>Description only toast</ToastDescription>
+          <ToastViewport ref={viewportRef} />
+          <Toast ref={toastRef} open>
+            <ToastTitle ref={titleRef}>Title</ToastTitle>
+            <ToastDescription ref={descRef}>Description</ToastDescription>
+            <ToastAction ref={actionRef} altText="Action">
+              Action
+            </ToastAction>
+            <ToastClose ref={closeRef} />
           </Toast>
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+
+      expect(viewportRef.current).toBeInstanceOf(HTMLElement);
+      expect(toastRef.current).toBeInstanceOf(HTMLElement);
+      expect(titleRef.current).toBeInstanceOf(HTMLElement);
+      expect(descRef.current).toBeInstanceOf(HTMLElement);
+      expect(actionRef.current).toBeInstanceOf(HTMLButtonElement);
+      expect(closeRef.current).toBeInstanceOf(HTMLButtonElement);
+    }, TEST_TIMEOUT);
   });
 
-  // Accessibility tests
-  describe('Accessibility', () => {
-    it('Toast component accepts role prop', () => {
-      const { container } = renderWithProviders(
+  describe('ToastViewport', () => {
+    it('renders with default positioning classes', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true} role="alert">
-            <ToastTitle>Alert Toast</ToastTitle>
-          </Toast>
+          <ToastViewport />
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
 
-    it('ToastClose component accepts aria-label prop', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastClose aria-label="Close notification" />
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      const viewport = screen.getByTestId('toast-viewport');
+      expect(viewport).toHaveClass('fixed', 'top-0', 'z-[9999]');
+    }, TEST_TIMEOUT);
 
-    it('ToastAction component accepts aria-label prop', () => {
-      const { container } = renderWithProviders(
+    it('renders with custom positioning via className', () => {
+      renderWithProviders(
         <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastAction aria-label="Undo changes">Undo</ToastAction>
-          </Toast>
+          <ToastViewport className="bottom-0 left-0" />
         </ToastProvider>
       );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+
+      const viewport = screen.getByTestId('toast-viewport');
+      expect(viewport).toHaveClass('bottom-0', 'left-0');
+    }, TEST_TIMEOUT);
   });
 
-  // Edge cases tests
   describe('Edge Cases', () => {
-    it('handles empty toast content', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true} />
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+    it('handles toast with empty title and description', async () => {
+      function EmptyToastHarness() {
+        const { toast } = useToast();
 
-    it('handles very long text content', () => {
-      const longText = 'A'.repeat(1000);
-      
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>{longText}</ToastTitle>
-            <ToastDescription>{longText}</ToastDescription>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+        React.useEffect(() => {
+          toast({
+            title: '',
+            description: '',
+          });
+        }, [toast]);
 
-    it('handles special characters in content', () => {
-      const specialText = 'Toast with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
-      
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>{specialText}</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+        return <Toaster />;
+      }
 
-    it('handles multiple action buttons', () => {
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <Toast open={true}>
-            <ToastTitle>Test</ToastTitle>
-            <ToastAction>Undo</ToastAction>
-            <ToastAction>Redo</ToastAction>
-          </Toast>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
-  });
+      renderWithProviders(<EmptyToastHarness />);
 
-  // Performance tests
-  describe('Performance', () => {
-    it('renders efficiently with many toasts', () => {
-      const toasts = Array.from({ length: 10 }, (_, i) => (
-        <Toast key={i} open={true}>
-          <ToastTitle>Toast {i + 1}</ToastTitle>
-        </Toast>
-      ));
-      
-      const { container } = renderWithProviders(
-        <ToastProvider>
-          <ToastViewport>
-            {toasts}
-          </ToastViewport>
-        </ToastProvider>
-      );
-      
-      // Check that the component renders without errors
-      expect(container).toBeInTheDocument();
-    });
+      // Toast should still render even with empty content
+      await waitFor(() => {
+        expect(screen.getByTestId('toast-root')).toBeInTheDocument();
+      });
+    }, TEST_TIMEOUT);
+
+    it('handles toast with very long content', async () => {
+      const longContent = 'A'.repeat(1000);
+      function LongContentHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: longContent,
+            description: longContent,
+          });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<LongContentHarness />);
+
+      // Both title and description have the same content, so use getAllByText
+      const elements = await screen.findAllByText(longContent);
+      expect(elements.length).toBeGreaterThanOrEqual(1);
+      expect(elements[0]).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles toast with special characters', async () => {
+      const specialContent = '<>&"\'';
+      function SpecialCharsHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({
+            title: specialContent,
+            description: specialContent,
+          });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<SpecialCharsHarness />);
+
+      // Both title and description have the same content, so use getAllByText
+      const elements = await screen.findAllByText(specialContent);
+      expect(elements.length).toBeGreaterThanOrEqual(1);
+      expect(elements[0]).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles multiple toasts with same content', async () => {
+      function DuplicateContentHarness() {
+        const { toast } = useToast();
+
+        React.useEffect(() => {
+          toast({ title: 'Same Title', description: 'Same Description' });
+          toast({ title: 'Same Title', description: 'Same Description' });
+          toast({ title: 'Same Title', description: 'Same Description' });
+        }, [toast]);
+
+        return <Toaster />;
+      }
+
+      renderWithProviders(<DuplicateContentHarness />);
+
+      const titles = await screen.findAllByText('Same Title');
+      expect(titles.length).toBeGreaterThanOrEqual(1);
+    }, TEST_TIMEOUT);
   });
-});
+});