@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,330 +0,0 @@
-
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../Card';
-import { renderWithProviders, testPerformance, measureRenderPerformance, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
-
-// Mock window.matchMedia for tests that might need responsive behavior
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(), // deprecated
-    removeListener: vi.fn(), // deprecated
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-describe('Card Components', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Card', () => {
-    it('renders with default props', () => {
-      renderWithProviders(<Card>Card content</Card>);
-      expect(screen.getByText('Card content')).toBeInTheDocument();
-    });
-
-    it('renders the card correctly', () => {
-      renderWithProviders(
-        <Card data-testid="test-card">
-          <CardContent>Test content</CardContent>
-        </Card>
-      );
-      expect(screen.getByTestId('test-card')).toBeInTheDocument();
-      expect(screen.getByText('Test content')).toBeInTheDocument();
-    });
-
-    it('handles click events', () => {
-      const handleClick = vi.fn();
-      renderWithProviders(
-        <Card onClick={handleClick} data-testid="clickable-card">
-          Card content
-        </Card>
-      );
-      
-      const card = screen.getByTestId('clickable-card');
-      fireEvent.click(card);
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders title and content', () => {
-      renderWithProviders(
-        <Card>
-          <CardHeader>
-            <CardTitle>Test Title</CardTitle>
-          </CardHeader>
-          <CardContent>Test Content</CardContent>
-        </Card>
-      );
-      
-      expect(screen.getByText('Test Title')).toBeInTheDocument();
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<Card className="custom-card">Card</Card>);
-      const card = screen.getByText('Card');
-      expect(card).toHaveClass('custom-card');
-    });
-
-    it('applies custom classNames', () => {
-      renderWithProviders(
-        <Card className="custom-card" data-testid="styled-card">
-          Card content
-        </Card>
-      );
-      const card = screen.getByTestId('styled-card');
-      expect(card).toHaveClass('custom-card');
-    });
-
-    it('is accessible with role', () => {
-      renderWithProviders(
-        <Card role="article" data-testid="accessible-card">
-          Accessible content
-        </Card>
-      );
-      const card = screen.getByTestId('accessible-card');
-      expect(card).toHaveAttribute('role', 'article');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLElement>();
-      renderWithProviders(<Card ref={ref}>Card</Card>);
-      expect(ref.current).toBeInstanceOf(HTMLElement);
-    });
-  });
-
-  describe('CardHeader', () => {
-    it('renders header content', () => {
-      renderWithProviders(<CardHeader>Header content</CardHeader>);
-      expect(screen.getByText('Header content')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<CardHeader className="custom-header">Header</CardHeader>);
-      const header = screen.getByText('Header');
-      expect(header).toHaveClass('custom-header');
-    });
-  });
-
-  describe('CardTitle', () => {
-    it('renders title content', () => {
-      renderWithProviders(<CardTitle>Card Title</CardTitle>);
-      expect(screen.getByText('Card Title')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<CardTitle className="custom-title">Title</CardTitle>);
-      const title = screen.getByText('Title');
-      expect(title).toHaveClass('custom-title');
-    });
-  });
-
-  describe('CardDescription', () => {
-    it('renders description content', () => {
-      renderWithProviders(<CardDescription>Card description</CardDescription>);
-      expect(screen.getByText('Card description')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<CardDescription className="custom-desc">Description</CardDescription>);
-      const desc = screen.getByText('Description');
-      expect(desc).toHaveClass('custom-desc');
-    });
-  });
-
-  describe('CardContent', () => {
-    it('renders content', () => {
-      renderWithProviders(<CardContent>Main content</CardContent>);
-      expect(screen.getByText('Main content')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<CardContent className="custom-content">Content</CardContent>);
-      const content = screen.getByText('Content');
-      expect(content).toHaveClass('custom-content');
-    });
-  });
-
-  describe('CardFooter', () => {
-    it('renders footer content', () => {
-      renderWithProviders(<CardFooter>Footer content</CardFooter>);
-      expect(screen.getByText('Footer content')).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<CardFooter className="custom-footer">Footer</CardFooter>);
-      const footer = screen.getByText('Footer');
-      expect(footer).toHaveClass('custom-footer');
-    });
-  });
-
-  describe('Complete Card Structure', () => {
-    it('renders a complete card with all components', () => {
-      renderWithProviders(
-        <Card>
-          <CardHeader>
-            <CardTitle>Test Card</CardTitle>
-            <CardDescription>This is a test card</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p>Main card content goes here</p>
-          </CardContent>
-          <CardFooter>
-            <button>Action</button>
-          </CardFooter>
-        </Card>
-      );
-
-      expect(screen.getByText('Test Card')).toBeInTheDocument();
-      expect(screen.getByText('This is a test card')).toBeInTheDocument();
-      expect(screen.getByText('Main card content goes here')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty content gracefully', () => {
-      renderWithProviders(<Card></Card>);
-      // Should not crash
-    });
-
-    it('handles null children', () => {
-      renderWithProviders(<Card>{null}</Card>);
-      // Should not crash
-    });
-  });
-
-  describe('Performance', () => {
-    it('should render within performance budget', async () => {
-      const CardComponent = () => (
-        <Card>
-          <CardHeader>
-            <CardTitle>Performance Test</CardTitle>
-            <CardDescription>Testing card render performance</CardDescription>
-          </CardHeader>
-          <CardContent>Card content</CardContent>
-          <CardFooter>Card footer</CardFooter>
-        </Card>
-      );
-
-      const renderResult = await measureRenderPerformance(CardComponent, {});
-      
-      expect(renderResult.averageTime).toBeLessThan(16); // 16ms for 60fps
-    });
-
-    it('should render multiple cards efficiently', async () => {
-      const CardList = () => (
-        <div>
-          {Array.from({ length: 50 }, (_, i) => (
-            <Card key={i}>
-              <CardHeader>
-                <CardTitle>Card {i}</CardTitle>
-              </CardHeader>
-              <CardContent>Content {i}</CardContent>
-            </Card>
-          ))}
-        </div>
-      );
-
-      const renderResult = await measureRenderPerformance(CardList, {});
-      
-      expect(renderResult.averageTime).toBeLessThan(100); // Should render 50 cards in under 100ms
-    });
-
-    it('should handle card interactions efficiently', async () => {
-      const handleClick = vi.fn();
-      renderWithProviders(
-        <Card onClick={handleClick}>
-          <CardContent>Clickable Card</CardContent>
-        </Card>
-      );
-      
-      const card = screen.getByText('Clickable Card');
-      
-      // Simulate rapid clicks
-      for (let i = 0; i < 20; i++) {
-        fireEvent.click(card);
-      }
-      
-      expect(handleClick).toHaveBeenCalledTimes(20);
-    });
-  });
-
-  // Test Pattern Migration - Using shared utilities
-  describe('Card - Shared Utilities Tests', () => {
-    testComponentRendering(Card, [
-      {
-        name: 'with default props',
-        props: { children: 'Default Card' },
-        expectedText: 'Default Card'
-      },
-      {
-        name: 'with custom className',
-        props: { children: 'Card', className: 'custom-class' },
-        expectedText: 'Card',
-        expectedClassName: 'custom-class'
-      },
-      {
-        name: 'with variant',
-        props: { children: 'Outlined Card', variant: 'outlined' },
-        expectedText: 'Outlined Card'
-      }
-    ]);
-
-    testComponentRendering(CardHeader, [
-      {
-        name: 'with children',
-        props: { children: 'Header Content' },
-        expectedText: 'Header Content'
-      }
-    ]);
-
-    testComponentRendering(CardTitle, [
-      {
-        name: 'with text',
-        props: { children: 'Card Title' },
-        expectedText: 'Card Title'
-      }
-    ]);
-
-    testComponentRendering(CardDescription, [
-      {
-        name: 'with description',
-        props: { children: 'Card Description' },
-        expectedText: 'Card Description'
-      }
-    ]);
-
-    testComponentRendering(CardContent, [
-      {
-        name: 'with content',
-        props: { children: 'Card Content' },
-        expectedText: 'Card Content'
-      }
-    ]);
-
-    testComponentRendering(CardFooter, [
-      {
-        name: 'with footer',
-        props: { children: 'Card Footer' },
-        expectedText: 'Card Footer'
-      }
-    ]);
-
-    testComponentAccessibility(Card, {
-      requiredAttributes: [],
-      shouldBeKeyboardAccessible: false,
-      shouldHaveValidRole: false,
-      shouldHaveValidAriaLabel: false
-    });
-  });
-});