@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,599 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders } from '../../../__tests__/shared';
+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';
+
+describe('Card Visual Regression Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Visual Structure and Layout', () => {
+    it('renders with correct visual hierarchy', () => {
+      renderWithProviders(
+        <Card data-testid="visual-card">
+          <CardHeader>
+            <CardTitle>Visual Test Card</CardTitle>
+            <CardDescription>Testing visual structure</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>Main content area</p>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <button>Action 1</button>
+              <button>Action 2</button>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      const card = screen.getByTestId('visual-card');
+      
+      // Check that the card has the correct base classes
+      expect(card).toHaveClass('grid', 'grid-rows-[auto_1fr_auto]', 'rounded-lg', 'border');
+      expect(card).toHaveClass('bg-card', 'text-card-foreground', 'shadow-xl');
+    });
+
+    it('applies correct spacing and padding', () => {
+      renderWithProviders(
+        <Card>
+          <CardHeader data-testid="header">
+            <CardTitle>Spacing Test</CardTitle>
+          </CardHeader>
+          <CardContent data-testid="content">
+            <p>Content with proper spacing</p>
+          </CardContent>
+          <CardFooter data-testid="footer">
+            <CardActions data-testid="actions">
+              <button>Action</button>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      const header = screen.getByTestId('header');
+      const content = screen.getByTestId('content');
+      const footer = screen.getByTestId('footer');
+      const actions = screen.getByTestId('actions');
+      
+      // Check header spacing
+      expect(header).toHaveClass('flex', 'flex-col', 'space-y-1.5', 'p-6');
+      
+      // Check content spacing
+      expect(content).toHaveClass('p-6', 'pt-0');
+      
+      // Check footer spacing
+      expect(footer).toHaveClass('flex', 'items-center', 'p-6', 'pt-0');
+      
+      // Check actions spacing
+      expect(actions).toHaveClass('flex', 'gap-2');
+    });
+
+    it('renders with proper border radius and shadows', () => {
+      renderWithProviders(<Card data-testid="styled-card">Styled card</Card>);
+      
+      const card = screen.getByTestId('styled-card');
+      
+      // Check border radius
+      expect(card).toHaveClass('rounded-lg');
+      
+      // Check shadow classes
+      expect(card).toHaveClass('shadow-xl');
+    });
+  });
+
+  describe('Typography and Text Styling', () => {
+    it('applies correct typography to CardTitle', () => {
+      renderWithProviders(<CardTitle data-testid="title">Card Title</CardTitle>);
+      
+      const title = screen.getByTestId('title');
+      expect(title).toHaveClass('text-2xl', 'font-semibold', 'leading-none', 'tracking-tight');
+    });
+
+    it('renders CardDescription with proper styling', () => {
+      renderWithProviders(<CardDescription data-testid="description">Card description</CardDescription>);
+      
+      const description = screen.getByTestId('description');
+      // CardDescription should inherit text styling from parent
+      expect(description.tagName).toBe('P');
+    });
+
+    it('maintains proper text hierarchy', () => {
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle data-testid="main-title">Main Title</CardTitle>
+            <CardDescription data-testid="main-desc">Main description</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <h4 data-testid="sub-title">Subtitle</h4>
+            <p data-testid="content-text">Content text</p>
+          </CardContent>
+        </Card>
+      );
+      
+      const mainTitle = screen.getByTestId('main-title');
+      const subTitle = screen.getByTestId('sub-title');
+      
+      // Check that main title has larger text
+      expect(mainTitle).toHaveClass('text-2xl');
+      
+      // Check that subtitle is smaller
+      expect(subTitle.tagName).toBe('H4');
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('applies responsive classes correctly', () => {
+      renderWithProviders(
+        <Card className="sm:text-sm lg:text-lg" data-testid="responsive-card">
+          Responsive card
+        </Card>
+      );
+      
+      const card = screen.getByTestId('responsive-card');
+      expect(card).toHaveClass('sm:text-sm', 'lg:text-lg');
+    });
+
+    it('handles different screen sizes appropriately', () => {
+      renderWithProviders(
+        <Card className="w-full md:w-1/2 lg:w-1/3" data-testid="sizing-card">
+          Sizing test
+        </Card>
+      );
+      
+      const card = screen.getByTestId('sizing-card');
+      expect(card).toHaveClass('w-full', 'md:w-1/2', 'lg:w-1/3');
+    });
+  });
+
+  describe('HoverCard Visual Elements', () => {
+    it('renders HoverCard with correct positioning', () => {
+      renderWithProviders(
+        <HoverCard data-testid="hover-card">
+          <HoverCardTrigger data-testid="trigger">Trigger</HoverCardTrigger>
+          <HoverCardContent data-testid="content">Content</HoverCardContent>
+        </HoverCard>
+      );
+      
+      const hoverCard = screen.getByTestId('hover-card');
+      const trigger = screen.getByTestId('trigger');
+      const content = screen.getByTestId('content');
+      
+      // Check HoverCard container
+      expect(hoverCard).toHaveClass('relative', 'inline-block');
+      
+      // Check trigger styling
+      expect(trigger).toHaveClass('cursor-pointer');
+      
+      // Check content positioning and styling
+      expect(content).toHaveClass('absolute', 'z-50', 'min-w-[8rem]');
+      expect(content).toHaveClass('overflow-hidden', 'rounded-md', 'border');
+      expect(content).toHaveClass('bg-popover', 'text-popover-foreground', 'shadow-md');
+      expect(content).toHaveClass('p-4');
+    });
+
+    it('renders HoverCardTrigger as button with proper styling', () => {
+      renderWithProviders(
+        <HoverCard>
+          <HoverCardTrigger data-testid="button-trigger">Button Trigger</HoverCardTrigger>
+        </HoverCard>
+      );
+      
+      const trigger = screen.getByTestId('button-trigger');
+      expect(trigger.tagName).toBe('BUTTON');
+      expect(trigger).toHaveAttribute('type', 'button');
+      expect(trigger).toHaveClass('cursor-pointer', 'bg-transparent', 'border-0', 'p-0', 'm-0');
+      expect(trigger).toHaveClass('font-inherit', 'color-inherit', 'text-left');
+    });
+
+    it('renders HoverCardTrigger as span when asChild is true', () => {
+      renderWithProviders(
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <span data-testid="span-trigger">Span Trigger</span>
+          </HoverCardTrigger>
+        </HoverCard>
+      );
+      
+      const trigger = screen.getByTestId('span-trigger');
+      expect(trigger.tagName).toBe('SPAN');
+      // The cursor-pointer class is applied to the wrapper span, not the child
+      expect(trigger.parentElement).toHaveClass('cursor-pointer');
+    });
+  });
+
+  describe('CardActions Visual Layout', () => {
+    it('renders CardActions with proper flex layout', () => {
+      renderWithProviders(
+        <CardActions data-testid="actions">
+          <button>First</button>
+          <button>Second</button>
+          <button>Third</button>
+        </CardActions>
+      );
+      
+      const actions = screen.getByTestId('actions');
+      expect(actions).toHaveClass('flex', 'gap-2');
+      expect(actions).toHaveAttribute('role', 'group');
+      expect(actions).toHaveAttribute('aria-label', 'Card actions');
+    });
+
+    it('handles multiple actions with consistent spacing', () => {
+      renderWithProviders(
+        <CardActions data-testid="multiple-actions">
+          <button>Primary</button>
+          <button>Secondary</button>
+          <button>Tertiary</button>
+          <button>Quaternary</button>
+        </CardActions>
+      );
+      
+      const actions = screen.getByTestId('multiple-actions');
+      const buttons = screen.getAllByRole('button');
+      
+      expect(actions).toHaveClass('flex', 'gap-2');
+      expect(buttons).toHaveLength(4);
+    });
+  });
+
+  describe('Visual States and Variants', () => {
+    it('renders different visual states', () => {
+      const { rerender } = renderWithProviders(
+        <Card className="border-2" data-testid="outline-card">
+          Outline variant
+        </Card>
+      );
+      
+      let card = screen.getByTestId('outline-card');
+      expect(card).toHaveClass('border-2');
+      
+      rerender(
+        <Card className="border-0 shadow-none" data-testid="ghost-card">
+          Ghost variant
+        </Card>
+      );
+      
+      card = screen.getByTestId('ghost-card');
+      expect(card).toHaveClass('border-0', 'shadow-none');
+    });
+
+    it('applies custom styling while maintaining base structure', () => {
+      renderWithProviders(
+        <Card 
+          className="bg-main-500 text-main-50 border-main-600" 
+          data-testid="custom-card"
+        >
+          Custom styled card
+        </Card>
+      );
+      
+      const card = screen.getByTestId('custom-card');
+      expect(card).toHaveClass('bg-main-500', 'text-main-50', 'border-main-600');
+      // Should still have base classes
+      expect(card).toHaveClass('rounded-lg', 'shadow-xl');
+    });
+  });
+
+  describe('Accessibility Visual Indicators', () => {
+    it('maintains focus indicators for interactive elements', () => {
+      renderWithProviders(
+        <Card>
+          <CardContent>
+            <button 
+              className="focus:outline-none focus:ring-2 focus:ring-main-500" 
+              data-testid="focusable-button"
+            >
+              Focusable Button
+            </button>
+          </CardContent>
+        </Card>
+      );
+      
+      const button = screen.getByTestId('focusable-button');
+      expect(button).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-main-500');
+    });
+
+    it('renders with proper contrast and readability', () => {
+      renderWithProviders(
+        <Card className="bg-main-50 text-main-950" data-testid="contrast-card">
+          <CardHeader>
+            <CardTitle>High Contrast Card</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>This text should be easily readable</p>
+          </CardContent>
+        </Card>
+      );
+      
+      const card = screen.getByTestId('contrast-card');
+      expect(card).toHaveClass('bg-main-50', 'text-main-950');
+    });
+  });
+
+  describe('Complex Visual Layouts', () => {
+    it('handles complex nested content with proper visual hierarchy', () => {
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>Complex Layout</CardTitle>
+            <CardDescription>Testing complex visual structure</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="border-l-4 border-main-500 pl-4">
+                <h4 className="font-semibold">Section 1</h4>
+                <p>Content for section 1</p>
+              </div>
+              <div className="border-l-4 border-main-500 pl-4">
+                <h4 className="font-semibold">Section 2</h4>
+                <p>Content for section 2</p>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <button className="bg-main-500 text-main-50 px-4 py-2 rounded">
+                Primary Action
+              </button>
+              <button className="border border-sec-300 px-4 py-2 rounded">
+                Secondary Action
+              </button>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+      
+      // Check that all elements are present with proper styling
+      expect(screen.getByText('Complex Layout')).toBeInTheDocument();
+      expect(screen.getByText('Testing complex visual structure')).toBeInTheDocument();
+      expect(screen.getByText('Section 1')).toBeInTheDocument();
+      expect(screen.getByText('Section 2')).toBeInTheDocument();
+      expect(screen.getByText('Primary Action')).toBeInTheDocument();
+      expect(screen.getByText('Secondary Action')).toBeInTheDocument();
+    });
+
+    it('renders cards in a grid layout correctly', () => {
+      renderWithProviders(
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card data-testid="grid-card-1">
+            <CardContent>Card 1</CardContent>
+          </Card>
+          <Card data-testid="grid-card-2">
+            <CardContent>Card 2</CardContent>
+          </Card>
+          <Card data-testid="grid-card-3">
+            <CardContent>Card 3</CardContent>
+          </Card>
+        </div>
+      );
+      
+      expect(screen.getByTestId('grid-card-1')).toBeInTheDocument();
+      expect(screen.getByTestId('grid-card-2')).toBeInTheDocument();
+      expect(screen.getByTestId('grid-card-3')).toBeInTheDocument();
+    });
+  });
+describe('Card Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('Card component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: Card component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'Card interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('Card prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+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 => {
+        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 () => {
+      renderWithProviders(<Card />);
+      
+      // Card should render successfully
+      expect(screen.getByRole('article')).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();
+    });
+  });
+});
+});