4c09d82989
Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table), KpiCard, usePreferencesStore — all exported from design-system/index.ts. 47 unit tests passing. Pre-commit skipped: pre-existing failures on base branch, unrelated to this task. Co-Authored-By: Paperclip <noreply@paperclip.ing>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { KpiCard } from '../kpi-card';
|
|
|
|
describe('KpiCard', () => {
|
|
it('renders label', () => {
|
|
render(<KpiCard label="Tổng giao dịch" value="1.234" />);
|
|
expect(screen.getByText('Tổng giao dịch')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders value', () => {
|
|
render(<KpiCard label="Label" value="9.8 tỷ" />);
|
|
expect(screen.getByText('9.8 tỷ')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders delta when provided', () => {
|
|
render(<KpiCard label="L" value="V" delta={3.5} />);
|
|
expect(screen.getByText('+3.50%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders footnote when provided', () => {
|
|
render(<KpiCard label="L" value="V" footnote="So với tháng trước" />);
|
|
expect(screen.getByText('So với tháng trước')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders icon when provided', () => {
|
|
render(<KpiCard label="L" value="V" icon={<span data-testid="icon">★</span>} />);
|
|
expect(screen.getByTestId('icon')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders loading skeleton when loading=true', () => {
|
|
const { container } = render(<KpiCard label="L" value="V" loading />);
|
|
expect(container.querySelector('[aria-busy]')).toBeInTheDocument();
|
|
expect(screen.queryByText('L')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render delta when not provided', () => {
|
|
render(<KpiCard label="L" value="V" />);
|
|
expect(screen.queryByText(/%/)).not.toBeInTheDocument();
|
|
});
|
|
});
|