test: more tests for admin/events, also added alias for /src/__tests_ - $test

frontend/src/components/__tests__/Header.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { setupAnimationMock, suppressConsoleError } from '../../__tests__/test-utils';
+import { setupAnimationMock, suppressConsoleError } from '$test/test-utils';
 
 // vi.hoisted must contain self-contained code - cannot import external modules
 const mocks = vi.hoisted(() => {
@@ -43,7 +43,7 @@ vi.mock('../../stores/theme.svelte', () => ({
   get toggleTheme() { return () => mocks.mockToggleTheme(); },
 }));
 vi.mock('../NotificationCenter.svelte', async () =>
-  (await import('$lib/../__tests__/test-utils')).createMockSvelteComponent(
+  (await import('$test/test-utils')).createMockSvelteComponent(
     '<div>NotificationCenter</div>', 'notification-center'));
 
 import Header from '$components/Header.svelte';

frontend/src/components/__tests__/NotificationCenter.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { setupAnimationMock } from '../../__tests__/test-utils';
+import { setupAnimationMock } from '$test/test-utils';
 
 // Types for mock notification state
 interface MockNotification {

frontend/src/components/__tests__/ProtectedRoute.test.ts

@@ -32,7 +32,7 @@ vi.mock('../../stores/auth.svelte', () => ({
 }));
 
 vi.mock('../Spinner.svelte', async () =>
-  (await import('$lib/../__tests__/test-utils')).createMockSvelteComponent(
+  (await import('$test/test-utils')).createMockSvelteComponent(
     '<div role="status">Loading...</div>', 'spinner'));
 
 import ProtectedRoute from '$components/ProtectedRoute.svelte';

frontend/src/components/admin/events/__tests__/EventDetailsModal.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { setupAnimationMock } from '$test/test-utils';
+import { createMockEventDetail } from '$routes/admin/__tests__/test-utils';
+
+vi.mock('@lucide/svelte', async () =>
+  (await import('$test/test-utils')).createMockIconModule('X'));
+vi.mock('$components/EventTypeIcon.svelte', async () =>
+  (await import('$test/test-utils')).createMockSvelteComponent('<span>icon</span>'));
+
+import EventDetailsModal from '../EventDetailsModal.svelte';
+
+function renderModal(overrides: Partial<{
+  event: ReturnType<typeof createMockEventDetail> | null;
+  open: boolean;
+}> = {}) {
+  const onClose = vi.fn();
+  const onReplay = vi.fn();
+  const onViewRelated = vi.fn();
+  const event = 'event' in overrides ? overrides.event : createMockEventDetail();
+  const open = overrides.open ?? true;
+  const result = render(EventDetailsModal, { props: { event, open, onClose, onReplay, onViewRelated } });
+  return { ...result, onClose, onReplay, onViewRelated };
+}
+
+describe('EventDetailsModal', () => {
+  beforeEach(() => {
+    setupAnimationMock();
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when closed', () => {
+    renderModal({ open: false });
+    expect(screen.queryByText('Event Details')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when event is null', () => {
+    renderModal({ event: null });
+    expect(screen.queryByText('Basic Information')).not.toBeInTheDocument();
+  });
+
+  it('shows modal title and basic information heading when open with event', () => {
+    renderModal();
+    expect(screen.getByText('Event Details')).toBeInTheDocument();
+    expect(screen.getByText('Basic Information')).toBeInTheDocument();
+  });
+
+  it.each([
+    { label: 'Event ID', value: 'evt-1' },
+    { label: 'Event Type', value: 'execution_completed' },
+    { label: 'Correlation ID', value: 'corr-123' },
+    { label: 'Aggregate ID', value: 'exec-456' },
+  ])('displays $label with value "$value"', ({ label, value }) => {
+    renderModal();
+    expect(screen.getByText(label)).toBeInTheDocument();
+    expect(screen.getByText(value)).toBeInTheDocument();
+  });
+
+  it('shows full event JSON in pre block', () => {
+    const detail = createMockEventDetail();
+    renderModal({ event: detail });
+    expect(screen.getByText('Full Event Data')).toBeInTheDocument();
+    const pre = document.querySelector('pre');
+    expect(pre?.textContent).toContain('"event_id"');
+    expect(pre?.textContent).toContain('"evt-1"');
+  });
+
+  it('shows related events section with clickable buttons', () => {
+    renderModal();
+    expect(screen.getByText('Related Events')).toBeInTheDocument();
+    expect(screen.getByText('execution_started')).toBeInTheDocument();
+    expect(screen.getByText('pod_created')).toBeInTheDocument();
+  });
+
+  it('calls onViewRelated with event_id when clicking a related event', async () => {
+    const user = userEvent.setup();
+    const { onViewRelated } = renderModal();
+    await user.click(screen.getByText('execution_started'));
+    expect(onViewRelated).toHaveBeenCalledWith('rel-1');
+  });
+
+  it('hides related events section when no related events', () => {
+    const detail = createMockEventDetail();
+    detail.related_events = [];
+    renderModal({ event: detail });
+    expect(screen.queryByText('Related Events')).not.toBeInTheDocument();
+  });
+
+  it('calls onReplay with event_id when Replay Event button is clicked', async () => {
+    const user = userEvent.setup();
+    const { onReplay } = renderModal();
+    await user.click(screen.getByRole('button', { name: 'Replay Event' }));
+    expect(onReplay).toHaveBeenCalledWith('evt-1');
+  });
+
+  it('calls onClose when Close button in footer is clicked', async () => {
+    const user = userEvent.setup();
+    const { onClose } = renderModal();
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    { case: 'null', value: null },
+    { case: 'undefined', value: undefined },
+  ])('shows "-" when correlation_id is $case', ({ value }) => {
+    const detail = createMockEventDetail();
+    detail.event.metadata.correlation_id = value as undefined;
+    renderModal({ event: detail });
+    const cells = screen.getAllByText('-');
+    expect(cells.length).toBeGreaterThanOrEqual(1);
+  });
+});

frontend/src/components/admin/events/__tests__/EventFilters.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { EVENT_TYPES, createDefaultEventFilters } from '$lib/admin/events/eventTypes';
+
+import EventFilters from '../EventFilters.svelte';
+
+function renderFilters(overrides: Partial<{ onApply: () => void; onClear: () => void }> = {}) {
+  const onApply = overrides.onApply ?? vi.fn();
+  const onClear = overrides.onClear ?? vi.fn();
+  const filters = createDefaultEventFilters();
+  const result = render(EventFilters, { props: { filters, onApply, onClear } });
+  return { ...result, onApply, onClear };
+}
+
+describe('EventFilters', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders heading and both action buttons', () => {
+    renderFilters();
+    expect(screen.getByText('Filter Events')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Clear All' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument();
+  });
+
+  it.each([
+    { id: 'event-types-filter', label: 'Event Types' },
+    { id: 'search-filter', label: 'Search' },
+    { id: 'correlation-filter', label: 'Correlation ID' },
+    { id: 'aggregate-filter', label: 'Aggregate ID' },
+    { id: 'user-filter', label: 'User ID' },
+    { id: 'service-filter', label: 'Service' },
+    { id: 'start-time-filter', label: 'Start Time' },
+    { id: 'end-time-filter', label: 'End Time' },
+  ])('renders "$label" filter with id=$id', ({ id, label }) => {
+    renderFilters();
+    expect(screen.getByLabelText(label)).toBeInTheDocument();
+    expect(document.getElementById(id)).not.toBeNull();
+  });
+
+  it('event types select lists all EVENT_TYPES as options', () => {
+    renderFilters();
+    const select = screen.getByLabelText('Event Types') as HTMLSelectElement;
+    const options = Array.from(select.options).map(o => o.value);
+    expect(options).toEqual(EVENT_TYPES);
+  });
+
+  it('calls onApply when Apply button is clicked', async () => {
+    const user = userEvent.setup();
+    const { onApply } = renderFilters();
+    await user.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onApply).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClear when Clear All button is clicked', async () => {
+    const user = userEvent.setup();
+    const { onClear } = renderFilters();
+    await user.click(screen.getByRole('button', { name: 'Clear All' }));
+    expect(onClear).toHaveBeenCalledOnce();
+  });
+
+  it('text inputs accept user input', async () => {
+    const user = userEvent.setup();
+    renderFilters();
+    const searchInput = screen.getByLabelText('Search') as HTMLInputElement;
+    await user.type(searchInput, 'test query');
+    expect(searchInput.value).toBe('test query');
+  });
+});

frontend/src/components/admin/events/__tests__/EventStatsCards.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createMockStats } from '$routes/admin/__tests__/test-utils';
+
+import EventStatsCards from '../EventStatsCards.svelte';
+
+function renderCards(stats: ReturnType<typeof createMockStats> | null, totalEvents = 500) {
+  return render(EventStatsCards, { props: { stats, totalEvents } });
+}
+
+describe('EventStatsCards', () => {
+  it('renders nothing when stats is null', () => {
+    const { container } = renderCards(null);
+    expect(container.textContent?.trim()).toBe('');
+  });
+
+  it('shows all four stat cards when stats provided', () => {
+    renderCards(createMockStats());
+    expect(screen.getByText('Events (Last 24h)')).toBeInTheDocument();
+    expect(screen.getByText('Error Rate (24h)')).toBeInTheDocument();
+    expect(screen.getByText('Avg Execution Time (24h)')).toBeInTheDocument();
+    expect(screen.getByText('Active Users (24h)')).toBeInTheDocument();
+  });
+
+  it('displays total_events with locale formatting and totalEvents denominator', () => {
+    renderCards(createMockStats({ total_events: 1500 }), 10000);
+    expect(screen.getByText((1500).toLocaleString())).toBeInTheDocument();
+    expect(screen.getByText(new RegExp(`of ${(10000).toLocaleString()} total`))).toBeInTheDocument();
+  });
+
+  it.each([
+    { error_rate: 5, expectedText: '5%', expectedClass: 'text-red-600' },
+    { error_rate: 0, expectedText: '0%', expectedClass: 'text-green-600' },
+  ])('error rate $error_rate shows "$expectedText" with $expectedClass', ({ error_rate, expectedText, expectedClass }) => {
+    const { container } = renderCards(createMockStats({ error_rate }));
+    const el = screen.getByText(expectedText);
+    expect(el).toBeInTheDocument();
+    expect(container.querySelector(`.${expectedClass}`)).not.toBeNull();
+  });
+
+  it('formats avg_processing_time to 2 decimal places', () => {
+    renderCards(createMockStats({ avg_processing_time: 3.456 }));
+    expect(screen.getByText('3.46s')).toBeInTheDocument();
+  });
+
+  it('shows "0s" when avg_processing_time is falsy', () => {
+    renderCards(createMockStats({ avg_processing_time: 0 }));
+    expect(screen.getByText('0s')).toBeInTheDocument();
+  });
+
+  it('shows active user count from top_users array length', () => {
+    renderCards(createMockStats({
+      top_users: [
+        { user_id: 'u1', count: 10 },
+        { user_id: 'u2', count: 5 },
+        { user_id: 'u3', count: 2 },
+      ],
+    }));
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('with events')).toBeInTheDocument();
+  });
+});