import { describe, it, expect } from 'vitest' import { render, screen } from '@testing-library/react' import { OverviewMetrics } from './OverviewMetrics' describe('OverviewMetrics', () => { it('renders metrics section', () => { render() expect(screen.getByTestId('overview-metrics')).toBeInTheDocument() }) it('renders default title', () => { render() expect(screen.getByTestId('metrics-title')).toHaveTextContent('Overview') }) it('renders custom title', () => { render() expect(screen.getByTestId('metrics-title')).toHaveTextContent('Custom Title') }) it('renders metrics list with items', () => { const metrics = [ { label: 'Days Used', value: '10', testId: 'days-used' }, { label: 'Days Left', value: '15', testId: 'days-left' }, ] render() expect(screen.getByTestId('metric-label-0')).toHaveTextContent('Days Used:') expect(screen.getByTestId('metric-value-0')).toHaveTextContent('10') expect(screen.getByTestId('metric-label-1')).toHaveTextContent('Days Left:') expect(screen.getByTestId('metric-value-1')).toHaveTextContent('15') }) it('renders empty metrics list', () => { render() expect(screen.getByTestId('metrics-list')).toBeInTheDocument() }) it('uses custom test ids when provided', () => { const metrics = [{ label: 'Test', value: '100', testId: 'custom-test-id' }] render() expect(screen.getByTestId('custom-test-id')).toBeInTheDocument() }) it('has proper accessibility structure', () => { const metrics = [{ label: 'Metric', value: '50' }] render() const section = screen.getByTestId('overview-metrics') expect(section).toHaveAttribute('role', 'region') expect(section).toHaveAttribute('aria-label', 'Metrics Section') expect(screen.getByTestId('metrics-list')).toHaveAttribute('role', 'list') }) })