@jmruthers/pace-core 0.5.60 → 0.5.62

package/src/components/Dialog/examples/__tests__/SmartDialogExample.unit.test.tsx

@@ -0,0 +1,151 @@
+/**
+ * @file SmartDialogExample Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples/Tests
+ * @since 0.1.0
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../../__tests__/shared';
+import { SmartDialogExample } from '../SmartDialogExample';
+
+// Note: We test the actual component without mocking to ensure real behavior works
+// This means we test what's visible by default (triggers, main content) rather than dialog internals
+
+describe('SmartDialogExample Component', () => {
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders without crashing', () => {
+      renderWithProviders(<SmartDialogExample />);
+      expect(screen.getByText('Enhanced Dialog Examples')).toBeInTheDocument();
+    });
+
+    it('renders the main heading and description', () => {
+      renderWithProviders(<SmartDialogExample />);
+      expect(screen.getByText('Enhanced Dialog Examples')).toBeInTheDocument();
+      expect(screen.getByText(/Demonstrating all the advanced features of the Dialog component including smart height management/)).toBeInTheDocument();
+    });
+
+    it('renders all dialog trigger buttons', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      expect(screen.getByText('Basic Dialog')).toBeInTheDocument();
+      expect(screen.getByText('Scrollable Dialog')).toBeInTheDocument();
+      expect(screen.getByText('Custom Height')).toBeInTheDocument();
+      expect(screen.getByText('Full Screen')).toBeInTheDocument();
+    });
+
+    it('renders the key features summary', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      expect(screen.getByText('Key Features Demonstrated:')).toBeInTheDocument();
+      expect(screen.getByText(/Smart Height Management/)).toBeInTheDocument();
+      expect(screen.getByText(/Scrollable Content/)).toBeInTheDocument();
+      expect(screen.getByText(/Sticky Headers\/Footers/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('renders all trigger buttons with correct labels', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      // Check all dialog trigger buttons are present
+      expect(screen.getByRole('button', { name: 'Basic Dialog' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Scrollable Dialog' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Custom Height' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Full Screen' })).toBeInTheDocument();
+    });
+
+    it('renders dialog triggers with proper ARIA attributes', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      const buttons = screen.getAllByRole('button');
+      
+      // Each trigger button should have dialog-related ARIA attributes
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+        expect(button).toHaveAttribute('data-state', 'closed');
+      });
+    });
+  });
+
+  describe('Interactive Elements', () => {
+    it('renders trigger buttons that are clickable', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      // Test that all trigger buttons are interactive
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBe(7); // Seven dialog triggers
+      
+      buttons.forEach(button => {
+        expect(button).toBeEnabled();
+        expect(button).toHaveAttribute('type', 'button');
+      });
+    });
+
+    it('handles button interactions without errors', async () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      const basicDialogButton = screen.getByRole('button', { name: 'Basic Dialog' });
+      
+      // Should not throw errors when clicked
+      await user.click(basicDialogButton);
+      expect(basicDialogButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper heading structure', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      // Main heading should be present and properly structured
+      expect(screen.getByRole('heading', { level: 2, name: 'Enhanced Dialog Examples' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 3, name: 'Key Features Demonstrated:' })).toBeInTheDocument();
+    });
+
+    it('provides semantic button labeling', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      // All buttons should have accessible names
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button.textContent?.length).toBeGreaterThan(3);
+      });
+    });
+
+    it('follows proper ARIA patterns for dialog triggers', () => {
+      renderWithProviders(<SmartDialogExample />);
+      
+      const buttons = screen.getAllByRole('button');
+      
+      // Each trigger should have proper ARIA attributes for dialogs
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+        expect(button).toHaveAttribute('aria-controls');
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing content gracefully', () => {
+      // This test ensures the component doesn't crash with edge cases
+      expect(() => renderWithProviders(<SmartDialogExample />)).not.toThrow();
+    });
+
+    it('renders even if some props are undefined', () => {
+      // The component should be resilient to missing optional props
+      renderWithProviders(<SmartDialogExample />);
+      expect(screen.getByText('Enhanced Dialog Examples')).toBeInTheDocument();
+    });
+  });
+});