78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import { AnomalyList } from '../components/AnomalyList';
|
|
import type { AnomalySummary } from '../types';
|
|
|
|
function makeAnomaly(overrides: Partial<AnomalySummary> = {}): AnomalySummary {
|
|
return {
|
|
id: 'anom_1',
|
|
type: 'http_error',
|
|
severity: 'high',
|
|
description: 'HTTP 500 on form submit',
|
|
timestamp: 1000000,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function renderList(anomalies: AnomalySummary[]) {
|
|
return render(
|
|
<MemoryRouter>
|
|
<AnomalyList anomalies={anomalies} title="Test Anomalies" />
|
|
</MemoryRouter>
|
|
);
|
|
}
|
|
|
|
describe('AnomalyList', () => {
|
|
it('renders title', () => {
|
|
renderList([]);
|
|
expect(screen.getByText('Test Anomalies')).toBeDefined();
|
|
});
|
|
|
|
it('shows empty state when no anomalies', () => {
|
|
renderList([]);
|
|
expect(screen.getByText(/no anomalies/i)).toBeDefined();
|
|
});
|
|
|
|
it('renders anomaly cards', () => {
|
|
renderList([makeAnomaly(), makeAnomaly({ id: 'anom_2', description: 'Another error' })]);
|
|
expect(screen.getByText('HTTP 500 on form submit')).toBeDefined();
|
|
expect(screen.getByText('Another error')).toBeDefined();
|
|
});
|
|
|
|
it('filters by severity when severity button is clicked', async () => {
|
|
const user = userEvent.setup();
|
|
renderList([
|
|
makeAnomaly({ id: 'a1', severity: 'high', description: 'High error' }),
|
|
makeAnomaly({ id: 'a2', severity: 'low', description: 'Low error' }),
|
|
]);
|
|
|
|
// Both are visible initially (all severities selected)
|
|
expect(screen.getByText('High error')).toBeDefined();
|
|
expect(screen.getByText('Low error')).toBeDefined();
|
|
|
|
// Click "high" to deselect it
|
|
const highBtn = screen.getAllByRole('button').find((b) => b.textContent === 'HIGH');
|
|
if (highBtn) await user.click(highBtn);
|
|
|
|
// High error should now be hidden
|
|
expect(screen.queryByText('High error')).toBeNull();
|
|
expect(screen.getByText('Low error')).toBeDefined();
|
|
});
|
|
|
|
it('filters by description search', async () => {
|
|
const user = userEvent.setup();
|
|
renderList([
|
|
makeAnomaly({ id: 'a1', description: 'Server crashed unexpectedly' }),
|
|
makeAnomaly({ id: 'a2', description: 'Timeout on login' }),
|
|
]);
|
|
|
|
const searchInput = screen.getByPlaceholderText(/search/i);
|
|
await user.type(searchInput, 'crashed');
|
|
|
|
expect(screen.getByText('Server crashed unexpectedly')).toBeDefined();
|
|
expect(screen.queryByText('Timeout on login')).toBeNull();
|
|
});
|
|
});
|