5a119df806
Covers Badge, Divider, EmptyState, Numeric, PriceDelta, Signal, Skeleton, StatusChip, Surface, StatCard, KpiCard, DensityToggle, Footer, MarketIndex, CompactHeader — rendering, variants, props, a11y attributes, className merging. All 1139 web tests pass. Zustand persist store mocked for DensityToggle to avoid jsdom localStorage incompatibility. Co-Authored-By: Paperclip <noreply@paperclip.ing>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { StatCard } from '../stat-card';
|
|
|
|
describe('StatCard', () => {
|
|
it('renders label', () => {
|
|
render(<StatCard label="Giá TB/m²" value="25" />);
|
|
expect(screen.getByText('Giá TB/m²')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders string value', () => {
|
|
render(<StatCard label="Label" value="25 tr/m²" />);
|
|
expect(screen.getByText('25 tr/m²')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders number value', () => {
|
|
render(<StatCard label="Label" value={1234} />);
|
|
expect(screen.getByText('1234')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders unit when provided', () => {
|
|
render(<StatCard label="Label" value="25" unit="tr/m²" />);
|
|
expect(screen.getByText('tr/m²')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders PriceDelta when delta provided', () => {
|
|
const { container } = render(<StatCard label="Label" value="25" delta={3.5} />);
|
|
expect(container.querySelector('[data-numeric]')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render delta section when delta is undefined', () => {
|
|
render(<StatCard label="Label" value="25" />);
|
|
// no PriceDelta text like +x%
|
|
expect(screen.queryByText(/\+\d/)).toBeNull();
|
|
});
|
|
|
|
it('renders sublabel', () => {
|
|
render(<StatCard label="Label" value="25" sublabel="7 ngày" />);
|
|
expect(screen.getByText('7 ngày')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders icon node', () => {
|
|
render(
|
|
<StatCard label="Label" value="25" icon={<span data-testid="icon" />} />,
|
|
);
|
|
expect(screen.getByTestId('icon')).toBeInTheDocument();
|
|
});
|
|
|
|
it('merges custom className', () => {
|
|
render(<StatCard data-testid="sc" label="L" value="V" className="extra" />);
|
|
expect(screen.getByTestId('sc')).toHaveClass('extra');
|
|
});
|
|
});
|