| 1 |
import { describe, expect, it } from 'vitest'; |
| 2 |
import { render, screen } from '@testing-library/react'; |
| 3 |
import { Database } from 'lucide-react'; |
| 4 |
import { StatCard } from '../../src/components/StatCard'; |
| 5 |
|
| 6 |
describe('StatCard', () => { |
| 7 |
it('renders label and value', () => { |
| 8 |
render(<StatCard label="Cached Pages" value="47" />); |
| 9 |
expect(screen.getByText('Cached Pages')).toBeInTheDocument(); |
| 10 |
expect(screen.getByText('47')).toBeInTheDocument(); |
| 11 |
}); |
| 12 |
|
| 13 |
it('uses the design-system eyebrow type size on the label (11px uppercase tracking-wider)', () => { |
| 14 |
render(<StatCard label="Cache Size" value="1.2 MB" />); |
| 15 |
const label = screen.getByText('Cache Size'); |
| 16 |
expect(label.className).toMatch(/text-\[11px\]/); |
| 17 |
expect(label.className).toMatch(/uppercase/); |
| 18 |
expect(label.className).toMatch(/tracking-wider/); |
| 19 |
}); |
| 20 |
|
| 21 |
it('uses the 22px stat-value type size', () => { |
| 22 |
render(<StatCard label="Hits" value="92%" />); |
| 23 |
const value = screen.getByText('92%'); |
| 24 |
expect(value.className).toMatch(/text-\[22px\]/); |
| 25 |
expect(value.className).toMatch(/font-semibold/); |
| 26 |
}); |
| 27 |
|
| 28 |
it('renders without an icon when none is provided', () => { |
| 29 |
const { container } = render(<StatCard label="X" value="Y" />); |
| 30 |
expect(container.querySelector('svg')).toBeNull(); |
| 31 |
}); |
| 32 |
|
| 33 |
it('renders the icon when supplied', () => { |
| 34 |
const { container } = render(<StatCard label="X" value="Y" icon={Database} />); |
| 35 |
expect(container.querySelector('svg')).not.toBeNull(); |
| 36 |
}); |
| 37 |
}); |
| 38 |
|
