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>
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { StatusChip, type PropertyStatus } from '../status-chip';
|
|
|
|
const statuses: PropertyStatus[] = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'];
|
|
|
|
const labels: Record<PropertyStatus, string> = {
|
|
active: 'Đang bán',
|
|
pending: 'Chờ duyệt',
|
|
sold: 'Đã bán',
|
|
rented: 'Đã thuê',
|
|
rejected: 'Từ chối',
|
|
draft: 'Bản nháp',
|
|
};
|
|
|
|
describe('StatusChip', () => {
|
|
statuses.forEach((status) => {
|
|
it(`renders label for status "${status}"`, () => {
|
|
render(<StatusChip status={status} />);
|
|
expect(screen.getByText(labels[status])).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('shows dot indicator by default', () => {
|
|
const { container } = render(<StatusChip status="active" />);
|
|
// dot is a span with aria-hidden
|
|
expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
|
|
});
|
|
|
|
it('hides dot when hideDot=true', () => {
|
|
const { container } = render(<StatusChip status="active" hideDot />);
|
|
expect(container.querySelector('[aria-hidden]')).toBeNull();
|
|
});
|
|
|
|
it('merges custom className', () => {
|
|
render(<StatusChip data-testid="sc" status="active" className="extra" />);
|
|
expect(screen.getByTestId('sc')).toHaveClass('extra');
|
|
});
|
|
|
|
it('applies active color classes', () => {
|
|
render(<StatusChip data-testid="sc" status="active" />);
|
|
expect(screen.getByTestId('sc')).toHaveClass('bg-signal-up-bg');
|
|
});
|
|
|
|
it('applies rejected color classes', () => {
|
|
render(<StatusChip data-testid="sc" status="rejected" />);
|
|
expect(screen.getByTestId('sc')).toHaveClass('bg-destructive/10');
|
|
});
|
|
});
|