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>
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { PriceDelta } from '../price-delta';
|
|
|
|
describe('PriceDelta', () => {
|
|
it('renders formatted positive value with default unit %', () => {
|
|
render(<PriceDelta value={3.14} />);
|
|
expect(screen.getByText('+3.14%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders negative value', () => {
|
|
render(<PriceDelta value={-2.5} />);
|
|
expect(screen.getByText('-2.50%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders zero value as neutral', () => {
|
|
render(<PriceDelta value={0} />);
|
|
// 0 is not > 0 so no "+" prefix
|
|
expect(screen.getByText('0.00%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders with custom unit', () => {
|
|
render(<PriceDelta value={1.5} unit=" tr" precision={1} />);
|
|
expect(screen.getByText('+1.5 tr')).toBeInTheDocument();
|
|
});
|
|
|
|
it('hides icon when hideIcon=true', () => {
|
|
const { container } = render(<PriceDelta value={2} hideIcon />);
|
|
// With hideIcon, the ArrowUp/Down/Minus svg is not rendered
|
|
expect(container.querySelector('svg')).toBeNull();
|
|
});
|
|
|
|
it('renders icon svg by default', () => {
|
|
const { container } = render(<PriceDelta value={2} />);
|
|
expect(container.querySelector('svg')).toBeInTheDocument();
|
|
});
|
|
|
|
it('has data-numeric attribute on root span', () => {
|
|
render(<PriceDelta data-testid="pd" value={1} />);
|
|
expect(screen.getByTestId('pd')).toHaveAttribute('data-numeric');
|
|
});
|
|
|
|
it('has font-mono class', () => {
|
|
render(<PriceDelta data-testid="pd" value={1} />);
|
|
expect(screen.getByTestId('pd')).toHaveClass('font-mono');
|
|
});
|
|
|
|
it('merges custom className', () => {
|
|
render(<PriceDelta data-testid="pd" value={1} className="extra" />);
|
|
expect(screen.getByTestId('pd')).toHaveClass('extra');
|
|
});
|
|
|
|
it('renders direction override independently of value sign', () => {
|
|
// Positive value with forced down direction still shows the down arrow
|
|
const { container } = render(<PriceDelta value={5} direction="down" />);
|
|
// Should still render an svg (ArrowDown)
|
|
expect(container.querySelector('svg')).toBeInTheDocument();
|
|
// Value text is formatted from the `value` prop
|
|
expect(screen.getByText('+5.00%')).toBeInTheDocument();
|
|
});
|
|
});
|