@jmruthers/pace-core 0.4.1 → 0.5.1

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

@@ -0,0 +1,593 @@
+/**
+ * @file Card Component Tests
+ * @description Comprehensive tests for Card component suite
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { 
+  Card, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription, 
+  CardContent, 
+  CardFooter, 
+  CardActions,
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent
+} from './Card';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+describe('Card Component Suite', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Card Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<Card>Card content</Card>);
+        const card = screen.getByRole('article');
+        expect(card).toBeInTheDocument();
+        expect(card).toHaveTextContent('Card content');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<Card className="custom-class">Card content</Card>);
+        const card = screen.getByRole('article');
+        expect(card).toHaveClass('custom-class');
+      });
+
+      it('renders with different variants', () => {
+        const { rerender } = renderWithProviders(<Card variant="default">Default card</Card>);
+        let card = screen.getByRole('article');
+        expect(card).toHaveClass('shadow-xl');
+
+        rerender(<Card variant="outline">Outline card</Card>);
+        card = screen.getByRole('article');
+        expect(card).toHaveClass('border-2');
+
+        rerender(<Card variant="ghost">Ghost card</Card>);
+        card = screen.getByRole('article');
+        expect(card).toHaveClass('border-0', 'shadow-none');
+      });
+
+      it('renders with different sizes', () => {
+        const { rerender } = renderWithProviders(<Card size="default">Default size</Card>);
+        let card = screen.getByRole('article');
+        expect(card).not.toHaveClass('text-sm', 'text-lg');
+
+        rerender(<Card size="sm">Small card</Card>);
+        card = screen.getByRole('article');
+        expect(card).toHaveClass('text-sm');
+
+        rerender(<Card size="lg">Large card</Card>);
+        card = screen.getByRole('article');
+        expect(card).toHaveClass('text-lg');
+      });
+
+      it('renders with children content', () => {
+        renderWithProviders(
+          <Card>
+            <div>Child content</div>
+            <span>More content</span>
+          </Card>
+        );
+        expect(screen.getByText('Child content')).toBeInTheDocument();
+        expect(screen.getByText('More content')).toBeInTheDocument();
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<Card ref={ref}>Card content</Card>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+        expect(ref.current).toHaveTextContent('Card content');
+      });
+
+      it('applies all HTML attributes', () => {
+        renderWithProviders(
+          <Card 
+            data-testid="test-card" 
+            aria-label="Test card"
+            id="card-1"
+          >
+            Card content
+          </Card>
+        );
+        const card = screen.getByRole('article');
+        expect(card).toHaveAttribute('data-testid', 'test-card');
+        expect(card).toHaveAttribute('aria-label', 'Test card');
+        expect(card).toHaveAttribute('id', 'card-1');
+      });
+    });
+
+    describe('Accessibility', () => {
+      it('uses semantic article element', () => {
+        renderWithProviders(<Card>Card content</Card>);
+        const card = screen.getByRole('article');
+        expect(card).toBeInTheDocument();
+      });
+
+      it('has proper grid layout classes', () => {
+        renderWithProviders(<Card>Card content</Card>);
+        const card = screen.getByRole('article');
+        expect(card).toHaveClass('grid', 'grid-rows-[auto_1fr_auto]');
+      });
+
+      it('supports keyboard navigation', () => {
+        renderWithProviders(<Card tabIndex={0}>Card content</Card>);
+        const card = screen.getByRole('article');
+        expect(card).toHaveAttribute('tabIndex', '0');
+      });
+    });
+  });
+
+  describe('CardHeader Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardHeader>Header content</CardHeader>);
+        const header = screen.getByRole('banner');
+        expect(header).toBeInTheDocument();
+        expect(header).toHaveTextContent('Header content');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardHeader className="custom-header">Header content</CardHeader>);
+        const header = screen.getByRole('banner');
+        expect(header).toHaveClass('custom-header');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<CardHeader ref={ref}>Header content</CardHeader>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('has proper semantic structure', () => {
+        renderWithProviders(<CardHeader>Header content</CardHeader>);
+        const header = screen.getByRole('banner');
+        expect(header).toHaveClass('flex', 'flex-col', 'space-y-1.5', 'p-6');
+      });
+    });
+  });
+
+  describe('CardTitle Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardTitle>Card Title</CardTitle>);
+        const title = screen.getByRole('heading', { level: 3 });
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Card Title');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardTitle className="custom-title">Card Title</CardTitle>);
+        const title = screen.getByRole('heading', { level: 3 });
+        expect(title).toHaveClass('custom-title');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLHeadingElement>();
+        renderWithProviders(<CardTitle ref={ref}>Card Title</CardTitle>);
+        expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
+      });
+
+      it('has proper heading styles', () => {
+        renderWithProviders(<CardTitle>Card Title</CardTitle>);
+        const title = screen.getByRole('heading', { level: 3 });
+        expect(title).toHaveClass('text-2xl', 'font-semibold', 'leading-none', 'tracking-tight');
+      });
+    });
+  });
+
+  describe('CardDescription Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardDescription>Card description</CardDescription>);
+        const description = screen.getByText('Card description');
+        expect(description).toBeInTheDocument();
+        expect(description.tagName).toBe('P');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardDescription className="custom-desc">Card description</CardDescription>);
+        const description = screen.getByText('Card description');
+        expect(description).toHaveClass('custom-desc');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLParagraphElement>();
+        renderWithProviders(<CardDescription ref={ref}>Card description</CardDescription>);
+        expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+      });
+    });
+  });
+
+  describe('CardContent Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardContent>Card content</CardContent>);
+        const content = screen.getByRole('main');
+        expect(content).toBeInTheDocument();
+        expect(content).toHaveTextContent('Card content');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardContent className="custom-content">Card content</CardContent>);
+        const content = screen.getByRole('main');
+        expect(content).toHaveClass('custom-content');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<CardContent ref={ref}>Card content</CardContent>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('has proper semantic structure', () => {
+        renderWithProviders(<CardContent>Card content</CardContent>);
+        const content = screen.getByRole('main');
+        expect(content).toHaveClass('p-6', 'pt-0', 'min-w-0', 'w-full');
+      });
+    });
+  });
+
+  describe('CardFooter Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardFooter>Footer content</CardFooter>);
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toBeInTheDocument();
+        expect(footer).toHaveTextContent('Footer content');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardFooter className="custom-footer">Footer content</CardFooter>);
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveClass('custom-footer');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<CardFooter ref={ref}>Footer content</CardFooter>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('has proper semantic structure', () => {
+        renderWithProviders(<CardFooter>Footer content</CardFooter>);
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveClass('flex', 'items-center', 'p-6', 'pt-0');
+      });
+    });
+  });
+
+  describe('CardActions Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<CardActions>Action buttons</CardActions>);
+        const actions = screen.getByRole('group', { name: 'Card actions' });
+        expect(actions).toBeInTheDocument();
+        expect(actions).toHaveTextContent('Action buttons');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<CardActions className="custom-actions">Action buttons</CardActions>);
+        const actions = screen.getByRole('group', { name: 'Card actions' });
+        expect(actions).toHaveClass('custom-actions');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<CardActions ref={ref}>Action buttons</CardActions>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('has proper ARIA attributes', () => {
+        renderWithProviders(<CardActions>Action buttons</CardActions>);
+        const actions = screen.getByRole('group', { name: 'Card actions' });
+        expect(actions).toHaveAttribute('role', 'group');
+        expect(actions).toHaveAttribute('aria-label', 'Card actions');
+      });
+
+      it('has proper layout classes', () => {
+        renderWithProviders(<CardActions>Action buttons</CardActions>);
+        const actions = screen.getByRole('group', { name: 'Card actions' });
+        expect(actions).toHaveClass('flex', 'gap-2');
+      });
+    });
+  });
+
+  describe('HoverCard Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(
+          <HoverCard>
+            <HoverCardTrigger>Hover me</HoverCardTrigger>
+            <HoverCardContent>Hover content</HoverCardContent>
+          </HoverCard>
+        );
+        expect(screen.getByText('Hover me')).toBeInTheDocument();
+        expect(screen.getByText('Hover content')).toBeInTheDocument();
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(
+          <HoverCard className="custom-hover">
+            <HoverCardTrigger>Hover me</HoverCardTrigger>
+            <HoverCardContent>Hover content</HoverCardContent>
+          </HoverCard>
+        );
+        const hoverCard = screen.getByText('Hover me').closest('section');
+        expect(hoverCard).toHaveClass('custom-hover');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(
+          <HoverCard ref={ref}>
+            <HoverCardTrigger>Hover me</HoverCardTrigger>
+            <HoverCardContent>Hover content</HoverCardContent>
+          </HoverCard>
+        );
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('uses semantic section element', () => {
+        renderWithProviders(
+          <HoverCard>
+            <HoverCardTrigger>Hover me</HoverCardTrigger>
+            <HoverCardContent>Hover content</HoverCardContent>
+          </HoverCard>
+        );
+        const hoverCard = screen.getByText('Hover me').closest('section');
+        expect(hoverCard).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('HoverCardTrigger Component', () => {
+    describe('Rendering', () => {
+      it('renders as button by default', () => {
+        renderWithProviders(<HoverCardTrigger>Click me</HoverCardTrigger>);
+        const trigger = screen.getByRole('button');
+        expect(trigger).toBeInTheDocument();
+        expect(trigger).toHaveTextContent('Click me');
+      });
+
+      it('renders as child element when asChild is true', () => {
+        renderWithProviders(
+          <HoverCardTrigger asChild>
+            <span>Click me</span>
+          </HoverCardTrigger>
+        );
+        const trigger = screen.getByText('Click me');
+        expect(trigger.tagName).toBe('SPAN');
+        // The span should be wrapped in a span with cursor-pointer class
+        const wrapper = trigger.parentElement;
+        expect(wrapper).toHaveClass('cursor-pointer');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<HoverCardTrigger className="custom-trigger">Click me</HoverCardTrigger>);
+        const trigger = screen.getByRole('button');
+        expect(trigger).toHaveClass('custom-trigger');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLButtonElement>();
+        renderWithProviders(<HoverCardTrigger ref={ref}>Click me</HoverCardTrigger>);
+        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+      });
+
+      it('has proper button attributes', () => {
+        renderWithProviders(<HoverCardTrigger>Click me</HoverCardTrigger>);
+        const trigger = screen.getByRole('button');
+        expect(trigger).toHaveAttribute('type', 'button');
+        expect(trigger).toHaveClass('cursor-pointer', 'bg-transparent', 'border-0');
+      });
+    });
+
+    describe('Event Handling', () => {
+      it('handles click events', async () => {
+        const handleClick = vi.fn();
+        const user = userEvent.setup();
+        
+        renderWithProviders(
+          <HoverCardTrigger onClick={handleClick}>
+            Click me
+          </HoverCardTrigger>
+        );
+        
+        await user.click(screen.getByRole('button'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+      });
+
+      it('handles keyboard events', async () => {
+        const handleKeyDown = vi.fn();
+        const user = userEvent.setup();
+        
+        renderWithProviders(
+          <HoverCardTrigger onKeyDown={handleKeyDown}>
+            Click me
+          </HoverCardTrigger>
+        );
+        
+        screen.getByRole('button').focus();
+        await user.keyboard('{Enter}');
+        expect(handleKeyDown).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('HoverCardContent Component', () => {
+    describe('Rendering', () => {
+      it('renders with default props', () => {
+        renderWithProviders(<HoverCardContent>Hover content</HoverCardContent>);
+        const content = screen.getByRole('tooltip');
+        expect(content).toBeInTheDocument();
+        expect(content).toHaveTextContent('Hover content');
+      });
+
+      it('renders with custom className', () => {
+        renderWithProviders(<HoverCardContent className="custom-content">Hover content</HoverCardContent>);
+        const content = screen.getByRole('tooltip');
+        expect(content).toHaveClass('custom-content');
+      });
+
+      it('forwards ref correctly', () => {
+        const ref = React.createRef<HTMLElement>();
+        renderWithProviders(<HoverCardContent ref={ref}>Hover content</HoverCardContent>);
+        expect(ref.current).toBeInstanceOf(HTMLElement);
+      });
+
+      it('has proper ARIA attributes', () => {
+        renderWithProviders(<HoverCardContent>Hover content</HoverCardContent>);
+        const content = screen.getByRole('tooltip');
+        expect(content).toHaveAttribute('role', 'tooltip');
+      });
+
+      it('has proper positioning classes', () => {
+        renderWithProviders(<HoverCardContent>Hover content</HoverCardContent>);
+        const content = screen.getByRole('tooltip');
+        expect(content).toHaveClass('absolute', 'z-50', 'min-w-[8rem]');
+      });
+    });
+  });
+
+  describe('Complete Card Structure', () => {
+    it('renders a complete card with all components', () => {
+      renderWithProviders(
+        <Card>
+          <CardHeader>
+            <CardTitle>Article Title</CardTitle>
+            <CardDescription>Brief description of the article content</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>Main content goes here with proper semantic structure.</p>
+            <p>Additional paragraphs and content.</p>
+          </CardContent>
+          <CardFooter>
+            <CardActions>
+              <button>Primary Action</button>
+              <button>Secondary Action</button>
+            </CardActions>
+          </CardFooter>
+        </Card>
+      );
+
+      // Check semantic structure
+      expect(screen.getByRole('article')).toBeInTheDocument();
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.getByRole('main')).toBeInTheDocument();
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+      expect(screen.getByRole('group', { name: 'Card actions' })).toBeInTheDocument();
+
+      // Check content
+      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Article Title');
+      expect(screen.getByText('Brief description of the article content')).toBeInTheDocument();
+      expect(screen.getByText('Main content goes here with proper semantic structure.')).toBeInTheDocument();
+      expect(screen.getByText('Additional paragraphs and content.')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Primary Action' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Secondary Action' })).toBeInTheDocument();
+    });
+
+    it('renders HoverCard with complete structure', () => {
+      renderWithProviders(
+        <HoverCard>
+          <HoverCardTrigger>Hover me</HoverCardTrigger>
+          <HoverCardContent>
+            <h4>Hover Card Title</h4>
+            <p>This is hover card content with semantic elements.</p>
+          </HoverCardContent>
+        </HoverCard>
+      );
+
+      expect(screen.getByRole('button', { name: 'Hover me' })).toBeInTheDocument();
+      expect(screen.getByRole('tooltip')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Hover Card Title');
+      expect(screen.getByText('This is hover card content with semantic elements.')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing children gracefully', () => {
+      renderWithProviders(<Card />);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    it('handles invalid props gracefully', () => {
+      // @ts-expect-error Testing invalid prop
+      renderWithProviders(<Card invalidProp="test">Card content</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+
+    it('handles null children', () => {
+      renderWithProviders(<Card>{null}</Card>);
+      expect(screen.getByRole('article')).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with multiple cards', () => {
+      renderWithProviders(
+        <div>
+          <Card>First card</Card>
+          <Card>Second card</Card>
+          <Card>Third card</Card>
+        </div>
+      );
+      
+      expect(screen.getAllByRole('article')).toHaveLength(3);
+    });
+
+    it('works with forms', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Card>
+            <CardContent>
+              <input type="text" placeholder="Enter text" />
+            </CardContent>
+            <CardFooter>
+              <CardActions>
+                <button type="submit">Submit</button>
+              </CardActions>
+            </CardFooter>
+          </Card>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with nested interactive elements', async () => {
+      const handleCardClick = vi.fn();
+      const handleButtonClick = vi.fn((e) => e.stopPropagation());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Card onClick={handleCardClick}>
+          <CardContent>
+            <button onClick={handleButtonClick}>Action Button</button>
+          </CardContent>
+        </Card>
+      );
+      
+      // Click the button should not trigger card click (with stopPropagation)
+      await user.click(screen.getByRole('button', { name: 'Action Button' }));
+      expect(handleButtonClick).toHaveBeenCalledTimes(1);
+      expect(handleCardClick).not.toHaveBeenCalled();
+      
+      // Click the card should trigger card click
+      await user.click(screen.getByRole('article'));
+      expect(handleCardClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});