test(admin-v2): add smoke tests for Accounts and AgentTemplates pages
- Accounts.test.tsx: table data rendering + loading state verification - AgentTemplates.test.tsx: template names and categories rendering - Both use MSW for HTTP mocking, QueryClientProvider for React Query
This commit is contained in:
114
admin-v2/tests/pages/Accounts.test.tsx
Normal file
114
admin-v2/tests/pages/Accounts.test.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
// ============================================================
|
||||
// Accounts 页面冒烟测试
|
||||
// ============================================================
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import { setupServer } from 'msw/node'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
|
||||
import Accounts from '@/pages/Accounts'
|
||||
|
||||
// ── Mock data ────────────────────────────────────────────────
|
||||
|
||||
const mockAccounts = {
|
||||
items: [
|
||||
{
|
||||
id: 'acc-001',
|
||||
username: 'zclaw_admin',
|
||||
display_name: 'Admin',
|
||||
email: 'admin@zclaw.ai',
|
||||
role: 'super_admin' as const,
|
||||
status: 'active' as const,
|
||||
totp_enabled: true,
|
||||
last_login_at: '2026-03-30T10:00:00Z',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
llm_routing: 'relay' as const,
|
||||
},
|
||||
{
|
||||
id: 'acc-002',
|
||||
username: 'test_user',
|
||||
display_name: 'Test',
|
||||
email: 'test@zclaw.ai',
|
||||
role: 'user' as const,
|
||||
status: 'active' as const,
|
||||
totp_enabled: false,
|
||||
last_login_at: null,
|
||||
created_at: '2026-02-15T00:00:00Z',
|
||||
llm_routing: 'local' as const,
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
}
|
||||
|
||||
// ── MSW server ───────────────────────────────────────────────
|
||||
|
||||
const server = setupServer()
|
||||
|
||||
beforeEach(() => {
|
||||
server.listen({ onUnhandledRequest: 'bypass' })
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
server.close()
|
||||
})
|
||||
|
||||
// ── Helper: render with QueryClient ──────────────────────────
|
||||
|
||||
function renderWithProviders(ui: React.ReactElement) {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
},
|
||||
})
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{ui}
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
// ── Tests ────────────────────────────────────────────────────
|
||||
|
||||
describe('Accounts page', () => {
|
||||
it('renders account usernames in the table', async () => {
|
||||
server.use(
|
||||
http.get('*/api/v1/accounts', () => {
|
||||
return HttpResponse.json(mockAccounts)
|
||||
}),
|
||||
)
|
||||
|
||||
renderWithProviders(<Accounts />)
|
||||
|
||||
// Wait for data to load and usernames to appear
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('zclaw_admin')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('test_user')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows loading state before data arrives', async () => {
|
||||
// Use a delayed response to observe loading state
|
||||
server.use(
|
||||
http.get('*/api/v1/accounts', async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
return HttpResponse.json(mockAccounts)
|
||||
}),
|
||||
)
|
||||
|
||||
renderWithProviders(<Accounts />)
|
||||
|
||||
// Ant Design ProTable renders a spinner while loading
|
||||
// Check that a .ant-spin element exists
|
||||
const spinner = document.querySelector('.ant-spin')
|
||||
expect(spinner).toBeTruthy()
|
||||
|
||||
// Wait for loading to complete so afterEach cleanup is clean
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('zclaw_admin')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
137
admin-v2/tests/pages/AgentTemplates.test.tsx
Normal file
137
admin-v2/tests/pages/AgentTemplates.test.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
// ============================================================
|
||||
// AgentTemplates 页面冒烟测试
|
||||
// ============================================================
|
||||
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import { http, HttpResponse } from 'msw'
|
||||
import { setupServer } from 'msw/node'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
|
||||
import AgentTemplates from '@/pages/AgentTemplates'
|
||||
|
||||
// ── Mock data ────────────────────────────────────────────────
|
||||
|
||||
const mockTemplates = {
|
||||
items: [
|
||||
{
|
||||
id: 'tmpl-001',
|
||||
name: 'Medical Assistant',
|
||||
description: 'AI health assistant',
|
||||
category: 'assistant',
|
||||
source: 'builtin' as const,
|
||||
model: 'gpt-4o',
|
||||
system_prompt: 'You are a medical assistant.',
|
||||
tools: ['web_search'],
|
||||
capabilities: ['conversation'],
|
||||
temperature: 0.7,
|
||||
max_tokens: 4096,
|
||||
visibility: 'public' as const,
|
||||
status: 'active' as const,
|
||||
current_version: 2,
|
||||
created_at: '2026-01-10T00:00:00Z',
|
||||
updated_at: '2026-03-20T00:00:00Z',
|
||||
soul_content: null,
|
||||
scenarios: ['healthcare'],
|
||||
welcome_message: 'Hello!',
|
||||
quick_commands: [],
|
||||
personality: 'professional',
|
||||
communication_style: null,
|
||||
emoji: 'hospital',
|
||||
version: 2,
|
||||
source_id: 'medical-v1',
|
||||
},
|
||||
{
|
||||
id: 'tmpl-002',
|
||||
name: 'Code Helper',
|
||||
description: 'Programming assistant',
|
||||
category: 'tool',
|
||||
source: 'custom' as const,
|
||||
model: null,
|
||||
system_prompt: null,
|
||||
tools: [],
|
||||
capabilities: [],
|
||||
temperature: null,
|
||||
max_tokens: null,
|
||||
visibility: 'team' as const,
|
||||
status: 'active' as const,
|
||||
current_version: 1,
|
||||
created_at: '2026-02-01T00:00:00Z',
|
||||
updated_at: '2026-02-01T00:00:00Z',
|
||||
soul_content: null,
|
||||
scenarios: [],
|
||||
welcome_message: null,
|
||||
quick_commands: [],
|
||||
personality: null,
|
||||
communication_style: null,
|
||||
emoji: null,
|
||||
version: 1,
|
||||
source_id: null,
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
}
|
||||
|
||||
// ── MSW server ───────────────────────────────────────────────
|
||||
|
||||
const server = setupServer()
|
||||
|
||||
beforeEach(() => {
|
||||
server.listen({ onUnhandledRequest: 'bypass' })
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
server.close()
|
||||
})
|
||||
|
||||
// ── Helper: render with QueryClient ──────────────────────────
|
||||
|
||||
function renderWithProviders(ui: React.ReactElement) {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false },
|
||||
},
|
||||
})
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{ui}
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
// ── Tests ────────────────────────────────────────────────────
|
||||
|
||||
describe('AgentTemplates page', () => {
|
||||
it('renders template names in the table', async () => {
|
||||
server.use(
|
||||
http.get('*/api/v1/agent-templates', () => {
|
||||
return HttpResponse.json(mockTemplates)
|
||||
}),
|
||||
)
|
||||
|
||||
renderWithProviders(<AgentTemplates />)
|
||||
|
||||
// Wait for data to load and template names to appear
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Medical Assistant')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('Code Helper')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders template categories', async () => {
|
||||
server.use(
|
||||
http.get('*/api/v1/agent-templates', () => {
|
||||
return HttpResponse.json(mockTemplates)
|
||||
}),
|
||||
)
|
||||
|
||||
renderWithProviders(<AgentTemplates />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('assistant')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('tool')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user