@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,599 +0,0 @@
-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();
-    });
-  });
-});
-});