@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,1139 @@
+/**
+ * @file Dialog Component Tests
+ * @description Comprehensive tests for Dialog component system
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { 
+  Dialog, 
+  DialogTrigger, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogDescription, 
+  DialogBody, 
+  DialogFooter, 
+  DialogClose,
+  DialogOverlay,
+  DialogPortal
+} from './Dialog';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock lodash debounce to avoid timing issues in tests
+vi.mock('lodash', () => ({
+  debounce: (fn: Function) => fn
+}));
+
+describe('Dialog Component System', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock console methods to avoid noise in tests
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  describe('Dialog Root Component', () => {
+    it('renders with default props', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Open Dialog' })).toBeInTheDocument();
+    });
+
+    it('handles open state changes', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      const trigger = screen.getByRole('button', { name: 'Open Dialog' });
+      await user.click(trigger);
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('DialogTrigger Component', () => {
+    it('renders as child element when asChild is true', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Custom Trigger</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Custom Trigger' })).toBeInTheDocument();
+    });
+
+    it('renders as button when asChild is false', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger>Default Trigger</DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Default Trigger' })).toBeInTheDocument();
+    });
+
+    it('opens dialog when clicked', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      const trigger = screen.getByRole('button', { name: 'Open Dialog' });
+      await user.click(trigger);
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('DialogContent Component', () => {
+    it('renders with default props', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+        expect(dialog).toHaveClass('max-w-md'); // Default size
+      });
+    });
+
+    it('renders with different size variants', async () => {
+      const user = userEvent.setup();
+      
+      const { rerender } = renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent size="sm">
+            <DialogHeader>
+              <DialogTitle>Small Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toHaveClass('max-w-sm');
+      });
+      
+      // Test other sizes - close dialog first
+      await user.click(screen.getByRole('button', { name: 'Close' }));
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+      
+      const sizes = ['md', 'lg', 'xl', 'full', 'auto'] as const;
+      for (const size of sizes) {
+        rerender(
+          <Dialog>
+            <DialogTrigger asChild>
+              <button>Open Dialog</button>
+            </DialogTrigger>
+            <DialogContent size={size}>
+              <DialogHeader>
+                <DialogTitle>{size} Dialog</DialogTitle>
+              </DialogHeader>
+            </DialogContent>
+          </Dialog>
+        );
+        
+        await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+        
+        await waitFor(() => {
+          const dialog = screen.getByRole('dialog');
+          if (size === 'full') {
+            expect(dialog).toHaveClass('max-w-full', 'h-full');
+          } else if (size === 'auto') {
+            expect(dialog).toHaveClass('w-fit', 'max-w-[90vw]');
+          } else {
+            expect(dialog).toHaveClass(`max-w-${size}`);
+          }
+        });
+        
+        // Close dialog for next iteration
+        await user.click(screen.getByRole('button', { name: 'Close' }));
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        });
+      }
+    });
+
+    it('shows close button by default', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+      });
+    });
+
+    it('hides close button when showCloseButton is false', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent showCloseButton={false}>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
+      });
+    });
+
+    it('handles custom className', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent className="custom-dialog">
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toHaveClass('custom-dialog');
+      });
+    });
+
+    it('handles preventCloseOnEscape', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent preventCloseOnEscape>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      // Try to close with Escape key
+      await user.keyboard('{Escape}');
+      
+      // Dialog should still be open
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    it('handles preventCloseOnOutsideClick', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent preventCloseOnOutsideClick>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      // Click outside the dialog
+      await user.click(document.body);
+      
+      // Dialog should still be open
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    it('closes when close button is clicked', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      await user.click(screen.getByRole('button', { name: 'Close' }));
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('DialogHeader Component', () => {
+    it('renders with default props', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription>Test description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const header = screen.getByRole('banner');
+        expect(header).toBeInTheDocument();
+        expect(header).toHaveClass('flex', 'flex-col', 'space-y-1.5');
+      });
+    });
+
+    it('renders with sticky behavior', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent enableScrolling>
+            <DialogHeader sticky>
+              <DialogTitle>Sticky Header</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const header = screen.getByRole('banner');
+        expect(header).toHaveClass('sticky', 'top-0', 'z-10');
+      });
+    });
+
+    it('handles custom className', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader className="custom-header">
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('banner')).toHaveClass('custom-header');
+      });
+    });
+  });
+
+  describe('DialogTitle Component', () => {
+    it('renders with text content', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const title = screen.getByRole('heading', { level: 2 }); // Radix UI uses h2
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Test Dialog Title');
+        expect(title).toHaveClass('text-lg', 'font-semibold');
+      });
+    });
+
+    it('renders with HTML content', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle htmlContent="<strong>Bold Title</strong> with <em>emphasis</em>">
+                Fallback Title
+              </DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const title = screen.getByRole('heading', { level: 2 }); // Radix UI uses h2
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Bold Title with emphasis');
+      });
+    });
+
+    it('handles custom className', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle className="custom-title">Test Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { level: 2 })).toHaveClass('custom-title');
+      });
+    });
+  });
+
+  describe('DialogDescription Component', () => {
+    it('renders with text content', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription>This is a test description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const description = screen.getByText('This is a test description');
+        expect(description).toBeInTheDocument();
+        expect(description).toHaveClass('text-sm', 'text-muted-foreground');
+      });
+    });
+
+    it('renders with HTML content', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription htmlContent="<strong>Bold description</strong> with <em>emphasis</em>">
+                Fallback description
+              </DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        // The text is split across multiple elements, so we check for parts
+        expect(screen.getByText('Bold description')).toBeInTheDocument();
+        expect(screen.getByText('emphasis')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('DialogBody Component', () => {
+    it('renders with React children', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <section>
+                <h2>Content Section</h2>
+                <p>This is the main content of the dialog.</p>
+              </section>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const body = screen.getByRole('main');
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveClass('flex-1', 'overflow-y-auto');
+        expect(screen.getByText('Content Section')).toBeInTheDocument();
+        expect(screen.getByText('This is the main content of the dialog.')).toBeInTheDocument();
+      });
+    });
+
+    it('renders with HTML content', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody 
+              htmlContent="<h2>HTML Content</h2><p>This is <strong>HTML content</strong> rendered safely.</p>"
+              allowHtml={true}
+            />
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const body = screen.getByRole('main');
+        expect(body).toBeInTheDocument();
+        expect(screen.getByText('HTML Content')).toBeInTheDocument();
+        // The text is split across multiple elements, so we check for parts
+        expect(screen.getByText('HTML content')).toBeInTheDocument();
+        expect(screen.getByText(/safely/)).toBeInTheDocument();
+      });
+    });
+
+    it('handles custom maxHeight', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody maxHeight="200px">
+              <section>
+                <p>Content with custom max height</p>
+              </section>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const body = screen.getByRole('main');
+        expect(body).toBeInTheDocument();
+        // Check that the style attribute contains the max-height
+        expect(body.getAttribute('style')).toContain('max-height: 200px');
+      });
+    });
+
+    it('handles custom className', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody className="custom-body">
+              <section>
+                <p>Content with custom class</p>
+              </section>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('main')).toHaveClass('custom-body');
+      });
+    });
+  });
+
+  describe('DialogFooter Component', () => {
+    it('renders with default props', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogFooter>
+              <button>Cancel</button>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toBeInTheDocument();
+        expect(footer).toHaveClass('flex', 'flex-col-reverse', 'sm:flex-row');
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+      });
+    });
+
+    it('renders with sticky behavior', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent enableScrolling>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogFooter sticky>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveClass('sticky', 'bottom-0', 'z-10');
+      });
+    });
+
+    it('handles custom className', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogFooter className="custom-footer">
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('contentinfo')).toHaveClass('custom-footer');
+      });
+    });
+  });
+
+  describe('DialogClose Component', () => {
+    it('closes dialog when clicked', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose asChild>
+                <button>Close Dialog</button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      await user.click(screen.getByRole('button', { name: 'Close Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription>Test description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+        // Radix UI Dialog doesn't set aria-modal directly, it's handled internally
+        expect(dialog).toHaveAttribute('role', 'dialog');
+      });
+    });
+
+    it('supports keyboard navigation', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <button>Focusable Button</button>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+      });
+      
+      // Tab navigation should work within the dialog
+      // Note: Focus management is handled by Radix UI, so we just verify the button exists
+      expect(screen.getByRole('button', { name: 'Focusable Button' })).toBeInTheDocument();
+    });
+
+    it('closes on Escape key', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      await user.keyboard('{Escape}');
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Scrolling Behavior', () => {
+    it('enables scrolling when enableScrolling is true', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent enableScrolling>
+            <DialogHeader>
+              <DialogTitle>Scrollable Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <section>
+                {Array.from({ length: 20 }, (_, i) => (
+                  <p key={i}>Content item {i + 1}</p>
+                ))}
+              </section>
+            </DialogBody>
+            <DialogFooter>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toHaveClass('flex', 'flex-col', 'overflow-hidden');
+        const body = screen.getByRole('main');
+        expect(body).toHaveClass('overflow-y-auto');
+      });
+    });
+
+    it('handles sticky header and footer', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent enableScrolling>
+            <DialogHeader sticky>
+              <DialogTitle>Sticky Header</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <section>
+                {Array.from({ length: 20 }, (_, i) => (
+                  <p key={i}>Content item {i + 1}</p>
+                ))}
+              </section>
+            </DialogBody>
+            <DialogFooter sticky>
+              <button>Sticky Footer</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        const header = screen.getByRole('banner');
+        const footer = screen.getByRole('contentinfo');
+        expect(header).toHaveClass('sticky', 'top-0');
+        expect(footer).toHaveClass('sticky', 'bottom-0');
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing children gracefully', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody />
+          </DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Open Dialog' })).toBeInTheDocument();
+    });
+
+    it('handles invalid props gracefully', () => {
+      // @ts-expect-error Testing invalid prop
+      renderWithProviders(
+        <Dialog invalidProp="test">
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Open Dialog' })).toBeInTheDocument();
+    });
+
+    it('handles HTML sanitization errors gracefully', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody 
+              htmlContent="<script>alert('xss')</script><p>Safe content</p>"
+              allowHtml={true}
+            />
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        // Script should be removed, safe content should remain
+        expect(screen.getByText('Safe content')).toBeInTheDocument();
+        expect(screen.queryByText("alert('xss')")).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with forms', async () => {
+      const user = userEvent.setup();
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Form Dialog</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <form onSubmit={handleSubmit}>
+                <input type="text" placeholder="Enter name" />
+                <button type="submit">Submit</button>
+              </form>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with multiple dialogs', () => {
+      renderWithProviders(
+        <div>
+          <Dialog>
+            <DialogTrigger asChild>
+              <button>Open Dialog 1</button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Dialog 1</DialogTitle>
+              </DialogHeader>
+            </DialogContent>
+          </Dialog>
+          <Dialog>
+            <DialogTrigger asChild>
+              <button>Open Dialog 2</button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Dialog 2</DialogTitle>
+              </DialogHeader>
+            </DialogContent>
+          </Dialog>
+        </div>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Open Dialog 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Open Dialog 2' })).toBeInTheDocument();
+    });
+  });
+});