@jmruthers/pace-core 0.2.4

package/src/components/Card/__tests__/Card.integration.test.tsx

@@ -0,0 +1,673 @@
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { renderWithProviders, testAccessibilityIntegration, testStateManagementIntegration } from '../../../__tests__/shared';
+import { userEvent } from '@testing-library/user-event';
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { 
+  Card, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription, 
+  CardContent, 
+  CardFooter,
+  CardActions,
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent
+} from '../Card';
+
+// Mock components that might be used with Card
+const MockButton = ({ children, onClick, ...props }: any) => (
+  <button onClick={onClick} {...props}>{children}</button>
+);
+
+const MockInput = ({ value, onChange, ...props }: any) => (
+  <input value={value} onChange={onChange} {...props} />
+);
+
+const MockForm = ({ onSubmit, children }: any) => (
+  <form onSubmit={onSubmit}>{children}</form>
+);
+
+describe('Card Integration Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Card with Form Integration', () => {
+    it('integrates with form components', () => {
+      const handleSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+      
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>Contact Form</CardTitle>
+            <CardDescription>Please fill out the form below</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <MockForm onSubmit={handleSubmit}>
+              <div>
+                <label htmlFor="name">Name:</label>
+                <MockInput id="name" name="name" data-testid="name-input" />
+              </div>
+              <div>
+                <label htmlFor="email">Email:</label>
+                <MockInput id="email" name="email" data-testid="email-input" />
+              </div>
+              <CardActions>
+                <MockButton type="submit" data-testid="submit-btn">Submit</MockButton>
+                <MockButton type="button" data-testid="cancel-btn">Cancel</MockButton>
+              </CardActions>
+            </MockForm>
+          </CardContent>
+        </Card>
+      );
+      
+      expect(screen.getByText('Contact Form')).toBeInTheDocument();
+      expect(screen.getByText('Please fill out the form below')).toBeInTheDocument();
+      expect(screen.getByTestId('name-input')).toBeInTheDocument();
+      expect(screen.getByTestId('email-input')).toBeInTheDocument();
+      expect(screen.getByTestId('submit-btn')).toBeInTheDocument();
+      expect(screen.getByTestId('cancel-btn')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByTestId('submit-btn'));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles form validation within cards', () => {
+      const TestForm = () => {
+        const [errors, setErrors] = React.useState<string[]>([]);
+        const [formData, setFormData] = React.useState({ name: '', email: '' });
+        
+        const handleSubmit = (e: React.FormEvent) => {
+          e.preventDefault();
+          const newErrors = [];
+          if (!formData.name) newErrors.push('Name is required');
+          if (!formData.email) newErrors.push('Email is required');
+          setErrors(newErrors);
+        };
+        
+        return (
+          <Card>
+            <CardHeader>
+              <CardTitle>Validation Test</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MockForm onSubmit={handleSubmit}>
+                <div>
+                  <label htmlFor="name">Name:</label>
+                  <MockInput 
+                    id="name" 
+                    value={formData.name}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                      setFormData(prev => ({ ...prev, name: e.target.value }))
+                    }
+                  />
+                </div>
+                <div>
+                  <label htmlFor="email">Email:</label>
+                  <MockInput 
+                    id="email" 
+                    value={formData.email}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => 
+                      setFormData(prev => ({ ...prev, email: e.target.value }))
+                    }
+                  />
+                </div>
+                {errors.length > 0 && (
+                  <div role="alert" aria-live="polite">
+                    {errors.map((error, index) => (
+                      <p key={index} className="error">{error}</p>
+                    ))}
+                  </div>
+                )}
+                <CardActions>
+                  <MockButton type="submit">Submit</MockButton>
+                </CardActions>
+              </MockForm>
+            </CardContent>
+          </Card>
+        );
+      };
+      
+      renderWithProviders(<TestForm />);
+      
+      fireEvent.click(screen.getByText('Submit'));
+      
+      expect(screen.getByText('Name is required')).toBeInTheDocument();
+      expect(screen.getByText('Email is required')).toBeInTheDocument();
+    });
+  });
+
+  describe('Card with Interactive Components', () => {
+    it('integrates with interactive components like buttons and links', () => {
+      const handlePrimaryClick = vi.fn();
+      const handleSecondaryClick = vi.fn();
+      
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>Interactive Card</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>This card contains interactive elements</p>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <MockButton onClick={handlePrimaryClick} data-testid="primary-btn">
+                Primary Action
+              </MockButton>
+              <MockButton onClick={handleSecondaryClick} data-testid="secondary-btn">
+                Secondary Action
+              </MockButton>
+              <a href="/details" data-testid="details-link">View Details</a>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      fireEvent.click(screen.getByTestId('primary-btn'));
+      fireEvent.click(screen.getByTestId('secondary-btn'));
+      
+      expect(handlePrimaryClick).toHaveBeenCalledTimes(1);
+      expect(handleSecondaryClick).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('details-link')).toHaveAttribute('href', '/details');
+    });
+
+    it('handles dynamic content updates', () => {
+      const DynamicCard = () => {
+        const [count, setCount] = React.useState(0);
+        const [items, setItems] = React.useState<string[]>([]);
+        
+        const addItem = () => {
+          setItems(prev => [...prev, `Item ${prev.length + 1}`]);
+          setCount(prev => prev + 1);
+        };
+        
+        return (
+          <Card>
+            <CardHeader>
+              <CardTitle>Dynamic Content ({count} items)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {items.length === 0 ? (
+                <p>No items yet</p>
+              ) : (
+                <ul>
+                  {items.map((item, index) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+              )}
+            </CardContent>
+            <CardFooter>
+              <CardActions>
+                <MockButton onClick={addItem} data-testid="add-btn">Add Item</MockButton>
+              </CardActions>
+            </CardFooter>
+          </Card>
+        );
+      };
+      
+      renderWithProviders(<DynamicCard />);
+      
+      expect(screen.getByText('Dynamic Content (0 items)')).toBeInTheDocument();
+      expect(screen.getByText('No items yet')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByTestId('add-btn'));
+      
+      expect(screen.getByText('Dynamic Content (1 items)')).toBeInTheDocument();
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByTestId('add-btn'));
+      
+      expect(screen.getByText('Dynamic Content (2 items)')).toBeInTheDocument();
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Card with HoverCard Integration', () => {
+    it('integrates HoverCard with other interactive elements', () => {
+      const handleCardClick = vi.fn();
+      
+      renderWithProviders(
+        <div>
+          <Card onClick={handleCardClick} data-testid="main-card">
+            <CardHeader>
+              <CardTitle>Main Card</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p>Click this card or hover over the info button</p>
+            </CardContent>
+          </Card>
+          
+          <HoverCard>
+            <HoverCardTrigger data-testid="info-trigger">
+              <MockButton>ℹ️ Info</MockButton>
+            </HoverCardTrigger>
+            <HoverCardContent data-testid="info-content">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Additional Information</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p>This is additional information that appears on hover</p>
+                </CardContent>
+              </Card>
+            </HoverCardContent>
+          </HoverCard>
+        </div>
+      );
+      
+      expect(screen.getByTestId('main-card')).toBeInTheDocument();
+      expect(screen.getByTestId('info-trigger')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByTestId('main-card'));
+      expect(handleCardClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles nested cards within HoverCard content', () => {
+      renderWithProviders(
+        <HoverCard>
+          <HoverCardTrigger data-testid="nested-trigger">
+            <MockButton>Show Details</MockButton>
+          </HoverCardTrigger>
+          <HoverCardContent>
+            <Card>
+              <CardHeader>
+                <CardTitle>User Profile</CardTitle>
+                <CardDescription>Detailed user information</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div>
+                  <p><strong>Name:</strong> John Doe</p>
+                  <p><strong>Email:</strong> john@example.com</p>
+                  <p><strong>Role:</strong> Administrator</p>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <CardActions>
+                  <MockButton>Edit Profile</MockButton>
+                  <MockButton>View History</MockButton>
+                </CardActions>
+              </CardFooter>
+            </Card>
+          </HoverCardContent>
+        </HoverCard>
+      );
+      
+      expect(screen.getByTestId('nested-trigger')).toBeInTheDocument();
+      expect(screen.getByText('Show Details')).toBeInTheDocument();
+    });
+  });
+
+  describe('Card with Data Integration', () => {
+    it('displays data from external sources', () => {
+      const mockData = {
+        id: 1,
+        title: 'Sample Article',
+        description: 'This is a sample article description',
+        author: 'Jane Smith',
+        date: '2024-01-15',
+        tags: ['react', 'typescript', 'testing']
+      };
+      
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>{mockData.title}</CardTitle>
+            <CardDescription>
+              By {mockData.author} on {mockData.date}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>{mockData.description}</p>
+            <div>
+              <strong>Tags:</strong>
+              <ul>
+                {mockData.tags.map(tag => (
+                  <li key={tag}>{tag}</li>
+                ))}
+              </ul>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <MockButton>Read More</MockButton>
+              <MockButton>Share</MockButton>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      expect(screen.getByText('Sample Article')).toBeInTheDocument();
+      expect(screen.getByText('By Jane Smith on 2024-01-15')).toBeInTheDocument();
+      expect(screen.getByText('This is a sample article description')).toBeInTheDocument();
+      expect(screen.getByText('react')).toBeInTheDocument();
+      expect(screen.getByText('typescript')).toBeInTheDocument();
+      expect(screen.getByText('testing')).toBeInTheDocument();
+    });
+
+    it('handles loading states', async () => {
+      const LoadingCard = () => {
+        const [isLoading, setIsLoading] = React.useState(true);
+        const [data, setData] = React.useState<any>(null);
+        
+        React.useEffect(() => {
+          const timer = setTimeout(() => {
+            setData({ title: 'Loaded Data', content: 'Content loaded successfully' });
+            setIsLoading(false);
+          }, 100);
+          
+          return () => clearTimeout(timer);
+        }, []);
+        
+        return (
+          <Card>
+            <CardHeader>
+              <CardTitle>
+                {isLoading ? 'Loading...' : data?.title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {isLoading ? (
+                <div data-testid="loading-spinner">Loading content...</div>
+              ) : (
+                <p>{data?.content}</p>
+              )}
+            </CardContent>
+          </Card>
+        );
+      };
+      
+      renderWithProviders(<LoadingCard />);
+      
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      
+      await waitFor(() => {
+        expect(screen.getByText('Loaded Data')).toBeInTheDocument();
+        expect(screen.getByText('Content loaded successfully')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Card with Error Handling', () => {
+    it('handles error states gracefully', () => {
+      const ErrorCard = () => {
+        const [hasError, setHasError] = React.useState(false);
+        
+        const handleErrorAction = () => {
+          setHasError(true);
+        };
+        
+        const handleRetry = () => {
+          setHasError(false);
+        };
+        
+        return (
+          <Card>
+            <CardHeader>
+              <CardTitle>Error Handling Test</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {hasError ? (
+                <div role="alert" aria-live="polite">
+                  <p>An error occurred. Please try again.</p>
+                </div>
+              ) : (
+                <p>Content is working normally</p>
+              )}
+            </CardContent>
+            <CardFooter>
+              <CardActions>
+                {hasError ? (
+                  <MockButton onClick={handleRetry}>Retry</MockButton>
+                ) : (
+                  <MockButton onClick={handleErrorAction}>Trigger Error</MockButton>
+                )}
+              </CardActions>
+            </CardFooter>
+          </Card>
+        );
+      };
+      
+      renderWithProviders(<ErrorCard />);
+      
+      expect(screen.getByText('Content is working normally')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByText('Trigger Error'));
+      
+      expect(screen.getByText('An error occurred. Please try again.')).toBeInTheDocument();
+      expect(screen.getByText('Retry')).toBeInTheDocument();
+      
+      fireEvent.click(screen.getByText('Retry'));
+      
+      expect(screen.getByText('Content is working normally')).toBeInTheDocument();
+    });
+  });
+
+  describe('Card with Accessibility Integration', () => {
+    it('integrates with screen reader announcements', () => {
+      const AnnouncementCard = () => {
+        const [announcement, setAnnouncement] = React.useState('');
+        
+        const handleAction = () => {
+          setAnnouncement('Action completed successfully');
+        };
+        
+        return (
+          <>
+            <Card>
+              <CardHeader>
+                <CardTitle>Accessibility Test</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>This card has accessibility features</p>
+              </CardContent>
+              <CardFooter>
+                <CardActions>
+                  <MockButton onClick={handleAction}>Perform Action</MockButton>
+                </CardActions>
+              </CardFooter>
+            </Card>
+            
+            {announcement && (
+              <div 
+                role="status" 
+                aria-live="polite" 
+                aria-atomic="true"
+                data-testid="announcement"
+              >
+                {announcement}
+              </div>
+            )}
+          </>
+        );
+      };
+      
+      renderWithProviders(<AnnouncementCard />);
+      
+      fireEvent.click(screen.getByText('Perform Action'));
+      
+      expect(screen.getByTestId('announcement')).toHaveTextContent('Action completed successfully');
+      expect(screen.getByTestId('announcement')).toHaveAttribute('role', 'status');
+      expect(screen.getByTestId('announcement')).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('maintains focus management with interactive elements', () => {
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>Focus Management</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>Use Tab to navigate through interactive elements</p>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <MockButton tabIndex={0}>First Button</MockButton>
+              <MockButton tabIndex={0}>Second Button</MockButton>
+              <MockButton tabIndex={0}>Third Button</MockButton>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      const buttons = screen.getAllByRole('button');
+      expect(buttons).toHaveLength(3);
+      
+      // Test that all buttons are focusable
+      buttons.forEach(button => {
+        button.focus();
+        expect(button).toHaveFocus();
+      });
+    });
+  });
+});
+
+// Enhanced edge case testing for Card
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+
+describe('Card Edge Cases', () => {
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+      renderWithProviders(<Card>{longString}</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+        // Card should handle empty values gracefully
+        const { unmount } = renderWithProviders(<Card>{value as any}</Card>);
+        expect(screen.getByRole('article')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+      renderWithProviders(<Card>{specialChars}</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      renderWithProviders(<Card>{unicodeChars}</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(<Card value={number} />);
+        expect(screen.getByRole('article')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(<Card value={number} />);
+        expect(screen.getByRole('article')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Rapid State Changes', () => {
+    it('should handle rapid prop changes', async () => {
+      const stateProps = [
+        { children: 'State 1' },
+        { children: 'State 2' },
+        { children: 'State 3' },
+        { children: 'State 4' },
+        { children: 'State 5' },
+      ];
+
+      await edgeCaseUtils.testRapidStateChanges(Card, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<Card />);
+      
+      const card = screen.getByRole('article');
+      
+      // Rapidly interact with the component
+      for (let i = 0; i < 10; i++) {
+        await user.click(card);
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+      
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      edgeCaseUtils.testMemoryLeaks(Card, { children: 'Memory test' });
+    });
+  });
+
+  describe('Boundary Conditions', () => {
+    it('should handle boundary prop values', () => {
+      const boundaryProps = [
+        { children: '' },
+        { children: 0 },
+        { children: false },
+        { children: [] },{ className: '' },
+        { 'data-testid': '' },
+      ];
+
+      edgeCaseUtils.testBoundaryConditions(Card, boundaryProps);
+    });
+  });
+
+  describe('Complex Data Structures', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      renderWithProviders(<Card data={deepObject} />);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    it('should handle large arrays', () => {
+      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
+      
+      renderWithProviders(<Card items={largeArray} />);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+  });
+
+  // Test using shared integration testing utilities
+  describe('Integration Testing Utilities', () => {
+    it('should have proper role', () => {
+      renderWithProviders(<Card>Test Card</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    testStateManagementIntegration(Card, {}, [{
+      name: 'Card state changes',
+      initialState: { children: 'Initial' },
+      actions: [
+        { name: 'update children', action: () => {} }
+      ],
+      expectedFinalState: () => {}
+    }]);
+  });
+});