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:
iven
2026-03-31 16:23:17 +08:00
parent f23f6c5f91
commit 4aa3f884ec
2 changed files with 251 additions and 0 deletions

View 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()
})
})
})

View 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()
})
})