soufiane
4962ef6848
- Add tests for PrizeCard component (8 tests, 85-100% coverage) - Add tests for StatCard component (12 tests, 88-100% coverage) - Add tests for StatusBadge component (19 tests, 94-97% coverage) - Add tests for TeaIconsBackground component (7 tests, 87-100% coverage) - Total: 50 new tests for improved code coverage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
/**
|
|
* Tests for the StatCard component
|
|
* @jest-environment jsdom
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { StatCard } from '@/components/ui/StatCard';
|
|
|
|
describe('StatCard', () => {
|
|
it('should render with title and value', () => {
|
|
render(<StatCard title="Total Tickets" value={150} />);
|
|
|
|
expect(screen.getByText('Total Tickets')).toBeInTheDocument();
|
|
expect(screen.getByText('150')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render string values', () => {
|
|
render(<StatCard title="Status" value="Active" />);
|
|
|
|
expect(screen.getByText('Status')).toBeInTheDocument();
|
|
expect(screen.getByText('Active')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with icon', () => {
|
|
const TestIcon = () => <svg data-testid="test-icon" />;
|
|
render(<StatCard title="Users" value={42} icon={<TestIcon />} />);
|
|
|
|
expect(screen.getByTestId('test-icon')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render subtitle when provided', () => {
|
|
render(<StatCard title="Revenue" value="$1,234" subtitle="Last 30 days" />);
|
|
|
|
expect(screen.getByText('Last 30 days')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have white background for card', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} />);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('bg-white');
|
|
});
|
|
|
|
it('should apply blue color to value text by default', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} />);
|
|
|
|
// The value text should have blue color
|
|
const valueText = container.querySelector('.text-blue-600');
|
|
expect(valueText).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply green color to value text', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} color="green" />);
|
|
|
|
const valueText = container.querySelector('.text-green-600');
|
|
expect(valueText).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply yellow color to value text', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} color="yellow" />);
|
|
|
|
const valueText = container.querySelector('.text-yellow-600');
|
|
expect(valueText).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply red color to value text', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} color="red" />);
|
|
|
|
const valueText = container.querySelector('.text-red-600');
|
|
expect(valueText).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply purple color to value text', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} color="purple" />);
|
|
|
|
const valueText = container.querySelector('.text-purple-600');
|
|
expect(valueText).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
const { container } = render(<StatCard title="Test" value={100} className="custom-class" />);
|
|
|
|
const card = container.firstChild;
|
|
expect(card).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('should render formatted numbers with French locale', () => {
|
|
render(<StatCard title="Large Number" value={1000000} />);
|
|
|
|
// French locale uses non-breaking space as thousands separator
|
|
// The exact format may vary, so we just check the number is present
|
|
const valueElement = screen.getByText(/1.*000.*000/);
|
|
expect(valueElement).toBeInTheDocument();
|
|
});
|
|
});
|