40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
|
import { describe, it, expect, vi } from 'vitest';
|
||
|
|
import { render, screen } from '@testing-library/react';
|
||
|
|
|
||
|
|
// Mock the animated counter hook to return the end value immediately
|
||
|
|
vi.mock('@/hooks/useAnimatedCounter', () => ({
|
||
|
|
useAnimatedCounter: ({ end }: { end: number }) => end,
|
||
|
|
}));
|
||
|
|
|
||
|
|
import { AnimatedNumber } from './AnimatedNumber';
|
||
|
|
|
||
|
|
describe('AnimatedNumber', () => {
|
||
|
|
it('renders the value', () => {
|
||
|
|
render(<AnimatedNumber value={42} />);
|
||
|
|
expect(screen.getByText('42')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('applies custom className', () => {
|
||
|
|
const { container } = render(
|
||
|
|
<AnimatedNumber value={100} className="text-lg" />
|
||
|
|
);
|
||
|
|
const span = container.querySelector('span');
|
||
|
|
expect(span?.className).toContain('text-lg');
|
||
|
|
expect(span?.className).toContain('tabular-nums');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('uses format function when provided', () => {
|
||
|
|
render(
|
||
|
|
<AnimatedNumber value={1500} format={(n) => `$${n}`} />
|
||
|
|
);
|
||
|
|
expect(screen.getByText('$1500')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('formats large numbers with locale string', () => {
|
||
|
|
render(<AnimatedNumber value={1000} />);
|
||
|
|
// toLocaleString will format 1000 — the exact output depends on locale
|
||
|
|
const span = screen.getByText((content) => content.includes('1'));
|
||
|
|
expect(span).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
});
|