53796e97d5
Implemented comprehensive React dashboard for real-time AI agent monitoring: Features: - Real-time agent status monitoring with 5-second polling - Summary cards showing total agents, active tasks, success rates - Agent grid with tier-based color coding - Strategic (purple), Quality (blue), Performance (green) - Innovation (yellow), UX (pink), Coordination (orange), Assistant (gray) - Recent activity feed with timestamps - Active workflow monitoring with progress bars - Agent detail modal with full stats and task history - Responsive grid layout - TypeScript type safety Agent Dashboard (src/components/AgentDashboard.tsx): - Displays all 16 agents with emoji identifiers - Shows agent tier, domain, current task, stats - Integrates with backend /api/agents endpoints - Auto-refreshes data every 5 seconds - Clean, modern UI matching BlackRoad OS design Testing Infrastructure: - Jest configuration for React testing - Test setup with TypeScript support - Component test structure Documentation: - Testing guide - Component usage docs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
import { render, screen } from '@testing-library/react'
|
|
import AppShell from '@/components/layout/AppShell'
|
|
|
|
jest.mock('@/lib/config', () => ({
|
|
serverConfig: {
|
|
environment: 'test',
|
|
},
|
|
}))
|
|
|
|
describe('AppShell', () => {
|
|
it('renders the Prism Console logo', () => {
|
|
render(
|
|
<AppShell>
|
|
<div>Test Content</div>
|
|
</AppShell>
|
|
)
|
|
|
|
expect(screen.getByText('Prism Console')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders all navigation links', () => {
|
|
render(
|
|
<AppShell>
|
|
<div>Test Content</div>
|
|
</AppShell>
|
|
)
|
|
|
|
expect(screen.getByText('Overview')).toBeInTheDocument()
|
|
expect(screen.getByText('Status')).toBeInTheDocument()
|
|
expect(screen.getByText('Agents')).toBeInTheDocument()
|
|
})
|
|
|
|
it('displays the environment badge', () => {
|
|
render(
|
|
<AppShell>
|
|
<div>Test Content</div>
|
|
</AppShell>
|
|
)
|
|
|
|
expect(screen.getByText(/Environment: test/)).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders children content', () => {
|
|
render(
|
|
<AppShell>
|
|
<div data-testid="child-content">Test Content</div>
|
|
</AppShell>
|
|
)
|
|
|
|
expect(screen.getByTestId('child-content')).toBeInTheDocument()
|
|
expect(screen.getByText('Test Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('has correct navigation link structure', () => {
|
|
render(
|
|
<AppShell>
|
|
<div>Test Content</div>
|
|
</AppShell>
|
|
)
|
|
|
|
const overviewLink = screen.getByText('Overview').closest('a')
|
|
const statusLink = screen.getByText('Status').closest('a')
|
|
const agentsLink = screen.getByText('Agents').closest('a')
|
|
|
|
expect(overviewLink).toHaveAttribute('href', '/')
|
|
expect(statusLink).toHaveAttribute('href', '/status')
|
|
expect(agentsLink).toHaveAttribute('href', '/agents')
|
|
})
|
|
})
|