test: add combat-actions and UI component tests — 40 new tests covering processCombatTick, Card, Button, Badge

src/components/ui/ui-components.test.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UI COMPONENT TESTS — Card
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('Card', () => {
+  it('should render with children', () => {
+    render(<Card data-testid="card">Hello World</Card>);
+    expect(screen.getByTestId('card')).toHaveTextContent('Hello World');
+  });
+
+  it('should accept custom className', () => {
+    render(<Card data-testid="card" className="custom-class">Test</Card>);
+    expect(screen.getByTestId('card')).toHaveClass('custom-class');
+  });
+
+  it('should have data-slot attribute', () => {
+    render(<Card data-testid="card">Test</Card>);
+    expect(screen.getByTestId('card')).toHaveAttribute('data-slot', 'card');
+  });
+
+  it('should render CardHeader with children', () => {
+    render(
+      <Card>
+        <CardHeader data-testid="header">Header Text</CardHeader>
+      </Card>,
+    );
+    expect(screen.getByTestId('header')).toHaveTextContent('Header Text');
+  });
+
+  it('should render CardTitle', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle data-testid="title">My Title</CardTitle>
+        </CardHeader>
+      </Card>,
+    );
+    expect(screen.getByTestId('title')).toHaveTextContent('My Title');
+  });
+
+  it('should render CardDescription', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardDescription data-testid="desc">Description text</CardDescription>
+        </CardHeader>
+      </Card>,
+    );
+    expect(screen.getByTestId('desc')).toHaveTextContent('Description text');
+  });
+
+  it('should render CardContent', () => {
+    render(
+      <Card>
+        <CardContent data-testid="content">Content here</CardContent>
+      </Card>,
+    );
+    expect(screen.getByTestId('content')).toHaveTextContent('Content here');
+  });
+
+  it('should render CardFooter', () => {
+    render(
+      <Card>
+        <CardFooter data-testid="footer">Footer text</CardFooter>
+      </Card>,
+    );
+    expect(screen.getByTestId('footer')).toHaveTextContent('Footer text');
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UI COMPONENT TESTS — Button
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('Button', () => {
+  it('should render with children text', () => {
+    render(<Button data-testid="btn">Click Me</Button>);
+    expect(screen.getByTestId('btn')).toHaveTextContent('Click Me');
+  });
+
+  it('should have button role', () => {
+    render(<Button data-testid="btn">Test</Button>);
+    expect(screen.getByTestId('btn').tagName).toBe('BUTTON');
+  });
+
+  it('should apply variant classes', () => {
+    render(<Button data-testid="btn" variant="destructive">Delete</Button>);
+    expect(screen.getByTestId('btn')).toHaveClass('bg-destructive');
+  });
+
+  it('should apply size classes', () => {
+    render(<Button data-testid="btn" size="sm">Small</Button>);
+    expect(screen.getByTestId('btn')).toHaveClass('h-8');
+  });
+
+  it('should apply custom className', () => {
+    render(<Button data-testid="btn" className="custom">Custom</Button>);
+    expect(screen.getByTestId('btn')).toHaveClass('custom');
+  });
+
+  it('should render as child component when asChild is true', () => {
+    render(
+      <Button asChild data-testid="btn">
+        <a href="/test">Link Button</a>
+      </Button>,
+    );
+    const el = screen.getByTestId('btn');
+    expect(el.tagName).toBe('A');
+    expect(el).toHaveAttribute('href', '/test');
+  });
+
+  it('should have data-slot attribute', () => {
+    render(<Button data-testid="btn">Test</Button>);
+    expect(screen.getByTestId('btn')).toHaveAttribute('data-slot', 'button');
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// UI COMPONENT TESTS — Badge
+// ═══════════════════════════════════════════════════════════════════════════════
+
+describe('Badge', () => {
+  it('should render with children text', () => {
+    render(<Badge data-testid="badge">New</Badge>);
+    expect(screen.getByTestId('badge')).toHaveTextContent('New');
+  });
+
+  it('should render as span by default', () => {
+    render(<Badge data-testid="badge">Test</Badge>);
+    expect(screen.getByTestId('badge').tagName).toBe('SPAN');
+  });
+
+  it('should apply default variant classes', () => {
+    render(<Badge data-testid="badge">Default</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-primary');
+  });
+
+  it('should apply destructive variant', () => {
+    render(<Badge data-testid="badge" variant="destructive">Error</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    render(<Badge data-testid="badge" variant="outline">Outline</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('text-foreground');
+  });
+
+  it('should apply secondary variant', () => {
+    render(<Badge data-testid="badge" variant="secondary">Secondary</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-secondary');
+  });
+
+  it('should apply custom className', () => {
+    render(<Badge data-testid="badge" className="custom-badge">Custom</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('custom-badge');
+  });
+
+  it('should accept asChild prop', () => {
+    render(
+      <Badge asChild data-testid="badge">
+        <a href="/link">Link Badge</a>
+      </Badge>,
+    );
+    const el = screen.getByTestId('badge');
+    expect(el.tagName).toBe('A');
+  });
+
+  it('should have data-slot attribute', () => {
+    render(<Badge data-testid="badge">Test</Badge>);
+    expect(screen.getByTestId('badge')).toHaveAttribute('data-slot', 'badge');
+  });
+});